LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background: #222;
}

div {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.wrap {
  background: #fff;
  height: 280px;
  preserve-3d: true;
  width: 240px;
}

.top {
  -webkit-animation: top 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
          animation: top 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
  background: #f6389d;
  height: 63px;
  -webkit-transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
          transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
  width: 63px;
}

@-webkit-keyframes top {
  50% {
    -webkit-transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
            transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
  }
  100% {
    -webkit-transform: translateY(140%) rotateX(55deg) rotateZ(45deg);
            transform: translateY(140%) rotateX(55deg) rotateZ(45deg);
  }
}

@keyframes top {
  50% {
    -webkit-transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
            transform: translateY(-140%) rotateX(55deg) rotateZ(45deg);
  }
  100% {
    -webkit-transform: translateY(140%) rotateX(55deg) rotateZ(45deg);
            transform: translateY(140%) rotateX(55deg) rotateZ(45deg);
  }
}
.left,
.right {
  height: 176.4px;
  width: 44.1px;
}

.left {
  -webkit-animation: left 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
          animation: left 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
  background: #cb2c81;
  -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
          transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

@-webkit-keyframes left {
  49.999% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  50.001% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

@keyframes left {
  49.999% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  50.001% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
            transform: translate(-50%, 7.14285%) skewY(30deg) scaleY(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}
.right {
  -webkit-animation: right 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
          animation: right 2200ms cubic-bezier(0.86, 0, 0.07, 1) infinite;
  background: #e13290;
  -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
          transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

@-webkit-keyframes right {
  49.999% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  50.001% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

@keyframes right {
  49.999% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  50.001% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
            transform: translate(50%, 7.14285%) skewY(-30deg) scaleY(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

Description

Spawned from this tweet by @anatudor: https://twitter.com/anatudor/status/696067669313921025
Term
Fri, 01/12/2018 - 16:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv