HTML+CSS+JS生日祝福网页在线制作(多种款式)
? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業： 【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (125套) 】
七夕來襲！是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意DIY？或者…無論那種形式，快來秀我們一臉吧！
📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網站介紹
📒網站文件方面：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；
📙網頁編輯方面：可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,3D動態效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實現
三、🔗網站效果
??1.視頻演示
10-(生日快樂)蛋糕煙花+藍色夢幻海洋3D相冊
🧩 2.圖片演示
四、💒 網站代碼
🧱HTML結構代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>情兒寶貝生日快樂</title><link rel="stylesheet" href="css/style2.css" /><style></style></head><body><audio id="audio_duration" autoplay><source src="mp3/birthday.mp3" /></audio><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><bokeh></bokeh><div class="mobile">最大化查看</div><div class="pyro"><div class="before"></div><div class="after"></div></div><!-- <audio autoplay="autopaly"><source src="mp3/birthday.mp3" type="audio/mp3" /></audio> --><!--<h1>Feliz Cumplea?os Pratik!</h1>--><h2>情兒，生日快樂，愛你吆!</h2><!--<span>🎉</span>--><div class="candle"><div id="flame" class="lit"></div></div><div class="cake"></div><div class="plate"></div></body><script>var myVid = document.getElementById("audio_duration");if (myVid != null) {var duration;myVid.load();myVid.oncanplay = function () {console.log("myVid.duration", myVid.duration);console.log("myVid.duration*100", myVid.duration * 1000);let time = null;clearTimeout(time);time = setTimeout(function () {location.href = "photo_album.html";clearTimeout(time);}, myVid.duration * 1000);};}</script> </html>🏠CSS樣式代碼
body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微軟雅黑','宋體',sans-serif;color:#231F20;overflow:auto} a {color:#000;font-size:14px;} #main{width:100%;} #wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;} #text{width:400px;height:425px;left:60px;top:80px;position:absolute;} #code{display:none;font-size:16px;} #clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;} #clock-box a {font-size:28px;text-decoration:none;} #clock{margin-left:48px;} #clock .digit {font-size:64px;} #canvas{margin:0 auto;width:1100px;height:680px;} #error{margin:0 auto;text-align:center;margin-top:60px;display:none;} .hand{cursor:pointer;} .say{margin-left:5px;} .space{margin-right:150px;}五、🎁更多源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的HTML+CSS+JS生日祝福网页在线制作(多种款式)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： h5 与原生 app 交互的原理
- 下一篇： Linux系统安装Nodejs