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: -04-14 13:39:56* @LastEditTime: -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模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接:/s/1UdFzRE6mEKC5D1xALTMbYw
提取码:8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示