js之雪花飘落

有很多网站都有雪花或花瓣飘落的特效，看上去很好看。我来用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">