前端三件套实现一个雨天动画效果

效果展示

代码实现

html

html 复制代码

<div class="rain front-row"></div> 
<div class="rain back-row"></div>

front-row和back-row，分别为前景和背景雨滴容器，进行不同的样式和动画设置，可以增加场景的层次感。

css

背景设置

css 复制代码

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: url("bg.jpg") fixed center;
}
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

通过background属性设置了一张固定在页面中心的背景图片bg.jpg，并使用body::after伪元素在背景上添加了一层半透明的黑色遮罩，模拟雨天阴暗的氛围。

雨滴容器

css 复制代码

.rain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.rain.back-row {
    display: block;
    z-index: 1;
    bottom: 60px;
    opacity: 0.5;
}

.rain类定义了雨滴容器的基本样式，使其覆盖整个页面并位于其他元素之上（z-index: 2）。对于背景雨滴（.rain.back-row），设置了较低的不透明度（opacity: 0.5）和底部偏移（bottom: 60px），以营造出距离感。

雨滴下落动画

css 复制代码

.drop {
    position: absolute;
    bottom: 100%;
    width: 15px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}

@keyframes drop {
    0% {
      transform: translateY(0vh);
    }
    75% {
      transform: translateY(90vh);
    }
    100% {
      transform: translateY(90vh);
    }
}

.drop类代表单个雨滴，设置了雨滴的尺寸和初始位置（bottom: 100%，即从页面顶部之外开始下落）。通过@keyframes drop定义了雨滴的下落动画，使其在 0.5 秒内从顶部下落至页面 90% 的位置。

雨痕效果

css 复制代码

.rain-streak {
    width: 1px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.35)
    );
    animation: rain-streak 0.5s linear infinite;
}

@keyframes rain-streak {
    0% {
      opacity: 1;
    }
    65% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}

.rain-streak类创建了雨滴下落时的雨痕效果，使用线性渐变实现从透明到半透明的过渡。通过@keyframes rain-streak定义动画，使其在下落过程中先显示一段时间，然后逐渐消失，模拟雨滴下落的动态过程。

雨滴落地涟漪

css 复制代码

.ripple {
    display: block;
    width: 15px;
    height: 10px;
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 1;
    transform: scale(0);
    animation: ripple 0.5s linear infinite;
}

@keyframes ripple {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    80% {
      opacity: 1;
      transform: scale(0);
    }
    90% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.5);
    }
}

.ripple类用于创建雨滴落地时的涟漪效果，通过设置圆形边框和@keyframes ripple定义的动画，使其从无到有、从小到大并逐渐消失，增强了动画的真实感。

JavaScrip

获取随机数

javascript 复制代码

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

生成指定范围内的随机整数，为后续动态生成雨滴时设置随机的位置、动画延迟和持续时间提供了基础。

雨滴生成

javascript 复制代码

function rain() {
    const rainElements = document.querySelectorAll(".rain");
    rainElements.forEach((rain) => {
      rain.textContent = "";
    });

    let increment = 0;
    const createDrop = (side, increment, spacing, delaySeed) => {
      return `<div class="drop" style="${side}: ${increment}%; bottom: ${
        spacing + 99
      }%; animation-delay: 0.${delaySeed}s; animation-duration: 0.5${delaySeed}s;">
                <div class="rain-streak" style="animation-delay: 0.${delaySeed}s; animation-duration: 0.5${delaySeed}s;"></div>
                <div class="ripple" style="animation-delay: 0.${delaySeed}s; animation-duration: 0.5${delaySeed}s;"></div>
            </div>`;
    };

    let drops = "",
      backDrops = "";

    while (increment < 100) {
      const delaySeed = getRandomInt(1, 100);
      const spacing = getRandomInt(2, 5);
      increment += spacing;
      drops += createDrop("left", increment, spacing, delaySeed);
      backDrops += createDrop("right", increment, spacing, delaySeed);
    }

    const frontRow = document.querySelector(".rain.front-row");
    frontRow.insertAdjacentHTML("beforeend", drops);

    const backRow = document.querySelector(".rain.back-row");
    backRow.insertAdjacentHTML("beforeend", backDrops);
}

最后，通过querySelector获取前景和背景雨滴容器，并将生成的雨滴 HTML 结构插入其中，相邻雨滴间隔为[2,5]中随机获取，从左往右生成铺满屏幕宽度的雨滴作为前景，从右往左生成铺满屏幕宽度的雨滴作为后景。

源码

源码已上传到gitee，有兴趣的也可以到这里看看：gitee.com/zheng_yongt...

🌟觉得有点意思的可以点个star~
🖊有什么问题或错误可以指出，欢迎pr~
📬有什么想要实现的功能或想法可以联系我~

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送加群还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。