效果图:
image文件夹下载地址:图片下载地址https://pan.baidu.com/s/19ogY42uoYzGKBfEDFg-KWg
提取码:5y2g
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
animation:play 20s linear 0s infinite alternate;
}
.box{
width: 200px;
height: 300px;
margin:200px auto;
position: fixed;
left:47%;
transform-style:preserve-3d;
/*transform:rotateX(-12deg);*/
animation:player 15s linear infinite;
}
.p{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
.p:nth-child(1){
transform:rotateY(0deg) translateZ(275px);
}
.p:nth-child(2){
transform:rotateY(40deg) translateZ(275px);
}
.p:nth-child(3){
transform:rotateY(80deg) translateZ(275px);
}
.p:nth-child(4){
transform:rotateY(120deg) translateZ(275px);
}
.p:nth-child(5){
transform:rotateY(160deg) translateZ(275px);
}
.p:nth-child(6){
transform:rotateY(200deg) translateZ(275px);
}
.p:nth-child(7){
transform:rotateY(240deg) translateZ(275px);
}
.p:nth-child(8){
transform:rotateY(280deg) translateZ(275px);
}
.p:nth-child(9){
transform:rotateY(320deg) translateZ(275px);
}
@keyframes play{
0%{
background-image:url(./image/ms.jpg);
}
10%{
background-image:url(./image/m1.jpg);
}
20%{
background-image:url(./image/m2.jpg);
}
30%{
background-image:url(./image/m3.jpg);
}
40%{
background-image:url(./image/m4.jpg);
}
50%{
background-image:url(./image/m5.jpg);
}
60%{
background-image:url(./image/m6.jpg);
}
70%{
background-image:url(./image/m7.jpg);
}
80%{
background-image:url(./image/m10.jpg);
}
90%{
background-image:url(./image/m8.jpg);
}
100%{
background-image:url(./image/m9.jpg);
}
}
@keyframes player{
from{
transform:rotateX(-20deg) rotateY(0deg);
}
to{
transform:rotateX(-20deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="p">
<a href=""><img src="image/m1.jpg" width="200" height="300"/></a>
</div>
<div class="p">
<a href=""><img src="image/m2.jpg" width="200" height="300"/></a>
</div>
<div class="p">
<a href=""><img src="image/m3.jpg" width="200" height="300"/></a>
</div>
<div class="p">
<a href=""><img src="image/m4.jpg" width="200" height="300"/></a>
</div>
<div class="p">
<img src="image/m5.jpg" width="200" height="300"/>
</div>
<div class="p">
<img src="image/m6.jpg" width="200" height="300"/>
</div>
<div class="p">
<img src="image/m7.jpg" width="200" height="300"/>
</div>
<div class="p">
<img src="image/m8.jpg" width="200" height="300"/>
</div>
<div class="p">
<img src="image/m9.jpg" width="200" height="300"/>
</div>
</div>
<div id="a"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
</body>
</html>
复制这段内容后打开百度网盘手机App,操作更方便哦