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"
  • 相关阅读:
    如何写出优秀的代码[转载]
    [转载]Java中常用日期功能综合
    JS WebBrowser 实现打印预览
    想成为优秀的技术人员你必须做到的几件事情【转载】
    JS打印
    js阿拉伯数字转中文大写
    从 SQL Server 2005 中处理 XML
    Visual Studio 2005 Express October 2004 CTP完整版本的下载
    Debug和Release的区别
    ASP.NET 中的正则表达式
  • 原文地址:https://www.cnblogs.com/knightdreams6/p/10832171.html
Copyright © 2011-2022 走看看