當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/12 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了炫酷的表白烟花 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.視頻演示

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

🧩 2.圖片演示

四、💒 網站代碼

🧱HTML結構代碼

<!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">我愛你直到永遠</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.如果我的博客對你有幫助請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

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

📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。