如何使用css3实现图片的自动轮播特效（附完整代码）

如何使⽤css3实现图⽚的⾃动轮播特效（附完整代码）

本⽂在介绍如何使⽤css3实现图⽚的轮播特效的基础上，重点探讨了其具体步骤，本⽂内容紧凑，希望⼤家可以有所收获。

⼤家在浏览⽹页的过程中，会遇见⼀种名叫图⽚轮播的特殊效果：在同样的位置不同的图⽚会根据时间的变化循环播放，达到⼀种类似于播放幻灯⽚的效果。那么我们在⽹页开发的过程中如何实现图⽚的轮播特效呢？本⽂将向⼤家展⽰⼀下如何使⽤css3实现图⽚的轮播特效。

使⽤css3实现轮播特效的主体思想

我们会在同样的位置准备好多个⼤⼩相同的图⽚，并且横放在div容器内，然后在div容器之上设置⼀个展⽰容器，其中展⽰容器的⼤⼩和图⽚⼤⼩相同，最后给图⽚容器添加⾃定义动画，并且在动画不同阶段设置递增的偏移值。

注意

动画效果分为两部分：切换和停留。

动画的偏移值和图⽚⼤⼩相关。

使⽤css3实现轮播特效的原理

⾸先必须保证展⽰容器⼤⼩与图⽚⼤⼩相同，再为图⽚添加float效果，然后确定插⼊的图⽚数量并且为每个图⽚设置动画阶段，其中每个阶段都是通过使⽤keyframes设置递增的margin-left值达到切换的效果。

使⽤css3实现图⽚轮播特效的步骤（代码）

步骤⼀：使⽤HTML添加图⽚

</div>

步骤⼆：使⽤css3设置动画阶段

#container {

width: 400px;

height: 300px;

overflow: hidden;