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代码 直接替换为自己的图片即可,更改定位属性可改变容器位置