前言：520，七夕这些浪漫的节日你是否还在烦恼怎么过？表白不知如何下手？那就来看看这份浪漫的花式表白吧。
福利来了：下列分享表白六件套（5+1）的形式，表白的形式均以HTML实现，可以让没有编译器的女孩纸也能正常看到浪漫的效果。
目录
花式表白五件套：
红心心动：
效果展示：
提示：中间的爱心是不断在跳动的
源码展示：
<!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结束，让中间每个图片角度相差相同即可，下面需要几张设计几个，调整角度差距，同时在 <div id="photo_box">字段中添加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.csdn.net/yushaoyyds/article/details/126063944?spm=1001.2014.3001.5502
扫一扫
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
