为网站添加一个雪花效果的背景
熊猫 管理员 已认证 10月前

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>雪花飘落效果</title>
  <style>
    body {
      background-color: rgba(0, 0, 0, 0.8); /* 设置半透明黑色背景 */
      overflow: hidden; /* 防止页面出现滚动条 */
    }

    #snowfall {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .snowflake {
      position: absolute;
      display: block;
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="snowfall"></div>

  <script>
    var snowflakes = []; // 存储当前所有的雪花

    function createSnowFlake() {
      var snowFlake = document.createElement("div");
      snowFlake.className = "snowflake";

      // 为每个雪花设置随机位置和大小
      snowFlake.style.left = Math.random() * window.innerWidth + "px";
      snowFlake.style.top = "-10px";
      snowFlake.style.fontSize = Math.random() * 10 + "px";

      // 将雪花添加到背景中
      document.querySelector("#snowfall").appendChild(snowFlake);

      // 将雪花和其动画状态存储在数组中
      snowflakes.push({
        element: snowFlake,
        x: parseFloat(snowFlake.style.left),
        y: -10,
        size: parseFloat(snowFlake.style.fontSize),
        speed: Math.random() * 2 + 1
      });
    }

    function moveSnowFlakes() {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowFlake = snowflakes[i];
        snowFlake.y += snowFlake.speed;

        // 更新雪花的位置
        snowFlake.element.style.transform = "translate(" + snowFlake.x + "px, " + snowFlake.y + "px)";

        // 如果雪花超出了页面底部,就将其从背景中移除并从数组中删除
        if (snowFlake.y > window.innerHeight) {
          snowFlake.element.parentNode.removeChild(snowFlake.element);
          snowflakes.splice(i--, 1); // 将当前雪花从数组中删除
        }
      }

      requestAnimationFrame(moveSnowFlakes); // 循环调用自身,实现雪花的动画效果
    }

    // 控制雪花生成的频率和数量
    setInterval(function() {
      for (var i = 0; i < 3; i++) {
        createSnowFlake();
      }
    }, 200);

    moveSnowFlakes(); // 开始雪花的动画效果
  </script>
</body>

</html>
最新回复 (0)