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 ...
随机推荐
- sed--行编辑器命令
2017-11-02 sed:行编辑器,按行处理:默认不做原文件修改,会在sed自身的模式空间中按行读相关的数据并完成编辑,然后显示到屏幕上 一. 基本用法: 1. 语法格式: sed ...
- windows下安装ubuntu15.04
本文主要介绍windows下安装ubuntu15.04,对与其他的版本也是适用的.现在要讲的是一种最简单ubuntu的安装方式. 1软件下载 1.磁盘分区工具DiskGenius 2.启动项修改工具E ...
- Using Request Headers for Metadata Address
问题描述 我将一个在本地调试正常的service部署到服务器后遇到了添加服务引用失败的问题.在把配置文件中基址使用的localhost替换成服务器的ip地址后问题得到了解决.但我感觉这并不是一个因为粗 ...
- centos7安装串口终端kermit
1. 将usb转串口连接到PC上.通过dmesg命令可以查看USB转串口是否被PC识别.显示 ……attachec to ttyUSB0即被识别. 2. 安装kermit. [seif@cen ...
- linux 安装谷歌浏览器
1. 下载 rpm 包https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2. 安装依赖包yum ins ...
- 批处理 进行svn代码拉取，vs编译，dotfuscator混淆
Dotfuscator的使用:https://www.cnblogs.com/aitong/p/10684004.html 从拉取代码,编译到最后的混淆步骤很多.这时就可以使用批处理来进行自动化. 用 ...
- js map()初步学习
//array.map(callback,thisObject?),callback需要有return值 //map:'映射' 被映射成新的数组 eg1: let data = [3,4,2]; l ...
- vue :src本地图片不读取
修改方式: 使用require(‘文件名’)
- 宜人贷项目里-----正则匹配input输入月份规则
在标签上可以直接进行校验如下,如果只调数字键盘type=number不好用可以用type=tel <input name="creditDate" oninput=" ...
- Tensorflow中的数据对象Dataset
基础概念 在tensorflow的官方文档是这样介绍Dataset数据对象的: Dataset可以用来表示输入管道元素集合(张量的嵌套结构)和"逻辑计划"对这些元素的转换操作.在D ...