纯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，性能优化良好，适合装饰性场景。可以通过调整参数生成不同复杂度的雪花图案。
