七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!



3D相册演示(含背景音乐)可自定义12张相片

在线演示地址

1. PC(电脑端)演示

在这里插入图片描述

2. H5(手机端)演示

在这里插入图片描述

3. 相片球

在这里插入图片描述

4. 照片墙

在这里插入图片描述

5. 旋转相册

在这里插入图片描述

6. 排序相册

在这里插入图片描述

代码文件目录

在这里插入图片描述

一、3D相册(代码实现)

html (3D相册部分)

<!--
 * @Author: your name
 * @Date: 2021-06-11 11:16:48
 * @LastEditTime: 2021-06-11 11:18:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \06\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <link type="text/css" rel="stylesheet" href="static/css/animate.min.css" />
    <link
      type="text/css"
      rel="stylesheet"
      href="static/css/audioAutoPlay.css"
    />
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/three.js"></script>
    <script src="static/js/tween.min.js"></script>
    <script src="static/js/trackballcontrols.js"></script>
    <script src="static/js/css3drenderer.js"></script>
    <title>xxx,我爱你</title>
  </head>

  <body>
    <img
      id="music_ico"
      onclick="clickMusic()"
      src="static/image/music_ico.png"
      alt=""
    />
    <audio
      id="audio"
      style="display: none"
      src="static/music/bg_music.mp3"
      preload="auto"
      loop="loop"
    ></audio>
    <div id="container"></div>
    <div id="menu">
      <button id="table">照片墙</button>
      <button id="sphere">照片球</button>
      <button id="helix">螺旋照片</button>
      <button id="grid">整齐排列</button>
    </div>

    <div class="show_info animated" style="display: none">
      <div class="info_my">
        <img
          id="showImg"
          style="width: 50px; height: 65px"
          src="./static/picture/ava2.jpg"
        />
        <div class="info_mem">
          <div class="nickname">xxx</div>
          <div class="id">身份:xxxxxxxxxxxxxx</div>
          <div class="vote">性别:女</div>
        </div>
      </div>
      <div class="intro">风筝有风,海豚有海,你还有我 🌹</div>
    </div>
  </body>
  <script type="text/javascript" src="static/js/functions.js"></script>
  <script type="text/javascript" src="static/js/audioAutoPlay.js"></script>
</html>


js (背景部分)

  <script>
      var personArray = new Array();
      var CurPersonNum = 0;
      // 模拟推送数据
      var s = setInterval(function () {
        // get animate
        var rand_in = parseInt(Math.random() * _in.length, 10);
        var rand_out = parseInt(Math.random() * _out.length, 10);
        if (CurPersonNum >= personArray.length) {
          CurPersonNum = 0;
        }
        /* 显示文字弹窗 */
        $(".show_info").show();
        $(".show_info").addClass(_in[rand_in]);
        setTimeout(function () {
          $(".show_info").removeClass(_in[rand_in]);
          // 更改展示的图片
          var img = document
            .getElementsByClassName("element")
            [CurPersonNum].getElementsByTagName("img")[0];
          /* 头三张 */
          img.setAttribute("src", "img/s1.png");
          ++CurPersonNum;
          setTimeout(function () {
            $(".show_info").addClass(_out[rand_out]);
            setTimeout(function () {
              $(".show_info").removeClass(_out[rand_out]);
              $(".show_info").hide();
            }, 1000);
          }, 1500);
        }, 1000);
      }, 4500);

      // 生成虚拟图片数据,
      for (var i = 0; i < 199; i++) {
        personArray.push(
          {
            image: "img/s2.png",
          }
          // {
          //   image: "img/c6.png",
          // }
        );
      }
      var table = new Array();
      for (var i = 0; i < personArray.length; i++) {
        table[i] = new Object();
        if (i < personArray.length) {
          table[i] = personArray[i];
          table[i].src = personArray[i].thumb_image;
        }
        table[i].p_x = (i % 20) + 1;
        table[i].p_y = Math.floor(i / 20) + 1;
      }
      var camera, scene, renderer;
      var controls;

      var objects = [];
      var targets = {
        table: [],
        sphere: [],
        helix: [],
        grid: [],
      };

      init();
      animate();
      function init() {
        camera = new THREE.PerspectiveCamera(
          40,
          window.innerWidth / window.innerHeight,
          1,
          10000
        );
        camera.position.z = 3000;

        scene = new THREE.Scene();
        for (var i = 0; i < objects.length; i++) {
          var object = new THREE.Object3D();

          object.position.x = (i % 5) * 400 - 800; // 400 图片的左右间距  800 x轴中心店
          object.position.y = -(Math.floor(i / 5) % 5) * 300 + 500; // 500 y轴中心店
          object.position.z = Math.floor(i / 25) * 200 - 800; // 300调整 片间距 800z轴中心店

          targets.grid.push(object);
        }

        var button = document.getElementById("grid");
        button.addEventListener(
          "click",
          function (event) {
            transform(targets.grid, 2000);
          },
          false
        );
        transform(targets.table, 2000);
        window.addEventListener("resize", onWindowResize, false);
      }

    </script>

找到index.html中的 js 代码 可自定义添加多张图片
注意:保证图片在100-199张以下,不然会影响美观哦

  for (var i = 0; i < 199; i++) {
        personArray.push(
          {
            image: "img/s1.png",
          },
          //在这可以自定义添加相片
           {
             image: "img/c2.png",
           },
             {
             image: "img/c3.png",
           }
           ...更多
        );
      }
    

css (3D相册部分)

.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: 22%;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}

.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;
}

二、歌曲mp3更换教程(教程)

如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
1.搜索需要的歌曲

在这里插入图片描述

2.下载
在这里插入图片描述

3获取歌曲id
在这里插入图片描述

4关注公众号以后/复制链接到浏览器打开

在这里插入图片描述

5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
在这里插入图片描述


三、做好的网页效果,如何通过发链接给别人看?

1.1 解决部署上线~> 部署上线工具(可永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

在这里插入图片描述

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
在这里插入图片描述


四、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~
在这里插入图片描述


五、 源码获取

~ 关注我,点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

在这里插入图片描述


六、更多表白源码

❤100款表白源码演示地址

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论 4

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值