Vamos a ver como realizar una cinta, carrusel, slider o como la queramos llamar con una imagen. Para ello utilizaremos un sencillo codigo CSS3, utilizando sus propiedades de animacion sin utilizar ningun tipo de Javascript, lo que nos dara un efecto suave, facilita la carga y no retardara nuestro blog para nada. Tened en cuenta que solo hay que poner una imagen, que sea mas bien larga y estrecha para que de esta apariencia de cinta transportadora. ¿Para que nos puede servir este efecto? Pues le podemos dar muchas utilidades, como para el titulo del blog o para anunciar algun evento, por ejemplo.
Para añadirla a tu blog o web, tan solo tienes que copiar este codigo y pegarlo alli donde quieras mostrarlo. Puedes cambiar el tamaño de la altura donde esta en color rojo, por el ancho no te preocupes porque se adapta automaticamente. En la linea en color verde, tienes que añadir la url de la imagen que aparecera moviendose.
<style>
#cintaimagen {
width:98%;
height:100px;/* ALTO CINTA */
background:url(URL DE LA IMAGEN) repeat-x transparent;
display:block;
border:5px solid gainsboro;
box-shadow:0 0 8px silver;m
-webkit-animation-name: cintaimagen;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: cintaimagen;
-moz-animation-duration: 20s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: cintaimagen;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes cintaimagen{ 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@-moz-keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
</style>
