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:;

    left:;

    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，但我用手机录制效果时，视觉效果很模糊

巴特西

HTML-loading动画1

最新文章

热门文章