LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*, *:after, *:before{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}

body {
  background: #58c5c9;
  font-family: arial;
  margin: 0;
  padding: 0;
}
  
  /* artboard container */
    .container{padding:10% 0 0; width:12em; margin:0 auto}
    
    .container *{border:2px solid #fff;}
    
  /* main container */
    .main{
      height:10em;
      padding:.5em;
      position:relative;
      width:8.625em;
    }
  
  /* Main Areas 2(top) & 3(bottom) */
    .m2, .m3{
      position:relative;
      width:100%;
    }
   

    .m2{
     border-bottom:0;
     height:53%
    }
    
    
    /* Small Circles */
      .mini-Circle.mcBig{
        border-radius:300px;
        height:.725em;
        margin:.5em auto;
        width:.725em
      }
    
      .mc1, .mc2{
        position:absolute;
        top:4%;
      }
    
      .mc1{left:-1em}
      .mc2{right:-1em}
      .mcBig{
        bottom:-.66em;
        position:absolute;
        right:-1.2em;
      }
    
    /* Boxes */
      .rec{
        bottom:.2em;
        height:1.875em;
        left:32.5%;
        position:absolute;
        width:2.5em;
      }
      
      .sRec{
        bottom:.2em;
        left:.3em;
        height:.55em;
        position:absolute;
        width:1em;
      }
    
    /* Tape Lines */
      .line{
        background:#fff;
        border:0;
        height:.1875em;
        position:absolute;
      }
      
      .line-Left{
        left:-2.05em;
        -moz-transform:rotate(40deg);
        -webkit-transform:rotate(40deg);
        transform:rotate(40deg);
        top:.4em;
        width:1.3em
      }
      
      .line-Left2{
        left:-.4em;
        top:.76em;
        width:.4em;
      }
      
      .line-Right{
        right:-.64em;
        top:1.25em;
        -moz-transform:rotate(-32deg);
        -webkit-transform:rotate(-32deg);
        transform:rotate(-32deg);
        width:.6em;
      }
      
      .line-Right2{
        right:-1.66em;
        -moz-transform:rotate(-40deg);
        -webkit-transform:rotate(-40deg);
        transform:rotate(-40deg);
        top:.25em;
        width:1em
      }
    

    
    .m3{
      height:47%;
    }
    
    .circle{
      background:#58c5c9;
      border-radius:500px;
      height:5.25em;
      position:absolute;
      top:-1.926em;
      width:5.25em;
      z-index:3;
      
      -moz-animation:rotate 5s infinite linear;
      -webkit-animation:rotate 5s infinite linear;
      animation:rotate 5s infinite linear

    }
    
    
    @-moz-keyframes rotate{
      from {
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
      }
      
      to {
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
      }
    }
    @-webkit-keyframes rotate{
      from {
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
      }
      
      to {
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
      }
    }
    @keyframes rotate{
      from {
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
      }
      
      to {
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
      }
    }
    
 
    .c1{
      left:-1.625em;
      
    }
    
    .c2{
      right:-1.625em;
    }
    
    .inner-C{
      border-radius:400px;
      height:29%;
      left:35%;
      position:absolute;
      top:35%;
      width:29%;
    }
    
    .inner-inner{
      border-radius:300px;
      height:36%;
      margin:33% auto;
      width:36%
    }
    
    .hole{
      border:0;
      height:1.175em;
      position:absolute;
      width:.8em;
    }
    
    .h-Top, .h-Bottom{
      height:.123em;
    }
      .h-Top{
        left:0;
        top:0;
        width:100%;
      }
      .h-Bottom{
        bottom:0;
        left:16%;
        width:72%
      }
      .h-Left, .h-Right{
        height:100%;
        top:0;
        width:.123em;
      }
      .h-Left{
        left:0;
        -moz-transform:rotate(-10deg);
        -webkit-transform:rotate(-10deg);
        transform:rotate(-10deg)
      }
      .h-Right{
        right:0;
        -moz-transform:rotate(10deg);
        -webkit-transform:rotate(10deg);
        transform:rotate(10deg)
      }
    
    .hole1{
      left:.2em;
      top:-1.6em; 
    }
    
    .hole2{
      right:1.5em;
      top:.9em;
      -moz-transform:rotate(-127deg);
      -webkit-transform:rotate(-127deg);
      transform:rotate(-127deg);
    }
    
    .hole3{
      left:1.5em;
      top:.9em;
      -moz-transform:rotate(127deg);
      -webkit-transform:rotate(127deg);
      transform:rotate(127deg);
    }
    
    .nobs{
      border:0;
      float:left;
      width:23%
    }
    
    .mini-Circle{
      border-radius:300px;
      height:.625em;
      margin:.5em auto;
      width:.625em
    }
    
    .boxes{
      border:0;
      float:left;
      padding-top:.25em;
      width:27%;
    }
    
    .box{
      height:1em;
      margin:.5em 0;
      overflow:hidden;
      position:relative;
    }
    
    .boxes1 .box{
      margin-right:.2em;
    }
    
    .boxes2 .box{
      margin-left:.2em;
    }
    
    .meter{
      background:#fff;
      border:0;
      bottom:-.19em;
      height:.6em;
      left:45%;
      position:absolute;
      width:.1875em;
    }
    
    .meter1{
      -moz-animation:bf .4s infinite linear alternate;
      -webkit-animation:bf .4s infinite linear alternate;
      animation:bf .4s infinite linear alternate;
    }
    .meter2{
      -moz-animation:fb .6s infinite alternate;
      -webkit-animation:fb .6s infinite alternate;
      animation:fb .6s infinite alternate;
    }
    .meter3{
      -moz-animation:fb 1.1s infinite alternate;
      -webkit-animation:fb 1.1s infinite alternate;
      animation:fb 1.1s infinite alternate;
    }
    .meter4{
      -moz-animation:bf .88s infinite linear alternate;
      -webkit-animation:bf .88s infinite linear alternate;
      animation:bf .88s infinite linear alternate;
    }

    @-moz-keyframes bf {
      from {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
      }
    
      to {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    }
    @-webkit-keyframes bf {
      from {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
      }
    
      to {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    }
    @keyframes bf {
      from {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
      }
    
      to {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    }
    
    @-moz-keyframes fb {
      from {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    
      to {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        transform:rotate(-60deg);
      }
    }
    @-webkit-keyframes fb {
      from {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    
      to {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        transform:rotate(-60deg);
      }
    }
    @keyframes fb {
      from {
        left:65%;
        -moz-transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        transform:rotate(60deg);
      }
    
      to {
        left:25%;
        -moz-transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        transform:rotate(-60deg);
      }
    }
Host Instantly Drag and Drop Website Builder

 

Description

rebound to a dribbble shot
Term
Mon, 11/27/2017 - 21:44

Related Codes

Pen ID
Pen ID
Pen ID