一、动画
1.1 动画
使用animation添加动画效果
思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
- 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
- 构成动画的最小单元：帧或动画帧
1.2 动画的实现步骤
实现步骤
1、定义动画
两个状态之间的变化：
@keyframes 动画名称 {from {}to {}
}多个状态之间的变化：
@keyframes 动画名称 {/* 百分比指的是动画时长的百分比 */0% {}10% {}15% {}100% {}
}2、使用动画
animation:动画名称 动画花费时长;
1.3 动画属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
速度曲线
linear： 匀速
steps(n)：分步动画
延迟时间
重复次数
动画方向alternate
带有反方向执行的效果
执行完毕之后的状态
backwards:动画停留在最初的状态
forwards:动画停留在最后的状态
animation复合属性的拆分属性（了解）
1.3 动画属性
使用steps实现逐帧动画（配合精灵图的动画都是逐帧动画，其他的全是补间动画）
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-timing-function | 速度曲线 | steps(数字) |
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果
animation-timing-function:steps(N); 将动画过程等分成N份
精灵动画制作步骤
- 准备显示区域
- 设置盒子尺寸是精灵图中一张小图的尺寸，背景图为当前精灵图
- 定义动画
- 改变背景图的位置（移动的距离就是精灵图的宽度）
- 使用动画
- 添加速度曲线steps(N)，N与精灵图上小图的个数相同
- 添加无限重复效果
多组动画
思考：如果想让小人跑远一些，该如何实现？
答：精灵动画的同时添加盒子位移动画
animation:动画1,动画2,动画N
;<style>.box {/* 1680/12:保证显示区域的尺寸和一个精灵小图的大小相等 */width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);animation:move 1s steps(12) infinite,run 1s forwards;}@keyframes move {/* from {background-position: 0 0;} */to {background-position: -1680px 0;}}@keyframes run {/* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
<body><div class="box"></div>
</body>
案例——走马灯
无缝动画
原本是七张图片 小框中一次能显示三张图片 如果是保持七张图片的话，到了5、6、7张图片时，再向左移后面会露白，所以后面再补上1、2、3张图片 然后再从头播放
<style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {/* 十张图片的宽度 */width: 2000px;animation: move 5s infinite linear;}.box li {float: left;}@keyframes move {to {transform: translateX(-1400px);}}.box:hover ul {animation-play-state: paused;}</style><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 防止第七张图片放完了之后会留白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body> 
综合案例——全民出游记
注意点：
- 设置网页背景大图片的时候，要将html和body的高度都设置为100%，浏览器默认高度是0
- 因为背景图的大小不可能和浏览器大小正好，所以要适量设置背景图缩放background-size
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css">
</head><body><div class="cloud"><img src="./images/yun1.png" alt=""><img src="./images/yun2.png" alt=""><img src="./images/yun3.png" alt=""></div><div class="ballon"><img src="./images/san.png" alt=""></div><div class="icon"><img src="./images/1.png" alt=""><img src="./images/2.png" alt=""><img src="./images/3.png" alt=""><img src="./images/4.png" alt=""></div>
</body></html>* {margin: 0;padding: 0;
}
html {height: 100%;
}body {position: relative;height: 100%;background: url('../images/f1_1.jpg') no-repeat center 0;/* 缩放背景图 *//* 图片等比例缩放，当宽度或高度和盒子尺寸相等，图片就不再缩放 *//* background-size:contain; *//* 图片等比例缩放，图片完全覆盖到盒子，可能会导致图片显示不全 */background-size: cover;
}.cloud img {position: absolute;top: 0;left: 50%;animation: cloud 1s infinite alternate;
}.cloud img:nth-child(1) {top: 20px;margin-left: -300px;
}.cloud img:nth-child(2) {top: 100px;margin-left: 400px;animation: cloud 1s infinite alternate .2s;
}.cloud img:nth-child(3) {top: 200px;margin-left: -550px;animation: cloud 1s infinite alternate .3s;
}@keyframes cloud {to {transform: translateX(20px);}
}.ballon img {position: absolute;top: 150px;left: 406px;animation: ballon 1s infinite alternate;
}@keyframes ballon {to {transform: translateY(-20px);}
}.icon img {position: absolute;top: 503px;left: 50%;animation: icon 1s infinite alternate;
}.icon img:nth-child(1) {margin-left: 45px;
}.icon img:nth-child(2) {margin-left: -194px;animation: icon 1s infinite alternate .2s;
}.icon img:nth-child(3) {margin-left: -432px;animation: icon 1s infinite alternate .3s;
}.icon img:nth-child(4) {margin-left: 283px;animation: icon 1s infinite alternate .5s;
}@keyframes icon {to {transform: translateY(-20px);}
}
