| 标题 | css3中利用animation属性创建雪花飘落特效 |
| 范文 | 先介绍一下css3中的animation的特性吧。 在css3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transform，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。 比如： 代码如下: @keyframes bgchange{ from {background:red;} to {background:yellow} } div:hover{ animation:bgchange 5s; } 当鼠标悬停在<div>时，该<div>的背景颜色会在五秒之内从红色变为黄色。 注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！ 下面代码实现雪花飘落功能： 代码如下: <!doctype html> <html> <head> <meta charset=utf-8 /> <title>snowing snow</title> <style> body{ background: #eee; } @keyframes mysnow{ 0%{ bottom:100%; opacity:0; } 50%{ opacity:1; transform: rotate(1080deg); } 100%{ transform: rotate(0deg); opacity: 0; bottom:0; } } @-webkit-keyframes mysnow{ 0%{ bottom:100%; opacity:0; } 50%{ opacity:1; -webkit-transform: rotate(1080deg); } 100%{ -webkit-transform: rotate(0deg); opacity: 0; bottom:0; } } @-moz-keyframes mysnow{ 0%{ bottom:100%; opacity:0; } 50%{ opacity:1; -moz-transform: rotate(1080deg); } 100%{ -moz-transform: rotate(0deg); opacity: 0; bottom:0; } } @-ms-keyframes mysnow{ 0%{ bottom:100%; opacity:0; } 50%{ opacity:1; -ms-transform: rotate(1080deg); } 100%{ -ms-transform: rotate(0deg); opacity: 0; bottom:0; } } @-o-keyframes mysnow{ 0%{ bottom:100%; opacity:0; } 50%{ opacity:1; -o-transform: rotate(1080deg); } 100%{ -o-transform: rotate(0deg); opacity: 0; bottom:0; } } .roll{ position:absolute; opacity:0; animation: mysnow 5s ; -webkit-animation: mysnow 5s ; -moz-animation: mysnow 5s ; -ms-animation: mysnow 5s ; -o-animation: mysnow 5s ; height:80px; } .div{ position:fixed; } </style> </head> <body> <div id=snowzone > </div> </body> <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,height,src); },500); })(); </script> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。