站长资源
中国站长网站
        找回密码

纯CSS无限楼梯动画效果

2018-11-02 14:16:27 分类：CSS 阅读(1233) 评论(0) 作者：全栈工程师

完整代码： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS无限楼梯动画效果</title>
<style>
body, html {
  margin: 0;
  padding: 0;
  background: #111;
}

.hoop {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: show 12s linear infinite;
          animation: show 12s linear infinite;
}

@-webkit-keyframes show {
  from {
    -webkit-transform: rotateX(-20deg) rotateY(0deg);
            transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    -webkit-transform: rotateX(-20deg) rotateY(360deg);
            transform: rotateX(-20deg) rotateY(360deg);
  }
}

@keyframes show {
  from {
    -webkit-transform: rotateX(-20deg) rotateY(0deg);
            transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    -webkit-transform: rotateX(-20deg) rotateY(360deg);
            transform: rotateX(-20deg) rotateY(360deg);
  }
}
.ring {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  height: 120px;
}

.step {
  position: absolute;
  left: -9.77384px;
  width: 19.54769px;
  height: 120px;
  -webkit-animation: drop 21.6s ease infinite;
          animation: drop 21.6s ease infinite;
}

.planks {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.plank-holder {
  position: absolute;
  left: -9.77384px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: drop 21.6s ease infinite;
          animation: drop 21.6s ease infinite;
}

.plank {
  position: absolute;
  background-color: #29dcea;
  width: 19.54769px;
  height: 60px;
}

.ring-0 {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
.ring-0 .step {
  background: -webkit-linear-gradient(bottom, #111, #111 40%, #14BFCC);
  background: linear-gradient(to top, #111, #111 40%, #14BFCC);
}

.ring-0 .step-holder:nth-child(1) {
  -webkit-transform: rotateY(10deg) translateZ(140px);
          transform: rotateY(10deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(1) .step {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.plank-holder:nth-child(1) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) .plank {
  -webkit-transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(2) {
  -webkit-transform: rotateY(20deg) translateZ(140px);
          transform: rotateY(20deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(2) .step {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

.plank-holder:nth-child(2) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) .plank {
  -webkit-transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(3) {
  -webkit-transform: rotateY(30deg) translateZ(140px);
          transform: rotateY(30deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(3) .step {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

.plank-holder:nth-child(3) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) .plank {
  -webkit-transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(4) {
  -webkit-transform: rotateY(40deg) translateZ(140px);
          transform: rotateY(40deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(4) .step {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

.plank-holder:nth-child(4) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) .plank {
  -webkit-transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(5) {
  -webkit-transform: rotateY(50deg) translateZ(140px);
          transform: rotateY(50deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(5) .step {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}

.plank-holder:nth-child(5) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) .plank {
  -webkit-transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(6) {
  -webkit-transform: rotateY(60deg) translateZ(140px);
          transform: rotateY(60deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(6) .step {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}

.plank-holder:nth-child(6) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) .plank {
  -webkit-transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(7) {
  -webkit-transform: rotateY(70deg) translateZ(140px);
          transform: rotateY(70deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(7) .step {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}

.plank-holder:nth-child(7) {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) .plank {
  -webkit-transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(8) {
  -webkit-transform: rotateY(80deg) translateZ(140px);
          transform: rotateY(80deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(8) .step {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}

.plank-holder:nth-child(8) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) .plank {
  -webkit-transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(9) {
  -webkit-transform: rotateY(90deg) translateZ(140px);
          transform: rotateY(90deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(9) .step {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}

.plank-holder:nth-child(9) {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) .plank {
  -webkit-transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(10) {
  -webkit-transform: rotateY(100deg) translateZ(140px);
          transform: rotateY(100deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(10) .step {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}

.plank-holder:nth-child(10) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) .plank {
  -webkit-transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(11) {
  -webkit-transform: rotateY(110deg) translateZ(140px);
          transform: rotateY(110deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(11) .step {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}

.plank-holder:nth-child(11) {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) .plank {
  -webkit-transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(12) {
  -webkit-transform: rotateY(120deg) translateZ(140px);
          transform: rotateY(120deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(12) .step {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}

.plank-holder:nth-child(12) {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) .plank {
  -webkit-transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(13) {
  -webkit-transform: rotateY(130deg) translateZ(140px);
          transform: rotateY(130deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(13) .step {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}

.plank-holder:nth-child(13) {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) .plank {
  -webkit-transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(14) {
  -webkit-transform: rotateY(140deg) translateZ(140px);
          transform: rotateY(140deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(14) .step {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}

.plank-holder:nth-child(14) {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) .plank {
  -webkit-transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(15) {
  -webkit-transform: rotateY(150deg) translateZ(140px);
          transform: rotateY(150deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(15) .step {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}

.plank-holder:nth-child(15) {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) .plank {
  -webkit-transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(16) {
  -webkit-transform: rotateY(160deg) translateZ(140px);
          transform: rotateY(160deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(16) .step {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}

.plank-holder:nth-child(16) {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) .plank {
  -webkit-transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(17) {
  -webkit-transform: rotateY(170deg) translateZ(140px);
          transform: rotateY(170deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(17) .step {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}

.plank-holder:nth-child(17) {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) .plank {
  -webkit-transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(18) {
  -webkit-transform: rotateY(180deg) translateZ(140px);
          transform: rotateY(180deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(18) .step {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}

.plank-holder:nth-child(18) {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) .plank {
  -webkit-transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(19) {
  -webkit-transform: rotateY(190deg) translateZ(140px);
          transform: rotateY(190deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(19) .step {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}

.plank-holder:nth-child(19) {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) .plank {
  -webkit-transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(20) {
  -webkit-transform: rotateY(200deg) translateZ(140px);
          transform: rotateY(200deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(20) .step {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}

.plank-holder:nth-child(20) {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) .plank {
  -webkit-transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(21) {
  -webkit-transform: rotateY(210deg) translateZ(140px);
          transform: rotateY(210deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(21) .step {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}

.plank-holder:nth-child(21) {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) .plank {
  -webkit-transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(22) {
  -webkit-transform: rotateY(220deg) translateZ(140px);
          transform: rotateY(220deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(22) .step {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}

.plank-holder:nth-child(22) {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) .plank {
  -webkit-transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(23) {
  -webkit-transform: rotateY(230deg) translateZ(140px);
          transform: rotateY(230deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(23) .step {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}

.plank-holder:nth-child(23) {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) .plank {
  -webkit-transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(24) {
  -webkit-transform: rotateY(240deg) translateZ(140px);
          transform: rotateY(240deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(24) .step {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}

.plank-holder:nth-child(24) {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) .plank {
  -webkit-transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(25) {
  -webkit-transform: rotateY(250deg) translateZ(140px);
          transform: rotateY(250deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(25) .step {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}

.plank-holder:nth-child(25) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) .plank {
  -webkit-transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(26) {
  -webkit-transform: rotateY(260deg) translateZ(140px);
          transform: rotateY(260deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(26) .step {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}

.plank-holder:nth-child(26) {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) .plank {
  -webkit-transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(27) {
  -webkit-transform: rotateY(270deg) translateZ(140px);
          transform: rotateY(270deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(27) .step {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}

.plank-holder:nth-child(27) {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) .plank {
  -webkit-transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(28) {
  -webkit-transform: rotateY(280deg) translateZ(140px);
          transform: rotateY(280deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(28) .step {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}

.plank-holder:nth-child(28) {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) .plank {
  -webkit-transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(29) {
  -webkit-transform: rotateY(290deg) translateZ(140px);
          transform: rotateY(290deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(29) .step {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}

.plank-holder:nth-child(29) {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) .plank {
  -webkit-transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(30) {
  -webkit-transform: rotateY(300deg) translateZ(140px);
          transform: rotateY(300deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(30) .step {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}

.plank-holder:nth-child(30) {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) .plank {
  -webkit-transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(31) {
  -webkit-transform: rotateY(310deg) translateZ(140px);
          transform: rotateY(310deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(31) .step {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}

.plank-holder:nth-child(31) {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) .plank {
  -webkit-transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(32) {
  -webkit-transform: rotateY(320deg) translateZ(140px);
          transform: rotateY(320deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(32) .step {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}

.plank-holder:nth-child(32) {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) .plank {
  -webkit-transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(33) {
  -webkit-transform: rotateY(330deg) translateZ(140px);
          transform: rotateY(330deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(33) .step {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}

.plank-holder:nth-child(33) {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) .plank {
  -webkit-transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(34) {
  -webkit-transform: rotateY(340deg) translateZ(140px);
          transform: rotateY(340deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(34) .step {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}

.plank-holder:nth-child(34) {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) .plank {
  -webkit-transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(35) {
  -webkit-transform: rotateY(350deg) translateZ(140px);
          transform: rotateY(350deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(35) .step {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}

.plank-holder:nth-child(35) {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) .plank {
  -webkit-transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
}

.ring-0 .step-holder:nth-child(36) {
  -webkit-transform: rotateY(360deg) translateZ(140px);
          transform: rotateY(360deg) translateZ(140px);
}
.ring-0 .step-holder:nth-child(36) .step {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}

.plank-holder:nth-child(36) {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) .plank {
  -webkit-transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
}

.ring-1 {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
.ring-1 .step {
  background: -webkit-linear-gradient(bottom, #111, #111 40%, #14BFCC);
  background: linear-gradient(to top, #111, #111 40%, #14BFCC);
}

.ring-1 .step-holder:nth-child(1) {
  -webkit-transform: rotateY(10deg) translateZ(80px);
          transform: rotateY(10deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(1) .step {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.plank-holder:nth-child(1) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.plank-holder:nth-child(1) .plank {
  -webkit-transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(10deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(2) {
  -webkit-transform: rotateY(20deg) translateZ(80px);
          transform: rotateY(20deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(2) .step {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

.plank-holder:nth-child(2) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.plank-holder:nth-child(2) .plank {
  -webkit-transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(20deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(3) {
  -webkit-transform: rotateY(30deg) translateZ(80px);
          transform: rotateY(30deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(3) .step {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

.plank-holder:nth-child(3) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.plank-holder:nth-child(3) .plank {
  -webkit-transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(30deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(4) {
  -webkit-transform: rotateY(40deg) translateZ(80px);
          transform: rotateY(40deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(4) .step {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

.plank-holder:nth-child(4) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.plank-holder:nth-child(4) .plank {
  -webkit-transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(40deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(5) {
  -webkit-transform: rotateY(50deg) translateZ(80px);
          transform: rotateY(50deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(5) .step {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}

.plank-holder:nth-child(5) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.plank-holder:nth-child(5) .plank {
  -webkit-transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(50deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(6) {
  -webkit-transform: rotateY(60deg) translateZ(80px);
          transform: rotateY(60deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(6) .step {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}

.plank-holder:nth-child(6) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.plank-holder:nth-child(6) .plank {
  -webkit-transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(60deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(7) {
  -webkit-transform: rotateY(70deg) translateZ(80px);
          transform: rotateY(70deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(7) .step {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}

.plank-holder:nth-child(7) {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.plank-holder:nth-child(7) .plank {
  -webkit-transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(70deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(8) {
  -webkit-transform: rotateY(80deg) translateZ(80px);
          transform: rotateY(80deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(8) .step {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}

.plank-holder:nth-child(8) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.plank-holder:nth-child(8) .plank {
  -webkit-transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(80deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(9) {
  -webkit-transform: rotateY(90deg) translateZ(80px);
          transform: rotateY(90deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(9) .step {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}

.plank-holder:nth-child(9) {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.plank-holder:nth-child(9) .plank {
  -webkit-transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(90deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(10) {
  -webkit-transform: rotateY(100deg) translateZ(80px);
          transform: rotateY(100deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(10) .step {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}

.plank-holder:nth-child(10) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.plank-holder:nth-child(10) .plank {
  -webkit-transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(100deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(11) {
  -webkit-transform: rotateY(110deg) translateZ(80px);
          transform: rotateY(110deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(11) .step {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}

.plank-holder:nth-child(11) {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.plank-holder:nth-child(11) .plank {
  -webkit-transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(110deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(12) {
  -webkit-transform: rotateY(120deg) translateZ(80px);
          transform: rotateY(120deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(12) .step {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}

.plank-holder:nth-child(12) {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.plank-holder:nth-child(12) .plank {
  -webkit-transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(120deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(13) {
  -webkit-transform: rotateY(130deg) translateZ(80px);
          transform: rotateY(130deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(13) .step {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}

.plank-holder:nth-child(13) {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.plank-holder:nth-child(13) .plank {
  -webkit-transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(130deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(14) {
  -webkit-transform: rotateY(140deg) translateZ(80px);
          transform: rotateY(140deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(14) .step {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}

.plank-holder:nth-child(14) {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.plank-holder:nth-child(14) .plank {
  -webkit-transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(140deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(15) {
  -webkit-transform: rotateY(150deg) translateZ(80px);
          transform: rotateY(150deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(15) .step {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}

.plank-holder:nth-child(15) {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.plank-holder:nth-child(15) .plank {
  -webkit-transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(150deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(16) {
  -webkit-transform: rotateY(160deg) translateZ(80px);
          transform: rotateY(160deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(16) .step {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}

.plank-holder:nth-child(16) {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.plank-holder:nth-child(16) .plank {
  -webkit-transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(160deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(17) {
  -webkit-transform: rotateY(170deg) translateZ(80px);
          transform: rotateY(170deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(17) .step {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}

.plank-holder:nth-child(17) {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.plank-holder:nth-child(17) .plank {
  -webkit-transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(170deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(18) {
  -webkit-transform: rotateY(180deg) translateZ(80px);
          transform: rotateY(180deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(18) .step {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}

.plank-holder:nth-child(18) {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.plank-holder:nth-child(18) .plank {
  -webkit-transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(180deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(19) {
  -webkit-transform: rotateY(190deg) translateZ(80px);
          transform: rotateY(190deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(19) .step {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}

.plank-holder:nth-child(19) {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.plank-holder:nth-child(19) .plank {
  -webkit-transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(190deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(20) {
  -webkit-transform: rotateY(200deg) translateZ(80px);
          transform: rotateY(200deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(20) .step {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}

.plank-holder:nth-child(20) {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.plank-holder:nth-child(20) .plank {
  -webkit-transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(200deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(21) {
  -webkit-transform: rotateY(210deg) translateZ(80px);
          transform: rotateY(210deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(21) .step {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}

.plank-holder:nth-child(21) {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.plank-holder:nth-child(21) .plank {
  -webkit-transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(210deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(22) {
  -webkit-transform: rotateY(220deg) translateZ(80px);
          transform: rotateY(220deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(22) .step {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}

.plank-holder:nth-child(22) {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.plank-holder:nth-child(22) .plank {
  -webkit-transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(220deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(23) {
  -webkit-transform: rotateY(230deg) translateZ(80px);
          transform: rotateY(230deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(23) .step {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}

.plank-holder:nth-child(23) {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.plank-holder:nth-child(23) .plank {
  -webkit-transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(230deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(24) {
  -webkit-transform: rotateY(240deg) translateZ(80px);
          transform: rotateY(240deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(24) .step {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}

.plank-holder:nth-child(24) {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.plank-holder:nth-child(24) .plank {
  -webkit-transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(240deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(25) {
  -webkit-transform: rotateY(250deg) translateZ(80px);
          transform: rotateY(250deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(25) .step {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}

.plank-holder:nth-child(25) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.plank-holder:nth-child(25) .plank {
  -webkit-transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(250deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(26) {
  -webkit-transform: rotateY(260deg) translateZ(80px);
          transform: rotateY(260deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(26) .step {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}

.plank-holder:nth-child(26) {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.plank-holder:nth-child(26) .plank {
  -webkit-transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(260deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(27) {
  -webkit-transform: rotateY(270deg) translateZ(80px);
          transform: rotateY(270deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(27) .step {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}

.plank-holder:nth-child(27) {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.plank-holder:nth-child(27) .plank {
  -webkit-transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(270deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(28) {
  -webkit-transform: rotateY(280deg) translateZ(80px);
          transform: rotateY(280deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(28) .step {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}

.plank-holder:nth-child(28) {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.plank-holder:nth-child(28) .plank {
  -webkit-transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(280deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(29) {
  -webkit-transform: rotateY(290deg) translateZ(80px);
          transform: rotateY(290deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(29) .step {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}

.plank-holder:nth-child(29) {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.plank-holder:nth-child(29) .plank {
  -webkit-transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(290deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(30) {
  -webkit-transform: rotateY(300deg) translateZ(80px);
          transform: rotateY(300deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(30) .step {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}

.plank-holder:nth-child(30) {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.plank-holder:nth-child(30) .plank {
  -webkit-transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(300deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(31) {
  -webkit-transform: rotateY(310deg) translateZ(80px);
          transform: rotateY(310deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(31) .step {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}

.plank-holder:nth-child(31) {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.plank-holder:nth-child(31) .plank {
  -webkit-transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(310deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(32) {
  -webkit-transform: rotateY(320deg) translateZ(80px);
          transform: rotateY(320deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(32) .step {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}

.plank-holder:nth-child(32) {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.plank-holder:nth-child(32) .plank {
  -webkit-transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(320deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(33) {
  -webkit-transform: rotateY(330deg) translateZ(80px);
          transform: rotateY(330deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(33) .step {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}

.plank-holder:nth-child(33) {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.plank-holder:nth-child(33) .plank {
  -webkit-transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(330deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(34) {
  -webkit-transform: rotateY(340deg) translateZ(80px);
          transform: rotateY(340deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(34) .step {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}

.plank-holder:nth-child(34) {
  -webkit-animation-delay: -20.4s;
          animation-delay: -20.4s;
}
.plank-holder:nth-child(34) .plank {
  -webkit-transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(340deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(35) {
  -webkit-transform: rotateY(350deg) translateZ(80px);
          transform: rotateY(350deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(35) .step {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}

.plank-holder:nth-child(35) {
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
}
.plank-holder:nth-child(35) .plank {
  -webkit-transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(350deg) translateZ(110px) rotateX(90deg);
}

.ring-1 .step-holder:nth-child(36) {
  -webkit-transform: rotateY(360deg) translateZ(80px);
          transform: rotateY(360deg) translateZ(80px);
}
.ring-1 .step-holder:nth-child(36) .step {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}

.plank-holder:nth-child(36) {
  -webkit-animation-delay: -21.6s;
          animation-delay: -21.6s;
}
.plank-holder:nth-child(36) .plank {
  -webkit-transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
          transform: translateY(-30px) rotateY(360deg) translateZ(110px) rotateX(90deg);
}

@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  97.22222% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes drop {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  97.22222% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
</style>
</head>
<body>
<div class="hoop">
  <div class="ring ring-0">
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="planks">
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
      <div class="plank-holder">
        <div class="plank"></div>
      </div>
    </div>
  </div>
  <div class="ring ring-1">
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
    <div class="step-holder">
      <div class="step"></div>
    </div>
  </div>
</div>

<script>
</script>

</body>
</html>


在线演示  
×

站长资源极速下载通道： 纯CSS无限楼梯动画效果

提示：【通用访问密码：986482】
本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » 纯CSS无限楼梯动画效果
标签：

相关推荐

评论 抢沙发

评论前必须登录！