社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 主體

純CSS3製作超漂亮又實用的載入小圖標

高洛峰
發布： 2016-10-14 15:32:05
原創
2039 人瀏覽過

先来一张各种效果的预览图，其实代码并不复杂，关键看自己如何运用。

純CSS3製作超漂亮又實用的載入小圖標

<!doctype html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <link rel="stylesheet" type="text/css" href="loaders.css"/>
    <title>css3炫酷页面加载动画特效代码 </title>
</head>
<body>
  <main>
    <div class="loaders">
      <div class="loader">
        <div class="loader-inner ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-grid-pulse">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate-pulse">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner square-spin">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate-multiple">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-pulse-rise">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-rotate">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner cube-transition">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-zig-zag-deflect">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-party">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-pulse-sync">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-pulse-out">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-pulse-out-rapid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-ripple">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-ripple-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner triangle-skew-spin">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-grid-beat">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner semi-circle-spin">
          <div></div>
        </div>
      </div>
    </div>
  </main>
  <script>
    document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
      document.querySelector(&#39;main&#39;).className += &#39;loaded&#39;;
    });
  </script>


</body>
</html>
登入後複製

css：demo

/**
*
*
*/
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 16px;
    background: #000;
    color: #fff;
    font-family: &#39;Source Sans Pro&#39;; 
}

h1 {
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0.6rem 0; 
}
h1 > span {font-weight: 300; }
h2 {
    font-size: 1.15em;
    font-weight: 300;
    margin: 0.3rem 0; 
}
main {
    width: 95%;
    max-width: 1000px;
    margin: 4em auto;
    opacity: 0; 
}
main.loaded {transition: opacity .25s linear;opacity: 1; }
main header {width: 100%; }
main header > div {width: 50%; }
main header > .left, main header > .right {height: 100%; }
main .loaders {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}
main .loaders .loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
登入後複製

css：loaders

/** *
 * 所有動畫必須存在於自己的檔案中
 * 在動畫目錄中並被包含
 * 這裡。
 *
 */
/** * 多個動畫共享的樣式
 */
@-webkit-keyframes 縮放{
  0% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：1； }

  45% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：0.7； }

  80% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：1； } }
@關鍵影格縮放{
  0% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：1； }

  45% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：0.7； }

  80% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：1； } }

.ball-pulse > div:nth-child(0) {
  -webkit-animation：縮放 0.75 秒 0 秒無限三次貝塞爾曲線（.2，.68，.18，1.08）；
          動畫：縮放 0.75s 0s 無限三次貝塞爾曲線(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(1) {
  -webkit-animation：縮放 0.75 秒 0.12 秒無限三次貝塞爾曲線（.2，.68，.18，1.08）；
          動畫：縮放 0.75 秒 0.12 秒無限三次貝塞爾曲線(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
  -webkit-animation：縮放 0.75 秒 0.24 秒無限三次貝塞爾曲線（.2，.68，.18，1.08）；
          動畫：縮放 0.75 秒 0.24 秒無限三次貝塞爾曲線(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
  -webkit-animation：縮放 0.75 秒 0.36 秒無限三次貝塞爾曲線（.2，.68，.18，1.08）；
          動畫：縮放 0.75 秒 0.36 秒無限三次貝塞爾曲線(.2, .68, .18, 1.08); }
.ball-pulse > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  顯示：內聯塊； }

@-webkit-keyframes 球脈衝同步{
  33% {
    -webkit-transform：translateY(10px);
            轉換：翻譯Y（10px）； }

  66% {
    -webkit-transform: 翻譯Y(-10px);
            轉換：翻譯Y（-10px）； }

  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)； } }

@keyframes球脈衝同步{
  33% {
    -webkit-transform：translateY(10px);
            轉換：翻譯Y（10px）； }

  66% {
    -webkit-transform: 翻譯Y(-10px);
            轉換：翻譯Y（-10px）； }  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)； } }

