【程序员的浪漫】花式表白，零基础入门到精通，收藏这篇就够了

关注

原创最新推荐文章于 2026-03-16 08:26:27 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

NXP ChessDE的安装和激活如果客户申请的是试用版，那么一份为期 30 天的 License 将会发送申请人的账号或邮箱中，客户使用该文件进行安装即可。② 将“VENDOR snpslmd /path/to/snpslmd”中的“/path/to/snpslmd”替换成 snpslmd.exe 实际存放路径（位于 SCL 安装目录下的 win32\bin 文件夹中，默认安装的情况下就是“VENDOR snpslmd C:\Synopsys\SCL\<version>\win32\bin\snpslmd.exe”）。阅读详情

前言：520，七夕这些浪漫的节日你是否还在烦恼怎么过？表白不知如何下手？那就来看看这份浪漫的花式表白吧。

福利来了：下列分享表白六件套（5+1）的形式，表白的形式均以HTML实现，可以让没有编译器的女孩纸也能正常看到浪漫的效果。

花式表白五件套：

    [红心心动：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E7%BA%A2%E5%BF%83%E5%BF%83%E5%8A%A8%EF%BC%9A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0)               

             [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A)

             [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

     [彩虹星海：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E5%BD%A9%E8%99%B9%E6%98%9F%E6%B5%B7%EF%BC%9A)

            [效果展示：               ](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E2%80%8B%E7%BC%96%E8%BE%91)

            [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

     [浪漫鲜花：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%B5%AA%E6%BC%AB%E9%B2%9C%E8%8A%B1%EF%BC%9A)

            [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A%E2%80%8B%E7%BC%96%E8%BE%91)

            [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

    [字幕爱心：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E5%AD%97%E5%B9%95%E7%88%B1%E5%BF%83%EF%BC%9A)

            [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A)

            [源码展示:](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%3A)

     [满屏爱心：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BB%A1%E5%B1%8F%E7%88%B1%E5%BF%83%EF%BC%9A)

            [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A)

            [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

纪念照片墙二选一：

    [立体旋转照片墙：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E7%AB%8B%E4%BD%93%E6%97%8B%E8%BD%AC%E7%85%A7%E7%89%87%E5%A2%99%EF%BC%9A)

            [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A)

            [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

    [3D立体旋转照片墙：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%203D%E7%AB%8B%E4%BD%93%E6%97%8B%E8%BD%AC%E7%85%A7%E7%89%87%E5%A2%99%EF%BC%9A)

            [效果展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%EF%BC%9A)

            [源码展示：](about:blank#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%E6%BA%90%E7%A0%81%E5%B1%95%E7%A4%BA%EF%BC%9A)

总结：

花式表白五件套：

红心心动：

效果展示：

提示：中间的爱心是不断在跳动的

源码展示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>自定义</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: pink;
    }
    .box{
      width: 120px;
      height:  120px;
      background: #ff0000;
      /* 使盒子旋转45度, 并设置边距 */
      transform: rotate(45deg);
      margin: 200px auto;
      animation: love 1s infinite;  /* 动画绑定 */
      box-shadow: 0 0 20px #ff5500;
    }
    /* 爱心形状绘制 */
    .box::before,
    .box::after{
      content: "";
      /* 给插入的盒子进行定位 */
      position: absolute;
      width: 120px;
      height: 120px;
      background: #ff0000;
      border-radius: 50%;
    }
    .box::before{
      left: -68px;
    }
    .box::after{
      top: -68px;
    }
    /* 动画绘制 */
    @keyframes love{
      0%{
        transform: rotate(45deg)scale(0.85);
      }
      50%{
        transform: rotate(45deg)scale(1);
      }
      100%{
        transform: rotate(45deg)scale(0.85);
      }
    }
    p{
      text-align: center;
      font-size: 30px;
      font-weight: 520;
      color: #ffaa00;
    }
  </style>
</head>
<body>
<font color="#FF0000">自定义</font>
<div class="box"></div>
<p>Wish all the lovers a happy Chinese Valentine's Day!!!</p>
</body>
</html>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/

彩虹星海：

效果展示：

提示：鼠标放置在图案上时，彩虹星海会散开，用HTML的形式发给女生时，手机打开点击那里那里散开。

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义</title>

    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: hsla(242, 30%, 5%, 1);
        }

        canvas {
            width: 100%;
        }
    </style>

</head>
<body>
	<font color="#FF0000">自定义</font>

    <canvas id='canv'></canvas>

    <script>
        /*
        (Book REF) HTML5 Canvas Ch. 5:  Math, Physics, and Animation ::: Uniform Circular Motion
        By Steve Fulton and Jeff Fulton
        */
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function (callback) {
                  window.setTimeout(callback, 1000 / 60);
              };
        })();
        window.addEventListener('load', start, false);

        var c,
          $,
          w,
          h,
          msX,
          msY,
          midX,
          midY,
          num = 650,
          parts = [],
          begin = 50,
          repeat = 20,
          end = Math.PI * 2,
          force = null,
          msdn = false;

        function start() {
            c = document.getElementById('canv');
            $ = c.getContext('2d');
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;
            midX = w / 2;
            midY = h / 2;
            force = Math.max(w, h) * 0.09;
            flow = begin;

            window.requestAnimFrame(create);
            run();
        }

        function run() {
            window.requestAnimFrame(run);
            go();
        }

        function Part() {
            this.deg = 0;
            this.rad = 0;
            this.x = 0;
            this.y = 0;
            this.distX = 0;
            this.distY = 0;
            this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';
            this.size;
        }

        function create() {
            var n = num;
            while (n--) {
                var p = new Part();
                p.deg = Math.floor(Math.random() * 360);
                p.rad = Math.floor(Math.random() * w * 0.5);
                p.x = p.distX = Math.floor(Math.random() * w);
                p.y = p.distY = Math.floor(Math.random() * h);
                p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));
                parts[n] = p;
            }
            c.onmousemove = msmv;
            c.onmousedown = msdn;
            c.onmouseup = msup;

            var int = setInterval(function () {
                flow--;
                if (flow === repeat) clearInterval(int);
            }, 20);
        }

        function go() {
            $.globalCompositeOperation = 'source-over';
            $.fillStyle = 'hsla(242, 30%, 5%, .55)';
            $.fillRect(0, 0, w, h);
            $.globalCompositeOperation = 'lighter';
            var mx = msX;
            var my = msY;
            var bounds = force;
            if (msdn) {
                bounds = force * 2;
            }
            var n = num;
            while (n--) {
                var p = parts[n];
                var radi = Math.PI / 180 * p.deg;
                p.distX = midX + p.rad * Math.cos(radi);
                p.distY = midY + p.rad * Math.sin(radi) * 0.4;
                if (mx && my) {
                    var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));
                    if (p.distX - mx > 0 &&
                      p.distX - mx < bounds &&
                      p.distY - my > 0 &&
                      p.distY - my < bounds) {
                        p.distX += react;
                        p.distY += react;
                    } else if (p.distX - mx > 0 &&
                      p.distX - mx < bounds &&
                      p.distY - my < 0 &&
                      p.distY - my > -bounds) {
                        p.distX += react;
                        p.distY -= react;
                    } else if (p.distX - mx < 0 &&
                      p.distX - mx > -bounds &&
                      p.distY - my > 0 &&
                      p.distY - my < bounds) {
                        p.distX -= react;
                        p.distY += react;
                    } else if (p.distX - mx < 0 &&
                      p.distX - mx > -bounds &&
                      p.distY - my < 0 &&
                      p.distY - my > -bounds) {
                        p.distY -= react;
                        p.distY -= react;
                    }
                }
                p.x += ((p.distX - p.x) / flow);
                p.y += ((p.distY - p.y) / flow);
                var x = p.x;
                var y = p.y;
                var s = p.size * (p.y * 1.5 / h);
                if (s < 0.1) {
                    s = 0;
                }
                $.beginPath();
                $.fillStyle = p.color;
                $.arc(x, y, s, 0, end, true);
                $.fill();
                $.closePath();
                var vary;
                if (p.size < 2) {
                    vary = 4;
                } else if (p.size < 3) {
                    vary = 3;
                } else if (p.size < 4) {
                    vary = 2;
                } else {
                    vary = 1;
                }
                vary *= (p.y / (h * 0.9));
                p.deg += vary;
                p.deg = p.deg % 360;
            }
        }

        function msmv(e) {
            var p = getPos(e.target);
            var sX = window.pageXOffset;
            var sY = window.pageYOffset;
            msX = e.clientX - p.x + sX;
            msY = e.clientY - p.y + sY;
        }

        function msdn(e) {
            msdn = true;
        }

        function msup(e) {
            msdn = false;
        }

        function getPos(el) {
            var cosmo = {};
            cosmo.x = el.offsetLeft;
            cosmo.y = el.offsetTop;
            while (el.offsetParent) {
                el = el.offsetParent;
                cosmo.x += el.offsetLeft;
                cosmo.y += el.offsetTop;
            }
            return cosmo;
        }
    </script>

