程序员的表白原来也如此简单网友表示很羡慕

最新推荐文章于 2024-03-23 20:02:00 发布

html5网页设计

最新推荐文章于 2024-03-23 20:02:00 发布

阅读量69

点赞数

分类专栏： web前端期末大作业文章标签：前端 javascript html 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_38514354/article/details/127385935

版权

web前端期末大作业专栏收录该内容

1111 篇文章 81 订阅

订阅专栏

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

html七夕情人节表白网页05-3D蓝色梦幻海洋相册(动画)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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>
   
      const words = [
        "❤ 囍 ❤ 茜茜~ 来之程序员的告白(可自定义文字)",
        "❤ 情书给你一封，情话给你一句，余生给你一人。",
        "❤ 幻想着和你一起，一日三餐，走过四季，你会是我一生的归宿。",
        "❤ 你就是我温暖的围巾，冰爽的啤酒，帅气的领带，日复一日的梦想。",
        "❤ 我不擅长恋爱，但我天生爱你。",
        "❤ 心里若有了良人，眼里的便全是路人。",
        "❤ 生活到底有多少令人惊喜的馈赠，竟让我在茫茫人海遇见你，遇见你。",
        "❤ 有你在的地方，天气明朗，万物可爱。",
        "❤ 酸甜苦辣与你分享，三餐四季与你共度，这才是最美的人间情话。",
        "❤ 我这一生都是坚定不移的唯物主义者，唯有你，我希望有来生。",
        "❤ 我们要走到最后，要结婚，要过日子，要相濡以沫，要携手终身。",
      ];
      let PPP = 0;
      let timer;
      // speed in ms
      let deleteDelay = 3000;
      let typeSpeed = 100;
      let delSpeed = 50;
      /* 开始编写文字 */
      function typingEffect() {
        console.log(i, "iiii");
        console.log(words[PPP], "words[i]");
        let word = words[PPP].split("");
        var loopTyping = function () {
          if (word.length > 0) {
            document.getElementById("word").innerHTML += word.shift();
          } else {
            delay(function () {
              deletingEffect(); // do stuff
            }, deleteDelay); // end delay
            // deletingEffect();
            return false;
          }
          timer = setTimeout(loopTyping, typeSpeed);
        };
        loopTyping();
      }

      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>

🏠CSS样式代码



@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}
li {
  list-style: none;
}
.box {
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  /* margin-left: 42%; */
  /* margin-top: 40%; */
  top: 50%;
  left: 50%;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
.minbox {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
  top: 30px;
  -webkit-transform-style: preserve-3d;
}
.minbox li {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  /* 背景颜色 */
  background-color: rgb(0, 183, 255);
  /* opacity: 0.45; */
  outline: rgb(40, 226, 240) solid thick;
  box-shadow: rgba(17, 123, 194, 0.712) 0 0 50px 50px;
}
.minbox li:nth-child(1) {
  background: url(../images/01.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {
  background: url(../images/02.png) no-repeat 0 0;
  -webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
  background: url(../images/03.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
  background: url(../images/04.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
  background: url(../images/05.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
  background: url(../images/06.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {
  background: url(../images/1.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {
  background: url(../images/2.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {
  background: url(../images/3.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {
  background: url(../images/4.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {
  background: url(../images/5.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {
  background: url(../images/6.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0;
  top: -20px;
  -webkit-transform-style: preserve-3d;
}
.maxbox li {
  width: 200px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
  -webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
  -webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {
  -webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

html5网页设计

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
程序员的表白原来也如此简单网友表示很羡慕

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如：等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现html七夕情人节表白网页05-3D蓝色梦幻海洋相册(动画)🏠CSS样式代码五、
复制链接

扫一扫