.ball-pulse-sync > div:nth-child(0) {
  -webkit-animation：球脈衝同步 0.6 秒 0 秒無限緩入；
          動畫：球脈衝同步 0.6 秒 0 秒無限緩入； }
.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation：球脈衝同步 0.6 秒 0.07 秒無限緩入；
          動畫：球脈衝同步 0.6 秒 0.07 秒無限緩入； }
.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation：球脈衝同步 0.6 秒 0.14 秒無限緩入；
          動畫：球脈衝同步 0.6 秒 0.14 秒無限緩入； }
.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation：球脈衝同步 0.6 秒 0.21 秒無限緩入；
          動畫：球脈衝同步 0.6 秒 0.21 秒無限緩入； }
.ball-pulse-sync > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  顯示：內聯塊； }

@-webkit-keyframes 球尺度{
  0% {
    -webkit-transform：縮放（0）；
            轉換：縮放（0）； }

  100% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0； } }

@keyframes 球標尺{
  0% {
    -webkit-transform：縮放（0）；
            轉換：縮放（0）； }

  100% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0； } }

.ball-scale > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  顯示：內聯塊；
  高度：60 像素；
  寬度：60 像素；
  -webkit-animation：球尺度 1 秒 0 秒緩入、緩出無限；
          動畫：球形刻度 1 秒 0 秒緩入無限； }

@-webkit-keyframes 旋轉{
  0% {
    -webkit-transform：旋轉（0度）；
            轉換：旋轉（0 度）； }

  50% {
    -webkit-transform：旋轉（180度）；
            轉換：旋轉（180 度）； }

  100% {
    -webkit-transform：旋轉（360 度）；
            轉換：旋轉（360 度）； } }

@關鍵影格旋轉{
  0% {
    -webkit-transform：旋轉（0度）；
            轉換：旋轉（0 度）； }

  50% {
    -webkit-transform：旋轉（180度）；
            轉換：旋轉（180 度）； }

  100% {
    -webkit-transform：旋轉（360 度）；
            轉換：旋轉（360 度）； } }

.球旋轉{
  職位：相對； }  .ball-rotate > div {
    背景顏色：#fff；
    寬度：15 像素；
    高度：15 像素；
    邊框半徑：100%；
    邊距：2 像素；
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    職位：相對； }
    .ball-rotate > div:first-child {
      -webkit-animation：旋轉 1 秒 0 秒三次貝塞爾曲線（.7，-.13，.22，.86）無限；
              動畫：旋轉 1 秒 0 秒三次貝塞爾曲線（.7，-.13，.22，.86）無限； }
    .ball-rotate > div:之前, .ball-rotate > div:之後 {
      背景顏色：#fff；
      寬度：15 像素；
      高度：15 像素；
      邊框半徑：100%；
      邊距：2 像素；
      內容： 」;
      位置：絕對；
      不透明度：0.8； }
    .ball-rotate > div:之前{
      頂部：0 像素；
      左：-28px； }
    .ball-rotate > div:after {
      頂部：0 像素；
      左：25 像素； }

@關鍵影格旋轉{
  0% {
    -webkit-transform：旋轉（0度）縮放（1）；
            轉換：旋轉（0度）縮放（1）； }

  50% {
    -webkit-transform：旋轉（180度）縮放（0.6）；
            轉換：旋轉（180度）縮放（0.6）； }

  100% {
    -webkit-transform：旋轉（360度）縮放（1）；
            轉換：旋轉（360 度）縮放（1）； } }

.ball-clip-rotate > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  邊框：2px 實心#fff；
  邊框底部顏色：透明；
  高度：25 像素；
  寬度：25 像素；
  背景：透明！重要；
  顯示：內聯塊；
  -webkit-animation：旋轉 0.75 秒 0 秒線性無限；
          動畫：旋轉0.75秒0秒線性無限； }

@關鍵影格旋轉{
  0% {
    -webkit-transform：旋轉（0度）縮放（1）；
            轉換：旋轉（0度）縮放（1）； }

  50% {
    -webkit-transform：旋轉（180度）縮放（0.6）；
            轉換：旋轉（180度）縮放（0.6）； }

  100% {
    -webkit-transform：旋轉（360度）縮放（1）；
            轉換：旋轉（360 度）縮放（1）； } }