</body>
</html>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/

浪漫鲜花：

效果展示：

提示：鲜花的生成式动态的，需要等待一会才能绘制完成，变成一个鲜艳的鲜花，大概需要1分钟左右

源码展示：

<!DOCTYPE html>
<html lang="en">
<title>自定义</title>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flower {
        margin-left: 32%;
        margin-top: 9%;
    }
</style>

<body>
	<font color="#FF0000">自定义</font>
    <canvas id="c" class="flower"></canvas>
</body>

</html>
<script>
    var b = document.body;
    var c = document.getElementsByTagName('canvas')[0];
    var a = c.getContext('2d');
    document.body.clientWidth;

    with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 600; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)
</script>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/****

字幕爱心：

效果展示：

提示：字幕是在不断跳动中

源码展示:

<!DOCTYPE html>
<html lang="en">
<title>自定义</title>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/d3/4.13.0/d3.min.js"></script>
    <style>
        body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
}

.love {
    width: 450px;
    height: 450px;
    position: relative;
}

.love span {
    position: absolute;
    left: 0;
    color: goldenrod;
    font-size: 20px;
    font-family: sans-serif;
    text-shadow: 0 0 1em white;
    animation: 
        x-move 10s ease-in-out infinite alternate,
        y-move 20s linear infinite;
    animation-delay: calc(20s / var(--particles) * var(--n) * -1);
    user-select: none;
}

.love span:first-child {
    color: orangered;
    font-size: 3em;
    text-shadow: 
        0 0 0.1em black,
        0 0 1em white;
    z-index: 1;
}

@keyframes x-move {
    to {
        left: 450px;
    }
}

@keyframes y-move {
    0% { transform: translateY(180px); }
    10% { transform: translateY(45px); }
    15% { transform: translateY(5px); }
    18% { transform: translateY(0); }
    20% { transform: translateY(5px); }
    22% { transform: translateY(35px); }
    24% { transform: translateY(65px); }
    25% { transform: translateY(110px); }
    26% { transform: translateY(65px); }
    28% { transform: translateY(35px); }
    30% { transform: translateY(5px); }
    32% { transform: translateY(0); }
    35% { transform: translateY(5px); }
    40% { transform: translateY(45px); }
    50% { transform: translateY(180px); }
    71% { transform: translateY(430px); }
    72.5% { transform: translateY(440px); }
    75% { transform: translateY(450px); }
    77.5% { transform: translateY(440px); }
    79% { transform: translateY(430px); }
    100% { transform: translateY(180px); }
}
    </style>
</head>

<body>
	<font color="#FF0000">自定义</font>
    <div class="love"></div>
</body>

</html>
<script>
    const words = [
        '愛', 'Love', '你', '的', '名字',
        'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta',
        'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне',
        'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה',
        'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов',
        'Љубовта', '特', '别', '的', '爱',
        '给', '特', '别', '的', '她',
        '小名', 'amà', 'amôr', 'kærleiki', 'mborayhu',
        'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю',
        'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम',
        'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek',
        'Mahal', 'ярату', 'محبت', 'sopp', 'uthando',
        'ความรัก', '她', '的', '名字'];

    d3.select('.love')
        .style('--particles', words.length)
        .selectAll('span')
        .data(words)
        .enter()
        .append('span')
        .style('--n', (d, i) => i + 1)
        .text((d) => d);
</script>

注解：这个需要自己手动去设计，words字段需要自己去设计，除了爱和Love不能动，其他字段自己设计，根据自己的需求进行精心的定制设计。

满屏爱心：

效果展示：

提示：爱心是不断生成的，是动态的，这里推荐使用电脑打开，使用手机的话爱心的数量会偏少。

源码展示：

<!DOCTYPE html>
<html lang="en">
<title>自定义</title>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
	<font color="#FF0000">自定义</font>
    <canvas id="cavs"></canvas>
</body>

</html>
<script>
    var canvas = document.getElementById("cavs");
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;
    canvas.setAttribute("width", WIDTH);
    canvas.setAttribute("height", HEIGHT);
    var context = canvas.getContext("2d");
    var start =
    {
        loves: [],
        DURATION: 30,
        begin: function () {
            this.createLove();
        },
        createLove: function () {
            for (var i = 0; i < WIDTH / 59; i++) {
                var love = new Love();
                this.loves.push(love);
            }
            setInterval(this.drawLove.bind(this), this.DURATION);
        },
        drawLove: function () {
            context.clearRect(0, 0, WIDTH, HEIGHT);
            for (var key in this.loves) {
                this.loves[key].draw();
            }
        }
    }
    function Love() {
        var me = this;
        function rand() {
            me.attr.scale = (Math.random() * 0.8 + 0.3) * WIDTH / 521;
            me.attr.x = Math.floor(Math.random() * WIDTH - 40);
            me.attr.y = Math.floor(HEIGHT - Math.random() * 200);
            me.attr.ColR = Math.floor(Math.random() * 255);
            me.attr.ColG = Math.floor(Math.random() * 255);
            me.attr.ColB = Math.floor(Math.random() * 255);
            me.attr.alpha = Math.random() * 0.2 + 0.8;
            me.attr.vector = Math.random() * 5 + 0.4;
        }
        (function () { me.attr = {}; rand(); }());
        me.draw = function () {
            if (me.attr.alpha < 0.01) rand();
            x = me.attr.x;
            y = me.attr.y;
            scale = 4 * me.attr.scale;
            context.beginPath();
            context.bezierCurveTo(x + 2.5 * scale, y + 2.5 * scale, x + 2.0 * scale, y, x, y);
            context.bezierCurveTo(x - 3.0 * scale, y, x - 3.0 * scale, y + 3.5 * scale, x - 3.0 * scale, y + 3.5 * scale);
            context.bezierCurveTo(x - 3.0 * scale, y + 5.5 * scale, x - 1.0 * scale, y + 7.7 * scale, x + 2.5 * scale, y + 9.5 * scale);
            context.bezierCurveTo(x + 6.0 * scale, y + 7.7 * scale, x + 8.0 * scale, y + 5.5 * scale, x + 8.0 * scale, y + 3.5 * scale);
            context.bezierCurveTo(x + 8.0 * scale, y + 3.5 * scale, x + 8.0 * scale, y, x + 5.0 * scale, y);
            context.bezierCurveTo(x + 3.5 * scale, y, x + 2.5 * scale, y + 2.5 * scale, x + 2.5 * scale, y + 2.5 * scale);
            context.fillStyle = "rgba(" + me.attr.ColR + "," + me.attr.ColG + "," + me.attr.ColB + "," + me.attr.alpha + ")";
            context.fill();
            context.lineWidth = 0.5;
            context.stroke();
            me.attr.y -= me.attr.vector;
            me.attr.alpha -= (me.attr.vector / 2.9 * 3.5 / HEIGHT);
        }
    }
    window.onload = function () {
        start.begin();
    }
</script>

注解：head下title可自行定义，可以为你喜欢的女孩子专属定义哦，在body下也可以进行一些额外的个性设计，个性设计详情可以参考——> https://www.w3school.com.cn/****

纪念照片墙二选一：

立体旋转照片墙：

效果展示：

提示：照片可以自行更换，使用你的小可爱的照片，这里采用的是网图。

源码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>照片墙</title>

    <style>

        body {

            margin: 0px;

           

        }

        #div1 {

            width: 100%;

            height: 50px;

            background: rgba(50, 161, 235, 0.966);

        }

        #div2 {

            background-image: url(w3.jpeg);

            position:fixed;

            top: 0;

            left: 0;

            width:100%;

            height:100%;

            min-width: 1000px;

            z-index:-10;

            zoom: 1;

            background-color: #fff;

            background-repeat: no-repeat;

            background-size: cover;

            -webkit-background-size: cover;

            -o-background-size: cover;

            background-position: center 0;

        }

        #photo_box{

            width: 280px;

            height: 400px;

            position: fixed;

            left: 0;

            right: 0;

            top:0;

            bottom: 0;

            margin: 200px auto;

            transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/

            transform: rotateX(-5deg) rotateY(0deg);

            animation: run 30s linear infinite;/*循环执行run动画，每30秒执行一次*/

        }

 

        /*设置图像大小、边框、圆角、位置*/

        #photo_box img{

            width: 250px;

            height: 350px;

            border: 5px solid #ccc;

            border-radius: 5px;

            position: absolute;

            left: 0;

            top: 0;

        }

 

        /*依次设置图像盒子中每个图像旋转后位置*/

        #photo_box img:nth-child(1){

            transform: rotateY(0deg) translateZ(500px);

        }

        #photo_box img:nth-child(2){

            transform: rotateY(60deg) translateZ(500px);

        }

        #photo_box img:nth-child(3){

            transform: rotateY(120deg) translateZ(500px);

        }

        #photo_box img:nth-child(4){

            transform: rotateY(180deg) translateZ(500px);

        }

        #photo_box img:nth-child(5){

            transform: rotateY(240deg) translateZ(500px);

        }

        #photo_box img:nth-child(6){

            transform: rotateY(300deg) translateZ(500px);

        }

        #photo_box img:nth-child(7){

            transform: rotateY(360deg) translateZ(500px);

        }



 

            /*采用@keyframes 规则创建run动画。*/

        @keyframes run {

            0%{transform: rotateX(0deg) rotateY(0deg);

            }

            25%{transform: rotateX(10deg) rotateY(90deg);

            }

            50%{transform: rotateX(0deg) rotateY(180deg);

            }

            75%{transform: rotateX(-10deg) rotateY(270deg);

            }

            100%{transform: rotateX(0deg) rotateY(360deg);

            }

        }

        #text1 {

            float: left;

            color:#fff;

            width: 150px;

            padding:12px 0;

            height: 50px;

        }

        #text2 {

            float: right;

            width: 100px;

            color:#fff;

            padding:12px 0;

            height: 50px;

        }

        #text3 {

            float: right;

            width: 100px;

            color:#fff;

            padding:12px 0;

            height: 50px;

        }

 

    </style>

