css3实现不同的loading
样式1：
<html>
<head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
} .loading i {
display: inline-block;
float: left;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #999;
margin: 0 4px;
opacity: .1;
-webkit-animation: flashPop .6s linear alternate infinite both;
animation: flashPop .6s linear alternate infinite both;
} .loading i:nth-of-type(2) {
-webkit-animation-delay: .2s;
animation-delay: .2s
} .loading i:last-child {
-webkit-animation-delay: .4s;
animation-delay: .4s
} @-webkit-keyframes flashPop {
0% {
opacity: 1
} 33% {
opacity: .5
} 66% {
opacity: .1
}
} @keyframes flashPop {
0% {
opacity: 1
} 33% {
opacity: .5
} 66% {
opacity: .1
}
}
</style>
</head> <body>
<div class="loading">
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
样式2：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: %;
left: %;
margin-top: -6px;
margin-left: -30px;
} .loading>i {
float: left;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #;
display: inline-block;
-webkit-animation: bouncedelay .4s infinite ease-in-out;
animation: bouncedelay .4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin: 4px;
} .loading .bounce1 {
-webkit-animation-delay: -.32s;
animation-delay: -.32s;
} .loading .bounce2 {
-webkit-animation-delay: -.16s;
animation-delay: -.16s;
} @-webkit-keyframes bouncedelay {
%,
%,
% {
-webkit-transform: scale(0.0);
} % {
-webkit-transform: scale(1.0);
}
} @keyframes bouncedelay {
%,
%,
% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} % {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head> <body>
<div class="loading">
<i class="bounce1"></i>
<i class="bounce2"></i>
<i class="bounce3"></i>
</div>
</body> </html>
样式3：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
} .circle {
-webkit-animation: cui-loading 1.58s linear infinite;
animation: cui-loading 1.58s linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
width: 19px;
height: 19px;
border-left: #c5c5c5 1px solid;
display: block;
border-bottom: #c5c5c5 1px solid;
border-radius: 50%;
} @-webkit-keyframes cui-loading {
0% {
opacity: 1;
-webkit-transform: rotate(0deg)
} 100% {
opacity: 1;
-webkit-transform: rotate(360deg)
}
} @-moz-keyframes cui-loading {
0% {
opacity: 1;
-moz-transform: rotate(0deg)
} 100% {
opacity: 1;
-moz-transform: rotate(360deg)
}
} @-ms-keyframes cui-loading {
0% {
opacity: 1;
-ms-transform: rotate(0deg)
} 100% {
opacity: 1;
-ms-transform: rotate(360deg)
}
} @keyframes cui-loading {
0% {
opacity: 1;
transform: rotate(0deg)
} 100% {
opacity: 1;
transform: rotate(360deg)
}
}
</style>
</head> <body>
<div class="loading">
<span class="circle"></span>
</div>
</body> </html>
样式4：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
width: 2em;
height: 2em;
color: inherit;
vertical-align: middle;
border: .3em solid #ffffff;
border-top-color: #9C27B0;
border-radius: 50%;
-webkit-animation: 1s flashPop linear infinite;
animation: 1s flashPop linear infinite;
} .loading:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.3em;
left: -.3em;
border: .3em solid #9C27B0;
border-radius: 50%;
opacity: .5;
} @-webkit-keyframes flashPop {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} @keyframes flashPop {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head> <body>
<div class="loading">
</div>
</body> </html>
css3实现不同的loading的更多相关文章
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- CSS3订单提交按钮Loading代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- CSS3 的10种Loading
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
随机推荐
- android app使用微信登录接口回调没有被执行的问题研究
本人开发的一个app使用了sharesdk集成微信登录功能,在测试的过程中微信授权登录界面有调用,但是授权后原应用的回调没有被执行 应用的包名是com.kimi.searcher 首先,确认微信点击授 ...
- C#连接Oracle错误：OCIEnvCreate 失败，返回代码为 -1
处理某些数据需要从Oracle里读取数据 因为数据不多,简单方便直接用 System.Data.OracleClient 添加引用,写sql语句一气呵成,运行立刻报错 从没见过这错误啊… 上网搜索之… ...
- net core体系-１概要
.net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发者,见识了很多一流 ...
- openstack2 kvm
一.kvm安装 1.首先虚拟机的话需要打开虚拟化功能,服务器的话需要在bios中设置 2.安装kvm用户态管理工具qemu-kvm 和 用来管理kvm虚拟机的插件libvirt和创建虚拟机用的virt ...
- TopCoder SRM500 Div1 500 分治
原文链接https://www.cnblogs.com/zhouzhendong/p/SRM500-500.html SRM500 Div1 500 没想到 double 的精度居然没有爆-- 考虑以 ...
- mysql解决数据库死锁问题
为了保证数据的正确性,对数据库进行操作的时候都会进行上锁,也就是进行修改数据的时候同一时间只能有一个进程,当这个进程处理完了,释放锁了,其他进程才可以进行操作! 总是会碰见一些意外情况,导致数据库死锁 ...
- 019 python面相对象编程
一:self的意思 1.说明 self代表类的实例,而非类. 类的方法与普通的函数只有一个特别的区别——它们必须有一个额外的第一个参数名称, 按照惯例它的名称是 self. self 代表的是类的实例 ...
- Spring boot中自定义Json参数解析器
转载请注明出处... 一.介绍 用过springMVC/spring boot的都清楚,在controller层接受参数,常用的都是两种接受方式,如下 /** * 请求路径 http://127.0. ...
- oracle 重复只保留一条
DELETE FROM xx WHERE ROWID NOT IN (SELECT MIN(ROWID) FROM xx GROUP BY xx, xx);
- for循环以及数据类型
一.for循环(迭代式循环) 了解:当我们在写代码时,如果代码是纯运算的代码,会占用大量的CPU,如果是I/O代码,则不会占用CPU. for i in range(10): #可以是任意类型(字符 ...