js之雪花飘落

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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">

  

以上是关于js之雪花飘落的主要内容,如果未能解决你的问题,请参考以下文章

博客园背景加入飘落雪花的js代码

树叶飘落雪花飘落等同时多个图片飘落

Android之雪花飘落的动画特效

原生JS实现雪花飘落的效果

jQuery效果—雪花飘落

原生js实现雪花飘落效果