时间：2023-07-05 05:18:02 | 来源：网站运营
时间：2023-07-05 05:18:02 来源：网站运营
HTML5浪漫生日祝福电子贺卡网页模板（HTML5+CSS3+JS）_520表白_七夕情人节表白_告白网页制作_生日快乐html模板：程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给女朋友的生日祝福，只需简单修改，即可用网页生成打开。html+css+js实现生日快乐代码 超炫酷效果 (含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码
在线咨询
<!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>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; }}关键词：表白,七夕,告白,模板,祝福,生日,浪漫,电子
