純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