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);
}
}优化细节
-
为不同雪花设置不同大小：
.snowflake:nth-child(odd) { width: 4px; height: 4px; } -
添加模糊效果增强真实感：
.snowflake { filter: blur(0.5px); } -
随机化动画延迟：
flake.style.animationDelay = `${Math.random() * 5}s`;
完整实现需要HTML容器：
<div class="snow-container"></div>
<script>createSnowflakes();</script>
