HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript

Posted @代码搬运工-web领域

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript相关的知识,希望对你有一定的参考价值。

html5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+javascript

这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

1.网页作品简介 :基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑:任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ )均可修改网页。

一、作品展示(已兼容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款表白网页在线视频演示

以上是关于HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript

520七夕情人节告白网页代码—浪漫3D相册

520七夕情人节告白网页代码—浪漫3D相册

Python制作七夕表白实例项目-让你的情人心动起来

HTML+CSS+JS520告白表白模板在线制作(七夕情人节表白网页代码)

html+css+js生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)