CSS3轮播图的效果
问一下我的轮播图为啥每次都会回滚，是不是最后一帧设置的有问题？
是不是应该覆盖第一张图？
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 520px;
overflow: hidden;
margin: 100px auto;
}
ul {
width: 3300px;
height: 280px;
animation: move 20s linear 0s infinite normal;
}
ul li {
list-style: none;
width: 520px;
height: 100%;
float: left;
}
@keyframes move {
0% {
margin-left: 0;
}
9% {
margin-left: -520px;
}
18% {
margin-left: -520px;
}
27% {
margin-left: -1040px;
}
36% {
margin-left: -1040px;
}
45% {
margin-left: -1560px;
}
54% {
margin-left: -1560px;
}
63% {
margin-left: -2080px;
}
72% {
margin-left: -2080px;
}
81% {
margin-left: -2600px;
}
90% {
margin-left: -2600px;
}
100% {
margin-left: 0;
}
}
</style></head>
<body>
<div>
<ul>
<li>
<img src="http://img.alicdn.com/tfs/TB112V3tpGWBuNjy0FbXXb4sXXa-520-280.jpg_q90_.webp">
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1k54Wr1uSBuNjSsziSuvq8pXa.jpg">
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1g.owtkSWBuNjSszdSuveSpXa.jpg">
</li>
<li>
<img src="https://aecpm.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg">
</li>
<li>
<img src="http://img.alicdn.com/tfs/TB1YIf6oGmWBuNjy1XaXXXCbXXa-520-280.jpg_q90_.webp">
</li>
<li>
<img src="http://img.alicdn.com/tfs/TB112V3tpGWBuNjy0FbXXb4sXXa-520-280.jpg_q90_.webp">
</li>
</ul>
</div></body>
</html>`
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你最后一帧margin-left: 0;，所以图片一轮滚动完后，图片就会回滚；
如果你用css3做，那就从右往左，用0%-50%，然后设置成左往右，用50%-100%；这样的话就不会出现6张图一起回滚的结果；
左--右
0% {margin-left:0}; 100% {margin-left:-2600px;}
左-右-左
0% {margin-left:0}; 50%{margin-left:-2600px;} 100% {margin-left:0;}
建议： 如何实现 CSS 无缝轮播图？