使用css中实现轮播图主要是通过浮动和animation来实现的，通过对父元素添加浮动，通过animation中的关键帧改变宽度的起始位置。
主要代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
/* 把默认的边距清除 */
body,
ul{
margin: 0;
}
/* 清除列表的默认样式 */
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
#pic{
/* 设置轮播图显示的大小 */
width: 450px;
height: 300px;
/* 使盒子水平居中 */
margin: 50px auto;
/* 设置一个相对定位 */
position: relative;
/* 清除在 #photo li中的浮动 */
overflow: hidden;
}
@keyframes move{
/* 0-27%是保持第一张图片持续的时间 */
0%{
left: 0;
}
27%{
left:0 ;
}
/* 27%-33%是实现第一张图片和第二张图片的轮播 */
/* 33%-60%是保持第二张图片持续的时间 */
33%{
left:-450px ;
}
60%{
left: -450px;
}
/* 60%-66%是实现第二张图片和第三张图片的轮播 */
66%{
left: -900px;
}
/* 66%-94%是保持第三张图片持续的时间 */
94%{
left: -900px;
}
/* 94%-100%是回到第一张图片的时间 */
100%{
left: 0px;
}
}
#photo li{
/* 给#photo中的子元素设置宽高以及浮动 */
width: 450px;
height: 300px;
float: left;
}
#photo{
position: absolute;
display: block;
/* 由于已经给子元素设置了浮动，所以这里的宽度是三张图片的总长度 */
width: 1350px;
/* 将动画添加进来，实现浮动 */
animation: 10s move linear infinite;
}
#photo li img{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="pic">
<ul id="photo" >
<li>
<img src="./images/夏目1.jpg" alt="">
</li>
<li>
<img src="./images/夏目4.jpg" alt="">
</li>
<li>
<img src="./images/夏目5.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>