图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。
下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css轮播</title> </head> <body> <!--轮播--> <div> <!--图片组--> <div> <img src="3.jpg"> <img src="5.jpg"> <img src="4.jpg"> </div> <!--页码--> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </body> </html>
图片轮播切换前的css样式：
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #82ccdd;
display: flex;
justify-content: center;
align-items: center;
}
div.scroll-photo{
position: absolute;
width: 400px;
height: 300px;
overflow: hidden;
}
div.photos{
position: absolute;
width: 1200px;
height: 300px;
z-index: -1;
}
div.photos img{
position: relative;
width: 400px;
height: 300px;
float: left;
}
div.index ul{
position: absolute;
display: grid;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
width: 150px;
grid-template: 1fr/repeat(3,1fr);
justify-items: center;
}
div.index ul::after{
content: '';
position: absolute;
top: 0;
left: 12.5px;
width: 25px;
height: 25px;
border-radius: 50%;
z-index: -1;
background: #d63031;
}
div.index ul li{
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
color: #FFF;
background: rgba(0,0,0,.5);
display: grid;
justify-content: center;
align-items: center;
}
</style>图片切换效果css：
div.photos{
animation:scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
div.index ul::after{
animation:index-scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
@keyframes scroll{
to{
transform: translateX(-1200px);
}
}
@keyframes index-scroll{
to{
transform: translateX(150px);
}
}只需把图片切换效果的css加到上面切换前的css后面即可。
这里用到的css3属性是animation，animation有个steps属性，它可以指定动画分几步来完成，这里的banner设置了3张图片，所以这里设置动画分3步完成。
transform: translateX(-1200px)：3张图片，每张图片的宽度是400，图片轮播是从左到有显示图片，但显示图片的窗口是不动的，所以可以当成把图片往左拉，因此translateX里面的参数是负值。
index-scroll对应的是数字高亮图标的运动。与图片的运动一样，不过方向相反。
最终效果
