给网站添加一个下雪花特效的html代码-玖伴云

展示

请切换站点为夜间模式，更加清楚

要在网站上添加一个下雪特效，您可以使用以下HTML和CSS代码。这段代码会在网页上创建一个简单的下雪效果

注意

此代码仅为基础代码，需要你结合自己的站点进行修改

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下雪特效</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #333;
  }

  .snowflake {
    position: fixed;
    top: -10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1000;
  }
</style>
</head>
<body>

<script>
  // 生成一个雪花
  function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.style.left = Math.random() * 100 + 'vw';
    snowflake.style.animationName = 'fall';
    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 随机下落时间
    snowflake.style.animationTimingFunction = 'linear';
    snowflake.style.animationIterationCount = 'infinite';
    snowflake.style.borderRadius = '50%';
    snowflake.style.background = '#FFF';
    snowflake.style.opacity = Math.random();
    snowflake.style.transform = 'scale(' + Math.random() + ')';
    snowflake.style.width = Math.random() * 10 + 'px';
    snowflake.style.height = snowflake.style.width;

    document.body.appendChild(snowflake);

    // 雪花下落完成后移除
    snowflake.addEventListener('animationend', function() {
      snowflake.parentElement.removeChild(snowflake);
    });
  }

  // 每隔一段时间生成一个雪花
  setInterval(createSnowflake, 300);

  // 添加动画
  const style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    @keyframes fall {
      0% { top: -10px; }
      100% { top: 100%; }
    }
  `;
  document.head.appendChild(style);
</script>

</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END