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"> ...
随机推荐
- [转] mongoDB与mongoose
mongoDB简介 mongoDB与一些关系型数据库相比,它更显得轻巧.灵活,非常适合在数据规模很大.事务性不强的场合下使用.同时它也是一个对象数据库,没有表.行等概念,也没有固定的模式和结构,所有的 ...
- 查询Linux系统中glibc的版本
编写一个简单的程序 #include <stdio.h> int main() { printf("Hello world\n"); ; } 编译 gcc test.c ...
- Java基础知识➣Stream整理（二）
概述 在Java数据流用到的流包括(Stream).文件(File流)和I/O流 ,利用该三个流操作数据的传输. Java控制台输入输出流 读取控制台使用数据流: BufferedReader和Inp ...
- jQuery和Zepto冲突问题【解决】
特殊操作下,项目中同时引入这两个文件时,往往会有些冲突,应该加一句代码避免冲突 <script src="~/js/jquery-2.1.4.js"></scri ...
- 支付宝 app支付 沙盘使用
文档说明 沙箱测试: App支付沙箱接入注意点 1.app支付支持沙箱接入:在沙箱调通接口后,必须在线上进行测试与验收,所有返回码及业务逻辑以线上为准:2.app支付只支持余额支付,不支持银行卡.余额 ...
- SQL Server中自定义函数：用指定的分隔符号分割字符串
微软SQL Server数据库中包含了很多内置的函数,入下图: 它们用于处理日期.数学.元数据.字符串等. 其中最为常用的就是处理字符串,里面包含了CharIndex()等函数,非常方便使用. 但是对 ...
- python辅助sql手工注入猜解数据库案例分析
发现存在sql注入漏洞 简单一点可以直接用sqlmap工具暴库 但是如果想深入理解sql注入的原理,可以尝试手工注入,配合python脚本实现手工猜解数据库 首先hachbar开启 获取cms登录后的 ...
- react添加样式的四种方法
React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 函数防抖 debounce
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 学习Spring必须了解的基础知识——回调机制
上面这张图如果能看得懂就能理解什么是回调机制: A对象在调用a()方法时会调用B对象的b()方法,b()方法必须能调用A对象的callback()方法. 谁白了:a()方法有B对象b()方法的引用,b ...