css制作星星掉落
CSS 制作星星掉落效果
使用纯CSS可以创建简单的星星掉落动画效果，通过关键帧动画和伪元素实现。以下是具体实现方法：
基础HTML结构
<div class="star-fall"></div>CSS动画代码
.star-fall {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.star-fall::before {
content: "✦";
position: absolute;
color: white;
font-size: 20px;
top: -20px;
left: 10%;
animation: fall 3s linear infinite;
}
.star-fall::after {
content: "✦";
position: absolute;
color: white;
font-size: 15px;
top: -15px;
left: 30%;
animation: fall 2.5s linear infinite 0.5s;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}增强版多星星效果
如需创建多个随机星星，可以添加更多伪元素或使用JavaScript动态生成：
/* 添加更多伪元素 */
.star-fall span {
position: absolute;
display: block;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
animation: fall linear infinite;
}
/* 随机动画设置 */
.star-fall span:nth-child(1) {
left: 20%;
animation-duration: 4s;
}
.star-fall span:nth-child(2) {
left: 40%;
animation-duration: 3s;
animation-delay: 1s;
}
/* 继续添加更多... */高级技巧
- 使用box-shadow创建更复杂的星星形状
- 添加animation-timing-function调整下落速度曲线
- 结合transform: scale()实现大小变化
- 使用filter: blur()添加发光效果
性能优化
- 尽量使用transform和opacity属性，这些属性不会触发重排
- 避免过多DOM元素，可以使用伪元素代替
- 对不需要交互的元素设置will-change: transform
这种方法不需要JavaScript即可实现基础效果，适合简单的装饰性动画。如需更复杂的效果，可以考虑使用Canvas或WebGL技术。
