纯H5+CSS3实现下雨特效

前端-小苗00

已于 2022-09-03 09:07:37 修改

阅读量721

点赞数 4

文章标签： css3 前端 css

于 2022-07-28 22:55:20 首次发布

本文链接：https://blog.csdn.net/weixin_58459702/article/details/126045817

版权

下面这是效果图：

HTML部分代码：

为方便大家复制：

        <div class="container">
            <div class="rain">
                <span style="--speed:11"></span>
                <span style="--speed:12"></span>
                <span style="--speed:15"></span>
                <span style="--speed:17"></span>
                <span style="--speed:18"></span>
                <span style="--speed:13"></span>
                <span style="--speed:15"></span>
                <span style="--speed:19"></span>
                <span style="--speed:20"></span>
                <span style="--speed:10"></span>
                <span style="--speed:18"></span>
                <span style="--speed:16"></span>
                <span style="--speed:14"></span>
                <span style="--speed:11"></span>
                <span style="--speed:12"></span>
                <span style="--speed:17"></span>
                <span style="--speed:14"></span>
                <span style="--speed:27"></span>
                <span style="--speed:12"></span>
                
            </div>

CSS3部分代码：

为了大家方便复制：

body{
    background-color: #212121;
/*     display: flex意思是弹性布局， */
    display: flex;
    /* justify-content是水平布局  项目在水平方向上居中 */
    justify-content: center;
    /* 设置垂直方向对齐方式 */
    align-items: center;
    width: 100%; 
    /* 1vh=浏览器视窗的1% */
    height: 90vh;
}
/* 云的底座第一部分 */
.container{
    position: relative;
    width: 100px;height: 30px;
    background-color: #fff;
    border-radius: 100px;
}
.container::before{
    content:'';
    position: absolute;
    top: -20px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    /* 利用盒子阴影制作右边云彩 */
    box-shadow: 40px 0 0 20px #fff;
}
.rain{
    position: relative;
    display: flex;
    z-index: 1;
}
.rain span{
    position: relative;
    width: 8px;height: 8px;
    background: #fff;
    margin: 10px 2px;
    border-radius: 50%;
    /* 动画匀速运行 且自动循环 */
    animation: rain linear infinite;
    /* 设置下雨的速度 */
    animation-duration: calc(15s/var(--speed));
    /* 原点位置 */
    transform-origin:bottom;
}
@keyframes rain{
    0%{
        transform: translateY(0);
    }
    70%{
        transform: translateY(100px) scale(1);
    }

    100%{
        transform: translateY(100px) scale(0);
    }