项目准备
素材准备，本次案例我们将使用西游记的素材，并且会介绍一个新的图片格式（精灵图）
什么是精灵图：就是一个张图片上面有多个图像区域
知识点准备
本次案例我们采用HTML+CSS的方式去完成，基本知识点要准备如下
- HTML语言基础
- CSS语言基础，class选择器，基础CSS样式
- 定义动画
@keyframes，使用动画animation
本次课程主要是对动画做了扩展，讲解了两种类型的动画
graph TD
A[动画类型]-->B[流畅动画]
A-->C[帧动画]背景实现的是流畅动画，而人物的行走是帧动画
项目创建
- 在桌面上面创建一个
bgg_xyj的文件夹，然后打开我们的开发工具HBuilderX，最后将刚刚创建好的文件夹拖入进去 - 将之前准备好的素材
img文件夹拖入到刚刚创建的项目文件夹当中 - 在当前的项目下面新建一个
index.html的文件
开发过程
在整个项目的开发过程当中，我们先从基础开始学起，我们本来是有师徒4个人，我们只用先完成一个人的就可以了的，后面的我们可以参照完成
我们得到的上面的这种素材图，我们要将这样的素材转换成一个可以行走的动画效果，所以我们可以把这样的素材图片看成是一个“胶卷”，这个胶卷在不停的放电影
一个胶卷不可能在放映的时候同时展示这么多图片，只能一张一张的展示，所以我们要用设置一个人物大小就行了
我们通过属性可以看到整个图片的宽度是1600px，高度则是180px，而这个图片里面8个人物，所以每个人物的宽度是1600px/8=200px
首先，我们先完成孙悟空的
<style>
/* .monkey_sun就相当于class="monkey_sun" */
.monkey_sun {
width: 200px;
height: 180px;
border: 2px solid red;
/* 相对定位 */
position: relative;
}
.img_sun{
/* 绝对定位 */
position: absolute;
left: 0px;
top: 0px;
}
</style>
<!-- 第一步：先在网页上面创建一个盒子 -->
<div class="monkey_sun">
<!-- 在这里需要插入孙悟空的图片 -->
<img src="img/1.png" class="img_sun" />
</div>经过我们的实例分析以后，我们发现，这个图片需要经过8个阶段去完成，每个阶段都显示对象的一张图片，这样我们会引出我们的动画的另一种形式**阶段型动画
什么是阶段型动画？就是我们的动画是有阶段进行的
定义阶段型动画
之前在上一次的周末班里面，我们已经知道定义动画使用@keyframes来进行，所以我们也通过关键来定义今天的动画
| 阶段 | 开始时间 | 结束时间 | 图片位置 |
|---|---|---|---|
| 1 | 0 | 12.5 | 0 |
| 2 | 12.6 | 25 | -200 |
| 3 | 25.1 | 37.5 | -400 |
| 4 | 37.6 | 50 | -600 |
| 5 | 50.1 | 62.5 | -800 |
| 6 | 62.6 | 75 | -1000 |
| 7 | 75.1 | 87.5 | -1200 |
| 8 | 87.6 | 100 | -1400 |
根据上面的图表，我们可以定义出如下的阶段型动画
/* 定义了一个动画 */
@keyframes ani_sun{
0%,12.5%{
left: 0px;
}
12.6%,25%{
left: -200px;
}
25.1%,37.5%{
left: -400px;
}
37.6%,50%{
left: -600px;
}
50.1%,62.5%{
left: -800px;
}
62.6%,75%{
left: -1000px;
}
75.1%,87.5%{
left: -1200px;
}
87.6%,100%{
left: -1400px;
}
}当上面的动画定义好了以后，我们还需要去调用这个动画
帧动画
我们如果采用上面的方式去完成的时候，发现计算阶段的时候很麻烦，同时有的阶段时间不是等分的
为了更好的解决这个问题，在CSS的动画当中，演变出了一个新的东西，叫帧动画（顾名思义就是一帧一帧的动画）
定义动画
@keyframes ani_sun {
0% {
left: 0px;
}
100% {
/*这里的值变成了-1600px*/
left: -1600px;
}
}调用动画
.img_sun {
position: absolute;
left: 0px;
top: 0px;
animation-name: ani_sun;
animation-duration: 0.8s;
animation-iteration-count: infinite;
/* steps(8)代表把动画拆分成8帧去运行 */
animation-timing-function: steps(8);
}在上面的代码当中，我们让系统自动的从0%~100%拆分成了8个步骤（拆分成8帧去运行）
当我们通过上面的代码完成了孙悟空的效果以后，其它的动画效果也是一样的
动画的视觉差
所谓动画的视觉差其实就是利用特殊的素材图片实现一个循环动画的效果，在本次的案例当中我们可以看到背景图片是在不停的滚动，它其实就是一个特殊的背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>西游记背景</title>
<style>
.bg-box {
width: 1920px;
height: 786px;
border: 5px solid deeppink;
margin: auto;
position: relative; /*相对定位*/
/* 溢出隐藏 */
overflow: hidden;
}
.img-box {
width: calc(1920px * 2);
height: 786px;
/* 设置背景图片，图片只有1920px,但是盒子有3840px ，
如果图片小于盒子，则会自动的重复平铺*/
background-image:url(img/bg.jpg);
position: absolute; /*绝对定位*/
left: 0px;
top: 0px;
animation-name: ani_bg;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes ani_bg{
0%{
left: -1920px;
}
100%{
left: 0px;
}
}
</style>
</head>
<body>
<div class="bg-box">
<div class="img-box"></div>
</div>
</body>
</html>这里背景的动画视觉差其实就是两个图片的首尾相连
总结
overflow是盒子的溢出处理，当一个小的容器里面放一个大的元素，就会存在溢出的情况，overflow:hidden就是溢出隐藏关于
margin:auto居中关于定位以后的Z轴问题（脱流问题），请参考
http://www.softeem.xin:8090/archives/%E5%AE%9A%E4%BD%8D#%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D
合理的使用CSS的分组选择器可以提供开发效率，关于CSS的分组选择器，请参考
http://www.softeem.xin:8090/archives/CSS%E5%9F%BA%E7%A1%80#css%E9%80%89%E6%8B%A9%E5%99%A8
关于元素里面的块级元素与行内块级元素，请参考
关于如果让元素居中的问题，还请参考第2点
关于元素的垂直居中，一直是一个痛点，这个后面会开专题讲解
教程来源：软帝标哥
