css雪花制作教程

CSS雪花制作方法

使用CSS的@keyframes动画和伪元素创建雪花效果，通过调整大小、位置和透明度实现逼真的飘落动画。

HTML结构

<div class="snowflakes"></div>

CSS样式

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  color: white;
  font-size: 1em;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-10%) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(10vw) rotate(360deg);
    opacity: 0;
  }
}

JavaScript动态生成雪花

通过JavaScript动态创建多个雪花元素，并随机设置它们的初始位置、大小和动画持续时间。

document.addEventListener('DOMContentLoaded', function() {
  const snowflakesContainer = document.querySelector('.snowflakes');
  const snowflakeCount = 50;

  for (let i = 0; i < snowflakeCount; i++) {
    const snowflake = document.createElement('div');
    snowflake.className = 'snowflake';
    snowflake.innerHTML = '❄';

    const size = Math.random() * 0.8 + 0.2;
    const startX = Math.random() * 100;
    const duration = Math.random() * 10 + 5;

    snowflake.style.left = `${startX}vw`;
    snowflake.style.fontSize = `${size}em`;
    snowflake.style.animationDuration = `${duration}s`;
    snowflake.style.animationDelay = `${Math.random() * 5}s`;

    snowflakesContainer.appendChild(snowflake);
  }
});

优化技巧

调整雪花的形状和透明度可以增强真实感。使用::before和::after伪元素创建更复杂的雪花形状。

.snowflake::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, white 30%, transparent 70%);
  border-radius: 50%;
  filter: blur(1px);
}

性能考虑

使用will-change属性优化动画性能，并限制雪花数量以避免过度消耗资源。

.snowflake {
  will-change: transform, opacity;
}

响应式调整

通过媒体查询减少移动设备上的雪花数量，确保在不同设备上都能流畅运行。

@media (max-width: 768px) {
  .snowflake {
    font-size: 0.8em;
  }
}