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 ...
随机推荐
- python 获取文件路径
一种是获取当前你正在操作文件的路径 一种是获取你执行文件的路径(比如你在你调用的包里面更改了,执行的时候就不会找你的包的路径,而是你执行文件的路径)
- 使用百度地图API查地理坐标
在网络编程中,我们会和API打交道.那么,什么是API?如何使用API呢?本文分享了一下我对API的理解以及百度地图API的使用. API是"Application Programming ...
- ZOJ - 3946-Highway Project(最短路变形+优先队列优化)
Edward, the emperor of the Marjar Empire, wants to build some bidirectional highways so that he can ...
- 文献综述十八：基于SSH框架的进销存管理系统设计与实现
一.基本信息 标题:基于SSH框架的进销存管理系统设计与实现 时间:2017 出版源:内蒙古科技与经济 文件分类:对框架的研究 二.研究背景 进销存管理系统在各企业中广泛应用,使用SSH框架,很大程度 ...
- Python爬虫：微博粉丝列表
前言 本来打算做一个关于微博粉丝列表的爬虫,可以统计一下某个微博账号的粉丝里面,僵尸粉(水军)的数量,大V数量. 结果写完爬虫才发现,现在微博只给人看粉丝列表的前5页.......哈哈,好吧.挺无奈的 ...
- ocr 资源
1. PIL 在图片上添加中文 https://blog.csdn.net/m0_37606112/article/details/78511381 2 .Chinese Text in the Wi ...
- vue中$nextTick的用法
简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是th ...
- JAVA学习3：Eclipse中集成Tomcat
问题: 很多时候在Eclipse中启动Tmocat后,不能访问本机的localhost:8080主页,并且其他项目也不能访问. 原因: 打开Tomcat下的webapp后也找补到项目目录,这是因为Ec ...
- kafka集群安装及简单使用
关于kafka是什么及原理,请参考kafka官方文档的介绍:http://kafka.apache.org/documentation/#introduction ,英文不好的同学可以看这里http: ...
- Redis的安装(CentOS 7下)
redis的官网,www.redis.io 1. 先下载 redis: wget http://download.redis.io/releases/redis-3.0.3.tar.gz 2. 解压: ...