分享一个优化版网站下雪代码

JS代码

// 下雪效果
function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.innerHTML = '❄'; // 雪花的图标可以更改

    const size = Math.random() * 20 + 10; // 雪花大小范围
    let initialX = Math.random() * window.innerWidth;

    snowflake.style.fontSize = `${size}px`;
    snowflake.style.left = `${initialX}px`;

    document.body.appendChild(snowflake);

    setTimeout(() => {
        snowflake.remove();
    }, 10000); // 与动画时间一致
}

function snowfall() {
    setInterval(createSnowflake, 300); // 控制雪花的生成速度
}

snowfall();

CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: scroll;
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  position: relative; /* 为伪元素定位做准备，添加相对定位 */
}

body::before {
  content: "";
  position: fixed; /* 设置为固定定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
          135deg,
          hsl(170deg, 80%, 70%),
          hsl(190deg, 80%, 70%),
          hsl(250deg, 80%, 70%),
          hsl(320deg, 80%, 70%)
  );
  background-size: 200% 200%;
  animation: gradient-move 15s ease alternate infinite;
  z-index: -1; /* 将其层级设置得较低，避免遮挡页面内容 */
}

@keyframes gradient-move {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}