js之雪花飘落

Posted 2020-07-11

 

有很多网站都有雪花或花瓣飘落的特效，看上去很好看。我来用js实现这个效果。

在写代码之前可以先引入bass.css对样式做下处理；

1、html部分

　　先建一个文件夹，在body中插入如下代码　　

<div id="snowzone" >
</div> 

2、css部分　　

　　　body{
        background: url(img/bg.jpg) no-repeat center center;
      }
      .div{
        position: fixed;        
      }
      .roll{
        position: absolute;
        height:20px;        
        animation:mysnow 20s linear infinite;
      }
      @keyframes mysnow{
        0%{
          bottom:100% ;
          opacity: 0; 
        }
        50%{
          opacity:1;
          transform: rotate(1080deg);
        }       
        100%{
          opacity:0 ; 
          bottom: 0px;        
          transform:rotate(0deg) ;          
        }
      }

3、js部分

(function(){
          function snow(left, height, src) {        
            var div = document.createElement("div");        
            var img = document. createElement("img");
            div.appendChild(img);  
            img.className = "roll";       
            img.src = src;        
            div.style.left = left + "px";       
            div.style.height = height + "px";       
            div.className = "div";        
            document.getElementById("snowzone").appendChild(div);       
            setTimeout(function() {       
              document.getElementById("snowzone").removeChild(div);       
            }, 50000);
          }
          
        setInterval(function(){
          var left=Math.random()*window.innerWidth;
          var height=Math.random()*window.innerHeight;//获取随机高度
          var src="img/"+"s"+Math.floor(Math.random()*2+1)+".png"//你的图片地址，把图片放在img文件夹下，包括背景，雪花或者花瓣，更改图片名称
          snow(left,height,src);
        },500)
      })();      　

4、上边完成之后自己喜欢的飘落效果就出来了，还可以插入自己喜欢的音乐。

插入音乐只要更改一下地址就OK了。　　

<embed src="music/冬天的秘密 - 周传雄.mp3" autostart="true" loop="true" controls=" smallconsole" hidden="true">