超炫 html+css+js 幻化3D相册 (含背景音乐)程序员表白必备 /520/七夕情人节

情人节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❤ 520/表白/七夕情人节快来秀出你的别样表白方式，和你心仪的那个ta表白吧！❤

HTML+css+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❉ 幻化背景3D相册/含背景音乐/可自定义文字具有多种颜色变化

在线演示地址

PC电脑端

在这里插入图片描述

H5 手机端

在线演示地址

在这里插入图片描述

MP3 免费下载

mp3免费下载
如需更换mp3 背景音乐,可自行下载更换即可…

❤解决> (不需要服务器就能免费部署上线)部署上线工具(永久可用)

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

1.部署流程

2.连接成功

将你写好的页面部署上线后, 全世界的人都可以愉快的访问到你的网页了(永久免费使用哦)

在这里插入图片描述

文件目录

在这里插入图片描述

扫描二维码关注公众号，回复： 12900031 查看本文章

代码如下

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      html,
      body {
     
     
        height: 100%;
      }

      body {
     
     
        background-color: #000000;
        margin: 0;
        font-family: Helvetica, sans-serif;
        overflow: hidden;
      }

    </style>
    <!-- 荧光css -->
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <div id="wrapper">

      <audio
        src="sd.mp3"
        controls="controls"
        autoplay="autoplay"
        loop="loop"
        id="music"
      ></audio>
      <div id="jsi-snow-container" class="container"></div>
      <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>
  </body>
 .....完整代码在下方↓公众号获取


</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();

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

        transform(targets.table, 2000);

        //

        window.addEventListener("resize", onWindowResize, false);
      }

      function transform(targets, duration) {
    
    
        TWEEN.removeAll();

        for (var i = 0; i < objects.length; i++) {
    
    
          var object = objects[i];
          var target = targets[i];

          new TWEEN.Tween(object.position)
            .to(
              {
    
    
                x: target.position.x,
                y: target.position.y,
                z: target.position.z,
              },
              Math.random() * duration + duration
            )
            .easing(TWEEN.Easing.Exponential.InOut)
            .start();

          new TWEEN.Tween(object.rotation)

        }

        new TWEEN.Tween(this)
          .to({
    
    }, duration * 2)
          .onUpdate(render)
          .start();
      }


      function render() {
    
    
        renderer.render(scene, camera);
      }
 		  ...
	     关注↓↓↓下方公众号获取源码 
    </script>