Home Verkennen Help
Registreren Inloggen
zxhx
/
xiaoben-as2-php
3
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Aftakking: master
Aftakkingen Labels
xiaoben-as2-...
/
compressed
/
css
/
circle.css

circle.css 3.4 KB
Permalink Geschiedenis Ruwe

12345678910111213141516171819 
  1. /*
    2. 

  2.  *  Usage:
    3. 

  3.  *
    4. 

  4.  *    <div class="sk-circle">
    5. 

  5.  *      <div class="sk-circle1 sk-child"></div>
    6. 

  6.  *      <div class="sk-circle2 sk-child"></div>
    7. 

  7.  *      <div class="sk-circle3 sk-child"></div>
    8. 

  8.  *      <div class="sk-circle4 sk-child"></div>
    9. 

  9.  *      <div class="sk-circle5 sk-child"></div>
    10. 

  10.  *      <div class="sk-circle6 sk-child"></div>
    11. 

  11.  *      <div class="sk-circle7 sk-child"></div>
    12. 

  12.  *      <div class="sk-circle8 sk-child"></div>
    13. 

  13.  *      <div class="sk-circle9 sk-child"></div>
    14. 

  14.  *      <div class="sk-circle10 sk-child"></div>
    15. 

  15.  *      <div class="sk-circle11 sk-child"></div>
    16. 

  16.  *      <div class="sk-circle12 sk-child"></div>
    17. 

  17.  *    </div>
    18. 

  18.  *
    19. 

  19.  */.sk-circle{margin:40px auto;width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes sk-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
    20.