用html+css方式写出云朵效果

最新推荐文章于 2024-06-29 14:19:53 发布

Null_Robot

最新推荐文章于 2024-06-29 14:19:53 发布

阅读量956

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/Null_Robot/article/details/107082084

版权

效果图如下
在这里插入图片描述

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