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

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

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

使用方法：

1，將頭中的html' target='_blank'>CSS樣式以及JS引入到你的網(wǎng)頁中

2，選擇一個你喜歡的加載效果，復制其中的HTML到你的網(wǎng)頁中即可

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

十七、效果十七

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

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

十八、效果十八

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

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

十九、效果十九

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

{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% { //開始返回起點，長度變大，寬度變小，模擬移動產(chǎn)生的形變top: 0;width: 25px;height: 15px; } 99% { //到達起點top: 0;width: 25px;height: 15px; } 100% { //恢復初始width: 20px;height: 20px; }

二十、效果二十

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

{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; }}

二十二、效果二十二

這類似于一個旋轉(zhuǎn)的齒輪，關(guān)鍵是如何做出一個齒輪的形狀來，一個div給實現(xiàn)邊框做里面的圓，給div的偽類虛線邊框做外面的鋸齒，偽類的邊框越寬，鋸齒越稀松，反之，越密集。

做出來齒輪了，就剩下旋轉(zhuǎn)的小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加載圖文實例的詳細內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。