纯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 '></div>

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

推荐一个搜索某些效果功能的网站：https://codepen.io/

各种snow动画 https://codepen.io/search/pens?q=snow&limit=all&type=type-pens