時(shí)間：2023-07-05 05:18:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-05 05:18:02 來源：網(wǎng)站運(yùn)營
HTML5浪漫生日祝福電子賀卡網(wǎng)頁模板（HTML5+CSS3+JS）_520表白_七夕情人節(jié)表白_告白網(wǎng)頁制作_生日快樂html模板：程序員愛情?520/表白/七夕情人節(jié)/求婚?專用html5+css3+js 生日快樂網(wǎng)站模板 HTML生日快樂祝福網(wǎng)頁模板，該模板有多種動態(tài)效果圖，全局采用藍(lán)色裝飾，適用于給女朋友的生日祝福，只需簡單修改，即可用網(wǎng)頁生成打開。html+css+js實(shí)現(xiàn)生日快樂代碼 超炫酷效果 (含生日背景音樂)?520/表白/七夕情人節(jié)/求婚?專用炫酷動畫網(wǎng)頁的源代碼
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作一個(gè)程序員的生日快樂代碼</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; }}關(guān)鍵詞：表白,七夕,告白,模板,祝福,生日,浪漫,電子
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
