用css画一个动态的流星

可以使用CSS3的animation属性来实现一个动态的流星效果。以下是一个简单的示例代码：

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

.meteor {
  width: 10px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, white);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  animation: meteor 2s linear infinite;
}

@keyframes meteor {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(100%, 100%);
  }
}

这段代码会创建一个宽度为10像素、高度为20像素的流星，使用线性渐变来实现流星的尾巴效果。流星的位置使用绝对定位来实现，初始位置在顶部，然后使用动画让流星沿着斜线移动，最终消失在底部。使用无限循环的动画让流星一直出现在页面上。