HTML-loading动画1 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
        <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
        <link rel="stylesheet" href="css/loadDodui.css" />
    </head>
    <body>
        <script src="js/loadingDodui.js"></script>
    </body>
</html>

loadDodui.css：
.loadDodui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .4);
}

.spinner {
    font-size: 20px;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em rgba(234, 70, 142, .2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner i {
    position: absolute;
    clip: rect(0, 1.5em, 1.5em, 1em);
    width: 1.5em;
    height: 1.5em;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
}

@keyframes spinner-circle-clipper {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

.spinner i:after {
    position: absolute;
    clip: rect(0, 1.5em, 1.5em, 1em);
    width: 1.5em;
    height: 1.5em;
    content: '';
    animation: spinner-circle 1s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em #ea468e;
}

@keyframes spinner-circle {
    0% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(180deg);
    }
}


loadingDodui.js：
function loadingDodui(){
    var htmlDodui=document.createElement("div");
    var html2Dodui=document.createElement("div");
    var chlidHtml=document.createElement("i");
    htmlDodui.classList.add("loadDodui");
    htmlDodui.appendChild(html2Dodui);
    html2Dodui.appendChild(chlidHtml);
    html2Dodui.classList.add("spinner");
    htmlDodui.appendChild(html2Dodui);
    document.getElementsByTagName("body")[0].appendChild(htmlDodui)
}
loadingDodui()

实现的效果：静态图，我真的很想放gif，但我用手机录制效果时，视觉效果很模糊




posted @ 2018-10-12 14:59  MiniDuck  阅读(502)  评论(0)  编辑  收藏  举报