@關鍵影格縮放{
  30% {
    -webkit-transform：縮放（0.3）；
            轉換：縮放（0.3）； }

  100% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）； } }

.ball-clip-rotate-pulse {
  職位：相對；
  -webkit-transform: 翻譯Y(-15px);
      -ms-transform：翻譯Y（-15px）；
          轉換：翻譯Y（-15px）； }  .ball-clip-rotate-pulse > div {
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    位置：絕對；
    頂部：0 像素；
    左：0 像素；
    邊框半徑：100%； }
    .ball-clip-rotate-pulse > div:first-child {
      背景：#fff；
      高度：16 像素；
      寬度：16 像素；
      頂部：9 像素；
      左：9 像素；
      -webkit-animation：縮放 1s 0s 三次貝塞爾曲線（.09，.57，.49，.9）無限；
              動畫：縮放 1s 0s 三次貝塞爾曲線(.09, .57, .49, .9) 無限； }
    .ball-clip-rotate-pulse > div:last-child {
      位置：絕對；
      邊框：2px 實心#fff；
      寬度：30 像素；
      高度：30 像素；
      背景：透明；
      邊框：2px 實線；
      邊框顏色：#fff 透明#fff 透明；
      -webkit-animation：旋轉 1 秒 0 秒三次貝塞爾曲線（.09，.57，.49，.9）無限；
              動畫：旋轉 1 秒 0 秒三次貝塞爾曲線(.09, .57, .49, .9) 無限；
      -webkit-animation-duration：1s；
              動畫時間：1 秒； }

@關鍵影格旋轉{
  0% {
    -webkit-transform：旋轉（0度）縮放（1）；
            轉換：旋轉（0度）縮放（1）； }

  50% {
    -webkit-transform：旋轉（180度）縮放（0.6）；
            轉換：旋轉（180度）縮放（0.6）； }

  100% {
    -webkit-transform：旋轉（360度）縮放（1）；
            轉換：旋轉（360 度）縮放（1）； } }

.ball-clip-rotate-multiple {
  職位：相對； }
  .ball-clip-rotate-multiple > div {
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    位置：絕對；
    左：0 像素；
    頂部：0 像素；
    邊框：2px 實心#fff；
    邊框底部顏色：透明；
    邊框頂部顏色：透明；
    邊框半徑：100%；
    高度：35 像素；
    寬度：35 像素；
    -webkit-animation：旋轉 1 秒 0 秒、緩入、緩出、無限；
            動畫：旋轉 1 秒、0 秒、緩入、無限； }
    .ball-clip-rotate-multiple > div:last-child {
      顯示：內聯塊；
      頂部：10 像素；
      左：10 像素；
      寬度：15 像素；
      高度：15 像素；
      -webkit-animation-duration：0.5s；
              動畫時間：0.5 秒；
      邊框顏色：#fff 透明#fff 透明；
      -webkit-animation-direction：反向；
              動畫方向：反向； }@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：1； }

  70% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0.7； }

  100% {
    不透明度：0.0； } }

@keyframes 球尺度波紋{
  0% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：1； }

  70% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0.7； }

  100% {
    不透明度：0.0； } }

.ball-scale-ripple > div {
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  高度：50 像素；
  寬度：50 像素；
  邊框半徑：100%；
  邊框：2px 實心#fff；
  -webkit-animation：ball-scale-ripple 1s 0s 無限三次貝塞爾曲線(.21, .53, .56, .8);
          動畫：ball-scale-ripple 1s 0s 無限三次貝塞爾曲線(.21, .53, .56, .8); }

@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：1； }

  70% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0.7； }

  100% {
    不透明度：0.0； } }

@keyframesball-scale-ripple-multiple{
  0% {
    -webkit-transform：縮放（0.1）；
            轉換：縮放（0.1）；
    不透明度：1； }

  70% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0.7； }

  100% {
    不透明度：0.0； } }

