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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
萌新的HTML5 入门指南
Nov 06 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 自定义错误处理函数的使用详解
2013/05/10 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
详解python中@的用法
2019/03/27 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
汽车队司机先进事迹材料
2014/02/01 职场文书
交通事故协议书范文
2014/04/16 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
js中Object.create实例用法详解
2021/10/05 Javascript
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android