CSS艺术折纸

下载代码

html

css

分享到微信朋友圈

html

css

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);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg