html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板
HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给女朋友的生日祝福，只需简单修改，即可用网页生成打开。html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

戳下方链接↓查看线上演示地址

1.生日快乐🎂(多页面html模板)★在线演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template

2.生日蛋糕🎂★在线演示地址:https://ruanjiafeng2013.gitee.io/birthday-cake

3.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册🎂★在线演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/

动态效果演示

在这里插入图片描述

HTML5庆祝生日蛋糕烟花特效

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>制作一个程序员的生日快乐代码</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/style11.css"><link rel="stylesheet" href="css/yanhua.css"><link rel="stylesheet" href="css/style2D.css">
</head><body><marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday!           生日快乐！</marquee><marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐，天天开心！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee><main style="text-align:center;position:absolute;"><ul class="star" style="--v: 1; --t: 1;"><li style="--i: 0"></li></ul><ul style="--v: 2; --t: 8; --direction:reverse"><li style="--i: 0"></li><li style="--i: 1"></li><li style="--i: 2"></li><li style="--i: 3"></li><li style="--i: 4"></li><li style="--i: 5"></li><li style="--i: 6"></li><li style="--i: 7"></li></ul><ul style="--v: 3; --t: 12"><li style="--i: 0"></li><li style="--i: 1"></li><li style="--i: 2"></li><li style="--i: 3"></li><li style="--i: 4"></li><li style="--i: 5"></li><li style="--i: 6"></li><li style="--i: 7"></li><li style="--i: 8"></li><li style="--i: 9"></li><li style="--i: 10"></li><li style="--i: 11"></li></ul><ul style="--v: 4; --t: 18; --direction:reverse"><li style="--i: 0"></li><li style="--i: 1"></li><li style="--i: 2"></li><li style="--i: 3"></li><li style="--i: 4"></li><li style="--i: 5"></li><li style="--i: 6"></li><li style="--i: 7"></li><li style="--i: 8"></li><li style="--i: 9"></li><li style="--i: 10"></li><li style="--i: 11"></li><li style="--i: 12"></li><li style="--i: 13"></li><li style="--i: 14"></li><li style="--i: 15"></li><li style="--i: 16"></li><li style="--i: 17"></li></ul></ul><p id="message" style="position:relative;margin-top:-40px;z-index:99999"><img src="img/birthday.png" alt="Alternate Text" /><br /></p></main> <div class="block-audio" style="z-index:10000;"></div><canvas id="canvas"></canvas><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/index1.js"></script><script src="js/script.js"></script></body></html>

js代码

console.clear();/* Play with these values! */
const PARTICLE_COUNT = 100;
const SAFE_DISTANCE = 130;
const INFECTED_DISTANCE = 15;
const INFECTION_RATE = 0.25;
const RECOVERY_TIME = 14000;
const STAY_AT_HOME = 0.1;/* ---------------------------------- */let particles = [];const STATUSES = {HEALTHY: "HEALTHY",INFECTED: "INFECTED",RECOVERED: "RECOVERED"
};const elBody = document.body;
const elCanvas = document.querySelector("#canvas");
const ctx = elCanvas.getContext("2d");let width, height;function resize() {width = elCanvas.width = elBody.clientWidth;height = elCanvas.height = elBody.clientHeight;
}
resize();
window.addEventListener("resize", resize);/* ---------------------------------- */class Particle {constructor() {this.x = Math.random() * width;this.y = Math.random() * height;this.radius = 3;this.color = "white";this.speed = Math.random() < STAY_AT_HOME ? 0 : 1;this.directionAngle = Math.floor(Math.random() * 360);this.vector = {x: Math.cos(this.directionAngle) * this.speed,y: Math.sin(this.directionAngle) * this.speed};this.status = STATUSES.HEALTHY;if (Math.random() < INFECTION_RATE) {this.infect();}}infect() {if (this.status === STATUSES.INFECTED ||this.status === STATUSES.RECOVERED) {return;}this.color = "green";this.status = STATUSES.INFECTED;setTimeout(() => {this.recover();}, RECOVERY_TIME);}recover() {this.status = STATUSES.RECOVERED;this.color = "hotpink";}draw(drawCtx) {drawCtx.beginPath();drawCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);drawCtx.closePath();drawCtx.fillStyle = this.color;drawCtx.fill();}update() {this.checkBoundaries();this.x += this.vector.x;this.y += this.vector.y;}checkBoundaries() {if (this.x > width || this.x < 0) {this.vector.x *= -1;/* Ensure the dots are pushed inside */this.x = Math.max(0, Math.min(width, this.x));}if (this.y > height || this.y < 0) {this.vector.y *= -1;/* Ensure the dots are pushed inside */this.y = Math.max(0, Math.min(height, this.y));}}
}/* ---------------------------------- */function distance(x1, y1, x2, y2) {var dx = x1 - x2;var dy = y1 - y2;return Math.sqrt(dx * dx + dy * dy);
}function linkParticles(particle, otherParticles, drawCtx) {for (const p of otherParticles) {const d = distance(particle.x, particle.y, p.x, p.y);if (d > SAFE_DISTANCE) {continue;}// Infect other particle!if (particle.status === STATUSES.INFECTED && d < INFECTED_DISTANCE) {p.infect();}const opacity = 0.8 - (d / SAFE_DISTANCE) * 0.8;drawCtx.lineWidth = 1;drawCtx.strokeStyle = particle.color; //rgba(255,255,255,${opacity})`;drawCtx.globalAlpha = opacity;drawCtx.beginPath();drawCtx.moveTo(particle.x, particle.y);drawCtx.lineTo(p.x, p.y);drawCtx.closePath();drawCtx.stroke();drawCtx.globalAlpha = 1;}
}