Otro efecto más para agregar estos días a tu blog, son los fuegos artificiales y para ello os demuestro como colocarlos con motivo de fín de año.
Para colocar estos Fuegos Artificiales no nesecitamos usar scripts, sólo
CSS y dos pequeñas imágenes. La idea está extraida de
Joshua Johnson y puedes ver la demo en
Efectos de Navidad.
La ventaja de este método es que al no usar script de ningún tipo, como vimos anteriormente en
Fuegos artificiales en el blog, no sobrecargamos en demasía el blog.
Para colocar los fuegos en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de
]]></b:skin> pega esto:
/* Fuegos Artificiales en el fondo del blog
----------------------------------------------- */
@keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes fire{
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-fuego {
background-image: url(http://www.sologif.net/Celebraciones/Fuegos-Artificiales/fuegos-artificiales-07.gif), url(http://img.123gif.es/fuegos-artificiales/fuegos-artificiales-17.gif);
-webkit-animation: fire 40s linear infinite;
-moz-animation: fire 40s linear infinite;
-ms-animation: fire 40s linear infinite;
animation: fire 40s linear infinite;
}
Ahora busca la etiqueta
<body> en las plantillas antiguas, o éste código en las plantillas nuevas:
<body expr:class='"loading" + data:blog.mobileClass'>
Y debajo de cualquiera de las dos agrega esto:
<div id='contenedor-fuego'>
Por último busca la etiqueta </body> y arriba de ella agrega:
</div>
Guarda los cambios y listo.
PD: La desventaja de este método es que usuarios con
navegadores no modernos no podrán verlo (
en Internet Explorer funciona de la versión 10 para arriba).
Publicaciones Relacionadas
trucos blog