<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>中秋快乐</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#050c28;
  min-height:100vh;
  overflow:hidden;
  text-align:center;
  color:#fff;
  font-family:system-ui;
  padding-top:80px;
}
.moon{
  font-size:130px;
  animation: shine 2.2s infinite alternate;
}
@keyframes shine{
  from{opacity:0.7;transform:scale(0.96)}
  to{opacity:1;transform:scale(1)}
}
.text1{font-size:24px;margin-top:20px;color:#ffeeba}
.text2{font-size:18px;margin-top:14px;opacity:0.9}
#fire{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}
</style>
</head>
<body>
<div class="moon">🌕</div>
<div class="text1">海上生明月，天涯共此时</div>
<div class="text2">🥮中秋佳节 · 阖家安康🥮</div>
<canvas id="fire"></canvas>

<script>
// 烟花动画
const canvas=document.getElementById('fire');
const ctx=canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
window.addEventListener('resize',()=>{
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
})
class Particle{
  constructor(x,y){
    this.x=x;this.y=y;
    this.sx=Math.random()*6-3;this.sy=Math.random()*6-3;
    this.life=100;this.color=`hsl(${Math.random()*60+40},100%,70%)`
  }
  update(){
    this.x+=this.sx;this.y+=this.sy;this.life--;
  }
  draw(){
    ctx.beginPath();ctx.arc(this.x,this.y,2,0,Math.PI*2);
    ctx.fillStyle=this.color;ctx.fill();
  }
}
let list=[];
function boom(){
  const x=Math.random()*canvas.width;
  const y=Math.random()*canvas.height/2;
  for(let i=0;i<60;i++) list.push(new Particle(x,y));
}
setInterval(boom,1800);
function render(){
  ctx.fillStyle='rgba(5,12,40,0.15)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  for(let i=list.length-1;i>=0;i--){
    list[i].update();list[i].draw();
    if(list[i].life<=0) list.splice(i,1);
  }
  requestAnimationFrame(render);
}
render();
setTimeout(()=>alert("✨中秋快乐，愿月圆人圆万事圆满✨"),1000);
</script>
</body>
</html>