js实现流星

实现流星效果的基本思路

使用JavaScript和CSS创建一个流星效果，主要涉及动态创建元素、动画控制以及随机位置生成。以下是具体实现方法：

创建HTML结构

在HTML中准备一个容器元素用于放置流星：

<div id="meteor-container"></div>

添加基础CSS样式

为流星和容器添加基本样式：

#meteor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.meteor {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  transform-origin: left center;
  border-radius: 100%;
  filter: drop-shadow(0 0 6px #fff);
}

JavaScript实现逻辑

function createMeteor() {
  const container = document.getElementById('meteor-container');
  const meteor = document.createElement('div');
  meteor.className = 'meteor';

  // 随机生成起始位置（屏幕左侧）
  const startY = Math.random() * window.innerHeight;
  const angle = 15 + Math.random() * 30; // 流星角度范围15-45度

  // 设置初始位置和旋转
  meteor.style.left = '0px';
  meteor.style.top = `${startY}px`;
  meteor.style.transform = `rotate(${angle}deg)`;

  // 计算动画持续时间（1-3秒随机）
  const duration = 1 + Math.random() * 2;
  meteor.style.animation = `shooting ${duration}s linear forwards`;

  container.appendChild(meteor);

  // 动画结束后移除元素
  meteor.addEventListener('animationend', () => {
    meteor.remove();
  });
}

// 添加流星动画关键帧
const style = document.createElement('style');
style.textContent = `
  @keyframes shooting {
    to {
      transform: rotate(${angle}deg) translateX(${window.innerWidth * 1.5}px);
    }
  }
`;
document.head.appendChild(style);

// 每隔1-3秒创建一个新流星
setInterval(createMeteor, 1000 + Math.random() * 2000);

// 初始创建几个流星
for(let i = 0; i < 3; i++) {
  setTimeout(createMeteor, i * 800);
}

增强视觉效果

为了使流星效果更真实，可以添加尾迹效果：

// 修改createMeteor函数
function createMeteor() {
  // ...前面的代码不变...

  // 添加尾迹元素
  const trail = document.createElement('div');
  trail.className = 'meteor-trail';
  meteor.appendChild(trail);

  // 添加CSS
  const style = document.createElement('style');
  style.textContent = `
    .meteor-trail {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, 
        rgba(255,255,255,0.8) 0%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%);
      animation: trailFade ${duration}s linear forwards;
    }
    @keyframes trailFade {
      to { opacity: 0; }
    }
  `;
  document.head.appendChild(style);
}

响应式调整

确保窗口大小改变时效果仍然正常：

window.addEventListener('resize', () => {
  document.querySelectorAll('.meteor').forEach(meteor => {
    meteor.style.animation = 'none';
    setTimeout(() => {
      meteor.style.animation = '';
    }, 10);
  });
});

性能优化

为避免创建过多DOM元素影响性能，可以设置最大流星数量：

const MAX_METEORS = 10;

function createMeteor() {
  if(document.querySelectorAll('.meteor').length >= MAX_METEORS) return;
  // ...原有代码...
}

这套实现方案创建了随机位置、随机角度的流星效果，带有渐变动画和尾迹效果，且考虑了性能优化和响应式设计。