当前位置：首页 > CSS

css制作流星

2026-01-28 01:57:46CSS

使用CSS制作流星效果

通过CSS动画和关键帧技术可以模拟流星划过天空的效果。以下是实现流星效果的几种方法：

基础流星效果

创建一个简单的流星元素，利用animation属性实现移动和淡出效果：

css制作流星

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

.meteor {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  transform: rotate(-45deg);
  animation: meteor-fall 2s linear infinite;
}

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

带尾迹的流星效果

添加伪元素创建更真实的尾迹效果：

css制作流星

.meteor::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0));
  transform: rotate(-45deg) translateX(-50px);
}

随机流星效果

使用CSS变量和JavaScript实现随机位置和大小的流星：

document.querySelectorAll('.meteor').forEach(meteor => {
  meteor.style.setProperty('--start-x', Math.random() * 100 + 'vw');
  meteor.style.setProperty('--start-y', Math.random() * 100 + 'vh');
  meteor.style.setProperty('--size', Math.random() * 3 + 1 + 'px');
  meteor.style.animationDuration = Math.random() * 2 + 1 + 's';
});

.meteor {
  position: fixed;
  width: 100px;
  height: var(--size);
  background: linear-gradient(to right, white, transparent);
  transform: rotate(-45deg);
  top: var(--start-y);
  left: var(--start-x);
  animation: meteor-fall linear infinite;
}

@keyframes meteor-fall {
  to {
    transform: translateX(500px) translateY(500px) rotate(-45deg);
    opacity: 0;
  }
}

星空背景配合流星

为增强效果，可以添加星空背景：

body {
  background: 
    radial-gradient(1px 1px at 10% 20%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 30% 50%, white 1%, transparent 1%),
    /* 更多星星 */
    #000;
  background-size: 200px 200px;
}

这些方法可以组合使用，通过调整动画时间、旋转角度和渐变效果，创造出各种不同的流星视觉效果。