效果：

使用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效果的更多相关文章

  1. 自定义loading效果

    结合Font Awesome字体图标自定义loading效果 Font Awesome字体图标地址:http://www.fontawesome.com.cn/faicons/ 使用javascrip ...

  2. CSS3实现Loading效果

    使用Loding的gif图,每一帧图片的外层会有白色描边.所以如果必须使用gif图的话,请将背景色设置为白色. 你也尝试用以下方法,使用css来实现loading的效果 1. 适用于pc端.在移动端上 ...

  3. 应用css3制作loading效果

    参考秒味课堂 代码发出来备忘 html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  5. css3 实现loading效果

    1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...

  6. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  7. animation & @keyframes 实现loading效果

    效果图截图如下: 直接上代码: html <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  8. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

  9. CSS3饼状loading效果

    概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...

随机推荐

  1. jmxtrans 监控kafka

    jmxtrans 的版本必须 是jmxtrans-268.rpm 以上 如果kafka 为kafka_2.11-0.10.1.0 ,则在 jdk 1.7上使用 kafka_2.12-0.11.0.0 ...

  2. c语言-猜生日算法

    #include<stdio.h>int main(){ int a1[6]={1,3,5,7,9,11}; int a2[6]={2,3,6,7,10,11}; int a3[6]={4 ...

  3. python全栈开发_day4_if，while和for

    一.if 1)if的用途 if常用于判断. 2)if的语法 tag=True tag2=True if tag: print("代码") elif tag2: print(&quo ...

  4. 进阶篇：2）DFMA方法的运用

    本章目的:DFMA方法运用,引导后面的章节.(运用比只理解重要!) 1.DFMA概述 1.1 DFMA的由来 工艺粗略可分为装配工艺和制造工艺.在这里,我们所讲的“制造”是指产品或部件的某个零件的制造 ...

  5. 洛谷 P3201 [HNOI2009]梦幻布丁(启发式合并)

    题面 luogu 题解 什么是启发式合并? 小的合并到大的上面 复杂度\(O(nlogn)\) 这题颜色的修改,即是两个序列的合并 考虑记录每个序列的\(size\) 小的合并到大的 存序列用链表 但 ...

  6. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  7. vue相关问题在工作中的问题及ui组件及html样式搭建相关网站下载资源

    https://youzan.github.io/vant/#/zh-CN/nav-bar http://www.builive.com/docs/api/index.html    bui框架BUI ...

  8. Docker安装及常用操作

    Docker简介: Docker是一个轻量级容器技术,类似于虚拟机技术,但性能远远高于虚拟机,Docker支持将软件编译成一个镜像(image),在这个镜像中做好对软件的各种配置,然后可以运行这个镜像 ...

  9. debian sudo

    apt-get install sudo vi /etc/sudoers add CentOS 7 root ALL=(ALL) ALL Debian root ALL=(ALL:ALL) ALL 按 ...

  10. Git学习系列之Git的功能特性（从一般开发者的角度和主开发者的角度来剖析）

    不多说,直接上干货! Git的功能特性,从一般开发者和主开发者的角度来进行剖析. Git的功能特性: 从一般开发者的角度来看,Git有以下功能: 1.从服务器上克隆完整的Git仓库(包括代码和版本信息 ...