<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漂浮的白云</title> <style type="text/css"> .box { position: relative; height: 300px; width: 500px; } .in1, .in2 { position: absolute; height: 100%; width: 100%; background-size: cover; animation: move 100s infinite linear alternate; } @keyframes move { 100% { background-position: 500% 0; } } .in1 { background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png'); } .in2 { background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png'); animation-duration: 10s; } </style> </head> <body> <h1>漂浮的白云</h1> <div class="box"> <div class="in1"></div> <div class="in2"></div> </div> <strong>【简要介绍】</strong> <p>漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果</p> </body> </html>
效果图：
原链接：https://www.cnblogs.com/xiaohuochai/p/5419236.html