CSS3自定义loading效果
效果：
使用CSS3完成loading的制作
css样式:
<style type="text/css">
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
} .mask-loading {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
} .mask-loading div {
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
background-color: #0179B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
} .mask-loading div:nth-child(1) {
-webkit-animation: loading 0.5s ease 0s infinite alternate;
animation: loading 0.5s ease 0s infinite alternate;
} .mask-loading div:nth-child(2) {
-webkit-animation: loading 0.5s ease 0.1s infinite alternate;
animation: loading 0.5s ease 0.1s infinite alternate;
} .mask-loading div:nth-child(3) {
margin-right: 0;
-webkit-animation: loading 0.5s ease 0.2s infinite alternate;
animation: loading 0.5s ease 0.2s infinite alternate;
} @keyframes loading {
from {
/*缩放*/
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-webkit-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-moz-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-o-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
</style>
HTML:
<body>
<div class="mask">
<div class="mask-loading">
<div></div>
<div></div>
<div></div>
<p>Loading...</p>
</div>
</div>
</body>
CSS3自定义loading效果的更多相关文章
- 自定义loading效果
结合Font Awesome字体图标自定义loading效果 Font Awesome字体图标地址:http://www.fontawesome.com.cn/faicons/ 使用javascrip ...
- CSS3实现Loading效果
使用Loding的gif图,每一帧图片的外层会有白色描边.所以如果必须使用gif图的话,请将背景色设置为白色. 你也尝试用以下方法,使用css来实现loading的效果 1. 适用于pc端.在移动端上 ...
- 应用css3制作loading效果
参考秒味课堂 代码发出来备忘 html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- animation & @keyframes 实现loading效果
效果图截图如下: 直接上代码: html <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- CSS3饼状loading效果
概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...
随机推荐
- java多线程那点事
屌丝程序员们对自己的技术能力总是毫不掩饰的高调,更有甚者每当完成一个简单的功能或算法实现,恨不得从工位上跳起来,生怕谁不知道一样,心情能理解,但个人完全鄙视这种行为.说到底,大家日常的coding,大 ...
- 原生js 实现旋转木马
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 20165224 陆艺杰 Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 (1)哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理. (2)什么是3R信息. 注册人 ...
- lua小试牛刀
function function max(num1, num2) if(num1 > num2) then result = num1; else result = num2; end ret ...
- SpringBoot入门（IDEA篇）（二）
一.SpringBoot启动的3种方式 第一种:借助IDE工具直接启动 run as 第二种:mvn命令启动 1:打开命令行,进入到项目目录中(我这里还是用上次建立的dog项目来操作)cd E:\Wo ...
- SD与SE的关系，以及异常值
很多刚进入实验室的同学对实验数据的标准差(SD)与标准误(SE)的含义搞不清,不知道自己的数据报告到底该用SD还是SE.这里对这两个概念进行一些介绍. 标准差(SD)强调raw data的Variat ...
- 断电后gitlab报500错误启动出错
异常断电后,gitlab报500错误,重启无效 通过sudo gitlab-ctl reconfigure启动时, 提示 [execute] pgsql:could not connect to se ...
- POJ_1990 MooFest 【树状数组】
一.题面 POJ1990 二.分析 一个简单的树状数组运用.首先要把样例分析清楚,凑出57,理解一下.然后可以发现,如果每次取最大的v就可以肆无忌惮的直接去乘以坐标差值就可以了,写代码的时候是反着来的 ...
- netsh命令操作ipsec
IPsec就是IP安全筛选,本可以在本地安全策略中的窗口上进行操作添加,那么netsh也可以支持命令行操作这部分的内容. 我们的示例是禁止IP地址为192.168.1.10访问财务部某机3389端口 ...
- iOS开发ApplePay的介绍与实现
1.Apple Pay的介绍 Apple Pay官方 1.1 Apple Pay概念 Apple Pay,简单来说, 就是一种移动支付方式.通过Touch ID/ Passcode,用户可使用存储在i ...