<!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>
效果如下：