日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

javascript

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

發布時間：2024/3/12 javascript 45 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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烟花告白源码的全部內容，希望文章能夠幫你解決所遇到的問題。

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