先介绍一下css3中的animation的特性吧。

在css3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transform，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。

比如：

代码如下:

@keyframes bgchange{

from {background:red;}

to {background:yellow}

}

div:hover{

animation:bgchange 5s;

}

当鼠标悬停在

时，该

的背景颜色会在五秒之内从红色变为黄色。

注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！

下面代码实现雪花飘落功能：

代码如下:

map

更多信息请查看 网页制作

【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】

上一篇： html代码文本框限制输入文本框变灰色限制文本框输入

下一篇： 用jquery进行修复在iframe下的页面锚点失效问题

手机网站地址： css3中利用animation属性创建雪花飘落特效

由于各方面情况的不断调整与变化， 提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！

相关阅读 网页制作

使用CSS制作立体导航栏 10月30日

用纯CSS3实现网页中常见的小箭头 10月30日

有关HTML5中背景音乐的自动播放功能 10月30日

HTML5、Select下拉框右边加图标的实现代码(增进用户体验) 10月30日

html5实现图片转圈的动画效果——让页面动起来 10月30日

html5清空画布方法(三种) 10月30日

HTML实现移动端固定悬浮半透明搜索框 10月30日

HTML5 文件域+FileReader 分段读取文件并上传到服务器 10月30日

Dreamweaver怎么设计彩色边框的表格? 10月30日

Dreamweaver怎么给个人简历添加照片并排版? 10月30日

基于HTML5的WebGL实现json和echarts图表展现在同一个界面 10月30日

解决HTML5手机端页面缩放的问题 10月30日

利用纯CSS实现居中的七大方法示例 09月29日

CSS3中伪元素::before和::after的用法示例 09月29日

详解使用 CSS 的 font-size-adjust 属性改善网页排版 09月29日

HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 09月29日

css3 pointer-events 介绍详解 09月29日

CSS :focus-within的具体使用 09月29日

你所不知道的 CSS 动画技巧与细节 09月29日

详解CSS3选择器:nth-child和:nth-of-type之间的差异 09月29日