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技术。