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 阅读(504) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

YAZI

HTML-loading动画1

最新随笔

积分与排名

随笔分类 (208)

推荐排行榜