Posteador
vellenger
Administrador



Efecto Nieve con Css3




Aqui les comparto este codigo que hace un efecto de nieve para sus web, la aplicacion es simple asi que se los dejo a coninucion para los que lo quieran aplicar.

En el archivo estilo.css tenemos que cambiar dentro de la etiqueta body{....} buscaremos background, y lo cambiaremos por/color]



background-color: #6b92b9;
background-image: url('http://i.imgur.com/3ypbqH9.png'), url('http://i.imgur.com/L9Aq6n9.png'), url('http://i.imgur.com/PcmF2sU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;



Creo ya sabran como se cambia, sino lo saben me envian mp para acomodarlos en su web o pueden mirar en mi archivo css que lo tiene aplicado.

Ahora al final de todo o donde quieran en estilo.css agregamos:



/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}




Y eso seria todo, con esto podran tener un efecto de nieve para su web y mostrar un lindo efecto con la fecha que se aproxima.





4 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo