[代码] 各类loading小动画集合

2014-11-23 01:33:15 -0500

代码演示①

HTML代码

代码演示②

HTML代码

.cube {
      width:33%;
      height:33%;
      background:#333;
      float:left;
      -webkit-animation: scaleDelay 1.3s infinite ease-in-out;
      animation: scaleDelay 1.3s infinite ease-in-out;
    }

/* 
     * Spinner positions
     * 1 2 3 
     * 4 5 6
     * 7 8 9
     */

.spinner .cube:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
    .spinner .cube:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
    .spinner .cube:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s  }
    .spinner .cube:nth-child(4) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
    .spinner .cube:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
    .spinner .cube:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
    .spinner .cube:nth-child(7) { -webkit-animation-delay: 0.0s; animation-delay: 0.0s  }
    .spinner .cube:nth-child(8) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
    .spinner .cube:nth-child(9) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
        
    @-webkit-keyframes scaleDelay {
      0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0) }
      35%           { -webkit-transform:scale3D(0.0, 0.0, 1.0) }
    }
        
    @keyframes scaleDelay {
      0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(1.0, 1.0, 1.0) }
      35%           { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(0.0, 0.0, 1.0) }
    }
    </style>
  </head>
  <body>

代码演示③

HTML代码

.circle {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

.circle:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 20%;
      height: 20%;
      background-color: #333;
      
      border-radius: 100%;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out both;
      animation: bouncedelay 1.2s infinite ease-in-out both;
    }

.circle2  { -webkit-transform: rotate(30deg);  transform: rotate(30deg)  }
    .circle3  { -webkit-transform: rotate(60deg);  transform: rotate(60deg)  }
    .circle4  { -webkit-transform: rotate(90deg);  transform: rotate(90deg)  }
    .circle5  { -webkit-transform: rotate(120deg); transform: rotate(120deg) }
    .circle6  { -webkit-transform: rotate(150deg); transform: rotate(150deg) }
    .circle7  { -webkit-transform: rotate(180deg); transform: rotate(180deg) }
    .circle8  { -webkit-transform: rotate(210deg); transform: rotate(210deg) }
    .circle9  { -webkit-transform: rotate(240deg); transform: rotate(240deg) }
    .circle10 { -webkit-transform: rotate(270deg); transform: rotate(270deg) }
    .circle11 { -webkit-transform: rotate(300deg); transform: rotate(300deg) }
    .circle12 { -webkit-transform: rotate(330deg); transform: rotate(330deg) }

.circle2:before  { -webkit-animation-delay: -1.1s; animation-delay: -1.1s }
    .circle3:before  { -webkit-animation-delay: -1.0s; animation-delay: -1.0s }
    .circle4:before  { -webkit-animation-delay: -0.9s; animation-delay: -0.9s }
    .circle5:before  { -webkit-animation-delay: -0.8s; animation-delay: -0.8s }
    .circle6:before  { -webkit-animation-delay: -0.7s; animation-delay: -0.7s }
    .circle7:before  { -webkit-animation-delay: -0.6s; animation-delay: -0.6s }
    .circle8:before  { -webkit-animation-delay: -0.5s; animation-delay: -0.5s }
    .circle9:before  { -webkit-animation-delay: -0.4s; animation-delay: -0.4s }
    .circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s }
    .circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s }
    .circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s }
    
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }

@keyframes bouncedelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0.0);
        transform: scale(0.0);
      } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
      }
    }
    </style>
  </head>
  <body>
  <div class="kpinner">
    <div class="circle1 circle"></div>
    <div class="circle2 circle"></div>
    <div class="circle3 circle"></div>
    <div class="circle4 circle"></div>
    <div class="circle5 circle"></div>
    <div class="circle6 circle"></div>
    <div class="circle7 circle"></div>
    <div class="circle8 circle"></div>
    <div class="circle9 circle"></div>
    <div class="circle10 circle"></div>
    <div class="circle11 circle"></div>
    <div class="circle12 circle"></div>
  </div>

代码演示④

HTML代码

.qpinner > div {
      width: 18px;
      height: 18px;
      background-color: #333;

border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
      animation: bouncedelay 1.4s infinite ease-in-out both;
    }

.qpinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

.qpinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

@-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }

@keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    </style>
  </head>
  <body>
    <div class="qpinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>

代码演示⑤

HTML代码

.dot1, .dot2 {
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #333;
      border-radius: 100%;
      
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }

.dot2 {
      top: auto;
      bottom: 0px;
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
    @keyframes rotate { 
      100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }
    }

@-webkit-keyframes bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }

@keyframes bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    </style>
  </head>
  <body>
    <div class="lpinner">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>

代码演示⑥

HTML代码

代码演示⑦

HTML代码

.inner > div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;
      
      -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }

.inner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

.inner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

.inner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

.inner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

@-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
      20% { -webkit-transform: scaleY(1.0) }
    }

@keyframes stretchdelay {
      0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      } 20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }
    </style>
  </head>
  <body>
    <div class="inner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>

<fieldset>代码演示⑧</fieldset>
    <style>
    .gxinner {
      width: 40px;
      height: 40px;

position: relative;
      margin: 100px auto;
    }

.double-bounce1, .double-bounce2 {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }

.double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

@-webkit-keyframes bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }

@keyframes bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    </style>
  </head>
  <body>
    <div class="gxinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>

<fieldset>HTML代码</fieldset><Textarea cols="26" rows="6">

.inner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

.inner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

.inner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

.inner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

@-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
      20% { -webkit-transform: scaleY(1.0) }
    }

代码演示⑧

HTML代码

position: relative;
      margin: 100px auto;
    }

.double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

@-webkit-keyframes bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }

@keyframes bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    </style>
  </head>
  <body>
    <div class="gxinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>

«Newer Older»

----Comments(1)----
忆憧兮 (@520zx) | @ at 2014-12-19 12:28:
赞一个

Back to home

Subscribe | Register | Login | N