收藏本站帮助侵权投诉飘仙建站网
切换到宽版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › 第十九章 CSS 3中的动画功能 - 《HTML 5与CSS 3权威指南 ...
返回列表 发新帖
查看: 1815|回复: 0

[分享] 第十九章 CSS 3中的动画功能 - 《HTML 5与CSS 3权威指南》

[复制链接]
猫性男孩
发表于 2013-4-15 17:36:57 | 显示全部楼层 |阅读模式 来自 北京市
在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表示通过什么方法来进行平滑过渡。
01
<!DOCTYPE html>

[backcolor=rgb(248, 248, 248) !important]
02
<html>

03
    <head>

[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]
06
        img{

07
            position: absolute;

[backcolor=rgb(248, 248, 248) !important]
08
            top 7px;

09
            left:0;

[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;

13
        }

[backcolor=rgb(248, 248, 248) !important]
14
        div:hover img{

15
            position: absolute;

[backcolor=rgb(248, 248, 248) !important]
16
            left: 30px;

17
            background-color:#00ffff;

[backcolor=rgb(248, 248, 248) !important]
18
            -moz-transform: rotate(720deg);

19
        }

[backcolor=rgb(248, 248, 248) !important]
20
        </style>

21
    </head>

[backcolor=rgb(248, 248, 248) !important]
22
    <body>

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>

25
    </body>

[backcolor=rgb(248, 248, 248) !important]
26
</html>




本例子主要是实现图片的平滑偏移极其旋转720度的效果。
transitions功能实现动画有个缺点是只能指定属性的开始值和结束值，在这两个值之间平滑过渡，所以就有了Animations。
Animations
animations与transitions功能相同，都是通过元素的属性值来实现动画的，区别在于animations通过定义多关键帧以及定义每个关键帧的属性值来实现更为复杂的动画。<未完待续，草稿保存时间太长了>

属性值, 如果你, 关键帧, 如果, 使用

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-5-2 21:15 , Processed in 0.055226 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表