Agregar Efecto Nieve con CSS3 - Trucodigo

Agregar Efecto Nieve con CSS3




Hola Trucodigueros en un post anterior ya les habia mostrado la forma de colocar nieve en sus webs con Javascript (aqui les dejo el post) pero en esta ocacion les dejo la forma de hacerlo con CSS3 puro, la ventaja de esta manera es que es mas ligero ya que no tarda nada en cargarlo a comparacion al la forma en Javascript, la desventaja es que solo se muestra en el fondo (background) de nuestra pagina asi que si tienen objetos con opacidad "1" no se notaran atravez de estos, pero si aun asi les gusta esta forma aqui se las dejo

Solo tienen que colocar esto justo antes del cierre de la etiqueta head:

<style type="text/css">
body {
background: #000;
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;
}
/*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;}
}
</style>


y eso seria todo con este peqeuño codigo con css podran poner este bonito efecto para sus webs en estas fechas de cembrina

Bueno esos eria todo espero les haya gustado este pequeño truco y como siempre me despido dejandoles una


DEMO
Tags
Opciones
Estadísticas
Creado 16.12.2015 a las 22:20 hs
Categoría Css
  • 0
    Medallas
  • 0
    Favoritos
  • 1342
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes