18种CSS3loading效果完整版,兼容各大主流浏览器,提供在线小工具使用
2015-07-26 00:35
776 查看
今天把之前分享的两篇博客《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:
把每种效果的代码拼接成字符串,然后存到该对象的对应属性里。然后通过点击按钮,获取当前按钮的id去获取到该对象的属性的值,然后添加到弹出层的id为code的div里,这里我用了html5的新的全局属性contenteditable,让该div元素可以被编辑:
所以说,只有用现代浏览器才不会影响页面的布局和体验。
最后,希望这个小工具可以帮助到大家,谢谢!
PS:转载请注明出处,谢谢合作!
同时也提供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:转载请注明出处,谢谢合作!
相关文章推荐
- CSS 层叠 学习笔记
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3 box-sizing属性
- css布局
- 细说css3 flex布局之flex项目属性
- CSS扩展“less"和”sass“
- Web前端从入门到精通-8 css简介——清除浮动
- css图片实现水平、垂直居中
- css 命名规范
- css换行
- DIV+CSS中标签dl dt dd常用的用法
- Web前端从入门到精通-7 css简介——浮动
- CSS选择器 < ~ +
- div内文字显示两行,超出两行部分省略号显示css
- css中的大小、定位、轮廓相关属性
- DIV横向排列_CSS如何让多个div盒子并排同行显示
- Web—CSS概述
- css3仿山猫侧边栏
- 写一个弹出样式的多行文本输入界面,如何选择呢?
- 关于读style元素定义样式表兼容性