<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
margin: 0 auto;
overflow: hidden;
}
ul {
width: 1200px;
margin: 0;
padding: 0;
list-style: none;
animation: slide 6s linear 2s infinite;
}
li {
list-style-type: none;
width: 300px;
height: 100px;
float: left;
}
@keyframes slide {
0% { transform: translate(0px); }
25% { transform: translate(-300px); }
50% { transform: translate(-300px); }
75% { transform: translate(-600px); }
100% { transform: translate(-600px); }
}
</style>
</head>
<body>
<div>
<ul id="slide">
<li style="background-color: blue"></li>
<li style="background-color: green"></li>
<li style="background-color: yellow"></li>
</ul>
</div>
</body>
</html>« 上一篇
Transition 实现轮播图下一篇 »
洗牌问题的实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。