下雪特效需要用到css与javascript。不多说贴代码。
css部分主要用到了@keyframes来设置关键帧,用animation让动画动起来。
@keyframes mysnow {
0% { bottom: 100%; opacity: 0; }
50% { opacity: 1; transform: rotate(720deg);} /*雪花会旋转720度*/
100% { transform: rotate(0deg); opacity: 0; bottom: 0%;} /*这里的bottom设置的雪花最远消失的一条线,是相对于在父块的底部*/
}
.container { position: fixed; }
.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 30px; }
js部分:很简单,snowFlow方法是用来创建一个块元素把图片包在里面,然后获取三个参数分别是位置参数和图片路径参数,然后用 setInterval()调用函数。
<script type="text/javascript">
window.οnlοad=function(){
function snowFlow(left,height,src){ var container=document.createElement('div');
var pic=document.createElement('img');
var snowFlow=document.getElementById('snowFlow');
pic.className='pic';
container.className='container';
snowFlow.appendChild(container);
container.appendChild(pic);
container.style.left=left+'px';
container.style.height=height+'px';
pic.src=src; setTimeout(function(){ snowFlow.removeChild(container); },5000); }
setInterval(function(){
var left=Math.random()*window.innerWidth;
var height=Math.random()*window.innerHeight;
var src = 'img/雪花.png'; snowFlow(left,height,src); },100)
}
</script>