使用css3制作雪花效果

286 阅读1分钟

"使用 CSS3 制作雪花效果:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #000;
    }
    .snowflake {
      position: absolute;
      top: 0;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      animation: snowfall linear infinite;
    }
    @keyframes snowfall {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100vh);
      }
    }
  </style>
</head>
<body>
  <script>
    // 创建雪花
    function createSnowflake() {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake';
      snowflake.style.left = Math.random() * 100 + 'vw';
      document.body.appendChild(snowflake);
      setTimeout(() => {
        snowflake.remove();
      }, 10000);
    }

    // 控制雪花生成频率
    function startSnowfall() {
      setInterval(createSnowflake, 200);
    }

    // 页面加载完成后开始雪花效果
    window.addEventListener('load', startSnowfall);
  </script>
</body>
</html>

以上是使用 CSS3 制作雪花效果的代码。效果是在网页上出现随机下落的小圆点,模拟雪花的效果。通过 CSS3 的 animation 属性和 keyframes 关键帧动画,控制小圆点的下落动画。通过 JavaScript 动态生成小圆点,并设定其随机的位置。通过定时器控制小圆点的生成频率,并设定一定的时间后移除已经下落完毕的小圆点。

在页面加载完成后,调用 startSnowfall 函数开始雪花效果。该函数通过 setInterval 定时调用 createSnowflake 函数生成雪花小圆点,并设置每次生成的间隔时间为 200 毫秒。createSnowflake 函数会在页面中动态创建一个 div 元素,并添加 snowflake 类名,用于设置样式。同时,通过设置 left 属性来随机设定小圆点的水平位置。生成的小圆点会被添加到 body 元素中,并在 10000 毫秒后自动移除。

通过以上代码,我们可以在网页上实现一个简单的雪花效果。可以根据需要调整样式和参数,实现更加丰富多样的雪花效果。"