Crea un simple News Ticker usando Pure CSS/CSS3

Vista prévia

Descripción

Una solución CSS pura para crear un widget de ticker de noticias automático & de aspecto agradable con pausa en la funcionalidad de desplazamiento y animaciones basadas en CSS3.

Funcionamiento

Crear un ticker de noticias a partir de una lista no ordenada HTML.

<div class="news red">

<span>Latest News</span>

<ul>


<li><a href="#">Text 1</li>


<li><a href="#">Text 2</a></li>


<li><a href="#">Text 3</a></li>


<li><a href="#">Text 4</a></li>

</ul>
</div>

Estilo el noticiero.

.news {

box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);

width: 350px;

height: 30px;

margin: 20px auto;

overflow: hidden;

border-radius: 4px;

padding: 3px;

-webkit-user-select: none
}

 .news span {

float: left;

color: #fff;

padding: 6px;

position: relative;

top: 1%;

border-radius: 4px;

box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);

font: 16px;

-webkit-font-smoothing: antialiased;

-webkit-user-select: none;

cursor: pointer
}

.news ul {

float: left;

padding-left: 20px;

animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

-webkit-user-select: none
}

.news ul li {line-height: 30px; list-style: none }

.news ul li a {

color: #fff;

text-decoration: none;

font: 14px;

-webkit-font-smoothing: antialiased;

-webkit-user-select: none
}

.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }

Hace que las noticias se desplazen de abajo a arriba usando los fotogramas clave de CSS3.

@keyframes ticker {

0%
 {margin-top: 0}

25%
{margin-top: -30px}

50%
{margin-top: -60px}

75%
{margin-top: -90px}

100% {margin-top: 0}
}