程式設計師表白煙花
阿新 • • 發佈：2020-08-27
祝天下有情人終成眷屬
HTML程式碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> body{margin:0;padding:0;overflow: hidden;} .city{width:100%;position:fixed;bottom: 0px;z-index: 100;} .city img{width: 100%;} audio{ opacity: 0; } </style> <title> 放煙花 </title> <link href="./css/modal.css" rel="stylesheet"/> </head> <body onselectstart="return false"> <!--對話部分--> <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> <!--煙花部分--> <canvas id='cas' style="background-color:rgba(0,5,24,1)"> 瀏覽器不支援canvas </canvas> <div class="city"> <img src="./images/city.png" alt="" /> </div> <img src="./images/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 class="shape"> 我愛你 </div> <div class="shape"> I LOVE YOU </div> </div> <!--音樂部分--> <audio autoplay loop id="music"> <source src="./mp3/music.mp3" /> </audio> <iframe id="iframMusic" allow="autoplay" style="display:none" src="./mp3/blank.mp3"></iframe> <script src="./js/jquery.min.js"></script> <script src="./js/fire.js"></script> <script src="./js/talk.js"></script> </body> </html>
效果圖：
轉至原始碼地址：https://github.com/junmo-java/firework
轉至原始碼地址：https://gitee.com/lyp_Believer/confession_and_fireworks_code