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>


Ask Questions

Ask Question