css3 loading載入圖文實例

零下一度
發布: 2017-07-27 10:17:16
原創
1347 人瀏覽過

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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板