3D旋转相册
CSS部分
<style>
body{
margin: 0
;
background:gray
;
}
#wrap{
width: 300px
;
height: 400px
;
position: relative
;
margin:100px 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
;
}
#head div{
position: absolute
;
top:0
;
left:0
;
width: 300px
;
height: 350px
;
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/1.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/2.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/3.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/4.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/5.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/11.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/7.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/12.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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/9.jpg");
background-size: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
#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: 100% 100%
;
border-radius: 8px
;
box-shadow: 0px 0px 10px #fff
;
}
@-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
);
}
}
</style>
添加背景音乐
<audio controls=
"controls" autoplay=
"autoplay" loop=-1>
<source src=
"你要添加的背景音乐最好是MP3格式" type=
"audio/mpeg" />
</audio>
html部分
<body style=
"background-image:url(../img/bg3.jpg)">
<div style=
"margin: 0px auto; text-align: center; width: 736px;">
<hr />
<h1><face font=
"华文行楷">我与猪的记忆</face></h1>
</div>
<div id=
"wrap">
<div id=
"head">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div style=
"margin: 0px auto; text-align: center; width: 736px;">
<h1><face font=
"华文行楷">笨笨的相册</face></h1>
<hr />
</div>
</body>
如果你不想看到这个进度条，那就用CSS的方法隐藏它，输入以下代码就ok。
<div style=
"display:none"; class=
"music">
.......
(这里填刚才那段代码。）
</div>
