當前位置：
首頁 >
HTML5七夕情人节表白网页制作【JS烟花表白】HTML+CSS+JavaScript 烟花表白代码 html烟花告白源码
發布時間：2024/3/12
53
豆豆
生活随笔
收集整理的這篇文章主要介紹了
HTML5七夕情人节表白网页制作【JS烟花表白】HTML+CSS+JavaScript 烟花表白代码 html烟花告白源码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是程序員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看。 此波共有100個表白網站，可以任意修改和使用，很多人會希望向心愛的男孩女孩告白，生性靦腆的人即使那個TA站在眼前都不敢向前表白。說不出口的話就用短視頻告訴TA吧~制作一個表白網頁告訴TA你的心意,演示如下。
文章目錄
- 一、網頁介紹
- 一、網頁效果
- 二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
- 三、精彩專欄
一、網頁介紹
1 網頁簡介：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁、生日祝福、七夕告白、 求婚、浪漫愛情3D相冊、炫酷代碼 ,快來制作一款高端的表白網頁送(他/她)浪漫的告白,制作修改簡單,可自行更換背景音樂,文字和圖片即可使用
2.網頁編輯：任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
一、網頁效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<!--* @Author: your name* @Date: 2020-12-21 09:07:44* @LastEditTime: 2020-12-23 09:11:59* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \firework-master\酷炫表白煙花\fire.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><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 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>2.CSS代碼
<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>三、精彩專欄
看到這里了就 【點贊，關注，收藏】 三連 支持下吧，你的支持是我創作的動力。
總結
以上是生活随笔為你收集整理的HTML5七夕情人节表白网页制作【JS烟花表白】HTML+CSS+JavaScript 烟花表白代码 html烟花告白源码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： uniwide服务器不能进入系统,AMD
- 下一篇： JS中的 || 与 运算符详解