472 lines
14 KiB
HTML
Executable File
472 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>流星雨3D旋转相册</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
display: flex;
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
/* background-image: url(./img/3.png); */
|
|
background: #0c0c0c;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#box {
|
|
z-index: 9999;
|
|
position: relative;
|
|
display: flex;
|
|
width: 130px;
|
|
height: 200px;
|
|
margin: auto;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-10deg);
|
|
}
|
|
#box > div {
|
|
transform-style: preserve-3d;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 200px;
|
|
font-size: 50px;
|
|
text-align: center;
|
|
box-shadow: 0 0 10px #fff;
|
|
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
)
|
|
40%, rgba(0, 0, 0, 0.8) 100%);
|
|
}
|
|
|
|
#box p {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 1200px;
|
|
height: 1200px;
|
|
background: -webkit-radial-gradient(
|
|
center center,
|
|
600px 600px,
|
|
rgba(50, 50, 50, 1),
|
|
rgba(0, 0, 0, 0)
|
|
);
|
|
border-radius: 50%;
|
|
transform: rotateX(90deg) translate3d(-600px, 0, -105px);
|
|
}
|
|
/* 下雨特效 */
|
|
#codepen-link {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
height: 40px;
|
|
width: 40px;
|
|
z-index: 10;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
|
|
background-position: center center;
|
|
background-size: cover;
|
|
opacity: 0.5;
|
|
-webkit-transition: all 0.25s;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
#codepen-link:hover {
|
|
opacity: 0.8;
|
|
box-shadow: 0 0 6px #efefef;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<audio autoplay="autopaly">
|
|
<source src="renxi.mp3" type="audio/mp3" />
|
|
</audio>
|
|
<!-- 相册 -->
|
|
<div id="box">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<p></p>
|
|
</div>
|
|
<!-- 流星 -->
|
|
<div class="stars">
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
<div class="star"></div>
|
|
</div>
|
|
<script
|
|
id="jqbb"
|
|
src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
|
|
></script>
|
|
|
|
<script>
|
|
setTimeout(init, 100);
|
|
function init() {
|
|
var obox = document.getElementById("box"),
|
|
aDiv = obox.getElementsByTagName("div");
|
|
|
|
for (var i = 0; i < aDiv.length; i++) {
|
|
aDiv[i].style.background =
|
|
"url(img/" + (i + 1) + ".jpg) center/cover";
|
|
aDiv[i].style.transform =
|
|
"rotateY(" + i * 36 + "deg) translate3d(0,0,350px)";
|
|
aDiv[i].style.transition =
|
|
"transform 1s " + (aDiv.length - i) * 0.2 + "s";
|
|
}
|
|
var sX,
|
|
sY,
|
|
nX,
|
|
nY,
|
|
desX = 0,
|
|
desY = 0,
|
|
tX = 0,
|
|
tY = 10,
|
|
index = 0; //滚轮初始值
|
|
document.onmousedown = function (e) {
|
|
clearInterval(obox.timer);
|
|
e = e || window.event;
|
|
var sX = e.clientX,
|
|
sY = e.clientY;
|
|
this.onmousemove = function (e) {
|
|
e = e || window.event;
|
|
var nX = e.clientX,
|
|
nY = e.clientY;
|
|
// 当前点的坐标和前一点的坐标差值
|
|
desX = nX - sX;
|
|
desY = nY - sY;
|
|
tX += desX * 0.1;
|
|
tY += desY * 0.1;
|
|
|
|
obox.style.transform =
|
|
"rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";
|
|
sX = nX;
|
|
sY = nY;
|
|
};
|
|
this.onmouseup = function () {
|
|
this.onmousemove = this.onmouseup = null;
|
|
obox.timer = setInterval(function () {
|
|
desX *= 0.95;
|
|
desY *= 0.95;
|
|
tX += desX * 0.1;
|
|
tY += desY * 0.1;
|
|
obox.style.transform =
|
|
"rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";
|
|
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
|
|
clearInterval(obox.timer);
|
|
}
|
|
}, 13);
|
|
};
|
|
return false;
|
|
};
|
|
//滚轮放大缩小
|
|
mousewheel(document, function (e) {
|
|
e = e || window.event;
|
|
var d = e.wheelDelta / 120 || -e.detail / 3;
|
|
if (d > 0) {
|
|
index -= 20;
|
|
} else {
|
|
index += 30;
|
|
}
|
|
index < -1050 && (index = -1050);
|
|
document.body.style.perspective = 1000 + index + "px";
|
|
});
|
|
function mousewheel(obj, fn) {
|
|
document.onmousewheel === null
|
|
? (obj.onmousewheel = fn)
|
|
: addEvent(obj, "DOMMouseScroll", fn);
|
|
}
|
|
function addEvent(obj, eName, fn) {
|
|
obj.attachEvent
|
|
? obj.attachEvent("on" + eName, fn)
|
|
: obj.addEventListener(eName, fn);
|
|
}
|
|
}
|
|
</script>
|
|
<!-- 下雨特效 -->
|
|
<script>
|
|
function reload_html() {
|
|
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
|
|
}
|
|
|
|
function addhtml(lViZBL1) {
|
|
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
|
|
}
|
|
|
|
function addcss(CDEsDFFJ2) {
|
|
var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"][
|
|
"\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"
|
|
]("\x73\x74\x79\x6c\x65");
|
|
EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
|
|
window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]
|
|
["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"](
|
|
"\x62\x6f\x64\x79"
|
|
)
|
|
["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
|
|
}
|
|
|
|
function addjs(qGZu4) {
|
|
$("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
|
|
}
|
|
|
|
function jqban(nJ5) {
|
|
$("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"](
|
|
"\x73\x72\x63",
|
|
"\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" +
|
|
nJ5 +
|
|
"\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73"
|
|
);
|
|
}
|
|
</script>
|
|
<script>
|
|
(function (window, document) {
|
|
var Vector2 = (function () {
|
|
function Vector2(x, y) {
|
|
this.x = x || 0;
|
|
this.y = y || 0;
|
|
}
|
|
return Vector2;
|
|
})();
|
|
|
|
Vector2.prototype.add = function (addend) {
|
|
this.x += addend.x;
|
|
this.y += addend.y;
|
|
};
|
|
|
|
var RainDrop = (function () {
|
|
function RainDrop(parent) {
|
|
this.size = 2;
|
|
this.parent = parent;
|
|
this.init();
|
|
}
|
|
return RainDrop;
|
|
})();
|
|
|
|
RainDrop.prototype.init = function () {
|
|
this.life = 0;
|
|
this.ttl = Math.random() * 500 + 300;
|
|
this.position = new Vector2(Math.random() * window.innerWidth, 0);
|
|
this.velocity = new Vector2(
|
|
0.5 - Math.random() * 1,
|
|
Math.random() * 1 + 0.2
|
|
);
|
|
this.terminalVelocity = 8;
|
|
};
|
|
|
|
RainDrop.prototype.update = function () {
|
|
if (
|
|
this.position.x > window.innerWidth ||
|
|
this.position.x < -this.size ||
|
|
this.life > this.ttl
|
|
)
|
|
this.init();
|
|
if (this.position.y > this.parent.floor) {
|
|
this.position.y = this.parent.floor - this.size;
|
|
this.velocity.y *= -0.2 - Math.random() * 0.2;
|
|
}
|
|
this.life++;
|
|
this.position.add(this.velocity);
|
|
this.velocity.y += 0.1;
|
|
};
|
|
|
|
var Rain = (function () {
|
|
function Rain(args) {
|
|
this.props = args;
|
|
this.rainDrops = [];
|
|
this.init();
|
|
}
|
|
return Rain;
|
|
})();
|
|
|
|
Rain.prototype.init = function () {
|
|
this.createCanvas();
|
|
this.resize();
|
|
this.loop();
|
|
};
|
|
|
|
Rain.prototype.resize = function () {
|
|
var attr =
|
|
"position: absolute; z-index: 0; top: 0; left: 0; height: 100vh; width: 100vw;";
|
|
|
|
this.canvas.setAttribute("style", attr);
|
|
|
|
this.dimensions = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
};
|
|
|
|
this.canvas.width = this.dimensions.width;
|
|
this.canvas.height = this.dimensions.height;
|
|
this.floor = this.dimensions.height * 0.7;
|
|
};
|
|
|
|
Rain.prototype.createCanvas = function () {
|
|
this.canvas = document.createElement("canvas");
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
document.body.appendChild(this.canvas);
|
|
};
|
|
|
|
Rain.prototype.draw = function () {
|
|
this.ctx.fillStyle = this.props.backgroundColor;
|
|
this.ctx.fillRect(0, 0, this.dimensions.width, this.floor);
|
|
for (var i = 0, len = this.rainDrops.length; i < len; i++) {
|
|
var rainDrop = this.rainDrops[i];
|
|
rainDrop.update();
|
|
this.ctx.fillStyle = this.props.rainColor;
|
|
this.ctx.fillRect(
|
|
rainDrop.position.x,
|
|
rainDrop.position.y,
|
|
rainDrop.size,
|
|
rainDrop.size
|
|
);
|
|
}
|
|
this.reflect();
|
|
};
|
|
|
|
Rain.prototype.reflect = function () {
|
|
var grad = this.ctx.createLinearGradient(
|
|
this.dimensions.width / 2,
|
|
this.floor * 0.6,
|
|
this.dimensions.width / 2,
|
|
this.floor
|
|
);
|
|
grad.addColorStop(0, "rgba(20,30,40,1)");
|
|
grad.addColorStop(1, "rgba(20,30,40,0)");
|
|
this.ctx.save();
|
|
this.ctx.scale(1, -1);
|
|
this.ctx.translate(0, this.floor * -2);
|
|
this.ctx.filter = "blur(2px) saturate(150%)";
|
|
this.ctx.drawImage(
|
|
this.canvas,
|
|
0,
|
|
0,
|
|
this.dimensions.width,
|
|
this.floor,
|
|
0,
|
|
0,
|
|
this.dimensions.width,
|
|
this.floor
|
|
);
|
|
this.ctx.fillStyle = grad;
|
|
this.ctx.fillRect(0, 0, this.dimensions.width, this.floor);
|
|
this.ctx.restore();
|
|
};
|
|
|
|
Rain.prototype.loop = function () {
|
|
var timeout,
|
|
self = this;
|
|
if (self.rainDrops.length < self.props.rainDropCount) {
|
|
timeout = window.setTimeout(function () {
|
|
self.rainDrops.push(new RainDrop(self));
|
|
}, Math.random() * 200);
|
|
} else if (timeout) {
|
|
timeout = null;
|
|
window.clearTimeout(timeout);
|
|
}
|
|
self.draw();
|
|
window.requestAnimationFrame(self.loop.bind(self));
|
|
};
|
|
|
|
window.onload = function () {
|
|
var args = {
|
|
rainDropCount: 500,
|
|
rainColor: "rgba(150,180,255,0.8)",
|
|
backgroundColor: "rgba(10,10,10,0.5)",
|
|
};
|
|
|
|
var rain = new Rain(args);
|
|
|
|
window.onresize = function () {
|
|
rain.resize();
|
|
};
|
|
};
|
|
|
|
window.requestAnimationFrame = (function () {
|
|
return (
|
|
window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
window.oRequestAnimationFrame ||
|
|
window.msRequestAnimationFrame ||
|
|
function (callback) {
|
|
window.setTimeout(callback, 1000 / 60);
|
|
}
|
|
);
|
|
})();
|
|
})(this, document);
|
|
</script>
|
|
</body>
|
|
</html>
|