当前位置：首页 > CSS

纯css雪花制作

2026-04-01 18:31:01CSS

纯CSS雪花制作方法

使用伪元素和旋转动画

通过CSS的伪元素（::before和::after）创建雪花的多个分支，结合transform属性和rotate动画实现旋转效果。

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  color: white;
  animation: spin 8s linear infinite;
}

.snowflake::before, .snowflake::after {
  content: "❄";
  position: absolute;
  left: 0;
  top: 0;
}

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

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

多分支复杂雪花

通过多个伪元素叠加和不同角度的旋转，实现更复杂的六角雪花形状。

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

.snowflake::before, .snowflake::after,
.snowflake span::before, .snowflake span::after {
  content: "";
  position: absolute;
  background: white;
  width: 2px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
}

.snowflake::before { transform: translate(-50%, -50%) rotate(0deg); }
.snowflake::after { transform: translate(-50%, -50%) rotate(60deg); }
.snowflake span::before { transform: translate(-50%, -50%) rotate(120deg); }
.snowflake span::after { transform: translate(-50%, -50%) rotate(180deg); }

飘落动画效果

为雪花添加垂直位移和透明度变化的动画，模拟自然飘落效果。

@keyframes snowfall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.snowflake {
  animation: snowfall 10s linear infinite;
  animation-delay: random(5s);
}

多雪花随机分布

使用JavaScript动态生成多个雪花元素，并随机设置位置、大小和动画延迟。

纯css雪花制作

document.addEventListener('DOMContentLoaded', function() {
  const snowflakes = 30;
  const container = document.body;

  for (let i = 0; i < snowflakes; i++) {
    const flake = document.createElement('div');
    flake.className = 'snowflake';
    flake.style.left = `${Math.random() * 100}vw`;
    flake.style.fontSize = `${Math.random() * 10 + 5}px`;
    flake.style.animationDuration = `${Math.random() * 5 + 5}s`;
    flake.style.animationDelay = `${Math.random() * 5}s`;
    container.appendChild(flake);
  }
});