在往期文章小编介绍过 JS 如何实现轮播图。那么这篇文章我们来介绍另一种方法：CSS 轮播图如何实现。
实现效果
实现思路
用 CSS 实现图片轮播主要是用到 CSS3 animation 属性和 @keyframes。首先将要进行轮播的图片放入一个 div 内，此 div 的宽度设置为多张图片宽度的总和。在此 div 外再设一个 div，将此 div 的宽高设置为一张图片的宽高，并将 overflow 设置为 hidden。
随后设置动画属性，此处轮播总共有四张图片，所以添加四个动画阶段，0%-20% 是第一张图片的动画阶段，20%-25% 是停留阶段，以下以此类推。
具体代码
CSS如何实现轮播图 - 编程狮(w3cschool.cn)div{
width: 300px;
height: 168px;
overflow: hidden;
}
#lunbotu{
width: 1200px;
animation: lunbotu 6s linear ;/*lunbotu为动画名称，此动画持续6s，速度相同*/
}
#lunbotu>img{
float: left;
width: 300px;
}
@-webkit-keyframes lunbotu{
0%,20%{
margin-left: 0;
}
25%,45%{
margin-left: -300px;
}
50%,70%{
margin-left: -600px;
}
75%,100%{
margin-left: -900px;
}
}
以上就是 CSS 轮播图如何实现的全部内容。更多 CSS 学习请关注 w3cschool 官网。
