css制作雪花

使用CSS制作雪花效果

通过CSS的伪元素、动画和变换属性可以创建逼真的雪花效果。以下是实现方法：

基础雪花形状

使用::before和::after伪元素创建六边形结构：

.snowflake {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}
.snowflake::before, .snowflake::after {
  content: "";
  position: absolute;
  background: white;
}
.snowflake::before {
  width: 8px;
  height: 2px;
  left: -1px;
  top: 2px;
}
.snowflake::after {
  width: 2px;
  height: 8px;
  left: 2px;
  top: -1px;
}

添加分支细节

通过旋转伪元素创建完整雪花：

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

下落动画

使用关键帧动画实现飘落效果：

@keyframes snowfall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}
.snowflake {
  animation: snowfall 5s linear infinite;
}

多雪花场景

通过JavaScript动态生成多个雪花：

function createSnowflakes() {
  const container = 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.animationDuration = `${5 + Math.random() * 5}s`;
    flake.style.opacity = Math.random();
    container.appendChild(flake);
  }
}

优化细节

1. 为不同雪花设置不同大小：

   .snowflake:nth-child(odd) {
   width: 4px;
   height: 4px;
   }

2. 添加模糊效果增强真实感：

   .snowflake {
   filter: blur(0.5px);
   }

3. 随机化动画延迟：

   flake.style.animationDelay = `${Math.random() * 5}s`;

完整实现需要HTML容器：

<div class="snow-container"></div>
<script>createSnowflakes();</script>