纯H5+CSS3实现下雨特效

下面这是效果图 ：

 HTML部分代码：

为方便大家复制：

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