|
在CSS 3中，增加了2种动画功能： - Transitions从一个属性值平滑过渡到另一个属性值。
- Animations支持通过关键帧的指定在页面上产生更复杂的动画效果。
本章我的代码全部是再FireFox 9下载编写，所有都是使用的 -moz-XXX。如果你使用的是Opera，请使用-o-XXX; 如果你使用的是Google\Apple浏览器，请使用-webkit-XXX。 Transitions transitions属性的使用方法 1 | <strong>transitions: property duration timing-function</strong> |
property表示哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。
[backcolor=rgb(248, 248, 248) !important]
[backcolor=rgb(248, 248, 248) !important]04 | <title>HTML 5与CSS 3权威指南 - 第十九章 CSS 3中的动画功能</title> |
05 | <style type="text/css"> |
[backcolor=rgb(248, 248, 248) !important]
[backcolor=rgb(248, 248, 248) !important]
[backcolor=rgb(248, 248, 248) !important]10 | background-color:#ffff00; |
11 | -moz-transform: rotate(0deg); |
[backcolor=rgb(248, 248, 248) !important]12 | -moz-transitions:background-color 2s linear, -moz-transform 1s linear; |
[backcolor=rgb(248, 248, 248) !important]
[backcolor=rgb(248, 248, 248) !important]
17 | background-color:#00ffff; |
[backcolor=rgb(248, 248, 248) !important]18 | -moz-transform: rotate(720deg); |
[backcolor=rgb(248, 248, 248) !important]
[backcolor=rgb(248, 248, 248) !important]
23 | <div>Transitions属性测试DIV <img src="01.jpg" alt=" *" width="300px" /></div> |
[backcolor=rgb(248, 248, 248) !important]24 | <footer>代码出自开源中国社区：<a href="http://my.oschina.net/TOW">Andy.Zhou</a></footer> |
[backcolor=rgb(248, 248, 248) !important]
本例子主要是实现图片的平滑偏移极其旋转720度的效果。 transitions功能实现动画有个缺点是只能指定属性的开始值和结束值，在这两个值之间平滑过渡，所以就有了Animations。 Animations animations与transitions功能相同，都是通过元素的属性值来实现动画的，区别在于animations通过定义多关键帧以及定义每个关键帧的属性值来实现更为复杂的动画。<未完待续，草稿保存时间太长了>
| 
/1 
|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛
( 豫ICP备2022021143号-1 )
发表于 2013-4-15 17:36:57
置顶卡
变色卡
千斤顶