.ball-scale-ripple-multiple {
  職位：相對；
  -webkit-transform: 翻譯Y(-25px);
      -ms-transform：翻譯Y（-25px）；
          轉換：翻譯Y（-25px）； }
  .ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay：-0.2s；
            動畫延遲：-0.2s； }
  .ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: 0s;
            動畫延遲：0 秒； }
  .ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            動畫延遲：0.2 秒； }
  .ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            動畫延遲：0.4 秒； }  .ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    位置：絕對；
    頂部：0；
    左：0；
    寬度：50 像素；
    高度：50 像素；
    邊框半徑：100%；
    邊框：2px 實心#fff；
    -webkit-animation：ball-scale-ripple-multiple 1.25s 0s 無限三次貝塞爾曲線(.21, .53, .56, .8);
            動畫：ball-scale-ripple-multiple 1.25s 0s 無限三次貝茲曲線(.21, .53, .56, .8); }

@-webkit-keyframes 球拍{
  50% {
    不透明度：0.2；
    -webkit-transform：縮放（0.75）；
            轉換：縮放（0.75）； }

  100% {
    不透明度：1；
    -webkit-transform：縮放（1）；
            轉換：縮放（1）； } }

@keyframes 球拍{
  50% {
    不透明度：0.2；
    -webkit-transform：縮放（0.75）；
            轉換：縮放（0.75）； }

  100% {
    不透明度：1；
    -webkit-transform：縮放（1）；
            轉換：縮放（1）； } }

.ball-beat > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  顯示：內聯塊；
  -webkit-animation：球拍 0.7 秒 0 秒無限線性；
          動畫：球拍 0.7 秒 0 秒無限線性； }
  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay：0.35s！重要；
            動畫延遲：0.35s！重要； }

@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform：縮放（0）；
            轉換：縮放（0）；
    不透明度：0； }

  5% {
    不透明度：1； }

  100% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0； } }

@keyframesball-scale-multiple{
  0% {
    -webkit-transform：縮放（0）；
            轉換：縮放（0）；
    不透明度：0； }

  5% {
    不透明度：1； }

  100% {
    -webkit-transform：縮放（1）；
            轉換：縮放（1）；
    不透明度：0； } }

.ball-scale-multiple {
  職位：相對；
  -webkit-transform: 翻譯Y(-30px);
      -ms-transform：翻譯Y（-30px）；
          轉換：翻譯Y（-30px）； }
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            動畫延遲：0.2 秒； }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            動畫延遲：0.4 秒； }  .ball-scale-multiple > div {
    背景顏色：#fff；
    寬度：15 像素；
    高度：15 像素；
    邊框半徑：100%；
    邊距：2 像素；
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    位置：絕對；
    左：0 像素；
    頂部：0 像素；
    不透明度：0；
    保證金：0；
    寬度：60 像素；
    高度：60 像素；
    -webkit-animation：ball-scale-multiple 1s 0s 線性無限；
            動畫：ball-scale-multiple 1s 0s 線性無限； }

