img {
height:500px;
width:300px;
}
/* 整体动画 */
@keyframes entry {
0% {
top:-20%;
opacity:0.1;
}
100% {
top:0%;
}
}.wrapper {
position:absolute;
top:10%;
left:40%;
width:300px;
height:500px;
perspective:900px;
}
.container {
position:absolute;
top:0%;
width:100%;
height:100%;
transition:.5s all ease;
transform:rotateX(60deg) scale(0.7);
perspective:900px;
box-shadow:0px 20px 50px #555;
animation:entry 1s linear 1;
}
#c0 {
position:absolute;
top:0%;
width:100%;
height:100%;
background:linear-gradient(to bottom,#eba65b 30%,#d99267 100%);
z-index:300;
box-shadow:0px 20px 100px #555;
}
#c1 {
background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);
box-shadow:0px 20px 100px #555;
left:100%;
z-index:0;
}
#c2 {
left:-100%;
z-index:0;
background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);
box-shadow:0px 20px 100px #555;
}
.container:hover {
cursor:pointer;
transform:rotate(0deg) scale(1) translateY(10px);
transition:.5s all ease;
z-index:400;
}
纯css代码 直接替换为自己的图片即可,更改定位属性可改变容器位置