css制作雪花
CSS 制作雪花效果
使用纯CSS可以创建简单的雪花动画效果，主要通过伪元素、动画和变换实现。
基础雪花结构
<div class="snowflake"></div>六角星雪花样式
.snowflake {
width: 10px;
height: 10px;
position: absolute;
background: white;
border-radius: 50%;
}
.snowflake::before,
.snowflake::after {
content: "";
position: absolute;
background: white;
}
.snowflake::before {
width: 10px;
height: 2px;
left: 0;
top: 4px;
}
.snowflake::after {
width: 2px;
height: 10px;
left: 4px;
top: 0;
}复杂分形雪花 通过旋转伪元素创建更复杂的效果：
.snowflake {
width: 0;
height: 0;
position: absolute;
}
.snowflake::before,
.snowflake::after {
content: "❄";
position: absolute;
color: white;
font-size: 16px;
}
.snowflake::before {
transform: rotate(60deg);
}
.snowflake::after {
transform: rotate(120deg);
}下落动画
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
.snowflake {
animation: fall 5s linear infinite;
animation-delay: calc(var(--delay) * 1s);
}多雪花实现 通过JavaScript动态生成多个不同位置的雪花：
document.addEventListener('DOMContentLoaded', () => {
const snowContainer = 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.setProperty('--delay', Math.random() * 5);
snowContainer.appendChild(flake);
}
});性能优化建议
- 使用
will-change: transform提升动画性能 - 减少同时显示的雪花数量（建议不超过100个）
- 使用
requestAnimationFrame替代CSS动画处理复杂场景
