<!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>Document</title>
<style>
@keyframes move {
0% {
left: 0;
}
24% {
left: 0;
}
26% {
left: -400px;
}
49% {
left: -400px;
}
51% {
left: -800px;
}
74% {
left: -800px;
}
76% {
left: -1200px;
}
98% {
left: -1200px;
}
100% {
left: -1600px;
}
}
@keyframes change-color {
0% {
background-color: cyan;
}
25% {
background-color: cyan;
}
25.1% {
background-color: pink;
}
100% {
background-color: pink;
}
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.window {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 5px gray;
margin: 0 auto;
}
.move {
width: 2000px;
height: 300px;
position: absolute;
animation: move 10s linear infinite;
}
li {
width: 400px;
height: 300px;
float: left;
}
li img {
display: block;
width: 100%;
height: 100%;
}
.dots {
width: 200px;
height: 6px;
position: absolute;
left: 100px;
bottom: 20px;
display: flex;
justify-content: space-around;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: pink;
animation: change-color 8s linear infinite;
}
</style>
</head>
<body>
<div class="window">
<ul class="move">
<li><img src="img/xhr1.jpeg" alt="" /></li>
<li><img src="img/xhr2.jpeg" alt="" /></li>
<li><img src="img/xhr3.jpeg" alt="" /></li>
<li><img src="img/xhr1.jpeg" alt="" /></li>
<li><img src="img/xhr4.jpeg" alt="" /></li>
</ul>
<div class="dots">
<div class="dot"></div>
<div class="dot" style="animation-delay: 2s"></div>
<div class="dot" style="animation-delay: 4s"></div>
<div class="dot" style="animation-delay: 6s"></div>
</div>
</div>
</body>
</html>
小圆点,先设置一排都变蓝,然后通过延迟,让四个点挨个变蓝