本文主要是介绍动画-云层效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果
<!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>
这篇关于动画-云层效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
