效果如图
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slight-bg">
<img src="img/back-1.png" class="img1">
<img src="img/back-2.png" class="img2">
<img src="img/back-3.png" class="img3">
</div>
<script src="js/jquery-2.2.3.min.js" ></script>
</body>
</html>
CSS
.slight-bg{
width: 750px;
height: 588px;
position: relative;
}
@keyframes transImg{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.img1,.img2,.img3{
position: absolute;
}
.img1{
animation: transImg 0.2s linear reverse infinite;
}
.img2{
animation: transImg 0.2s linear 0.2 reverse infinite;
}
.img3{
animation: transImg 0.2s linear 0.4s reverse infinite;
}
各属性自行百度，时间节点重要，over。。。。