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">