SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绚丽爱心</title>
<style>
*{margin:0;padding:0}
body{background:#000;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{position:absolute}
</style>
</head>
<body>
<canvas id="heart"></canvas>
<script>
const canvas = document.getElementById('heart');
const ctx = canvas.getContext('2d');
function resize(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize',resize);
let t = 0;
class Particle{
  constructor(){
    this.x = canvas.width/2;
    this.y = canvas.height/2 - 80;
    this.r = Math.random()*2+1;
    this.angle = Math.random()*Math.PI*2;
    this.vx = Math.cos(this.angle)*(Math.random()*4+2);
    this.vy = Math.sin(this.angle)*(Math.random()*4+2);
    this.alpha = 1;
    this.color = `hsl(${Math.random()*60+330},100%,60%)`
  }
  update(){
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 0.015;
  }
  draw(){
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
    ctx.fill();
    ctx.restore();
  }
}
let particles = [];
function loop(){
  ctx.fillStyle='rgba(0,0,0,0.08)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  t+=0.02;
  //跳动爱心
  let scale = 12+Math.sin(t)*2;
  ctx.save();
  ctx.translate(canvas.width/2,canvas.height/2);
  ctx.beginPath();
  for(let i=0;i<360;i+=1){
    let th = i*Math.PI/180;
    let hx = 16 * Math.pow(Math.sin(th),3);
    let hy = -(13*Math.cos(th)-5*Math.cos(2*th)-2*Math.cos(3*th)-Math.cos(4*th));
    ctx.lineTo(hx*scale,hy*scale);
  }
  ctx.closePath();
  let grad = ctx.createRadialGradient(0,0,0,0,0,200);
  grad.addColorStop(0,'#ff4488');
  grad.addColorStop(1,'#ff0044');
  ctx.fillStyle = grad;
  ctx.fill();
  ctx.restore();

  // ========== 修改这里文字 ==========
  ctx.save();
  ctx.fillStyle="#ffffff";
  ctx.font="bold 32px sans-serif";
  ctx.textAlign="center";
  ctx.textBaseline="middle";
  ctx.fillText("徐彬彬", canvas.width/2, canvas.height/2);
  ctx.restore();
  // =================================

  //粒子效果
  if(particles.length < 300){
    particles.push(new Particle());
  }
  for(let i=particles.length-1;i>=0;i--){
    let p = particles[i];
    p.update();
    p.draw();
    if(p.alpha <=0){
      particles.splice(i,1);
    }
  }
  requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>