当前位置：首页 > JavaScript

js实现星星闪烁的效果

2026-04-05 01:05:41JavaScript

实现星星闪烁效果的方法

使用CSS动画结合JavaScript

通过CSS定义闪烁动画，JavaScript动态添加星星元素并应用动画。

js实现星星闪烁的效果

.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

function createStars() {
  const container = document.getElementById('star-container');
  const starCount = 100;

  for (let i = 0; i < starCount; i++) {
    const star = document.createElement('div');
    star.className = 'star';

    // 随机位置和大小
    const size = Math.random() * 3 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;

    // 随机动画延迟
    star.style.animationDelay = `${Math.random() * 2}s`;

    container.appendChild(star);
  }
}

window.onload = createStars;

使用Canvas绘制闪烁星星

通过Canvas实现更灵活的星星效果，包括不同形状和大小的星星。

js实现星星闪烁的效果

const canvas = document.getElementById('star-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const stars = Array(200).fill().map(() => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  size: Math.random() * 3 + 1,
  brightness: Math.random(),
  speed: Math.random() * 0.05
}));

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  stars.forEach(star => {
    star.brightness += star.speed;
    if (star.brightness > 1 || star.brightness < 0) {
      star.speed = -star.speed;
    }

    ctx.globalAlpha = star.brightness;
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
    ctx.fill();
  });

  requestAnimationFrame(animate);
}

animate();

使用GSAP动画库

利用GSAP库实现更复杂的闪烁效果和动画控制。

import { gsap } from 'gsap';

function createGsapStars() {
  const container = document.getElementById('star-container');
  const stars = Array(50).fill().map(() => {
    const star = document.createElement('div');
    star.className = 'star';
    Object.assign(star.style, {
      position: 'absolute',
      width: `${Math.random() * 4 + 1}px`,
      height: `${Math.random() * 4 + 1}px`,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      backgroundColor: 'white',
      borderRadius: '50%'
    });
    container.appendChild(star);
    return star;
  });

  stars.forEach(star => {
    gsap.to(star, {
      opacity: 0,
      scale: 0.5,
      duration: Math.random() * 1 + 0.5,
      repeat: -1,
      yoyo: true,
      ease: 'power1.inOut'
    });
  });
}

实现不同形状的星星

创建星形而非圆形的闪烁效果。

function createStarShape(x, y, spikes, outerRadius, innerRadius) {
  let rot = Math.PI/2 * 3;
  let step = Math.PI / spikes;

  ctx.beginPath();
  ctx.moveTo(x, y - outerRadius);

  for(let i = 0; i < spikes; i++) {
    const x1 = x + Math.cos(rot) * outerRadius;
    const y1 = y + Math.sin(rot) * outerRadius;
    ctx.lineTo(x1, y1);
    rot += step;

    const x2 = x + Math.cos(rot) * innerRadius;
    const y2 = y + Math.sin(rot) * innerRadius;
    ctx.lineTo(x2, y2);
    rot += step;
  }

  ctx.lineTo(x, y - outerRadius);
  ctx.closePath();
}

// 在Canvas动画循环中使用
stars.forEach(star => {
  ctx.globalAlpha = star.brightness;
  ctx.fillStyle = 'white';
  createStarShape(star.x, star.y, 5, star.size, star.size * 0.4);
  ctx.fill();
});

每种方法适用于不同场景：CSS动画适合简单实现，Canvas提供更高自由度，GSAP适合复杂动画控制，自定义形状可创造独特视觉效果。