HTML5七夕情人節表白網頁制作?藍色夢幻海洋3D相冊? HTML+CSS+JavaScript
這是程式員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看， 此波共有100個表白網站，可以任意修改和使用，原始碼已上傳，演示網址如下，
🧡文章末尾-已經附上原始碼下載地址
🧡作者主頁-更多原始碼
🧡七夕情人節專欄文章
作品介紹
1.網頁作品簡介 ：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁, 生日祝福, 七夕告白, 求婚, 浪漫愛情3D相冊,炫酷代碼 ,已經兼容手機端和電腦端, 快來制作一款高端的表白網頁送(他/她)生日祝福網頁,制作修改簡單, 需替換圖片和文字即可.可自行更換背景音樂，
2.網頁作品編輯：任意HTML編輯軟體（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改網頁，
文章目錄
- HTML5七夕情人節表白網頁制作?藍色夢幻海洋3D相冊? HTML+CSS+JavaScript
- 作品介紹
- 一、作品展示(已兼容H5手機端 / PC電腦端)
- 二、檔案目錄
- 三、代碼實作
- 四、學習資料
- 五、原始碼下載
- 六、更多原始碼
一、作品展示(已兼容H5手機端 / PC電腦端)
二、檔案目錄
三、代碼實作
<!--
* @Author: your name
* @Date: 2021-04-14 13:39:56
* @LastEditTime: 2021-04-16 10:10:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \TweenMax藍色夢幻海洋網頁特效\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浪漫海洋夢幻告白3D相冊</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style0.css" />
</head>
<body>
<!-- 熒光S -->
<div class="container">
<!-- 打字 -->
<div class="typing">
<!-- 字幕 -->
<h2 class="header-sub-title" id="word"></h2>
<h2 class="header-sub-title blink">|</h2>
</div>
<audio controls autoplay><source src="mp3/3.mp3" /></audio>
<!-- 相冊 -->
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/index.js"></script>
<script>
/* 兼容H5 手機端 */
if (
navigator.userAgent.match(
/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
var box = document.querySelectorAll(".box")[0];
console.log(box, "移動端");
box.style.left = "42%";
}
// --------------------列印字 S--------------------------
const words = [
"? 囍 ? 茜茜~ 來之程式員的告白(可自定義文字)",
"? 情書給你一封，情話給你一句，余生給你一人，",
"? 幻想著和你一起，一日三餐，走過四季，你會是我一生的歸宿，",
"? 你就是我溫暖的圍巾，冰爽的啤酒，帥氣的領帶，日復一日的夢想，",
"? 我不擅長戀愛，但我天生愛你，",
"? 心里若有了良人，眼里的便全是路人，",
"? 生活到底有多少令人驚喜的饋贈，竟讓我在茫茫人海遇見你，遇見你，",
"? 有你在的地方，天氣明朗，萬物可愛，",
"? 酸甜苦辣與你分享，三餐四季與你共度，這才是最美的人間情話，",
"? 我這一生都是堅定不移的唯物主義者，唯有你，我希望有來生，",
"? 我們要走到最后，要結婚，要過日子，要相濡以沫，要攜手終身，",
];
function deletingEffect() {
let word = words[PPP].split("");
var loopDeleting = function () {
if (word.length > 0) {
word.pop();
document.getElementById("word").innerHTML = word.join("");
} else {
if (words.length > PPP + 1) {
PPP++;
} else {
PPP = 0;
}
typingEffect();
return false;
}
timer = setTimeout(loopDeleting, delSpeed);
};
loopDeleting();
}
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
typingEffect();
// --------------------列印字 E--------------------------
</script>
</body>
</html>
四、學習資料
web前端 零基礎-入門到高級 (視頻+原始碼+開發軟體+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站
五、原始碼下載
【百度網盤-完整原始碼下載地址↓】
鏈接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取碼：8888
六、更多原始碼
?100款表白網頁演示地址
?100款表白網頁在線視頻演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/342239.html
標籤：其他
下一篇：洗掉模式上方的行