zoukankan      html  css  js  c++  java
  • 记一次loading遮罩层的制作

    css3实现loading效果:https://www.cnblogs.com/lianghong/p/8057676.html 

    css3实现loading水平垂直居中

    .loading{
         80px;
        height: 80px;
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /*向左向上分别平移自身的一半*/
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        text-align: center;
        transition: 1s;
        -webkit-animation: load 3s linear infinite;
    }
    .loading div{
         100%;
        height: 100%;
        position: absolute;
    }
    .loading span{
        display: inline-block;
         20px;
        height: 20px;
        border-radius: 50%;
        background: #99CC66;
        position: absolute;
        left: 50%;
        margin-top: -10px;
        margin-left: -10px;
        -webkit-animation: changeBgColor 3s ease infinite;
    }
    @-webkit-keyframes load{
        0%{
            -webkit-transform: rotate(0deg);
        }
        33.3%{
            -webkit-transform: rotate(120deg);
        }
        66.6%{
            -webkit-transform: rotate(240deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }
    @-webkit-keyframes changeBgColor{
        0%,100%{
            background: #99CC66;
        }
        33.3%{
            background: #FFFF66;
        }
        66.6%{
            background: #FF6666;
        }
    }
    .loading div:nth-child(2){
        -webkit-transform: rotate(120deg);
    }
    .loading div:nth-child(3){
        -webkit-transform: rotate(240deg);
    }
    .loading div:nth-child(2) span{
        -webkit-animation-delay: 1s;
    }
    .loading div:nth-child(3) span{
        -webkit-animation-delay: 2s;
    }

    利用bootstrap modal实现遮罩层

    <!-- loading模态框(Modal) -->
    <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
             data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style=" 100%; height: 100%">
            <div class="loading">
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
            </div>
        </div><!-- /.modal -->
    </div>

    不让modal点击空白关闭和ESC键盘按钮关闭

    添加这两个属性: data-backdrop="static" data-keyboard="false"
  • 相关阅读:
    数论学习笔记之欧拉函数
    [CQOI2014]危桥
    lspci -nnk
    linux 详解useradd 命令基本用法
    。 (有些情况下通过 lsof(8) 或 fuser(1) 可以 找到有关使用该设备的进程的有用信息)
    CentOS 7 设置默认进入字符界面
    下面附上top和sar的使用方法,方便参考! "top"工具
    Centos7/RHEL7 开启kdump
    Linux内存带宽的一些测试笔记
    调试测试
  • 原文地址:https://www.cnblogs.com/knightdreams6/p/10832171.html
Copyright © 2011-2022 走看看