无聊整了个下雨js-优快云博客

本文链接：https://blog.youkuaiyun.com/insgo/article/details/134850727

本文详细描述了如何使用HTML、CSS和JavaScript在网页上创建一个动态的下雨效果，包括随机生成雨滴位置、动画移动以及水花效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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>Document</title>
  </head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      position: relative;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
    }
    @keyframes rain {
      from {
        tpo: 0;
      }
      to {
        top: calc(100% - 25px);
        transform: translateY(-100%);
      }
    }
    .rain-div {
      /* animation: rain 1000ms infinite ease-in; */
    }
  </style>
  <body>
    <script>
      var boxW = document.body.offsetWidth,
        boxH = document.body.offsetHeight,
        l = 20,
        t = 40,
        rw = 5,
        rh = 18,
        initNum = 30,
        waterW = 20,
        waterH = 20;
      var col = boxW / l,
        row = 100 / rh;
      let randArr = [],
        rainDivs = [];

      function getRand() {
        const randCol = Math.floor(Math.random() * col);
        const randRow = Math.floor(Math.random() * row);
        return {randCol, randRow};
      }
      function pushRand() {
        const r = getRand();
        const randCol = r.randCol;
        const randRow = r.randRow;
        if (
          !randArr.some(
            (item) => item.randCol == randCol && item.randRow == randRow
          )
        ) {
          randArr.push({randCol, randRow});
        } else {
          pushRand();
        }
      }
      for (let i = 0; i < initNum; i++) {
        pushRand();
      }
      function createRain(col, row) {
        let rainDiv = document.createElement('div');
        rainDiv.className = 'rain-div';
        rainDiv.initTop = row * t;
        Object.assign(rainDiv.style, {
          position: 'absolute',
          top: row * t + 'px',
          left: col * l + 'px',
          width: rw + 'px',
          height: rh + 'px',
          backgroundColor: 'rgba(255,255,255,0.4)',
          borderRadius: '6px'
        });
        rainDivs.push(rainDiv);
      }
      randArr.forEach((rand) => {
        createRain(rand.randCol, rand.randRow);
      });
      rainDivs.forEach((div, index) => {
        setTimeout(() => {
          document.body.appendChild(div);
          let curTop = div.offsetTop;
          let maxHeight = boxH - div.initTop - div.offsetHeight;
          setInterval(() => {
            let dis = curTop / 100 + 1;

            if (curTop < maxHeight) {
              curTop = curTop + dis;
            } else {
              createWaterFlower(div.offsetLeft - waterW / 2, boxH - waterH);
              changeRainL(div);
              curTop = div.offsetTop;
              maxHeight = boxH - div.initTop - div.offsetHeight;
            }
            div.style.transform = `translateY(${curTop}px)`;
          }, 1);
        }, 100 * index);
      });

      function createWaterFlower(left, top) {
        let div = document.createElement('div');
        Object.assign(div.style, {
          width: waterW + 'px',
          height: waterH + 'px',
          position: 'absolute',
          left: left + 'px',
          top: top + 'px',
          backgroundColor: 'rgba(255,255,255,0.2)',
          borderRadius: '50%'
        });
        document.body.appendChild(div);
        setTimeout(() => {
          div.remove();
        }, 200);
      }

      function changeRainL(rainDiv) {
        const r = getRand();
        Object.assign(rainDiv.style, {
          top: r.randRow * t + 'px',
          left: r.randCol * l + 'px'
        });
      }
    </script>
  </body>
</html>