下雪下心特效

下雪特效需要用到css与javascript。不多说贴代码。

css部分主要用到了@keyframes来设置关键帧，用animation让动画动起来。

@keyframes mysnow { 
0% { bottom: 100%; opacity: 0; } 
   50% { opacity: 1; transform: rotate(720deg);} /*雪花会旋转720度*/
   100% { transform: rotate(0deg); opacity: 0; bottom: 0%;} /*这里的bottom设置的雪花最远消失的一条线，是相对于在父块的底部*/
   }                                                      
.container { position: fixed; } 

.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 30px; } 

js部分：很简单，snowFlow方法是用来创建一个块元素把图片包在里面，然后获取三个参数分别是位置参数和图片路径参数，然后用 setInterval（）调用函数。

<script type="text/javascript">
window.οnlοad=function(){
function snowFlow(left,height,src){ var container=document.createElement('div');
var pic=document.createElement('img');
var snowFlow=document.getElementById('snowFlow'); 
pic.className='pic';
container.className='container'; 
snowFlow.appendChild(container);
container.appendChild(pic); 
container.style.left=left+'px';
container.style.height=height+'px'; 
pic.src=src; setTimeout(function(){ snowFlow.removeChild(container); },5000); } 
setInterval(function(){ 
var left=Math.random()*window.innerWidth; 
var height=Math.random()*window.innerHeight; 
var src = 'img/雪花.png'; snowFlow(left,height,src); },100) 
}
</script>