设为首页 加入收藏

TOP

利用CSS3中animation属性实现雪花飘落功能(一)
2015-02-02 14:31:37 来源: 作者: 【 】 浏览:39
Tags:利用 CSS3 animation 属性 实现 雪花 飘落 功能

先介绍一下CSS3中的animation的特性吧。


在CSS3中我们可以使用animation属性来创建复杂的动画效果,包括移动,旋转,缩放,倾斜(后几个请参考css3中的transform,scale等属性)等。而这一切,只需要我们创建关键帧(@keyframes),然后将自己想要实现的动作添加进去就可以实现。


最终效果:


利用CSS3中animation属性实现雪花飘落功能


比如:


@keyframes bgchange{?
? ? from {background:red;}?
? ? to? ? {background:yellow}?
}?
?
div:hover{?
? ? animation:bgchange 5s;?
}?


当鼠标悬停在

时,该
的背景颜色会在五秒之内从红色变为黄色。


注意:使用animation和@keyframes时不同浏览器需要加上不同的前缀名!


下面代码实现雪花飘落功能:


?
?
? ? ?
? ? ? ? ?
? ? ? ? snowing snow?
? ? ? ? ?
? ? ?
? ? ?
? ? ? ?

?
? ? ? ?
?
? ? ?
? ? <script>?
? ? ? ? (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);?
? ? ? ? ? ? ? ? // console.log(window.innerHeight);?
? ? ? ? ? ? },5000);?
? ? ? ? ? ? }?
? ? ? ? ? ? setInterval(function(){?
? ? ? ? ? ? ? ? var left = Math.random()*window.innerWidth;?
? ? ? ? ? ? ? ? var height = Math.random()*window.innerHeight;?
? ? ? ? ? ? ? ? var src = "s"+Math.floor(Math.random()*2+1)+".png";//两张图片分别为"s1.png"、"s2.png"?
? ? ? ? ? ? ? ? snow(left,heig
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇一道阿里巴巴Web前端面试题拓展 下一篇关于 HTML5 video全屏问题 的解答

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: