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：转载请注明出处，谢谢合做！