❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备

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

元旦节表白3D相册,在元旦节前夜, 我们的留言区开放给你!快来秀出你的别样表白方式,和你心仪的那个ta表白吧!

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

更多表白素材源码地址

制作不易, 需要源码的请添加 qq 365392777

元旦节/跨年夜❉(照片墙)3D相册/含背景音乐/可自定义文字 具有多种相册变化

在线演示地址

PC电脑端

静态效果展示

H5移动端

3D螺旋

3D格子

文件目录

❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备_第1张图片


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

      a {
      
        color: #ffffff;
      }

 
      .element:hover {
      
        box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
        border: 1px solid rgba(127, 255, 255, 0.75);
      }

      .element img {
      
        width: 140px;
        height: 155px;
      }

      .element .number {
      
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 12px;
        color: rgba(127, 255, 255, 0.75);
      }

      .show_info .info_my .info_mem > div {
      
        text-align: left;
      }

      .show_info .info_my .info_mem > div.nickname {
      
        max-width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    style>
    
    <link rel="stylesheet" href="css/style.css" />
  head>

  <body>
    <script src="https://www.jq22.com/jquery/jquery-2.1.1.js">script>
    <script src="https://threejs.org/build/three.js">script>
    
    <audio controls autoplay><source src="mp3/app.mp3" />audio>
    
    
    
    <div id="midground" class="wall">div>
    <div id="foreground" class="wall">div>
    <div id="top" class="wall">div>
    
    <div id="container">div>
    
    <div class="show_info animated" style="display: none">
      <div class="info_my">
        <img src="img/c1.png" />
        <div class="info_mem">
          <div class="nickname">2021牛转钱坤!div>
          <div class="id">div>
          <div class="vote">新年快乐!div>
        div>
      div>
      <div class="intro">
        摘一千颗星照亮你的前程,种一千朵玫瑰陶醉你的心情,折一千只纸鹤逗你时刻开心,找一千种理由希望你无忧无愁。提前祝您新年快乐!
      div>
    div>
	...制作不易, 需要完整代码请联系qq 365392777

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

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

        scene = new THREE.Scene();

        // grid

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

      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);
      }
      	...制作不易, 需要完整代码请联系qq 365392777
    </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",
           }
           ...更多
        );
      }
    

对于程序员来说,“单身”依然是人生最大的 bug,关键是还无法调试。虽然俗话说“自古英雄多寂寞”,但是缺少另一半的人生总是不完整的。况且,距离一年一度的情(虐)人(狗)节不远了。

更多源码地址

1.❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

2.100套炫酷echart在线演示地址

3.基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计100套,可以在此基础上重新开发(vue/react)都可以使用

4.[❤前端开发神器]->不需要服务器就能将项目部署上线

5.❤前端 html+css+js[1000个超炫酷特效] 当我学会这招,所有炫酷的特效页面(含源码)都能下载下来啦!

6.抖音超火❤罗盘时钟(免费附源码)

你可能感兴趣的:(七夕情人节,3D相册,表白,vue.js,javascript,html,css,jquery)