效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
position: relative;
height: 400px;
margin-top: 100px;
background-color: skyblue;
animation: sky 6s linear infinite alternate;
}
@keyframes sky {
from {
background-color: skyblue;
}
to {
background-color: #000000;
}
}
ul li {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 400px;
}
ul li:nth-child(1) {
background-image: url(images/carousel/cloud_one.png);
animation: one 20s linear infinite alternate;
}
@keyframes one {
from {
margin-left: 0;
}
to {
margin-left: -100%;
}
}
ul li:nth-child(2) {
background-image: url(images/carousel/cloud_two.png);
animation: two 20s linear infinite alternate;
}
@keyframes two {
from {
margin-left: 0;
}
to {
margin-left: -200%;
}
}
ul li:nth-child(3) {
background-image: url(images/carousel/cloud_three.png);
animation: three 20s linear infinite alternate;
}
@keyframes three {
from {
margin-left: 0;
}
to {
margin-left: -300%;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>