纯css雪花制作
纯CSS雪花制作方法
使用CSS的伪元素和动画效果可以创建出逼真的雪花效果。以下是几种实现方式：
基础雪花形状
通过旋转多个线性渐变创建六边形雪花：
.snowflake {
width: 20px;
height: 20px;
background:
linear-gradient(0deg, transparent 40%, white 40%, white 60%, transparent 60%),
linear-gradient(60deg, transparent 40%, white 40%, white 60%, transparent 60%),
linear-gradient(120deg, transparent 40%, white 40%, white 60%, transparent 60%);
border-radius: 50%;
}动画雪花飘落
添加下落和摇摆动画：
@keyframes fall {
to { transform: translateY(100vh) rotate(360deg); }
}
@keyframes sway {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(20px); }
}
.snowflake {
animation:
fall 5s linear infinite,
sway 3s ease-in-out infinite;
position: absolute;
}多雪花随机分布
使用CSS变量控制多个雪花：
<style>
:root {
--snow-count: 20;
}
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}
.snowflake {
position: absolute;
opacity: 0.8;
}
</style>
<div class="snow-container">
<!-- 通过JavaScript动态生成更好 -->
<div class="snowflake" style="left:10%; animation-delay:0s"></div>
<div class="snowflake" style="left:30%; animation-delay:1s"></div>
<!-- 更多雪花... -->
</div>进阶复杂雪花
使用box-shadow创建更复杂的形状：
.snowflake {
width: 2px;
height: 2px;
border-radius: 50%;
box-shadow:
5px 8px 0 0 white,
-5px 8px 0 0 white,
5px -8px 0 0 white,
-5px -8px 0 0 white,
8px 5px 0 0 white,
-8px 5px 0 0 white,
8px -5px 0 0 white,
-8px -5px 0 0 white;
}性能优化建议
- 使用transform代替top/left动画
- 减少同时显示的雪花数量（建议不超过50个）
- 对旧浏览器添加-webkit前缀
- 考虑使用will-change属性提升性能
这些方法可以组合使用，通过调整动画时间、延迟和大小变化，能创造出更自然的雪景效果。实际项目中建议配合少量JavaScript实现随机位置和大小，但核心视觉效果完全可以用CSS实现。
