纯css实现下雪特效

//------------------ css -------------------

 

/*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 }
}

#snow-animation-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');

-webkit-animation: snow 30s linear infinite;

-moz-animation: snow 30s linear infinite;
-ms-animation: snow 30s linear infinite;
animation: snow 30s linear infinite;
pointer-events:none;   //  击穿，此盒子下面的任何点击划过等交互事件，可以正常显示
}

 

//------------------  html -------------------

 

<div id="snow-animation-container">

</div>

 

/*如果觉得雪花过多，可以修改这三张图上雪花的密度，擦掉一些雪花*/

 

 

推荐一个搜索某些效果功能的网站：https://codepen.io/
各种snow动画   https://codepen.io/search/pens?q=snow&limit=all&type=type-pens  

 

转载于:https://www.cnblogs.com/boyuguoblog/p/7792109.html