用到的方法：
动画 Animation + @keyframes
注意：animation属性要与keyframes规则进行绑定
CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时，需要把它绑定到一个选择器（例如div），否则动画不会有任何效果。
动画属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画的简写属性 |
| animation-name | 规定@keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的时间，默认0 |
| animation-timing-function | 规定动画速度曲线，默认是“ease” |
| animation-fill-mode | 规定当动画不播放时（当动画完成时或当动画有一个延迟为开始播放时）要用到的元素样式 |
| animation-dispaly | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1 |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal” |
| animation-play-state | 规定动画是否正在运行或暂停，默认是“running” |
animation-timing-function规定速度曲线的参数
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾速度相同 |
| ease | 默认。低速开始——加快——结束变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
实例
效果图
变换前
变换中
变换后
doem
<div class="background"></div>
<style>
.background{
width: 100%;
height: 100vh;
animation: move 10s linear infinite; /*自定义动画名称*/
/*!move：动画名称，10s：执行时间
ease：执行的函数，infinite：代表执行次数，这里指无限次*!*/
}
@keyframes move {
/**注意这几个图片大小一定要一样，否则会出现抖动现象*/
/*这里的0%50%100%是相对于执行时间的，最后一个图片先播放*/
0%{
background: url('/static/image/img2.png') no-repeat;
background-size:100% 100%;
}
50%{
background: url('/static/image/img1.jpg') no-repeat;
background-size:100% 100%;
}
100%{
background: url('/static/image/img3.jpg') no-repeat;
background-size:100% 100%;
}
}
</style>