css3 loading載入圖文實例

CSS3應用範圍越來越廣，特別是在如今谷歌瀏覽器逐步替代IE的情況下

今天特意給大家推荐一款css3 loading加載效果

當然，他並不是純CSS3的，抱歉標題可能會有些歧義，但是偶爾的一點點的js也是可以忽略的啦

附件提供了28個不同的加載效果，你可以任選一種作為你的手機網頁端部分模組的載入效果，而不需要考慮相容性的問題

使用方法：

#1，將頭中的CSS樣式以及JS引入到你的網頁中

2，選擇一個你喜歡的載入效果，複製其中的HTML到你的網頁中即可

（注意的index.html底部的JS別漏掉了）

十七、效果十七

 

#三個小球，縱向居中，間距撐開，依序改變小球的translateY的值即可。

@keyframes leap_ball {  50% {
        transform: translateY(60px);
      }}

十八、效果十八

 三個小球，橫縱方向上均居中，透過外邊距撐開小球之間的距離，從效果上看是左右兩邊的兩個小球在圍繞中間小球做環繞運動，那麼我們可以直接讓小球的父元素來旋轉，來達到兩邊小球的環繞效果（父元素旋轉的時候，因為圓形，所以中間小球看不出是在旋轉，並且中間的位置也不會改變，從視覺上看，中間小球沒有做任何變化）。

@keyframes wind_ball {  50% {
        transform: rotateZ(180deg);
      }  100% {transform: rotateZ(360deg);
      }}

十九、效果十九

# 

總共五個小球，每個小球執行的動畫都一樣，只是每個小球的動畫延遲時間不同，而使小球的位置不同，將五個小球定位至同一個位置作為統一起點（這裡，我是將五個小球統一定位至最右邊）

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {  80% {
        right: 75%;    //到达终点，开始返回起点      }}
@keyframes cool_ballS {  80% {               //到达终点
        top: 25%;width: 20px;height: 20px;
      }  81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变top: 0;width: 25px;height: 15px;
      }  99% {               //到达起点top: 0;width: 25px;height: 15px;
      }   100% {             //恢复初始width: 20px;height: 20px;
      } 
    }

2、效果二十

############# ######共八個小球，定位圍成一個圓，改變小球的寬度、高度即可（要保持小球改變的是以小球的圓心為基準）######

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {  50% {
        height: 0;width: 0;
      }  80% {height: 0;width: 0;
      }}

######（50%-80%小球維持寬度、高度保持0，形成了一半顯示，一半隱藏的效果）############二十一、效果二十一############## #################### ######總共三個小球，每個小球的運動軌跡依然是相同的，這裡，我將三個小球的中心定位到縱向頂部，橫向中心，然後分三個階段，先移動到右下角，再到左下角，最後回到起點。 ######（在每一個階段接近中間的時間點，加上了透明度的改變）######

@keyframes triangle_ball {  16% {
        opacity: .6;
      }  33% {left: 100%;top: 100%;opacity: 1;
      }  50% {opacity: .6;
      }  66% {left: 0;top: 100%;opacity: 1;
      }  83% {opacity: .6;
      }  99% {top: 0;left: 50%;opacity: 1;
      }}

############二十二、效果二十二##################################這類似於一個旋轉的齒輪，關鍵是如何做出一個齒輪的形狀來，一個div給實現邊框做裡面的圓，給div的偽類虛線邊框做外面的鋸齒，偽類的邊框越寬，鋸齒越稀鬆，反之，越密集。 ######做出來齒輪了，就剩下旋轉的小case了。 ######

.gear_ball {  height: 60px;  width: 60px;  border-radius: 50%;  display: inline-block;  border: 4px #fff solid;  position: relative;
    }.gear_ball:after {  content: '';  position: absolute;  width: 60px;  height: 60px;  border-radius: 50%;  top: -8px;  left: -8px;  border: 8px #fff dashed;
    }

###

以上是css3 loading載入圖文實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！