css制作流星

CSS 制作流星效果

通过CSS动画和伪元素可以模拟流星划过天空的效果。以下是实现方法：

HTML结构

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

CSS样式

.meteor {
  position: absolute;
  top: 50px;
  left: -100px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px white;
  animation: meteor-fly 3s linear infinite;
}

.meteor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  transform: rotate(-45deg);
  transform-origin: left center;
}

@keyframes meteor-fly {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) translateY(500px);
    opacity: 0;
  }
}

调整流星效果

修改动画时间可以改变流星速度：

animation: meteor-fly 2s linear infinite; /* 更快的流星 */

修改渐变长度调整尾巴长短：

width: 200px; /* 更短的尾巴 */

多个流星效果

创建多个不同时间和位置的流星：

<div class="meteor meteor-1"></div>
<div class="meteor meteor-2"></div>
<div class="meteor meteor-3"></div>

.meteor-1 {
  top: 20%;
  animation-delay: 0s;
}

.meteor-2 {
  top: 40%;
  animation-delay: 1.5s;
}

.meteor-3 {
  top: 70%;
  animation-delay: 3s;
}

流星颜色修改

通过修改box-shadow和渐变颜色改变流星外观：

box-shadow: 0 0 10px 2px cyan;
background: linear-gradient(to right, rgba(0,255,255,1), rgba(0,255,255,0));