纯css雪花制作

纯CSS雪花制作方法

使用CSS的伪元素和动画特性可以创建出逼真的雪花效果。以下是几种实现方式：

基础雪花形状

通过旋转多个线性渐变或伪元素创建六边形雪花结构：

.snowflake {
  width: 20px;
  height: 20px;
  position: relative;
}
.snowflake::before, .snowflake::after {
  content: "";
  position: absolute;
  background: white;
}
.snowflake::before {
  width: 2px;
  height: 100%;
  left: 9px;
}
.snowflake::after {
  width: 100%;
  height: 2px;
  top: 9px;
}

复杂分形结构

添加旋转伪元素模拟冰晶分支：

.snowflake {
  /* 基础样式同上 */
  transform: rotate(30deg);
}
.snowflake span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}
/* 六个分支定位 */
.snowflake span:nth-child(1) { top: -10px; left: 7px; }
.snowflake span:nth-child(2) { top: 7px; right: -10px; }
/* 其他四个分支类似定位 */

下落动画

结合关键帧动画实现飘落效果：

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

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

多雪花场景

通过CSS变量批量创建不同样式的雪花：

<div class="snow-container">
  <div class="snowflake" style="--size: 5px; --delay: 0"></div>
  <!-- 多个不同参数的雪花 -->
</div>

<style>
.snowflake {
  width: var(--size);
  height: var(--size);
  /* 其他样式 */
}
</style>

进阶优化技巧

• 使用filter: blur(1px)增加朦胧感
• 通过opacity变化模拟闪烁效果
• 结合transform: scale()实现远近大小差异
• 使用CSS变量控制动画速度和方向

这种方法无需JavaScript，性能优化良好，适合装饰性场景。可以通过调整参数生成不同复杂度的雪花图案。