css制作流星

使用 CSS 制作流星效果

HTML 结构

<div class="meteor"></div>

CSS 关键实现

动画原理 通过关键帧动画控制流星的位移和透明度变化，配合旋转和尺寸调整实现拖尾效果。

基础样式

.meteor {
  position: absolute;
  width: 300px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  transform-origin: left center;
}

动画定义

@keyframes meteor {
  0% {
    transform: rotate(45deg) translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translateX(-1000px);
    opacity: 0;
  }
}

应用动画

.meteor {
  animation: meteor 3s linear infinite;
  top: 50vh;
  left: 50vw;
}

进阶优化方案

增加随机性 通过CSS变量控制不同流星的动画延迟和初始位置：

.meteor {
  --delay: calc(var(--i) * 0.5s);
  animation-delay: var(--delay);
  left: calc(100vw * var(--pos-x));
  top: calc(100vh * var(--pos-y));
}

多流星系统 HTML调整为多个元素：

<div class="meteor" style="--i:1;--pos-x:0.8;--pos-y:0.1"></div>
<div class="meteor" style="--i:2;--pos-x:0.7;--pos-y:0.3"></div>

视觉效果增强 添加发光效果和颜色变化：

.meteor {
  box-shadow: 0 0 10px 1px #fff;
  background: linear-gradient(to right, 
    rgba(255,255,255,0), 
    rgba(200,240,255,0.8));
}

性能优化建议

使用will-change属性提升动画性能：

.meteor {
  will-change: transform, opacity;
}

考虑使用transform: translate3d()启用硬件加速：

@keyframes meteor {
  100% {
    transform: rotate(45deg) translate3d(-1000px, 0, 0);
  }
}

通过调整动画持续时间和缓动函数可以创建不同速度的流星效果，animation-timing-function: cubic-bezier()能实现更自然的加速度效果。