當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)

發(fā)布時(shí)間：2024/3/12 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進(jìn)入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業(yè)：【📚HTML5網(wǎng)頁期末作業(yè) (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (125套) 】
七夕來襲！是時(shí)候展現(xiàn)專屬于程序員的浪漫了！你打算怎么給心愛的人表達(dá)愛意？鮮花禮物？代碼表白？還是創(chuàng)意DIY？或者…無論那種形式，快來秀我們一臉吧！

📂文章目錄

二、📚網(wǎng)站介紹
三、🔗網(wǎng)站效果
- ??1.視頻演示
- 🧩 2.圖片演示
四、💒 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 🏠CSS樣式代碼
五、🎁更多源碼

二、📚網(wǎng)站介紹

📒網(wǎng)站文件方面：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；

📙網(wǎng)頁編輯方面：可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；
（2）📑 css文件包含：css全部頁面樣式,3D動(dòng)態(tài)效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實(shí)現(xiàn)

三、🔗網(wǎng)站效果

??1.視頻演示

51-煙花表白(詢問文字開場(chǎng)+自定義文字)

🧩 2.圖片演示

四、💒 網(wǎng)站代碼

🧱HTML結(jié)構(gòu)代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><link rel="stylesheet" href="css/style.css" /><scriptid="jqbb"src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style>html,body {margin: 0;padding: 0;overflow: hidden;background-color: black;user-select: none;margin: 0;}.city {width: 100%;position: fixed;bottom: 0px;z-index: 100;}.city img {width: 100%;}audio {opacity: 0;}</style><title>炫酷煙花表白</title><link href="modal.css" rel="stylesheet" /></head><body onselectstart="return false"><div class="star comet"></div><script src="js/index.js"></script><div class="share_img"><img src="img/xin.png" alt="" /></div><div class="page_one"><div class="content"><div class="text_wrapper"><img class="xin" src="img/xin.png" alt="" /><div class="text">小姐姐，我好喜歡你，你愿意做我女朋友嗎？</div></div></div><div class="btn-groups"><div class="heart-btn"><div id="yes" class="btn btn-a"><span>愿意</span></div></div><div id="no" class="btn btn-b"><span>不愿意</span></div></div></div><canvas id="cas" style="background-color: rgba(0, 5, 24, 1); z-index: 9999">瀏覽器不支持canvas</canvas><div class="city"><img src="img/city.png" alt="" /></div><img src="img/moon.png" alt="" id="moon" style="visibility: hidden" /><div style="display: none"><div class="shape">520?</div><div class="shape">茫茫人海</div><div class="shape">相遇是緣</div><div class="shape">我愛你直到永遠(yuǎn)</div></div><audio autoplay loop id="music"><source src="mp3/music.mp3" /></audio><iframeid="iframMusic"allow="autoplay"style="display: none"src="mp3/blank.mp3"></iframe><script src="jquery.min.js"></script><script src="fire.js"></script><script src="talk.js"></script></body> </html>

🏠CSS樣式代碼

* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-box-sizing: border-box;box-sizing: border-box; }.share_img {width: 0;height: 0;overflow: hidden;opacity: 0; }.content {/* padding: 80px 20px; */ }.text_wrapper {display: -webkit-box;display: flex; }.text_wrapper .text {padding-top: 20px;padding-left: 20px; }.hide {display: none !important; }p {margin: 0; }.btn-groups {padding-right: 20px;text-align: center; }.heart-btn {display: inline-block;animation: breath 0.8s linear 0s infinite both;-webkit-animation: breath 0.8s linear 0s infinite both; }.btn {position: relative;display: inline-block;width: 60px;height: 60px;margin: 0 30px;transform: rotate(45deg);-webkit-transform: rotate(45deg); }.btn span {display: block;width: 100%;height: 100%;line-height: 60px;margin-top: -10px;margin-left: -10px;text-align: center;transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }/* 愿意 */.btn-a {background: pink; }.btn-b {background: #c9c9c9; }.btn-a:before {content: "";position: absolute;display: block;width: 30px;height: 60px;background: pink;left: -29px;border-top-left-radius: 60px;border-bottom-left-radius: 60px; }.btn-a:after {content: "";position: absolute;display: block;width: 60px;height: 30px;background: pink;left: 0;top: -29px;border-top-left-radius: 60px;border-top-right-radius: 60px; }.btn-b:before {content: "";position: absolute;display: block;width: 30px;height: 60px;background: #c9c9c9;left: -29px;top: 0;border-top-left-radius: 60px;border-bottom-left-radius: 60px; }.btn-b:after {content: "";position: absolute;display: block;width: 60px;height: 30px;background: #c9c9c9;left: 0;top: -29px;border-top-left-radius: 60px;border-top-right-radius: 60px; }.container {}.container .mask {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.3); }.container .modal {width: 50%;height: 160px;position: absolute;top: 55%;left: 50%;padding: 20px 15px;border-radius: 5px;/* transform: translate(-50%, -70%); */-webkit-transform: translate(-50%, -0%);-webkit-transform: translate(-50%, -0%);background: #f3f3f3; }.container .modal p {margin-top: 20px;margin-bottom: 20px;font-size: 16px;color: #353535;text-align: center; }.confirm {display: block;width: 120px;height: 40px;margin: 0 auto;border: none;font-size: 16px;border-radius: 5px;color: #ffffff;background: #f45cae; }.type_words {padding: 12px 20px; }@keyframes breath {0% {transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);transform-origin: 50% 50%;}50% {transform: scale3d(1.02, 1.02, 1.02);-webkit-transform: scale3d(1.02, 1.02, 1.02);transform-origin: 50% 50%;}100% {transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);transform-origin: 50% 50%;} }.page_one {position: absolute;z-index: 10;top: 50%;left: 50%;transform: translate(-50%, -90%); }.text {color: pink;font-size: 16px; }.xin {width: 20%; }

五、🎁更多源碼

1.如果我的博客對(duì)你有幫助請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻🉑關(guān)注我| 獲取更多源碼】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學(xué)生畢業(yè)HTML模板、等!

📣以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻

總結(jié)

以上是生活随笔為你收集整理的炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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