css制作雪花

2026-01-08 20:59:06CSS

CSS 制作雪花效果

使用纯CSS可以创建简单的雪花动画效果，主要通过伪元素、动画和变换实现。

基础雪花结构

<div class="snowflake"></div>

六角星雪花样式

.snowflake {
  width: 10px;
  height: 10px;
  position: absolute;
  background: white;
  border-radius: 50%;
}

.snowflake::before,
.snowflake::after {
  content: "";
  position: absolute;
  background: white;
}

.snowflake::before {
  width: 10px;
  height: 2px;
  left: 0;
  top: 4px;
}

.snowflake::after {
  width: 2px;
  height: 10px;
  left: 4px;
  top: 0;
}

复杂分形雪花 通过旋转伪元素创建更复杂的效果：

.snowflake {
  width: 0;
  height: 0;
  position: absolute;
}

.snowflake::before,
.snowflake::after {
  content: "❄";
  position: absolute;
  color: white;
  font-size: 16px;
}

.snowflake::before {
  transform: rotate(60deg);
}

.snowflake::after {
  transform: rotate(120deg);
}

下落动画

@keyframes fall {
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}

.snowflake {
  animation: fall 5s linear infinite;
  animation-delay: calc(var(--delay) * 1s);
}

多雪花实现 通过JavaScript动态生成多个不同位置的雪花：

document.addEventListener('DOMContentLoaded', () => {
  const snowContainer = document.querySelector('.snow-container');

  for(let i=0; i<50; i++) {
    const flake = document.createElement('div');
    flake.className = 'snowflake';
    flake.style.left = `${Math.random() * 100}vw`;
    flake.style.setProperty('--delay', Math.random() * 5);
    snowContainer.appendChild(flake);
  }
});

性能优化建议