效果：

使用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. threejs的学习笔记

    很多时候,我们在开发3d效果的时候,容易搞不清楚x,y,z坐标分别指示哪个方向 在开发threejs的时候可以先把坐标系添加到场景中,起到一个启示作用. js // show axes in the ...

  2. 2016级算法第四次上机-B ModricWang的序列问题

    1019 ModricWang的序列问题 思路 此题题意非常清晰,给定一个序列,求出最长上升子序列的长度.从数据规模来看,需要\(O(nlogn)\) 的算法. \(O(nlongn)\) 求最长上升 ...

  3. 3、激活层（Activiation Layers）及参数

    caffe激活层(Activiation Layers) 在激活层中,对输入数据进行激活操作(实际上就是一种函数变换),是逐元素进行运算的.从bottom得到一个blob数据输入,运算后,从top输入 ...

  4. CentOS虚拟机断电或强制关机，再开机出现问题：Entering emergency mode. Exit the shell to continue.

    解决问题: 输入命令:xfs_repair -v -L /dev/dm-0

  5. numpy的一维线性插值函数

    前言:      在用生成对抗网络生成二维数据点的时候遇到代码里的一个问题,就是numpy中的一维线性插值函数interp到底是怎么用的,在这个上面费了点功夫,因此现将其用法给出.      在生成对 ...

  6. Laravel 视图调用model方法

    首先控制器 model 视图

  7. this小结

    this 对象是在运行时基于函数的执行环境绑定的: 全局函数中, this 等于 window 函数被作为某个对象的方法调用时, this 等于那个对象 匿名函数的执行环境具有全局性, this 指向 ...

  8. COALESCE操作符

    一.应用场景 1.购买的零件和本地生产的零件都是零件,尽管多重的实体类型在数据存储上略有不同,但是它们有太多的相同之处,因此通常使用一个表格而不是两个. 所以这是如果我们需要计算零件的实际话费的话,那 ...

  9. JavaSE_XMind总结

    1 JDBC知识点总结

  10. Django 入门项目案例开发（中）

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务 ...