纯Html CSS实现云雨动画效果-阿里云开发者社区

纯Html CSS实现云雨动画效果

2023-02-16 240

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 纯Html CSS实现云雨动画效果

纯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);
    }
}

纯Html CSS实现云雨动画效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

纯Html CSS实现云雨动画效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景