18種CSS3loading效果完整版

      今天把以前分享的兩篇博客《CSS3實現10種Loading效果》和 《CSS3實現8種Loading效果【二】》整理了一下。由於以前所分享的各類loading效果都只是作了webkit內核瀏覽器的兼容性而已，但初衷仍是想作成PC端的效果，因此就統一把全部效果都收集起來，併兼容各主流瀏覽器。最重要的是，我爲了方便分享給你們使用，作了一個簡單的網頁小工具，經過這個小工具，你們能夠根據本身須要的loading效果直接獲取相應的html和css代碼。在線小工具地址爲：http://www.jr93.top/css3-loadingEffect.html。

同時也提供github下載地址：https://github.com/JR93/css3-loadingEffect

接下來簡單介紹一下我這個很挫的小工具，先看一下圖：

其實就是把全部效果整理了一下，相比以前直接粘代碼到博文裏，如今這種方式可能更加適合你們，這也是我作這個小工具的出發點和動力。能夠看到，18種效果都呈如今這個頁面裏，同時每種效果下方還有一個獲取代碼的按鈕，點擊能夠獲取相應效果的html和css代碼，試一下吧！

OK，只要是現代主流瀏覽器，體驗應該不會有太大的差別，不過今天也有發現一個問題，就是第十種效果在webkit內核瀏覽器有差別：

谷歌瀏覽器下，綠條移動進來時父元素overflow：hidden對它失效了：

而在360瀏覽器極速模式下是正常的：

因此鑑於這種效果不怎麼經常使用並且還有點小的渲染問題，你們儘可能避免使用就是了，其餘效果顯示正常。

至於點擊按鈕獲取相應的代碼，我用了最笨的辦法：

經過一個全局對象CODE：

window.CODE = {
    style_1 : '',
    style_2 : '',
    ...
}

把每種效果的代碼拼接成字符串，而後存到該對象的對應屬性裏。而後經過點擊按鈕，獲取當前按鈕的id去獲取到該對象的屬性的值，而後添加到彈出層的id爲code的div裏，這裏我用了html5的新的全局屬性contenteditable，讓該div元素能夠被編輯：

<div id='code' contenteditable='true'></div>

因此說，只有用現代瀏覽器纔不會影響頁面的佈局和體驗。

最後，但願這個小工具能夠幫助到你們，謝謝！

 

PS：轉載請註明出處，謝謝合做！