CSS
语言：
CSSSCSS
确定
body {
overflow: hidden;
margin: 0;
-webkit-perspective: 600px;
perspective: 600px;
}
.container {
width: 100vw;
height: 100vh;
background: url(http://s3-us-west-/s.cdpn.io/127738/unsplahBg2.jpg) center / cover;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transition: 1.5s all ease-in-out;
transition: 1.5s all ease-in-out;
}
.clip {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url(http://s3-us-west-/s.cdpn.io/127738/unsplahBg1.jpg) center / cover;
-webkit-clip-path: circle(0 at 50vw 50vh);
clip-path: circle(0 at 50vw 50vh);
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
-webkit-transition: 1.5s all ease-in-out;
transition: 1.5s all ease-in-out;
}
.container.visible .clip {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-clip-path: circle(60vmax at 50vw 50vh);
clip-path: circle(60vmax at 50vw 50vh);
}
.container.visible {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
button {
position: absolute;
left: 50%;
bottom: 20px;
background: white;
border: none;
cursor: pointer;
padding: 5px 10px;
font-size: 1.5em;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