@-webkit-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform：翻譯（25px，-50px）；
            轉換：翻譯（25px，-50px）； }

  66% {
    -webkit-transform：翻譯（50px，0px）；
            轉換：翻譯（50px，0px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

@keyframes 球三角形路徑-1 {
  33% {
    -webkit-transform：翻譯（25px，-50px）；
            轉換：翻譯（25px，-50px）； }

  66% {
    -webkit-transform：翻譯（50px，0px）；
            轉換：翻譯（50px，0px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

@-webkit-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform：翻譯（25px，50px）；
            轉換：翻譯（25 像素，50 像素）； }

  66% {
    -webkit-transform：翻譯（-25px，50px）；
            轉換：翻譯（-25px，50px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

@keyframes 球三角形路徑-2 {
  33% {
    -webkit-transform：翻譯（25 像素，50 像素）；
            轉換：翻譯（25 像素，50 像素）； }

  66% {
    -webkit-transform：翻譯（-25px，50px）；
            轉換：翻譯（-25px，50px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

@-webkit-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform：翻譯（-50px，0px）；
            轉換：翻譯（-50px，0px）； }

  66% {
    -webkit-transform：翻譯（-25px，-50px）；
            轉換：翻譯（-25px，-50px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

@keyframes 球三角形路徑-3 {
  33% {
    -webkit-transform：翻譯（-50px，0px）；
            轉換：翻譯（-50px，0px）； }  66% {
    -webkit-transform：翻譯（-25px，-50px）；
            轉換：翻譯（-25px，-50px）； }

  100% {
    -webkit-transform：翻譯（0px，0px）；
            轉換：翻譯（0px，0px）； } }

.球-三角形-路徑{
  職位：相對；
  -webkit-transform：翻譯（-25px，-25px）；
      -ms-transform：譯（-25px，-25px）；
          轉換：譯（-25px，-25px）； }
  .ball-triangle-path > div:nth-child(1) {
    -webkit-animation-name：球三角路徑-1；
            動畫名稱：球三角路徑-1；
    -webkit-animation-delay: 0;
            動畫延遲：0；
    -webkit-animation-duration：2秒；
            動畫時間：2 秒；
    -webkit-animation-timing-function：緩入緩出；
            動畫計時功能：緩入、緩出；
    -webkit-animation-iteration-count：無限；
            動畫迭代次數：無限； }
  .ball-triangle-path > div:nth-child(2) {
    -webkit-animation-name：球三角路徑-2；
            動畫名稱：球三角路徑-2；
    -webkit-animation-delay: 0;
            動畫延遲：0；
    -webkit-animation-duration：2秒；
            動畫時間：2 秒；
    -webkit-animation-timing-function：緩入緩出；
            動畫計時功能：緩入、緩出；
    -webkit-animation-iteration-count：無限；
            動畫迭代次數：無限； }
  .ball-triangle-path > div:nth-child(3) {
    -webkit-animation-name：球三角路徑-3；
            動畫名稱：球三角路徑-3；
    -webkit-animation-delay: 0;
            動畫延遲：0；
    -webkit-animation-duration：2秒；
            動畫時間：2 秒；
    -webkit-animation-timing-function：緩入緩出；
            動畫計時功能：緩入、緩出；
    -webkit-animation-iteration-count：無限；
            動畫迭代次數：無限； }
  .ball-triangle-path > div {
    -webkit-animation-fill-mode：兩者；
            動畫填入模式：兩者皆有；
    位置：絕對；
    寬度：10 像素；
    高度：10 像素；
    邊框半徑：100%；
    邊框：1px 實心#fff； }
    .ball-triangle-path > div:nth-of-type(1) {
      頂部：50 像素； }
    .ball-triangle-path > div:nth-of-type(2) {
      左：25 像素； }
    .ball-triangle-path > div:nth-of-type(3) {
      頂部：50 像素；
      左：50 像素； }

@-webkit-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform：縮放（1.1）；
            轉換：縮放（1.1）； }  25% {
    -webkit-transform: 翻譯Y(-30px);
            轉換：翻譯Y（-30px）； }

  50% {
    -webkit-transform：縮放（0.4）；
            轉換：縮放（0.4）； }

  75% {
    -webkit-transform：翻譯Y（30px）；
            轉換：翻譯Y(30px)； }

  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)；
    -webkit-transform：縮放（1）；
            轉換：縮放（1）； } }

@keyframes球脈衝上升偶{
  0% {
    -webkit-transform：縮放（1.1）；
            轉換：縮放（1.1）； }

  25% {
    -webkit-transform: 翻譯Y(-30px);
            轉換：翻譯Y（-30px）； }

  50% {
    -webkit-transform：縮放（0.4）；
            轉換：縮放（0.4）； }

  75% {
    -webkit-transform：翻譯Y（30px）；
            轉換：翻譯Y(30px)； }

  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)；
    -webkit-transform：縮放（1）；
            轉換：縮放（1）； } }

