只使用css实现轮播图简单的操作
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:;
padding:;
} ul,
ol {
list-style: none;
} .box {
overflow: hidden;
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
} ul {
height: 100%;
width: 2080px;
animation: move 20s infinite;
animation-timing-function: cubic-bezier(0, 1, 0, 0.99);
animation-delay: 2s;
} li {
float: left;
} @keyframes move {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-520px);
}
50% {
transform: translateX(-1040px);
}
75% {
transform: translateX(-1560px);
}
/* 100% {
transform: translateX(-2080px);
} */
} ol {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
width: 70px;
height: 13px;
text-align: center;
background-color: rgba(255, 255, 255, .6);
border-radius: 7px;
} ol li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
margin: 2.5px 3px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head> <body>
<div class="box">
<ul>
<li>
<a href="#">
<img src="upload/轮1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="upload/轮2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="upload/3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="upload/4.jpg" alt="">
</a>
</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body> </html>