<!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