纯Html CSS实现云雨动画效果

最新推荐文章于 2024-04-21 22:00:19 发布

爱躺平的威威

最新推荐文章于 2024-04-21 22:00:19 发布

阅读量374

点赞数 1

分类专栏：前端练手小项目文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_53564801/article/details/127850850

版权

前端练手小项目专栏收录该内容

3 篇文章 1 订阅

订阅专栏

纯HTML和CSS实现云雨动画效果，动态效果由CSS实现，主要有两个动画实现

代码下面自取🖖

🎈效果如下

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud & Rain Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="cloud"></div>
        <div class="rain">
            <span style="--i:11"></span>
            <span style="--i:12"></span>
            <span style="--i:10"></span>
            <span style="--i:14"></span>
            <span style="--i:18"></span>
            <span style="--i:16"></span>
            <span style="--i:19"></span>
            <span style="--i:20"></span>
            <span style="--i:19"></span>
            <span style="--i:10"></span>
            <span style="--i:16"></span>
            <span style="--i:14"></span>
            <span style="--i:18"></span>
            <span style="--i:11"></span>
            <span style="--i:13"></span>
            <span style="--i:15"></span>
            <span style="--i:12"></span>
            <span style="--i:11"></span>
            <span style="--i:17"></span>
            <span style="--i:13"></span>
        </div>
    </div>
</body>
</html>

CSS代码如下

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #181c1f;
}

.container{
    position: relative;
    height: 400px;
    border-bottom: 2px solid #fff;
}

.cloud{
    position: relative;
    top: 50px;
    width: 320px;
    height: 100px;
    background: #fff;
    border-radius: 100px;
}

.cloud::before{
    content: '';
    position: absolute;
    top: -50px;
    left: 40px;
    width:110px;
    height: 110px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 90px 0 0 30px #fff;
}
.rain{
    position: relative;
    display: flex;
    z-index: 1;
    padding: 0 20px;
}
.rain span{
    position: relative;
    bottom: 10px;
    width: 10px;
    height: 10px;
    background-color: rgb(164, 236, 252);
    margin: 0 2px;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-duration: calc(15s / var(--i));
    transform-origin: bottom;
}

@keyframes animate{
    0%{
        transform: translateY(0) scale(1);
    }
    70%{
        transform: translateY(300px) scale(1);
    }
    100%{
        transform: translateY(300px) scale(0);
    }
}