Update News In Css3 With Examples - Css
How to update news using css3?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This simple plugin allows you to update news using css. Sample code for creating news ticker is given below.
<div class="demo container">
<p class="marquee">
Welcome to hscripts.com !!!</br></br>
You can update news in css3 with demo</br></br>
This is simple news ticker with css3</br></br>
This is a news ticker from hscripts</br></br>
Free snippets to use</br></br>
Thanks for visiting us !!</br></br>
</p>
</div>
<style>
.container {
box-sizing: border-box;
height: 10em;
margin: 1em auto;
overflow: hidden;
position: relative;
top: 50px;
width: 25em;
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}
.marquee:hover {animation-play-state: paused;}
@keyframes marquee {
0% { top: 8em }
100% { top: -11em }
}
.demo .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
font: 1em 'Arial', Tahoma, Helvetica, Sans-Serif;
font-weight:bold;
}
.demo:before, .demo::before,
.demo:after, .demo::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
pointer-events: none;
width: 100%; height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}
.demo:after, .demo::after {
bottom: 0;
transform: rotate(180deg);
}
.demo:before, .demo::before {
top: 0;
}
</style>
