"news bar"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html dir="rtl"> <head> <title>news bar with css only</title> <meta charset="utf-8" /> <head> <body> <center> <!-- newsbar --> <h2>news-bar 1</h2> <div class="slideUp" id="news-bar"> <marquee direction="right" scrollamount="3" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"> <a href="#" class="hvr-pop">الخبر الاول</a><a> -*- </a> <a href="#" class="hvr-pop">الخبر الثاني</a><a> -*- </a> <a href="#" class="hvr-pop">الخبر الثالث</a><a> -*- </a> <a href="#" class="hvr-pop">الخبر الرابع</a><a> -*- </a> <a href="#" class="hvr-pop">الخبر الخامس</a><a> -*- </a> </marquee> </div> <br> <h2>news-bar 2</h2> <div class="slideUp" id="news-bar"> <marquee direction="right" scrollamount="3" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"> <a href="#" class="hvr-float">الخبر الاول</a><a> -*- </a> <a href="#" class="hvr-float">الخبر الثاني</a><a> -*- </a> <a href="#" class="hvr-float">الخبر الثالث</a><a> -*- </a> <a href="#" class="hvr-float">الخبر الرابع</a><a> -*- </a> <a href="#" class="hvr-float">الخبر الخامس</a><a> -*- </a> </marquee></div> <!-- navbar --> <h2>nav-bar 1</h2> <div dir="ltr"> <div class="slideup" id="news-bar"> <a href="#" class="hvr-pop">link 1</a><a> -*- </a> <a href="#" class="hvr-pop">link 2</a><a> -*- </a> <a href="#" class="hvr-pop">link 3</a><a> -*- </a> <a href="#" class="hvr-pop">link 4</a><a> -*- </a> <a href="#" class="hvr-pop">link 5</a><a> -*- </a> </div> <br> <h2>nav-bar 2</h2> <div class="slideUp" id="news-bar"> <a href="#" class="hvr-float">link 1</a><a> -*- </a> <a href="#" class="hvr-float">link 2</a><a> -*- </a> <a href="#" class="hvr-float">link 3</a><a> -*- </a> <a href="#" class="hvr-float">link 4</a><a> -*- </a> <a href="#" class="hvr-float">link 5</a><a> -*- </a> </div> </div> </body></html>
h2{color:red;} #news-bar { width: 80%; background:white; box-shadow: 0 4px 10px black, 0 0 10px black inset; border-radius: 15px; font: 21px bold; padding:4px; padding-left: 20px; padding-right: 20px; } #news-bar:hover { transition: 0.37s; } #news-bar a { padding:8px 2px; color: black; text-decoration: none; } #news-bar a:hover { transition: 0.37s; color: red; } /* Pop */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Float */ .hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-float:hover, .hvr-float:focus, .hvr-float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); } /* slideUp */ .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 80% { transform: translateY(-4%); } 95% { transform: translateY(2%) } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }

Related: See More

Paper Kit 2
Carousel Featured News Boostrap 4
News Carousel

Questions / Comments: