當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS生日祝福网页在线制作(多种款式)

發布時間：2023/12/10 HTML 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><h2>情兒，生日快樂，愛你吆!</h2><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 交互的原理
下一篇：深入理解移动前端开发之viewport