HTML5七夕情人节表白网页制作【流星动画3D相册】HTML+CSS+JavaScript

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个简化的HTML和JavaScript代码示例，用于创建一个流星落到地面的动画效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流星动画</title>
<style>
  canvas {
    background: #000;
    display: block;
  }
</style>
</head>
<body>
 
<canvas id="canvas"></canvas>
 
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const W = canvas.width = window.innerWidth;
  const H = canvas.height = window.innerHeight;
  const halfW = W * 0.5;
  const halfH = H * 0.5;
 
  class Star {
    constructor() {
      this.x = Math.random() * W;
      this.y = Math.random() * H;
      this.coords = this.calculateCoords(this.x, this.y);
      this.velocity = {
        x: (Math.random() - 0.5) * 5,
        y: (Math.random() - 0.5) * 5
      };
      this.angle = Math.atan2(this.velocity.y, this.velocity.x);
      this.speed = 2;
      this.size = Math.random() * 2;
      this.brightness = Math.random() * 255;
    }
 
    update() {
      this.x += this.velocity.x * this.speed;
      this.y += this.velocity.y * this.speed;
      if(this.x > W || this.x < 0) this.velocity.x *= -1;
      if(this.y > H || this.y < 0) this.velocity.y *= -1;
    }
 
    draw() {
      ctx.beginPath();
      ctx.fillStyle = `hsl(25, 100%, ${this.brightness}%)`;
      ctx.arc(...this.coords, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
 
    calculateCoords(x, y) {
      const angle = Math.atan2(halfH - y, halfW - x);
      const r = Math.hypot(halfW - x, halfH - y);
      return [
        halfW + r * Math.cos(angle),
        halfH + r * Math.sin(angle)
      ];
    }
  }
 
  const starfield = [];
  const starCount = 1000;
  for (let i = 0; i < starCount; i++) {
    starfield.push(new Star());
  }
 
  function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.fillRect(0, 0, W, H);
    starfield.forEach((star, index) => {
      star.update();
      star.draw();
    });
    requestAnimationFrame(animate);
  }
 
  animate();
</script>
 
</body>
</html>

这段代码创建了一个流星类，其中包含流星的属性，如位置、速度、颜色和大小。calculateCoords函数将2D平面上的坐标转换为3D空间中的坐标。update方法更新流星的位置，如果它超出了屏幕边界，就反弹。draw方法在画布上绘制流星。主循环中创建了一个流星数组，并在animate函数中更新和绘制它们。

HTML5七夕情人节表白网页制作【流星动画3D相册】HTML+CSS+JavaScript

评论已关闭

推荐阅读