|
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>
制作一个程序员的生日快乐代码
Happy birthday! 生日快乐！
祝你生日快乐，天天开心！
祝你生日快乐，没有烦恼！
祝你生日快乐，没有烦恼！
祝你生日快乐，没有烦恼！
祝你生日快乐，没有烦恼！
祝你生日快乐，没有烦恼！
祝你生日快乐，没有烦恼！
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()
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
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 |