</head>

<body>

    <div id="div1">

        <div id="text1"">自定义吧少年！</div>

        <div id="text2" οnclick="outclick()" >自定义</div>

        <div id="text3">么么哒（也可以自定义）</div>

    </div>

    <div id="div2">

        <div id="photo_box">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F101920105F8%2F201019105F8-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=d18cdf8cbddbda08398c2dc38ff49aeb">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.phbzj.com%2Fxiaohua%2F0906%2F090609386324.jpg&refer=http%3A%2F%2Fimg.phbzj.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=1300eb4df8a0ad59c2969f222981157d">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.phbzj.com%2Fxiaohua%2F0906%2F090609245804.jpg&refer=http%3A%2F%2Fimg.phbzj.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=cb319b9177caa55551734dd57772231e">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F032021105A0%2F210320105A0-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=56715387733af21b0395c55883adbadd">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.lemeitu.com%2Fm00%2F74%2F4c%2F984859d624d64c632a3b05c86a88e1b1__w.jpg&refer=http%3A%2F%2Fimg.lemeitu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=c42fcdd00f3bb6bb543ab3fde9bc6cc9">

            <img src="https://pics3.baidu.com/feed/b3fb43166d224f4a1cc8c8d4379ba1559922d113.jpeg?token=22d5daf0ccc038a2e8b5b298015d7598">

            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fcc%2Ff1%2F36%2Fccf136f5d2d199d9e98b5cece5f09987.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662343346&t=a4667eceed59ec1889e146596eb77bfa">

        

        </div>

    </div>
	

