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 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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使用Mysql事务实例解析
2014/09/08 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php魔术变量用法实例详解
2014/11/13 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jquery tools之tooltip
2009/07/25 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python实现简易通讯录修改版
2018/03/13 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python爬虫---requests库的用法详解
2020/09/28 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
党组织公开承诺书
2014/03/29 职场文书
农村葬礼主持词
2014/03/31 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
护士求职信范文
2014/05/24 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
高一英语教学反思
2016/03/03 职场文书