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

接下来简单介绍一下我这个很挫的小工具,先看一下图:

css3-loadingEffect

其实就是把所有效果整理了一下,相比之前直接粘代码到博文里,现在这种方式可能更加适合大家,这也是我做这个小工具的出发点和动力。可以看到,18种效果都呈现在这个页面里,同时每种效果下方还有一个获取代码的按钮,点击可以获取相应效果的html和css代码,试一下吧!

OK,只要是现代主流浏览器,体验应该不会有太大的差异,不过今天也有发现一个问题,就是第十种效果在webkit内核浏览器有差异:

谷歌浏览器下,绿条移动进来时父元素overflow:hidden对它失效了:

d

而在360浏览器极速模式下是正常的:

d2

所以鉴于这种效果不怎么常用而且还有点小的渲染问题,大家尽量避免使用就是了,其他效果显示正常。

至于点击按钮获取相应的代码,我用了最笨的办法:

通过一个全局对象CODE:

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

把每种效果的代码拼接成字符串,然后存到该对象的对应属性里。然后通过点击按钮,获取当前按钮的id去获取到该对象的属性的值,然后添加到弹出层的id为code的div里,这里我用了html5的新的全局属性contenteditable,让该div元素可以被编辑:

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

所以说,只有用现代浏览器才不会影响页面的布局和体验。

最后,希望这个小工具可以帮助到大家,谢谢!

 

PS:转载请注明出处,谢谢合作!

posted @ 2015-07-26 00:35  郭锦荣  阅读(5822)  评论(1编辑  收藏