CSS3中利用animation属性创建雪花飘落特效


Posted in HTML / CSS onMay 14, 2014

先介绍一下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>

两张雪花图片:
CSS3中利用animation属性创建雪花飘落特效 
最终效果:
CSS3中利用animation属性创建雪花飘落特效
HTML / CSS 相关文章推荐
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 #HTML / CSS
css3 自定义字体font-face使用介绍
May 14 #HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 #HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 #HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 #HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 #HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 #HTML / CSS
You might like
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
tensorflow 变长序列存储实例
2020/01/20 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
大学生就业自荐信
2013/10/26 职场文书
财务助理岗位职责
2013/11/10 职场文书
自我评价的写作规则
2014/01/06 职场文书
八年级生物教学反思
2014/01/22 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS