标签：
有很多网站都有雪花或花瓣飘落的特效，看上去很好看。我来用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">
标签：
原文地址：http://www.cnblogs.com/qing1304197382/p/5522309.html
