css3 animation(loading)

       看見別人些的加載的動畫，覺得特別炫酷，然後我也試着自己寫咯一個，這個動畫是用的純html 和 css3寫的。

思路：

      1、先定義一個大盒子，轉需要用的元素

      2、對需要做動畫的標籤進行定位操作

     3、用css3實現你要的表情效果

      其他的廢話就不多少咯，具體請看下面的代碼，不明白的地方，隨時都可以call 我

html代碼：

<div class="container">
        <div class="br1 border"></div>
        <div class='br2 border'></div>
        <div class='br3 border'></div>
        <div class='circle'>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
            <span class='dot'></span>
        </div>
    <!-- </div> -->
</div>

css代碼：

  .container{ width: 300px; height: 300px; margin:50px auto; border:1px solid red; position: relative;}
  .circle {width: 100%;height: 100%; position: relative; animation: spin 5s linear infinite;/*border:1px solid blue;*/}
  
  .border {position: absolute;border-radius: 50%;border: 3px solid red;}
  .br1{ width:140px; height: 140px; top:80px; left: 80px; border-left-color: transparent; border-right-color: transparent;animation: spin 5s linear infinite;}
  .br2{ width:120px; height: 120px; top:90px; left:90px;  border-left-color: transparent; border-right-color: transparent;animation: spin 5s reverse infinite;}
  .br3{ width:70px; height: 70px; top:115px; left: 115px; border-left-color: transparent; border-right-color: transparent;animation: spin 5s alternate-reverse infinite;}

  .circle .dot{position: absolute;display: block; width: 20px; height: 20px; border-radius: 50%; background: #f67b86;
    animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
    -webkit-animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
  }
  .dot:nth-child(1){ left: 50px; top:90px; animation-delay: 0s;}
  .dot:nth-child(2){ left: 34px; top:130px;animation-delay: 0.4s;; }
  .dot:nth-child(3){ left: 39px; top:170px;animation-delay: 0.8s; }
  .dot:nth-child(4){ left: 59px; top:208px; animation-delay: 1.2s;}
  .dot:nth-child(5){ left: 95px; top:235px; animation-delay: 1.6s;}
  .dot:nth-child(6){ left: 140px; top:245px;animation-delay: 2.0s; }
  .dot:nth-child(7){ left: 190px; top:233px;animation-delay: 2.4s; }
  .dot:nth-child(8){ left: 225px; top:203px; animation-delay: 2.80s;}
  .dot:nth-child(9){ left: 243px; top:165px; animation-delay: 3.2s;}
  .dot:nth-child(10){ left: 244px; top:122px;animation-delay: 3.6s; }
  .dot:nth-child(11){ left: 227px; top:80px;animation-delay: 4.0s; }
  .dot:nth-child(12){ left: 194px; top:49px;animation-delay: 4.4s; }
  .dot:nth-child(13){ left: 145px; top:35px;animation-delay: 4.8s; }
  .dot:nth-child(14){ left: 85px; top:50px;animation-delay: 5.2s; }
  /*動畫*/
  @keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
  @-webkit-keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
  @-moz-keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
  /*漸變收縮*/
  @keyframes jitter {
    0% { transform: scale(1, 1);}
    25% { transform: scale(0.7, 0.7);}
    50% {transform: scale(1, 1);}
    75% {transform: scale(1.3, 1.3);}
    100% {transform: scale(1, 1);}
  }
  @-webkit-keyframes jitter {
    0% { transform: scale(1, 1);}
    25% { transform: scale(0.7, 0.7);}
    50% {transform: scale(1, 1);}
    75% {transform: scale(1.3, 1.3);}
    100% {transform: scale(1, 1);}
  }
  @-moz-keyframes jitter {
    0% { transform: scale(1, 1);}
    25% { transform: scale(0.7, 0.7);}
    50% {transform: scale(1, 1);}
    75% {transform: scale(1.3, 1.3);}
    100% {transform: scale(1, 1);}
  }
  /*透明度*/
  @keyframes fade-in-out {
    0% { opacity: 0.8;}
    25% {opacity: 0.2;}
    75% {opacity: 1;}
    100% { opacity: 0.8;}
  }
  @-webkit-keyframes fade-in-out {
    0% { opacity: 0.8;}
    25% {opacity: 0.2;}
    75% {opacity: 1;}
    100% { opacity: 0.8;}
  }
  @-moz-keyframes fade-in-out {
    0% { opacity: 0.8;}
    25% {opacity: 0.2;}
    75% {opacity: 1;}
    100% { opacity: 0.8;}

  }

效果圖如下：