js+css3简易实现2023新年快乐全屏满天星动画特效

以下是一个使用JavaScript和CSS3实现的简易版新年快乐全屏满天星动画特效的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Celebration</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
  }
</style>
</head>
<body>
<canvas class="stars"></canvas>
 
<script>
  const canvas = document.querySelector('.stars');
  const ctx = canvas.getContext('2d');
 
  let stars = [];
 
  function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    for (let i = 0; i < 200; i++) {
      stars.push(new Star());
    }
 
    animate();
  }
 
  function animate() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    for (let i = 0; i < stars.length; i++) {
      stars[i].update();
      stars[i].draw(ctx);
    }
 
    requestAnimationFrame(animate);
  }
 
  function Star() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 2;
    this.speed = Math.random() * 0.05;
 
    this.update = function() {
      this.x -= this.speed;
      if (this.x < -5) this.x = canvas.width;
      this.y -= this.speed;
      if (this.y < -5) this.y = canvas.height;
    };
 
    this.draw = function(ctx) {
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
      ctx.fill();
    };
  }
 
  window.onload = init;
  window.onresize = init;
</script>
</body>
</html>

这段代码创建了一个全屏的画布，并在其中生成了随机的白色星星。星星随机生成、随机移动、随机大小。画布的尺寸会随着窗口大小的变化而变化，保持全屏。这个简易版本的动画特效可以作为新年快乐的视觉装饰，也可以作为创建更复杂动画的基础示例。

js+css3简易实现2023新年快乐全屏满天星动画特效

评论已关闭

推荐阅读