不可达代码（BL）我娶了儿子当老婆？！

[添加书签] [推荐给朋友] [投诉]

时凛生日贺卡（html）

　　＜!DOCTYPE html＞
　　＜html lang="zh-CN"＞
　　＜head＞
　　＜meta charset="UTF-8"＞
　　＜title＞To.Shi Lin : HAPPY BIRTHDAY !!!＜/title＞
　　＜style＞
　　* {
　　margin: 0;
　　padding: 0;
　　box-sizing: border-box;
　　}
　　body {
　　width: 100vw;
　　height: 100vh;
　　overflow: hidden;
　　background: #081430;
　　background-image: radial-gradient(#102b60 0%, #050c20 100%);
　　font-family: "Microsoft YaHei", sans-serif;
　　display:flex;
　　align-items:center;
　　justify-content:center;
　　}
　　.text-box{
　　text-align:center;
　　z-index: 2;
　　}
　　h1{
　　font-size: 4rem;
　　color:#74c0ff;
　　text-shadow: 0 0 12px #409cff,0 0 24px #2078ff;
　　margin-bottom:20px;
　　}
　　p{
　　font-size:1.8rem;
　　color:#b8e0ff;
　　text-shadow:0 0 8px #55aaff;
　　}
　　canvas{
　　position:absolute;
　　top:0;
　　left:0;
　　z-index:1;
　　}
　　＜/style＞
　　＜/head＞
　　＜body＞
　　＜canvas id="fireCanvas"＞＜/canvas＞
　　＜div class="text-box"＞
　　＜h1＞ To.Shi Lin : HAPPY BIRTHDAY !!!＜/h1＞
　　＜p＞HAPPY BIRTHDAY ＜/p＞
　　＜/div＞

　　＜script＞
　　const canvas = document.getElementById("fireCanvas");
　　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,color){
　　this.x=x;
　　this.y=y;
　　this.speedX=(Math.random()-0.5)*6;
　　this.speedY=(Math.random()-0.5)*6;
　　this.alpha=1;
　　this.color=color;
　　this.size=Math.random()*3+1;
　　this.gravity=0.05;
　　}
　　update(){
　　this.x += this.speedX;
　　this.y += this.speedY;
　　this.speedY += this.gravity;
　　this.alpha -=0.012;
　　}
　　draw(){
　　ctx.save();
　　ctx.globalAlpha=this.alpha;
　　ctx.fillStyle=this.color;
　　ctx.beginPath();
　　ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
　　ctx.fill();
　　ctx.restore();
　　}
　　}

　　let particles=[];
　　const blueColors = ['#60b8ff','#3488ff','#9cd5ff','#2066ee','#b0e2ff'];

　　function createFirework(x,y){
　　for(let i=0;i＜80;i++){
　　let c = blueColors[Math.floor(Math.random()*blueColors.length)];
　　particles.push(new Particle(x,y,c));
　　}
　　}

　　function animate(){
　　ctx.fillStyle="rgba(8,20,48,0.15)";
　　ctx.fillRect(0,0,canvas.width,canvas.height);
　　for(let i=particles.length-1;i＞=0;i--){
　　particles[i].update();
　　particles[i].draw();
　　if(particles[i].alpha ＜=0){
　　particles.splice(i,1);
　　}
　　}
　　requestAnimationFrame(animate);
　　}
　　animate();

　　//自动发射烟花
　　setInterval(()=＞{
　　let rx = Math.random()*canvas.width;
　　let ry = Math.random()*canvas.height*0.4;
　　createFirework(rx,ry);
　　},1200)

　　//点击屏幕额外触发烟花
　　canvas.onclick = (e)=＞{
　　createFirework(e.clientX,e.clientY);
　　}
　　＜/script＞
　　＜/body＞
　　＜/html＞