<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS艺术折纸</title>
<style>
body {
background: -webkit-linear-gradient(135deg, #eb4682 0%, #4664ff 100%);
background: linear-gradient(-45deg, #eb4682 0%, #4664ff 100%);
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-perspective: 700px;
perspective: 700px;
}
#trick_art {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(35deg);
transform: rotateY(35deg);
-webkit-animation: trickArt 4000ms 2000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
animation: trickArt 4000ms 2000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#trick_art::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background: -webkit-linear-gradient(bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
-webkit-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
#trick_art .paper {
width: 300px;
height: 350px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
#trick_art .paper .slice {
position: relative;
width: 100%;
height: 50%;
background: -webkit-linear-gradient(bottom, #f0f0f0 0%, white 100%);
background: linear-gradient(0deg, #f0f0f0 0%, white 100%);
overflow: hidden;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#trick_art .paper .slice .ladder_wrapper {
position: absolute;
left: calc(50% - 20px);
width: 100%;
height: 70%;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
#trick_art .paper .slice .ladder_wrapper.ladder_shadow {
-webkit-filter: blur(3px);
filter: blur(3px);
}
#trick_art .paper .slice .ladder_wrapper.ladder_shadow .ladder_left, #trick_art .paper .slice .ladder_wrapper.ladder_shadow .ladder_right {
background: rgba(0, 0, 0, 0.2);
}
#trick_art .paper .slice .ladder_wrapper.ladder_main .ladder_left, #trick_art .paper .slice .ladder_wrapper.ladder_main .ladder_right {
background: black;
}
#trick_art .paper .slice .ladder_left {
position: absolute;
width: 5px;
height: 100%;
}
#trick_art .paper .slice .ladder_right {
position: absolute;
left: 10%;
width: 5px;
height: 100%;
}
#trick_art .paper .slice .ladder_steps .ladder_step {
position: absolute;
width: 35px;
height: 5px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(1) {
top: 25px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(2) {
top: 50px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(3) {
top: 75px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(4) {
top: 100px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(5) {
top: 125px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(6) {
top: 150px;
}
#trick_art .paper .slice .ladder_steps .ladder_step:nth-child(7) {
top: 175px;
}
#trick_art .paper .slice .ladder_shadow .ladder_step {
background: rgba(0, 0, 0, 0.2);
}
#trick_art .paper .slice .ladder_main .ladder_step {
background: black;
}
#trick_art .paper .slice.top {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-animation: paper 4000ms 2000ms ease-in-out infinite alternate;
animation: paper 4000ms 2000ms ease-in-out infinite alternate;
}
#trick_art .paper .slice.top .ladder_wrapper {
bottom: 0;
}
#trick_art .paper .slice.top .ladder_wrapper.ladder_main {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
#trick_art .paper .slice.bottom .ladder_wrapper.ladder_main {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: skew(-30deg);
transform: skew(-30deg);
}
#trick_art .paper .slice.bottom .ladder_wrapper .ladder_steps {
position: absolute;
top: -25px;
}
@-webkit-keyframes trickArt {
0% {
-webkit-transform: rotateY(35deg);
transform: rotateY(35deg);
}
25% {
-webkit-transform: rotateY(35deg);
transform: rotateY(35deg);
}
80% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes trickArt {
0% {
-webkit-transform: rotateY(35deg);
transform: rotateY(35deg);
}
25% {
-webkit-transform: rotateY(35deg);
transform: rotateY(35deg);
}
80% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes paper {
0% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
25% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
95% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes paper {
0% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
25% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
95% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div id="trick_art">
<div class="paper">
<div class="slice top">
<div class="ladder_wrapper ladder_shadow">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
<div class="ladder_wrapper ladder_main">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
</div>
<div class="slice bottom">
<div class="ladder_wrapper ladder_shadow">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
<div class="ladder_wrapper ladder_main">
<div class="ladder_left"></div>
<div class="ladder_right"></div>
<div class="ladder_steps">
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
<div class="ladder_step"></div>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
