武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第26节 CSS3动画 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/16 传媒学院

2 1.CSS3动画介绍 通过 CSS3，能够创建动画，它可以在许多网页中取代动画图片、Flash 动画以及 JavaScript 实现方法
先定义动画的关键帧规则 再对希望具有动画效果的元素使用这些规则 2019/5/16 传媒学院

3 2.定义关键帧 关键字 例子 @keyframes @-webkit-keyframes @keyframes myfirst { }
Safari 和 Chrome使用的属性名 例子 @keyframes myfirst { from {background: red;} to {background: yellow;} } 这是一个只有两个关键帧（背景红，背景黄）的规则；规则的名称（动画名称）叫myfirst 样式代码，只能手写 Q：应该写在哪里？ 2019/5/16 传媒学院

4 3.使用动画 动画属性 例子 animation #t { animation: myfirst 5s;
-webkit-animation: myfirst 5s; } 动画名称为myfirst，动画持续时间5秒 2019/5/16 传媒学院

5 4.animation属性值 animation是一个简写属性，用于设置以下6个属性 animation-name
动画名称 animation-duration 持续时间 animation-timing-function 动画的速度曲线，比如线性linear animation-delay 动画延迟，就是多久后开始播放动画 animation-iteration-count 动画次数，1表示1次，infinite表示无数次 animation-direction 动画是否在下一周期逆向地播放，默认是normal，即不， alternate 表示交替 2019/5/16 传媒学院

6 Q：-webkit-animation: myfirst 3s; 这是什么效果？
animation : myfirst 5s linear 2s infinite alternate; 表示动画名称是myfirst；持续5s；linear线性速度播放（动画从头到尾的速度是相同的）；延迟2秒后开始播放；infinite无限重复播放；交替播放（相邻两个周期的播放过程相反） 也可以单独设置 animation-timing-function: ease ease：默认效果，动画以低速开始，然后加快，在结束前变慢表示 Q：-webkit-animation: myfirst 3s; 这是什么效果？ 2019/5/16 传媒学院

7 5.更多关键帧定义 例子 定义了5个关键帧 @keyframes myfirst {
0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } 定义了5个关键帧 2019/5/16 传媒学院

8 6.练习 制作简单的动画logo，如下 Logo图片在logo区域左右移动并旋转，且背景颜色不断变化 2019/5/16 传媒学院

9 要定义两个动画，一个是给div用的，改背景颜色
@keyframes myfirst { 0% {background: red;} 20% {background: green;} 40% {background: blue;} 60% {background: yellow;} 80% {background: #00ffff;} 100% {background: purple;} } 2019/5/16 传媒学院

10 另一个是给图片用的，通过改变左边界大小让图片平移，并通过转换的rotate方法旋转
@keyframes mysecond { 0% {margin-left:0px; transform: rotate(0deg);} 20% {margin-left:140px; } 40% {margin-left:280px; } 60% {margin-left:420px; } 80% {margin-left:560px; } 100% {margin-left:750px; transform: rotate(360deg);} } 为什么只用定义两个关键帧的旋转？ 2019/5/16 传媒学院

11 使用动画 animation : myfirst 10s linear 0s infinite alternate;
Q:-webkit-animation是干什么用的? 2019/5/16 传媒学院

12 作业 在一个带框的div中放置一个球，该球在div框中按W轨迹运动，且运动中会变色 2019/5/16 传媒学院