104、时凛生日贺卡（html） ＜!D ...
-
＜!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＞
作者有话说
第104章 时凛生日贺卡（html）
