使用html、css实现了一个轮播图
图片用的是一样大小的图
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="lunbotu.css">
</head>
<body>
<div class="box">
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
img{
width: 598px;
height: auto;
float: left;
border: 2px solid black;
}
.box{
width: 600px;
height: auto;
overflow: hidden;
margin: 0 auto;
margin-top: 200px;
}
.box ul{
list-style: none;
width: 3020px;
animation: marginLeft 5s infinite;
}
/*鼠标悬停时动画暂停*/
.box ul:hover{
animation-play-state: paused;
}
/*动画*/
@keyframes marginLeft
{
0% {
/* margin-left: 0; */
}
15%{
transform: translateX(-600px);
border-radius: 50px;
}
25% {
/* margin-left: -600px; */
transform: translateX(-600px);
}
35%{
transform: translateX(-1200px);
}
50% {
/* margin-left: -1200px; */
transform: translateX(-1200px);
}
60%{
transform: translateX(-1800px);
}
75% {
/* margin-left: -1800px; */
transform: translateX(-1800px);
}
85%{
transform: translateX(-2400px);
}
100% {
/* margin-left: -2400px; */
transform: translateX(-2400px);
}
}