3D animation 书
2017-09-22 本文已影响0人
yuxiaohu
// CCS
<style>
body {perspective: 1000px;} // 透视
.images{
width: 1000px;
height: 600px;
margin: 0 auto;
transform: rotateX(30deg);
transform-style: preserve-3d; // 3d效果
position: relative;
top: 200px;
}
.pageBox{
width: 1000px;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
.page{
width: 500px;
height: 600px;
position: absolute;
top: 0;
left: 50%;
background-color: #fff;
border: 1px solid #96a36e;
border-left: 3px solid #84bbd7;
text-align: center;
box-shadow: 50px 50px 200px 1px #8dc2f4 inset
}
.page7{left: -3px;top: -1px;}
.pageBox1{animation: amt1 20s;z-index: 10;top: -5px;}
.pageBox2{animation: amt2 16s 2s;z-index: 9;top: -4px;}
.pageBox3{animation: amt3 13s 3s;z-index: 8;top: -3px;}
.pageBox4{animation: amt4 10s 4s;z-index: 7;top: -2px;}
.pageBox5{animation: amt5 7s 5s;z-index: 6;top: -1px;}
.pageBox6{z-index: 0}
.page1{background: url("images/01.jpg") no-repeat 50% 50%;background-size: 100% 100%;}
.page2{background: url("images/02.png") no-repeat 50% 50%;background-size: 95% 95%;}
.page3{background: url("images/03.jpeg") no-repeat 50% 50%;background-size: 95% 95%;}
.page4{background: url("images/04.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
.page5{background: url("images/05.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
.page6{box-shadow: 50px 50px 200px 1px #666;}
.page7{background:#8dc2f4 url("images/06.jpg") no-repeat 50% 50%;background-size: 100% 100%;}
@keyframes amt1 {
0% {transform: rotateY(0deg)}
50% {transform: rotateY(-180deg)}
100% {transform: rotateY(0deg)}
}
@keyframes amt2 {
0% {transform: rotateY(0deg)}
50% {transform: rotateY(-170deg)}
100% {transform: rotateY(0deg)}
}
@keyframes amt3 {
0% {transform: rotateY(0deg)}
50% {transform: rotateY(-160deg)}
100% {transform: rotateY(0deg)}
}
@keyframes amt4 {
0% {transform: rotateY(0deg)}
50% {transform: rotateY(-150deg)}
100% {transform: rotateY(0deg)}
}
@keyframes amt5 {
0% {transform: rotateY(0deg)}
50% {transform: rotateY(-140deg)}
100% {transform: rotateY(0deg)}
}
p{
margin-top: 550px;
font-size: 25px;
color: #8dc2f4;
font-style: italic;
}
</style>
// HTML
<body>
<div class="images">
<div class="pageBox pageBox1">
<div class="page page1"></div>
</div>
<div class="pageBox pageBox2">
<div class="page page2"></div>
</div>
<div class="pageBox pageBox3">
<div class="page page3"></div>
</div>
<div class="pageBox pageBox4">
<div class="page page4"></div>
</div>
<div class="pageBox pageBox5">
<div class="page page5"></div>
</div>
<div class="pageBox pageBox6">
<div class="page page6">
<div class="page page7">
<p>yuxiaohu 2017.9.22</p>
</div>
</div>
</div>
</div>
</body>