<script type="text/javascript">
           let mp3 = '小虎队 - 爱 (Remix).mp3'
           let audio = new Audio(mp3)
           audio.autoplay
           audio.play()
			
 
            }
</body>





</html>

注解：照片是可以无限制添加的，这里示范只用了7张，在 /*依次设置图像盒子中每个图像旋转后位置*/中对transform: rotateY（？deg）红色？进行修改，角度设置从0开始，360结束，让中间每个图片角度相差相同即可，下面需要几张设计几个，调整角度差距，同时在

字段中添加img字段，注意，这里你要想你的小可爱看到，需要使用链接的形式，你需要的图片可以上传到你的QQ相册里面，再用电脑打开复制连接，将连接传入src字段即可。若有不懂可以联系笔者。

3D立体旋转照片墙：

效果展示：

提示：这个效果不好演示，图片需要自己添加自己演示，效果还是很好的，非常推荐，这里一堆有纪念意义的，非常好看。笔者推荐！！！

源码展示：

<!DOCTYPE html>
<html lang="en" ondragstart="return false">
 
    <head>
        <meta charset="UTF-8">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>我的照片墙</title>
        <!-- 如果我有天醒来 -->
        <!-- 层叠样式表 -->
        <style type="text/css">
            /* 去掉默认效果 */
            * {
                margin: 0;
                padding: 0;
            }
 
            body {
                background: #222;
                overflow: hidden;
                /* 取消选中 */
                user-select: none;
 
            }
 
            @keyframes rotate {
                100% {
                    transform: rotateY(360deg);
                }
            }
 
            .perspective {
                /*子元素透视 场景深度*/
                perspective: 600px;
            }
 
            .wrap {
                /* 3d */
                width: 135px;
                height: 240px;
                margin: 100px auto;
                position: relative;
                /* border: 1px solid red; */
                transform: rotateX(-20deg) rotateY(0deg);
                transform-style: preserve-3d;
 
            }
 
            .wrap img {
                display: block;
                /* 绝对定位 */
                position: absolute;
                width: 100%;
                height: 100%;
                transform: rotateY(0deg) translateZ(0px);
                background: transparent;
                box-shadow: 0 0 4px #fff;
                border-radius: 5px;
 
                /* webkit */
            }
 
            /* 照片底座 */
            .wrap p {
                width: 1200px;
                height: 1200px;
                background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
                position: absolute;
                border-radius: 50%;
                left: 50%;
                top: 100%;
                margin-left: -600px;
                margin-top: -600px;
                /* 沿着x轴按倒 */
                transform: rotateX(90deg);
 
            }
        </style>
    </head>
 
    <body>
		
    <div id="div1">

		<!-- <font color="#FF0000">小飞七夕快乐呀</font> -->
         
    </div>
	
        <!-- 盒子容器 -->
        <div class="perspective">
            <div class="wrap" id="imgwrap">
                <!-- 引入图片值页面 -->
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5uCyPHi2uYn.ypExmrg3XwitxlF426D3P9cHlVVJ5JQOjwPgM7Tkou2UDt07IOZWWOWyqY9PCir9HLftF8ZR*tk!/b&bo=OASgBQAAAAABB7k!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tH2fSENlZ7S*xNMd3LjL5JUcvCzvwRtAlNT5foEMAprrZzqqsvCkdLa8EDMgwyc7RICf9YBVioCnSxrDuSX7mI!/b&bo=OASgBQAAAAABB7k!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tH2fSENlZ7S*xNMd3LjL5LWR*HJimjXdRI.jJwd13S5Gxa69fgTZWet9EVrmRFoEWB*B94olxYWZlNxDhM*CO0!/b&bo=OASgBQAAAAABF6k!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pwcxEBkt.RtUhlDUkCPTnjeZZM8qBCxQFjD*s8fkWzFQDsnVPRK6N6I3tYo94PMVYYecpPUL3*PnRAl1vM7CRc!/b&bo=OARTBgAAAAABF1k!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pwcxEBkt.RtUhlDUkCPTniaicM.Lv6RB6X46xfiiHuXypFNTW*.Wqumbo2nwj42zynmgz1jre1Yp.xUHiVe6RQ!/b&bo=OARlBQAAAAABF2w!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pwcxEBkt.RtUhlDUkCPTnjd**5F7jJA2s9MpHku8hnYWXvaKknsPjoxOd28T.ryeBQh4sgg0cqUY0ZI0f75ZjI!/b&bo=wAMABQAAAAABF*Y!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pwcxEBkt.RtUhlDUkCPTnhZ8S3Gvgo3r7IfOUZ3r0JhTjg05vpsVf01c4DY2ktkMvF*pA3qSxUI3A8hFxC4B.k!/b&bo=OASgBQAAAAABF6k!&rf=viewer_4" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmLQRHjY31HVkA4Xeyvxj5i6IPq6x1ry1Qrj9paRiFPfb6oyzzosAYAJB0XG4v*n*wA!/b&bo=OAREBgAAAAABF04!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmKAfbXYiAVgxlmYNfhKWOrKlYyiZZQL.Sf.WSk8LbrCl13OPdJ9MdzWgg*.*svZYtA!/b&bo=OARABgAAAAABF0o!&rf=viewer_4&t=5" />
                <img class="f1" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5p0qxbzh6W*K*a8DVt5QsCcHf6HW5MkmDru.2jHO9aAiMgWlVIQLyeEfANL5D5jHcuAir62Vrh7FOyZODIlFOlw!/b&bo=eAH0AQAAAAABB6w!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pwcxEBkt.RtUhlDUkCPTnjdVQvPsN2DLirU*AfyaERGgNs.aU8APjN.3MpCnT8EGAUHT1jZZnpbia*4*hU0RAU!/b&bo=YAlABqALwAcBKU0!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYqq*to*zftjVXb6bPH7rC1JGhpfNCvtsv4fw8ZTdNeO4gU95wDK4muHOyhAVdwyFwc!/b&bo=YAlABmAVQA4BGSo!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYqyb*4cAlAysoOif7KSiJ3wiEDRm2HkGMDaAcEwZyMWH2G4uLk58nf6nq7ZHPmJ86I!/b&bo=YAlABmAVQA4BGSo!&rf=viewer_4" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hmFB69oE05iLWvVnWttk8hHvqo5k6OyT3RF5H*Mf5WyseAgRb1lKsRmbXP5y1y1bwXK2jZ0aT*Z97yk0aOFFOs!/b&bo=YAlABmAVQA4BGSo!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hmFB69oE05iLWvVnWttk8ir3gbtJ4th*GwFqwpo1HaIt16mHxkxajhPB5TVSWj5vHYTfu490dcJY0n0sKuAEDw!/b&bo=YAlABmAVQA4BGSo!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hmFB69oE05iLWvVnWttk8jHSHwGgnU0wtWqSOvTtilYKt5AWWMQEHp6KRgUa5BRwYyEEhenB6CuT.8HK5*Xo3Y!/b&bo=sgPuBLID7gQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hmFB69oE05iLWvVnWttk8iC3W1b6uS3EcawwJQoHEcm54DLpf*PY9O.UxzPA1OyuHwCQjqhxeZPtrrYXyWh6lE!/b&bo=gAc4BIAHOAQBKQ4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ipezfd*yfg.x85dAFCpj0X1zT72O5adOB4Zh3SW8hsNld3YKnMHJhM8OGE7WJ9ietLC8olaqV1zqLnPkJJsC2I!/b&bo=KAYnBigGJwYBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ipezfd*yfg.x85dAFCpj0VlkHR8Ny7bXc5oebNVjQiaR3BZfS1KKiTBkEnODS2yJJ9qaKUmlOL9tZXjHIkfJ*s!/b&bo=IwcDBCMHAwQBOR4!&rf=viewer_4&t=5" />
 
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ipezfd*yfg.x85dAFCpj0VQyTGfxDLYvXDVBQhmscSJfVAOW49xZSfo9mNZKcMUoKcyab759HwKErKNQp2A8cA!/b&bo=gAc4BIAHOAQBOR4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5iu3ijGKL0rLpEBGZh0wVL7rcyvs9LIa1jD.Bk4uHq72o4KzH9USjYz.dVvNRnj7QeGR1bPhdFYWI8sCr7GavEA!/b&bo=1wI4BNcCOAQBKQ4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5t8Rl.rYzRg6AN54NM0dcvYp7DZoC4Th2HQUVfe09TtzjHQUMgmYq4XXhPdnhwp2wxLGCOXA0bdwMlvMvjRQWXU!/b&bo=RQY4BEUGOAQBKQ4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5t8Rl.rYzRg6AN54NM0dcvZyPFXJrzH*jYknXGAhW3XsgsA8Th74daR2cElBgZSl2ctnmsR7GoTSZGjrB8FpLp4!/b&bo=QAZ.CMYLABADiUE!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5t8Rl.rYzRg6AN54NM0dcvb5VPE6jETHDuAor13bKGIbM8kEALokVH0O.DqqcXEMXV0HCCpLZMhhU*uHY*ftAjg!/b&bo=gAc4BIAHOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5t8Rl.rYzRg6AN54NM0dcvaBleCeaO713Z6EDaJZTUM.j.*RNs09U6YuzrAhuFDNOMTJq0B7WCbPjFaBNSzwcP0!/b&bo=gAc4BIAHOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5vwMwIfone.WsuvXCv3LU2UQmEc.fzVixPKcUWIjUGxTAOlapGQEO1XLHGote*8ee5TlIlXAOxgwFn1hG7pBrMk!/b&bo=gAc4BIAHOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5vwMwIfone.WsuvXCv3LU2UgsibMK*8DwjUZ7PNM4LsUsmCskUmvvsvYhEdpWrfs6aUE0*RRJUNGNlr7UJ5J8P0!/b&bo=gAc4BIAHOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5vwMwIfone.WsuvXCv3LU2WX2dkUVcYVnO4RT9Zm76c1V3JKVnQ0Tdgm1ZQ.vHj8Zp7p3TKr5GCYTAoRkAcm2P0!/b&bo=gAc4BIAHOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5h1Mp*D0HM0.30d5Ofh.RHAOr1quZvTSHl4eVjHLPXVt.mV10CSAxJP5OUgxPw3uKWCcBYA1OwJDZr8YEVTAmjA!/b&bo=AAgABgAIAAYBKQ4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5h1Mp*D0HM0.30d5Ofh.RHBBn9iONn8NWvc5Q8rSRP724nKZi0jM3X1HEEwDjbFFiiqpHVZ3LqSceb..MLXHw9U!/b&bo=QAZhCdoISA0BGYc!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5v8OpJxHR2v*nzyOyhWwVh2gchL4eJu8WhQyNA5HTnd*Ei.dbxbuCn75rU8u1HvjX6qlU1igQOpieoobyxM.ip8!/b&bo=*AOUBfwDlAUBKQ4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5v8OpJxHR2v*nzyOyhWwVh1qLzfAp*16vmbmkHOyCNO0rVsxHTLsjIV.NgYISDoeaWdyzpkCK*rizoDB5WAxmiA!/b&bo=rAMkBawDJAUBOR4!&rf=viewer_4&t=5" />
                <img class="f1" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5v8OpJxHR2v*nzyOyhWwVh1toCkALbi6fgyETPBtCzzCvAYyp75HTCJKyfBKqyqh9hsbAkkPfFyqlxyj0a59lXE!/b&bo=QAZVCDAMQBABOWk!&rf=viewer_4&t=5" />
 
                <!-- 引入图片值页面 -->
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5v8OpJxHR2v*nzyOyhWwVh3xT7iMenl56ksThbEYbxkI0iOjRS7Duoh5nInEHA3DH7aGewxUbjWCb3r*8YW54c0!/b&bo=YQlABgAQqgoBGaA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5id15H8gYUDfwFoZ1MNtp78aG3XwPY7DJ3ESZfry.dWAgNfpaReJ5WZpwJxV0t.he*ReRVlEuPhgPkS0Z3wfJSY!/b&bo=YQlABgAQqgoBGaA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5id15H8gYUDfwFoZ1MNtp7*fu49XUDjtq1qPDZ*K2sApxWqtG2kYKOJz14eZjSRAtV*kyzmTqUdpANu.ieu*4J8!/b&bo=YQlABgAQqgoBGaA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5id15H8gYUDfwFoZ1MNtp79iy9hGIKwudUvwogVA2B8xbN4CNncWAkm8PlyzkYKhlkkDXvaVppHlGw*.dOxpSAQ!/b&bo=YQlABgAQqgoBGaA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5id15H8gYUDfwFoZ1MNtp78YThxzt1y.Pt9H0yCmR0Tofux1mg3ji22skWdhmLz.DELn*9oMA1RpW7AjEiZ7F.A!/b&bo=QAZVCJAJwAwBKUA!&rf=viewer_4&t=5" />
 
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5uQsVxD7xDuv4uiVwWkiCMF4V9sxUrqekY1X6EQ0RHiIavrzeUppq0VG4WF27ii1ytf6KK8zCWhAr6*Bplh26e0!/b&bo=QAZVCJAJwAwBKUA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5uQsVxD7xDuv4uiVwWkiCMEiryNJ*G7fB0nNaw9WLx2u8AQUSZVZwEswiAwhFJ3Mvj8onO5oLmXl*N0eVLhP6ZE!/b&bo=QAZVCDAMQBABSRk!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nEJY5mu9sARNDDuzBJS6mYarDv0LTaxLPKeG92N9TTKwaCEv9oD4TouSlZpV*xkH4vtpmpo6ut8zmXAuUMhxv8!/b&bo=QAZVCJAJwAwBOVA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nEJY5mu9sARNDDuzBJS6mbTm.ah.vxx1xTVu6mlZBlluLnBqhshPd3jNUaFX2s0BafCvSn68XiwSaOrqZ6K9N4!/b&bo=QAZVCJAJwAwBGXA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nEJY5mu9sARNDDuzBJS6mbu9kr3dNkM.eyBJxi91tFUYPgxq8sZdE0QLcq8xkVH7XMTTK*UHwpLbd0zktl6pTs!/b&bo=QAZVCJAJwAwBGXA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5q6RaOWYPmbgg4z2ckX2R8mv9qMDThy9emzNYNShNrclXuYvYIW7qyjXSYuRic9v7vIlqMy.CpruqdfR3uf7paE!/b&bo=ogU4BKIFOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5q6RaOWYPmbgg4z2ckX2R8nFpZPpONHYyn**jhFiOFSlemKbk0ZcrqJHYKVFHSAUSjSMvQRoc0UCk1Y.US4yWzU!/b&bo=ogU4BKIFOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5q6RaOWYPmbgg4z2ckX2R8mWqQNvsDNGpjnACxuslzIOGrcjpAyrjGo*OEt*IlkAPbx*QbOAliw*mZaqnb2XOCg!/b&bo=OARmBzgEZgcBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5q6RaOWYPmbgg4z2ckX2R8k9oe4ytfbOff0cKX3IycDIC6FKu4BqEeHhwk9ycWHEhKgqlcy04P0.XUeXXu*xysI!/b&bo=OATXBzgE1wcBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pmYzhqFofGx8ttqEDx2wSGVRHR6jiFqcGp3jxVMVElDar7zwNJaqb*LS02kae*wa.eHEclNR1EUKaUdrBoJ0XU!/b&bo=QgUCB0IFAgcBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hl2dfW3r5ZVxc6Oc6jl9slPjwVR4lN5n5uz0n5QWhO7eTG3IvSJAU5LL5KMlASMDKv1UTqnYD.b6Q9BO9L5MHs!/b&bo=gAJVA4ACVQMBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hl2dfW3r5ZVxc6Oc6jl9snXTj3Lzj1xBkbK*fHKxekb419RgFVQUOvlyTdzNVxRTREuX63.nLRWQbeZWV57x.s!/b&bo=gAJVA4ACVQMBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hl2dfW3r5ZVxc6Oc6jl9skwyY42EGVx5Pe.v8Le8YqgCWme2pyuhRiw6aH6y7uhedXFsSHNU71VyqgYHAocojs!/b&bo=OASgBTgEoAUBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5lW2nVPNVwXnsOEeoK.pvVwjxzpMlIVj85jILJ9lQ6SQvm9Uh2IZRa0dcwdEYKYnFXb4Hgcj*FzLiW2ZrxBXKCI!/b&bo=OASgBTgEoAUBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5lW2nVPNVwXnsOEeoK.pvVwcNFAP36VjBa20pYSsHYOZmnytpQnk7wM36BZ1XZlPb.P11Upq6U*8XZlAehP34LI!/b&bo=gAKOBdACQAYBGaM!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nqIhNHItFC8rMp8ggw3cUXKEwQvJefIJD*ywBYOvJ*eaGFz0YzfBXU8uqKuDII31XDLEgHi4oQOCazjxKdNVrw!/b&bo=gAKOBdACQAYBGaM!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nqIhNHItFC8rMp8ggw3cUUFit5LimrWkE0P3IyP3L24wfO4wYzbo0SQa2MhO6WcKuLSuw.FH*BSwxBXJQFyJ4Y!/b&bo=pAU4BKQFOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5nqIhNHItFC8rMp8ggw3cUWo6KuBJgr4JEVsGwzGJRJ4PvY.0kFsfOgQBSnHjRUOhbCyPmr1JrBxGmVWosgsn4Y!/b&bo=QAZVCDAMQBABOWk!&rf=viewer_4" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5iH7DNtD3bCKRfKO5wAmVF8.se2QoSc09lZTqAzYTlWzA1x*dlEgVI313Wl*Z0GdWP1znb*5o.uzXZ*yUiZ*zbA!/b&bo=QAZVCJAJwAwBGXA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5iH7DNtD3bCKRfKO5wAmVF9TdKz9Uhsl4ywSEehi4.YXU5i78gPmuJlpPNdrbrZpwPQvIWOJ45Mh7UywfPh1efU!/b&bo=QAbsBjMH.QcBOXg!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5iH7DNtD3bCKRfKO5wAmVF*LhRIGvt28tAKH0HlMpETfyQ5yODss0Wf0UqjAbrk2Nwah3bZmuIiyhx6N.Ugz*g0!/b&bo=QAYLB18IbwkBGUU!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5u2coXYR63qeKfT*TA6ETEO2Q6VnMuk3JOhOGyr0jGfBs0kghs1ZqEkHwGCaW5jGJJlDwr.FG430RCoAlWUCR0Q!/b&bo=OASgBTgEoAUBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5u2coXYR63qeKfT*TA6ETENPWga4A8F3ykgVVCCkyeLQjLwnSr7U2Za4xpQwEzSUXKVLEykcsRB9rsFlxr2*6HE!/b&bo=gAKOBdACQAYBGaM!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5u2coXYR63qeKfT*TA6ETEN08hmcIKZKylMUeydxkgiuLMFwu*EtQnIAuZNf*GXQvCBrpFnDdjek.hkyDckyKtw!/b&bo=oAU4BKAFOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5u2coXYR63qeKfT*TA6ETENU2UDpB.BCt3NDdnXKWXdrMUw6olD9c2sfSOo6ddcUI3otQgE*QvS3n4h1Sow4QEI!/b&bo=QAZVCJAJwAwBKUA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ucCjA.ukJmvUHhXaBUafuZSeY5EcU1S*DTDwCcBS1gN184W26uJMPOT7jU0oNjuAiwlsAQ7pewsB8XeUBU9zE8!/b&bo=QAZVCJAJwAwBKUA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYrIRcPMSqfnqSxAS4Gf5XA5nlnCYQ0j7kKh.ydM6rq1*HuVtsNume5O9jVBcf3jNjs!/b&bo=QAZVCJAJwAwBGXA!&rf=viewer_4&t=5" />
                <img class="f2" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYpQbK3b2Dfp56TnofYEoITwS1rxmW*lvUokaKg3Zfwi6Uw17igJw8zWxaNqvLEfWvs!/b&bo=QAZVCJAJwAwBGXA!&rf=viewer_4&t=5" />
                <!-- 引入图片值页面 -->
 
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYqP7p9qdJ95k1kG.eZUOwqxWEfPFWeP.w3.pEjId.TUSt2Fm4OXiI4mOyMFHLS6GzI!/b&bo=1QQ4BNUEOAQBGT4!&rf=viewer_4" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYobIGzXiRvYtgmf9PlUSOF3IpsPJzIISOOpt4uU5*deXPa5E.Lv.NYs9iEv.cOt86I!/b&bo=OASgBTgEoAUBGT4!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hmFB69oE05iLWvVnWttk8juqZDrcTG5CbeojenB8esHPuYRmzvkNQ6C8SlOYvJ6X9aDBfTqin2SP9.3t9IgAsM!/b&bo=VghABi8MIwkBSX8!&rf=viewer_4" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5uvcKbngUZFFCqtSrUpBjNumTKFc*2U4v7oaJEzKWX1qtddcB*VD6VQOL9jxR34tDsKkuG2oiuZD2FzVf8accpQ!/b&bo=QAZVCKARgBcBKTM!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5vwMwIfone.WsuvXCv3LU2WiYzi4EW87pRXZ58xVEmqXtCKpxWy.xgKUcksu2WfTvlGBPPQKRjebRayjxbObIXo!/b&bo=QAZaCCgPQBQBKWk!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5vwMwIfone.WsuvXCv3LU2XS5Wl5bniJbDHO5GtincX02mtBC8SDHRpqjp.HfTPiyjhyfPIz5*jKhJrLrZeaiIk!/b&bo=QAZaCCgPQBQBKWk!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5oncT*KhahzGwOYAM3T0.BJj1dk3Gbj4du0jC79TZCABmDxn8o4UCpzj3eF3gpIHX68e*UYYHCFqpyKXose11DM!/b&bo=QAZaCCgPQBQBOXk!&rf=viewer_4" />
                <img class="f3" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmI877ZPQoV9OVCvrppLnWk*1GO12k.zRui9FADEMLPz7jqifP6Z*0RM4dmQ3.qt9ns!/b&bo=MAEcAgAAAAABFx8!&rf=viewer_4&t=5" />
                <img class="f3" src="httpc.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5qjhCtm7pDE4QHT0B7aQ0UO7rdyEEGRcLc06MUMasWcpsx*2pYwfRNMDER1.Gj3u5G*RVun*tYnum2*CmvIJcWg!/m&ek=1&kp=1&pt=0&bo=0ALAAwAAAAABFyE!&tl=3&vuin=3162433161&tm=1659574800&dis_t=1659575689&dis_k=d8f475773fa1626bfd86e3b9ec149ba3&sce=60-4-3&rf=viewer_4&t=5" />
                <img class="f3" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5qjhCtm7pDE4QHT0B7aQ0UOhRaLgtV2zFCthgaqIsjGZJB*1aw9L8sN4sPllr3Dxe31Hn4rCYfpi3xy1.IjhpCc!/b&bo=iALAAwAAAAABF3k!&rf=viewer_4&t=5" />
 
 
                <img class="f3" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ivyEBT7McIUic5zvQDqhHGWzMiZVkK1CrpyxT6.pkXIBPSzEqZjYCOpnWSWsjXuo*nJR7r0A7.qQoxKRx3AB2o!/b&bo=0ALAAwAAAAABFyE!&rf=viewer_4&t=5" />
                <img class="f3" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈adadadfaf哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmKhxAFqPAwA1Upz67iii5gx0v哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmKhxAFqPAwA1Upz67iii5gx0v.ANiJZsAYAwq7arkObnEG1Jc95sKiKQATDF9iuhHc!/b&bo=HAIcAgAAAAABFzA!&rf=viewer_4&t=5" />
                <img class="f3" src="htotj.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tH2fSENlZ7S*xNMd3LjL5I9h7nB2p3WlHN4.7IKcMpKDMab91kPlat2CFrA37sxKuoTdULJnfpzBSpT9yX*IbQ!/b&bo=YAlABqALwAcBKU0!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tH2fSENlZ7S*xNMd3LjL5JtJAq0DU.MfODFJ*rlPjhR0xJ2uVVChU8haPDyoAhvyjM9MfxCzq*nfvxrLpTvbl8!/b&bo=AAewBAAHsAQBKQ4!&rf=viewer_4&t=5" />
 
                <img class="f3" src="ototj.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ucCjA.ukJmvUHhXaBUafuaiPNFogDSmhM68ok345EgNPlglQPLjtzsXbpK.yjNE3BO9J7jYhZnYLd*SIX94CsU!/b&bo=QAZVCKARgBcBGQM!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ucCjA.ukJmvUHhXaBUafuZ87n7*eZ2A0MfgONFf6kaIK1lKYOuQ0.PQ*vZhpMzy7qZyAMXH2jfzHHL5XUz2hmQ!/b&bo=QAZVCKARgBcBKTM!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ucCjA.ukJmvUHhXaBUafuYKBnGC6FuBsRZbCZmwt*hEriG5ikbCcMRYVbwFQ0BjmriK1yymIod*a296DzYlZEM!/b&bo=QAZVCKARgBcBGQM!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ibx*HY6*8nNBbbPb5RLNYqNIP59Fw1FdZvAiB7CvWy8fK.uWBeCA2K4lp*NbeSVAWGKOmqDZMtkwgzXm**K4ls!/b&bo=QAZVCKARgBcBGQM!&rf=viewer_4&t=5" />
 
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pmYzhqFofGx8ttqEDx2wSG8rTgmDyaaoFnXW493reNSNyQPcrp9L8vx6ZtW8lwIwVRAjPRyMYNrITmZDdqKJzY!/b&bo=ywBoAQAAAAABF5I!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5hl2dfW3r5ZVxc6Oc6jl9smphFamxYT12lzxB0w5wWKItVXepNcYtba6dTZcuT1MIu80MYk0hYitAaUucKXck2w!/b&bo=ywBoAQAAAAABF5I!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5t8Rl.rYzRg6AN54NM0dcvZyPFXJrzH*jYknXGAhW3XsgsA8Th74daR2cElBgZSl2ctnmsR7GoTSZGjrB8FpLp4!/b&bo=QAZ.CMYLABADiUE!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5v8OpJxHR2v*nzyOyhWwVh2gchL4eJu8WhQyNA5HTnd*Ei.dbxbuCn75rU8u1HvjX6qlU1igQOpieoobyxM.ip8!/b&bo=*AOUBfwDlAUBKQ4!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5uQsVxD7xDuv4uiVwWkiCMEiryNJ*G7fB0nNaw9WLx2u8AQUSZVZwEswiAwhFJ3Mvj8onO5oLmXl*N0eVLhP6ZE!/b&bo=QAZVCDAMQBABSRk!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5gSDaVOrkBrTP4o3clVR7iQWgIZnHTAPbzD9MStIxXWmsxHK7VKRKc2J7HcPPfVlsDeXlS9tN5lvh.ju5TO5FHo!/b&bo=wAIABMACAAQBGT4!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5moXnV0Qs99wQYKSaW*YF*nXw3S6nIqVkXB9uPWy*hjubYQwWZw.FEcTiU5vt*KG4IA.r.sb7TQjOHpRFf2*qGE!/b&bo=QAZVCDAMQBABGUk!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pr*E6FxOiMk5mRxeFClfSIP8eD5Cb8eizz589QJ9zbL5g*gM7oJ6kXn3.05s*PVzGLYfnmWjjjgL1qKqqMbUEA!/b&bo=UgY4BFIGOAQBGT4!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5mVY.UMBr6AM8ntxjyG.NLdhxwykTkyC9N5IxxKgdDJXp5o8lb*dDqWUjPQFRwAiTHmHzhq8FEaquh32HFwdIGw!/b&bo=MAEcAgAAAAABFx8!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5my6KDroWu4gl.EbuonwNnAM40rwmM8x2lv1HZJaFWIYiHbirud6GIjuMXm9LtJcEVzg*dEENvqvfUWv2uW5b20!/b&bo=OASgBTgEoAUBGT4!&rf=viewer_4&t=5" />
                <img class="f3" src="h自定义哈哈qpic.cn/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5tJQISwgQ0WjkR7RWzxXsmKhxAFqPAwA1Upz67iii5gx0v.ANiJZsAYAwq7arkObnEG1Jc95sKiKQATDF9iuhHc!/b&bo=HAIcAgAAAAABFzA!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5pmYzhqFofGx8ttqEDx2wSFo1vIasEXpqj.WeyDfV6l0oBHnuGmKpVUn6ZKZIT7N*2qCA34aLGSMu449AqIK3nw!/b&bo=HAIyAQAAAAABFx0!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5oncT*KhahzGwOYAM3T0.BLhZdTLi.8zdU06*jb5C0n1K.Sgvz.ylTxUFyoJHppZZdQTp1qJiWfQbM9jZhEMD*w!/b&bo=QAZVCJAJwAwBKUA!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5oncT*KhahzGwOYAM3T0.BII76dTtdsjIxrGsUu9lyTOtPfCH1*VviNguiHpH87ZR9itdWWt4UR*FSU5vyp6acQ!/b&bo=gAc4BIAHOAQBKQ4!&rf=viewer_4&t=5" />
                <img class="f3" src="自定义哈哈.photo.store.qq.com/psc?/V51XXmGw4X7自定义哈哈jcrc2s6Zk2/ruAMsa53pVQWN7FLK88i5ipezfd*yfg.x85dAFCpj0XjQBSxEpMrmjX3rUdPyouUaLW0toGrr1sl87LEP9XBxVvCK063pMahivpTga1PnuI!/b&bo=gAc4BIAHOAQBKQ4!&rf=viewer_4&t=5" />
 
 
                <p></p>
            </div>
        </div>
        <!--  src="JS/photo.js" -->
        <script type="text/javascript">
            let mp3 = '小虎队 - 爱 (Remix).mp3'
            let audio = new Audio(mp3)
            audio.autoplay
            audio.play()
 
 
            var oImg = document.getElementsByClassName('f1')
            var oImg2 = document.getElementsByClassName('f2')
            var oImg3 = document.getElementsByClassName('f3')
            var len = oImg.length;
            console.log(len)
            var deg = 360 / len;
 
            var oWrap = document.getElementById("imgwrap");
            // var oWrap=document.querySelector('.wrap');
 
            //页面加载完毕在执行的代码
            window.onload = function() {
                Array.prototype.forEach.call(oImg, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";
 
                });
                Array.prototype.forEach.call(oImg2, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";
 
                });
                Array.prototype.forEach.call(oImg3, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";
 
                });
                // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                //       // 旋转并沿Z轴平移
                //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                //       //过渡时间1s
                //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";
 
                // });
 
            }
            //翻动3D相册
            var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,
                rotY = 0;
 
            document.onmousedown = function(e) {
                // 点击设置初值
                lastX = e.clientX;
                lastY = e.clientY;
 
                this.onmousemove = function(e) {
                    newX = e.clientX;
                    newY = e.clientY;
                    minusX = newX - lastX;
                    minusY = newY - lastY;
 
                    rotX -= minusY * 0.2;
                    rotY += minusX * 0.1;
                    oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                    lastX = newX;
                    lastY = newY;
 
                }
                this.onmouseup = function(e) {
                    //鼠标松开
                    this.onmousemove = null; //清除鼠标移动
                }
            }
        </script>
    </body>
 
</html>

注解：图片推荐使用链接的形式，虽然内置也可以，但是只有自己能看，转成连接的形式，所有人都能看，下面的mp3音乐可以播放，如果能找到音乐链接的话就可以在所有地方播放了，笔者没有找到，所以采用的是本地地址，需要把音乐和HTML文件放到一个文件夹里，要想你的小可爱也能听到，需要将文件夹打压成压缩包发送给你的小可爱。

总结：

采用5+1的形式送给你心仪的人，凑齐六件套，66大顺，会让你的那个她开心一整天，加油吧程序员们，大胆追求你的爱情吧！！！最后，学习也不要拉下哦，这里笔者给小伙伴们准备了学习网站总结大礼包，希望小伙伴爱情学习双丰收哦。学习网站连接：https://blog.youkuaiyun.com/yushaoyyds/article/details/126063944?spm=1001.2014.3001.5502