zoukankan      html  css  js  c++  java
  • 原生JS+ CSS3创建loading加载动画;

    效果图:

    js创建loading

    show = function(){
        //loading dom元素
        var Div = document.createElement("div");
        Div.setAttribute("class","ui-loading");
        var chidDiv = document.createElement("div");
        chidDiv.setAttribute("class","ui-loading-mask")
        Div.appendChild(chidDiv)
        document.body.appendChild(Div)
    }

    取消loading加载

    hide= function(){
        var Div = document.getElementsByClassName("ui-loading");
         while(Div[0].hasChildNodes()) //当div下还存在子节点时 循环继续 
        { 
            Div[0].removeChild(Div[0].firstChild); 
        } 
        var par = Div[0].parentNode;
        par.removeChild(Div[0])
    }

    定义加载动画css样式

    /*
     *    loading加载动画样式
     */
    .ui-loading{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 998;
        background-color: rgba(0,0,0,.4);
    }
    .ui-loading-mask{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        -webkit-animation: typing 1s linear infinite alternate;
           -moz-animation: Typing 1s linear infinite alternate;
                animation: typing 1s linear infinite alternate;
        margin: 80% auto 0; /* Not necessary- its only for layouting*/  
        position: relative;
        left: -12px;
    }
    @-webkit-keyframes typing{
        0%{
            background-color: rgba(255,255,255, 1);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
          }
        25%{ 
            background-color: rgba(255,255,255, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
        }
        75%{ background-color: rgba(255,255,255, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,1);
          }
    }
    
    @-moz-keyframes typing{
       0%{
            background-color: rgba(255,255,255, 1);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
          }
        25%{ 
            background-color: rgba(255,255,255, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
        }
        75%{ background-color: rgba(255,255,255, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,1);
          }
    }
    
    @keyframes typing{
       0%{
            background-color: rgba(255,255,255, 1);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
          }
        25%{ 
            background-color: rgba(255,255,255, 0.6);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                        24px 0px 0px 0px rgba(255,255,255,0.2);
        }
        75%{ background-color: rgba(255,255,255, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,1);
          }
          100%{ background-color: rgba(255,255,255, 0.1);
            box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                        24px 0px 0px 0px rgba(255,255,255,1);
          }
    }
  • 相关阅读:
    SqlServer:此数据库处于单用户模式,导致数据库无法删除的处理
    syscolumns表中所有字段的意思
    SQL数据库之变量
    Sqlserver常用的时间函数---GETDATE、GETUTCDATE、DATENAME
    判断游标是否存在的同时检测游标状态
    向已写好的多行插入sql语句中添加字段和值
    truncate和delete之间有什么区别
    javascript实现单例模式
    关于javascript中的 执行上下文和对象变量
    了解javascript中的this --实例篇
  • 原文地址:https://www.cnblogs.com/Tohold/p/10184343.html
Copyright © 2011-2022 走看看