當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML5七夕情人节表白网页制作【JS烟花表白】HTML+CSS+JavaScript 烟花表白代码 html烟花告白源码

發布時間：2024/3/12 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!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><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>