<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>炫酷旋转相册</title>
<style>
body {
margin: 0;
background: #000;
}
#wrap {
width: 300px;
height: 400px;
position: relative;
margin: 300px auto;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-transform: perspective(3000px);
-ms-perspective: 3000px;
}
#head {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation: donghua 25s linear 0s infinite;
}
#head div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
border: 1px solid #000 text-align: center;
line-height: 100px;
}
#head div:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url(img/01.jpg);
background-size: cover;
}
#head div:nth-child(2) {
-webkit-transform: rotateY(36deg) translateZ(500px);
-moz-transform: rotateY(36deg) translateZ(500px);
-ms-transform: rotateY(36deg) translateZ(500px);
background: url(img/02.jpg);
background-size: cover;
}
#head div:nth-child(3) {
-webkit-transform: rotateY(72deg) translateZ(400px);
-moz-transform: rotateY(72deg) translateZ(400px);
-ms-transform: rotateY(72deg) translateZ(400px);
background: url(img/03.jpg);
background-size: cover;
}
#head div:nth-child(4) {
-webkit-transform: rotateY(108deg) translateZ(500px);
-moz-transform: rotateY(108deg) translateZ(500px);
-ms-transform: rotateY(108deg) translateZ(500px);
background: url(img/04.jpg);
background-size: cover;
}
#head div:nth-child(5) {
-webkit-transform: rotateY(144deg) translateZ(400px);
-moz-transform: rotateY(144deg) translateZ(400px);
-ms-transform: rotateY(144deg) translateZ(400px);
background: url(img/05.jpg);
background-size: cover;
}
#head div:nth-child(6) {
-webkit-transform: rotateY(180deg) translateZ(500px);
-moz-transform: rotateY(180deg) translateZ(500px);
-ms-transform: rotateY(180deg) translateZ(500px);
background: url(img/06.jpg);
background-size: cover;
}
#head div:nth-child(7) {
-webkit-transform: rotateY(216deg) translateZ(400px);
-moz-transform: rotateY(216deg) translateZ(400px);
-ms-transform: rotateY(216deg) translateZ(400px);
background: url(img/07.jpg);
background-size: cover;
}
#head div:nth-child(8) {
-webkit-transform: rotateY(252deg) translateZ(500px);
-moz-transform: rotateY(252deg) translateZ(500px);
-ms-transform: rotateY(252deg) translateZ(500px);
background: url(img/08.jpg);
background-size: cover;
}
#head div:nth-child(9) {
-webkit-transform: rotateY(288deg) translateZ(400px);
-moz-transform: rotateY(288deg) translateZ(400px);
-ms-transform: rotateY(288deg) translateZ(400px);
background: url(img/09.jpg);
background-size: cover;
}
#head div:nth-child(10) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(img/10.jpg);
background-size: cover;
}
#head div:nth-child(11) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(img/11.jpg);
background-size: cover;
}
#head div:nth-child(12) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(img/12.jpg);
background-size: cover;
}
#head div:nth-child(13) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(img/13.jpg);
background-size: cover;
}
@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg)
}
50% {
transform: rotateX(-5deg) rotateY(180deg)
}
100% {
transform: rotateX(5deg) rotateY(0deg)
}
}
@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg)
}
50% {
transform: rotateY(-10deg) rotateY(180deg)
}
100% {
transform: rotateY(10deg) rotateY(360deg)
}
}
@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg)
}
50% {
transform: rotateY(-10deg) rotateY(180deg)
}
100% {
transform: rotateY(10deg) rotateY(360deg)
}
}
body {
background-color: black;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script>
var context;
var arr = new Array();
var starCount = 800;
var rains = new Array();
var rainCount = 20;
function init() {
var stars = document.getElementById("stars");
windowWidth = window.innerWidth; //当前的窗口的高度
stars.width = windowWidth;
stars.height = window.innerHeight;
context = stars.getContext("2d");
}
//创建一个星星对象
var Star = function () {
this.x = windowWidth * Math.random();//横坐标
this.y = 5000 * Math.random();//纵坐标
this.text = ".";//文本
this.color = "white";//颜色
this.getColor = function () {
var _r = Math.random();
if (_r < 0.5) {
this.color = "#333";
} else {
this.color = "white";
}
}
//初始化
this.init = function () {
this.getColor();
}
//绘制
this.draw = function () {
context.fillStyle = this.color;
context.fillText(this.text, this.x, this.y);
}
}
//画月亮
function drawMoon() {
var moon = new Image();
// moon.src = "img/01.png"
context.drawImage(moon, -5, -10);
}
//页面加载的时候
window.onload = function () {
init();
//画星星
for (var i = 0; i < starCount; i++) {
var star = new Star();
star.init();
star.draw();
arr.push(star);
}
//画流星
for (var i = 0; i < rainCount; i++) {
var rain = new MeteorRain();
rain.init();
rain.draw();
rains.push(rain);
}
drawMoon();//绘制月亮
playStars();//绘制闪动的星星
playRains();//绘制流星
}
//星星闪起来
function playStars() {
for (var n = 0; n < starCount; n++) {
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()", 100);
}
/*流星雨开始*/
var MeteorRain = function () {
this.x =
送给女朋友的旋转相册，黑色背景，有樱花飘落，可加音乐。
需积分: 23 15 浏览量
2022-07-27
12:01:33
上传
评论
收藏 44.54MB RAR 举报
旋转相册 (1).rar （18个子文件） 
css 
index.css 2KB img 
01.jpg 411KB 05.jpg 177KB 07.jpg 483KB 04.jpg 231KB 音频.mp3 15.2MB
裹着心的光-林俊杰.mp4 25.3MB 11.jpg 210KB 08.jpg 424KB 10.jpg 495KB 12.jpg 356KB 03.jpg 490KB 06.jpg 269KB 02.jpg 463KB 09.jpg 484KB
立体版.html 13KB index.html 2KB js 樱花高级.js 62KB
评论0