纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果
里面最关键的地方使用了css3 animation的delay属性以及
贝塞尔曲线(cubic-bezier)的过渡效果,如下所示
span[class*="l-"] {
height: 8px; width: 8px;
background: #fff;
display: inline-block;
margin: 12px 2px; border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%; -webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
} span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay:;animation-delay:;-ms-animation-delay:;-moz-animation-delay:;}
纯CSS仿windows系统loading效果的更多相关文章
- 纯css实现蒙层loading效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- 使用CSS时间打点的Loading效果的教程
基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- 仿招商银行载入loading效果
在招商银行android手机app中.有例如以下图所看到的的loading载入效果: 实现这个效果还是比較简单,就是自己定义dialog,设置自己想要的布局.然后设置旋转动画. 主要步骤: 1,写布局 ...
随机推荐
- 天猫浏览型应用的CDN静态化架构演变
原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...
- CSDN 2013年度博客之星评选——分享几张厦门杭州的美图
亲爱的小伙伴们,作者在6号至20号,一直在休假中,出去也没带电脑,今天回家意外的发现自己有幸成为“CSDN 2013年度博客之星评选”的候选人,在此也谢谢各位小伙伴们的支持,谢谢CSDN的鼓励.我的投 ...
- 搭建WebRtc环境
0.前言 这次的需求,准备做的是一个类似与QQ视频一样的点对点视频聊天.这几天了解了一些知识后,决定使用HTML5新支持的WebRtc来作为视频通讯.客户端使用支持HTML5浏览器即可.服务器段需要提 ...
- jQuery简单实例
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...
- JavaScript 中介者模式与观察者模式有何不同?
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp 感觉二者非常像,都是pub/sub机制,如何进行区分 ...
- DDD:如何更好的使用值对象
背景 大师们让我们多使用“值语义”的对象(并非一定是是值对象),我们工作中也没有少使用(int.bool.date等等),只是大多数人都没有多的自定义“值语义”的类型(我也其中之一),本文不说其它的, ...
- [ML] Naive Bayes for Text Classification
TF-IDF Algorithm From http://www.ruanyifeng.com/blog/2013/03/tf-idf.html Chapter 1, 知道了"词频" ...
- 使用stdarg.h实现可变长度参数
现在先用一个使用过程讲解一下: ◎用法: func( Type para1, Type para2, Type para3, … ) { /****** Step 1 ******/ va_list ...
- 将win7电脑无线网变身WiFi热点,让手机、笔记本共享上网
开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网,节省网费和路由器购买费.宏碁.惠普笔记本和诺基亚N97mini亲测通过. 以操 ...
- 【干货分享】Google 的设计准则,素材和资源
在谷歌,他们说, “专注于用户,所有其它的就会水到渠成 ”.他们遵循设计原则,寻求建立让用户惊喜的用户体验.谷歌一直挑战自己,为他们的用户创造一种视觉语言,综合优秀设计的经典原则和创新.谷歌设计规范是 ...