利用CSS3中animation属性实现雪花飘落功能
来源:互联网 发布:cad mac中文破解版2016 编辑:程序博客网 时间:2024/04/30 02:32
先介绍一下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>
两张雪花图片:
最终效果:
0 0
- 利用CSS3中animation属性实现雪花飘落功能
- css3简单实现页面中出现雪花飘落效果
- 利用高级动画来实现雪花的飘落
- 用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜
- Qt 实现桌面雪花飘落
- Android实现雪花飘落特效
- JS实现飘落的雪花效果
- Qt 实现桌面雪花飘落 - 修改1
- Qt 实现桌面雪花飘落 - 修改2
- 简单说 JavaScript实现雪花飘落效果
- 简单说 JavaScript实现雪花飘落效果
- javascript实现圣诞雪花飘落效果
- 页面中雪花飘落的效果
- 网页中飘落的雪花Javascript代码
- Android 实现雪花飘落特效 安卓实现雪花 玫瑰 星星飘落
- cocos2dx 利用随机数模拟雪花飘落、粒子系统
- css3动画显示实现animation属性
- CSS3中animation属性的使用
- 性能调优攻略
- abstract factory(抽象工厂) 对象创建型模式
- MySql数据库出现的错误
- Ganymed SSH-2 for Java系列5之删除远程服务器上的目录(补充说明)
- 接活网站
- 利用CSS3中animation属性实现雪花飘落功能
- 第六周作业--利用哈夫曼编码英文字母表
- 混排算法与吉尔比·贝克问题
- 设计模式之外观模式
- one 0f dependencies couldnot be loaded about sharepoint 2010 on windows 2012 / 2008 server
- Ganymed SSH-2 for Java系列6之删除远程服务器上的非空目录
- calloc和malloc的区别,兼谈new
- <华为的世界>读后感
- SQL通用版分页存储过程