@-webkit-keyframes 球脈衝上升奇數 {
  0% {
    -webkit-transform：縮放（0.4）；
            轉換：縮放（0.4）； }

  25% {
    -webkit-transform：翻譯Y（30px）；
            轉換：翻譯Y(30px)； }

  50% {
    -webkit-transform：縮放（1.1）；
            轉換：縮放（1.1）； }

  75% {
    -webkit-transform: 翻譯Y(-30px);
            轉換：翻譯Y（-30px）； }

  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)；
    -webkit-transform：縮放（0.75）；
            轉換：縮放（0.75）； } }

@keyframes球脈衝上升奇數{
  0% {
    -webkit-transform：縮放（0.4）；
            轉換：縮放（0.4）； }

  25% {
    -webkit-transform：翻譯Y（30px）；
            轉換：翻譯Y(30px)； }

  50% {
    -webkit-transform：縮放（1.1）；
            轉換：縮放（1.1）； }

  75% {
    -webkit-transform: 翻譯Y(-30px);
            轉換：翻譯Y（-30px）； }

  100% {
    -webkit-transform: 翻譯Y(0);
            轉換：翻譯Y(0)；
    -webkit-transform：縮放（0.75）；
            轉換：縮放（0.75）； } }.ball-pulse-rise > div {
  背景顏色：#fff；
  寬度：15 像素；
  高度：15 像素；
  邊框半徑：100%；
  邊距：2 像素；
  -webkit-animation-fill-mode：兩者；
          動畫填滿模式：兩者；
  顯示：內聯塊；
  -webkit-animation-duration：1s；
          動畫時間：1 秒；
  -webkit-animation-timing-function：三次貝塞爾曲線（.15，.46，.9，.6）；
          動畫計時函數：三次貝茲曲線(.15、.46、.9、.6)；
  -webkit-animation-iteration-count：無限；
          動畫迭代次數：無限；
  -webkit-animation-delay: 0;
          動畫延遲：0； }
  .ball-pulse-rise > div:nth-child(2n) {
    -webkit-animation-name：球脈衝上升均勻；
            動畫名稱：球脈衝上升均勻； }
  .ball-pulse-rise > div:nth-child(2n-1) {
    -webkit-animation-name：球脈衝上升奇數；
            動畫名稱：球脈衝上升奇數； }

@-webkit-keyframes 球網格節拍{
  50% {
    不透明度：0.7； }

  100% {
    不透明度：1； } }

@keyframes 球網格節拍{
  50% {
    不透明度：0.7； }

  100% {
    不透明度：1； } }

.ball-grid-beat {
  寬度：57 像素； }
  .ball-grid-beat > div:nth-child(1) {
    -webkit-animation-delay: 0.36s;
            動畫延遲：0.36 秒；
    -webkit-animation-duration：0.96s；
            動畫時間：0.96 秒； }
  .ball-grid-beat > div:nth-child(2) {
    -webkit-animation-delay: 0.4s;
            動畫延遲：0.4 秒；
    -webkit-animation-duration：0.93s；
            動畫時間：0.93 秒； }
  .ball-grid-beat > div:nth-child(3) {
    -webkit-animation-delay：0.68s；
            動畫延遲：0.68 秒；
    -webkit-animation-duration：1.19s；
            動畫時間：1.19 秒； }
  .ball-grid-beat > div:nth-child(4) {
    -webkit-animation-delay：0.41s；
            動畫延遲：0.41 秒；
    -webkit-animation-duration：1.13s；
            動畫時間：1.13 秒； }
  .ball-grid-beat > div:nth-child(5) {
    -webkit-animation-delay：0.71s；
            動畫延遲：0.71 秒；
    -webkit-animation-duration：1.34s；
            動畫時間：1.34 秒； }
  .ball-grid-beat > div:nth-child(6) {
   ＆nbs
登入後複製
相關標籤：
纯CSS3制作超级漂亮又实用的加载小图标
來源：php.cn
上一篇：css3 3d效果及動畫學習 下一篇：邂逅Sass和Compass之Sass篇
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1907
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
10
2080
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1752
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1650
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1660
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板