HTML5七夕情人节表白代码_浪漫烟花表白网页(html+css+js)
生活随笔
收集整理的這篇文章主要介紹了
HTML5七夕情人节表白代码_浪漫烟花表白网页(html+css+js)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業(yè)： 【📚HTML5網(wǎng)頁期末作業(yè) (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (125套) 】
七夕來襲！是時候展現(xiàn)專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創(chuàng)意DIY？或者…無論那種形式，快來秀我們一臉吧！
📂文章目錄
- 二、📚網(wǎng)站介紹
- 三、🔗網(wǎng)站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
二、📚網(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編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,3D動態(tài)效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實現(xiàn)
三、🔗網(wǎng)站效果
??1.視頻演示
99-七夕煙花
🧩 2.圖片演示
四、💒 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>forever love</title> </head><script src="js/lib/jquery.min.js" type="text/javascript"></script> <script src="js/lib/jquery.fireworks.js" type="text/javascript"></script><style type="text/css"> *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; } html{ width: 100%; height: 100%; } body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;} .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: #d26ae5; } .btn-b{ background: #c9c9c9; } .btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; 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: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); 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%;} } </style><script type="text/javascript"> $(function() {$('#yes').click(function(event) {modal('我就知道小姐姐您一定會愿意的。(^_^)', function() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');// typeWrite();fireworks();});});$('#no').click(function(event) {modal('明人不說暗話！', A);}); });function A() {modal('我喜歡你！', B); }function B() {modal('我知道你在等我這一句話', C); }function C() {modal('請您不要拒絕我', D); }function D() {modal('拒絕我，不存在的', E); }function E() {modal('這輩子都不可能讓你離開我', F); }function F() {modal('跟我走吧', G); }function G() {modal('房產(chǎn)證上寫你名', H); }function H() {modal('我會做飯', I); }function I() {modal('愛你。么么噠！', J) }function J() {modal('行，我們?nèi)ッ裾值怯洶?#39;, function() {fireworks();}); }function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');$('.page_two').fireworks({ sound: false, opacity: 0.9, width: '100%', height: '100%' }); }function modal(content, callback) {var tpl = '<div class="container">'+'<div class="mask"></div>'+'<div class="modal">'+'<p>'+ content +'</p>'+'<button type="button" id="confirm" class="confirm">確定</button>'+'</div>'+'</div>';$('body').append(tpl);$(document).on('click', '.confirm', function() {$('.container').remove();callback();}); }var myWords = '有人說，人的一生會遇到2920萬人，而兩個人相愛的概率只有0.000049。在這茫茫人海中，兩個人能相遇就值得感激，能相愛更是一種難得。所以，我很慶幸上天讓我遇見了你。我希望有個如你一般的人，能看完我寫過的所有狀態(tài)，讀完我所有的日志，看完我從小到大的照片，試著聽我喜歡的歌。如果可以，甚至陪我去我喜歡的地方，只想彌補錯過你的青春。'; var x = 0; var speed = 150; var current = 0; function typeWrite(){$('.type_words').html(myWords.substring(0, x++)+'_');var timer = setTimeout("typeWrite()", speed);if (x == myWords.length) {x = myWords.length;clearTimeout(timer)} }</script> <body><div class="share_img"><img src="images/a8b.png" alt=""></div><div class="page_one"><div class="content"><div class="text_wrapper"><img src="images/a8.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> <div class="page_two hide"><div class="type_words"></div> </div></body> </html> <hr># 五、🎁更多源碼 1.如果我的博客對你有幫助 `請 “👍點贊” “??評論” “💙收藏” `一鍵三連哦！2.`💗【👇🏻👇🏻👇🏻🉑關(guān)注我| 獲取更多源碼】 `帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、等! 📣以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻總結(jié)
以上是生活随笔為你收集整理的HTML5七夕情人节表白代码_浪漫烟花表白网页(html+css+js)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hbuilder 笔记
- 下一篇： python qrcode 库的使用