<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画模块-云层效果</title>
<style>
* {
margin:0;
padding:0;
}
ul {
height: 400px;
background-color: skyblue;
margin-top: 100px;
/* 动画名 动画时长 延迟时间 动画次数 来回交替*/
animation: change 5s 0s infinite alternate;
position: relative;
}
ul li {
list-style: none;
width: 400%;/*保证图片可以不超出ul*/
height: 100%; position: absolute;
left: 0px;
top: 0px;
}
ul li:nth-child(1){
background-image: url("images/cloud_one.png");
animation: one 30s linear 0s infinite alternate;
}
ul li:nth-child(2){
background-image: url("images/cloud_two.png");
animation: two 30s linear 0s infinite alternate;
}
ul li:nth-child(3){
background-image: url("images/cloud_three.png");
animation: three 30s linear 0s infinite alternate;
}
@keyframes change {
from {
background-color: skyblue;
}
to {
background-color: black;
}
}
@keyframes one {
from{
margin-left: 0;
}
to {
margin-left: -100%;/*时间相同，距离不同，所以移动速度不一样*/
}
}
@keyframes two {
from{
margin-left: 0;
}
to {
margin-left: -200%;
}
}
@keyframes three {
from{
margin-left: 0;
}
to {
margin-left: -300%;
}
} </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下：