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

❤留言区开放给你！快来秀出你的别样表白方式，和你心仪的那个ta表白吧！❤

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

❉ ❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转特效(可自定义编辑文字)

在线演示地址

PC电脑端

在这里插入图片描述

❉ 1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

❉ 2、head引入js文件

<!--下雪动画-->
<script src="js/jquery.min.js"></script>
<script src="js/snow.js"></script>

❉ 3、body引入HTML代码

<div class="snow-container">
     
    <div class="dongtai">
        <ul>
            <li>
                <img src="image/001.jpg" alt="">
            </li>
            <li>
                <img src="image/002.jpg" alt="">
            </li>
            <li>
                <img src="image/003.jpg" alt="">
            </li>
            <li>
                <img src="image/004.jpg" alt="">
            </li>
            <li>
                <img src="image/005.jpg" alt="">
            </li>
            <li>
                <img src="image/006.jpg" alt="">
            </li>
        </ul>
    </div>
 
</div>

❉ 完整的html

<!--
 * @Author: your name
 * @Date: 2020-12-30 10:24:14
 * @LastEditTime: 2020-12-30 10:28:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \正方体旋转动画\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <!--下雪动画-->
    <script src="js/jquery.min.js"></script>
    <script src="js/snow.js"></script>

    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>

  <body>
    <div class="snow-container">
      <div class="ziti">
        <span> ❤各位新年快乐呀！！ </span>
      </div>

      <div class="dongtai">
        <ul>
          <li>
            <img src="image/1.png" alt="" />
          </li>
          <li>
            <img src="image/2.png" alt="" />
          </li>
          <li>
            <img src="image/3.png" alt="" />
          </li>
          <li>
            <img src="image/4.png" alt="" />
          </li>
          <li>
            <img src="image/5.png" alt="" />
          </li>
          <li>
            <img src="image/6.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

var THREE = THREE || {
    
    };
if (!self.Int32Array) self.Int32Array = Array, self.Float32Array = Array;
THREE.Color = function(a) {
    
    
    a !== void 0 && this.setHex(a);
    return this
};
THREE.Color.prototype = {
    
    
    constructor: THREE.Color,
    r: 1,
    g: 1,
    b: 1,
    copy: function(a) {
    
    
        this.r = a.r;
        this.g = a.g;
        this.b = a.b;
        return this
    },
    copyGammaToLinear: function(a) {
    
    
        this.r = a.r * a.r;
        this.g = a.g * a.g;
        this.b = a.b * a.b;
        return this
    },
    copyLinearToGamma: function(a) {
    
    
        this.r = Math.sqrt(a.r);
        this.g = Math.sqrt(a.g);
        this.b = Math.sqrt(a.b);
        return this
    },
    setRGB: function(a, b, c) {
    
    
        this.r = a;
        this.g = b;
        this.b = c;
        return this
    },
    setHSV: function(a, b, c) {
    
    
        var d, f, e;
        if (c === 0) this.r = this.g = this.b = 0;
        else switch (d = Math.floor(a * 6), f = a * 6 - d, a = c * (1 - b), e = c * (1 - b * f), b = c * (1 - b * (1 - f)), d) {
    
    
            case 1:
                this.r = e;
                this.g = c;
                this.b = a;
                break;
            case 2:
                this.r = a;
                this.g = c;
                this.b = b;
                break;
            case 3:
                this.r = a;
                this.g = e;
                this.b = c;
                break;
            case 4:
                this.r = b;
                this.g = a;
                this.b = c;
                break;
            case 5:
                this.r = c;
                this.g = a;
                this.b = e;
                break;
            case 6:
            case 0:
                this.r = c, this.g = b, this.b = a
        }
        return this
    }
        setHex: function(a) {
    
    
        a = Math.floor(a);
        this.r = (a >> 16 & 255) / 255;
        this.g = (a >> 8 & 255) / 255;
        this.b = (a & 255) / 255;
        return this
    },
    getHex: function() {
    
    
        return ~~(this.r * 255) << 16 ^ ~~(this.g * 255) << 8 ^ ~~(this.b * 255)
    },
    getContextStyle: function() {
    
    
        return "rgb(" + Math.floor(this.r * 255) + "," + Math.floor(this.g * 255) + "," + Math.floor(this.b * 255) + ")"
    },
    clone: function() {
    
    
        return (new THREE.Color).setRGB(this.r, this.g, this.b)
    }
};
   ...
      完整代码在下方↓公众号获取