當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML5浪漫生日祝福电子贺卡网页模板（HTML5+CSS3+JS）_520表白/七夕情人节表白/告白网页制作/生日快乐html模板

發(fā)布時(shí)間：2023/12/10 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5浪漫生日祝福电子贺卡网页模板（HTML5+CSS3+JS）_520表白/七夕情人节表白/告白网页制作/生日快乐html模板小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

html+css+js實(shí)現(xiàn)生日快樂(lè)代碼🎂超炫酷效果🎂(含生日背景音樂(lè))?520/表白/七夕情人節(jié)/求婚?專(zhuān)用炫酷動(dòng)畫(huà)網(wǎng)頁(yè)的源代碼

程序員愛(ài)情?520/表白/七夕情人節(jié)/求婚?專(zhuān)用html5+css3+js 生日快樂(lè)網(wǎng)站模板
HTML生日快樂(lè)祝福網(wǎng)頁(yè)模板，該模板有多種動(dòng)態(tài)效果圖，全局采用藍(lán)色裝飾，適用于給女朋友的生日祝福，只需簡(jiǎn)單修改，即可用網(wǎng)頁(yè)生成打開(kāi)。html+css+js實(shí)現(xiàn)生日快樂(lè)代碼🎂超炫酷效果🎂(含生日背景音樂(lè))?520/表白/七夕情人節(jié)/求婚?專(zhuān)用炫酷動(dòng)畫(huà)網(wǎng)頁(yè)的源代碼

戳下方鏈接↓查看線上演示地址

1.生日快樂(lè)🎂(多頁(yè)面html模板)★在線演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template

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

3.(生日快樂(lè))蛋糕煙花+藍(lán)色夢(mèng)幻海洋3D相冊(cè)🎂★在線演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/

動(dòng)態(tài)效果演示

HTML5慶祝生日蛋糕煙花特效

html代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>制作一個(gè)程序員的生日快樂(lè)代碼</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! 生日快樂(lè)！</marquee><marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快樂(lè)，天天開(kāi)心！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</marquee><marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快樂(lè)，沒(méi)有煩惱！</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;} }

做好的網(wǎng)頁(yè)效果,如何通過(guò)發(fā)鏈接給別人看?

1.1解決部署上線~> 部署上線工具(永久免費(fèi)使用)

1.不需要買(mǎi)服務(wù)器就能部署線上,全世界都能訪問(wèn)你的連接啦, 這里給大家推薦一個(gè)程序員必備神器~
插件集成了超級(jí)多好用的插件，免費(fèi)下載安裝，簡(jiǎn)單易懂, 簡(jiǎn)直神器 ~ 需要可在文章 ↓ 下方公Z號(hào)獲取

2.就是把你的代碼效果做好了以后, 部署到線上, 把鏈接發(fā)給別人, 就可以讓對(duì)方通過(guò)你的連接點(diǎn)擊進(jìn)去, 就能看到你的網(wǎng)頁(yè)效果啦, 電腦端和手機(jī)端都可以噢! (不然別人看你的網(wǎng)頁(yè)都要發(fā)文件過(guò)去,體驗(yàn)感不太好哦~)

1.1部署流程

1.2 哇~ 部署成功

哇~ 部署成功! 將你寫(xiě)好的頁(yè)面部署上線后, 全世界的人都可以通過(guò)鏈接訪問(wèn)到你的網(wǎng)頁(yè)了(永久免費(fèi)使用哦)~

前端零基礎(chǔ) 入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)

適合入門(mén)到高級(jí)的童鞋們?nèi)胧謣

? 源碼獲取

? ~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識(shí)!

? 1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連支持下吧，你的「點(diǎn)贊，好評(píng)，收藏」是我創(chuàng)作的動(dòng)力。

? 2.關(guān)注我~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學(xué)生畢業(yè)模板、期末大作業(yè)模板、等! 「在這里有好多前端開(kāi)發(fā)者，一起探討前端 Node 知識(shí)，互相學(xué)習(xí)」！

? 3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題可以相互學(xué)習(xí)，可關(guān)注↓公Z號(hào) 獲取更多源碼 !

?更多表白源碼

?100款表白源碼演示地址

總結(jié)

以上是生活随笔為你收集整理的HTML5浪漫生日祝福电子贺卡网页模板（HTML5+CSS3+JS）_520表白/七夕情人节表白/告白网页制作/生日快乐html模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： CSS之flex需要知道的一切（一）
下一篇： HTML5如何控制暂停播放停止