Para ello utilizaremos un sencillo código CSS3, utilizando sus propiedades de animación sin utilizar ningún 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 más 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 algún evento, por ejemplo.
Para añadirla a tu blog o web, tan solo tienes que copiar este código y pegarlo allí donde quieras mostrarlo.
Puedes cambiar el tamaño de la altura donde está en color rojo, por el ancho no te preocupes porque se adapta automáticamente.
En la linea en color Azul, tienes que añadir la URL de la imagen que aparecerá moviéndose.
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<div id="cintaimagen"></div>
<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>
<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>
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación;04-08-2019
Fuente; redeando
Publicado por;
0 comentarios