效果图如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>移动的云朵</title> </head> <body> <div class="banner"> <div class="clouds"> <img src="./images/cloud1.png" style="--i:1;"> <img src="./images/cloud2.png" style="--i:2;"> <img src="./images/cloud3.png" style="--i:3;"> <img src="./images/cloud4.png" style="--i:4;"> <img src="./images/cloud5.png" style="--i:5;"> </div> </div> <section> <h2>The ten commandments poem</h2> <p>The first, the one you should not meet,so then you may not love .</p> <p>The second, the one you should not known well,so then you may not lovesick.</p> <p>The third, the one you should not accompany,so then you may not owe .</p> <p>The fourth,the one you should not pity,so then you may not recall.</p> <p>The fifth,the one you should not love,so then you may not abandon.</p> <p>The sixth,the one you should not opposite,so then you may not meet.</p> <p>The seventh,the one you should not harm,so then you may not negative.</p> <p>The eighth,the one you should not wish,so then you may not go on.</p> <p>The ninth ,the one you should not rely on,so then you may not snuggle.</p> <p>The tenth,the one you should not meet,so then you may not have a meeting.</p> </section> </body> </html> * { margin: 0; padding: 0; } .banner { position: relative; width: 100%; height: 100vh; background: url(images/bg.jpg); background-size: cover; background-position: bottom; } .banner .clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .banner .clouds img { position: absolute; bottom: 0; max-width: 100%; animation: cloud calc(8s * var(--i)) linear infinite; } @keyframes cloud { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } section { position: relative; padding: 75px 100px; } section h2 { font-size: 2.5em; padding-bottom: 20px; } section p { font-size: 18px; margin-top: 15px; }