<!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，但我用手机录制效果时，视觉效果很模糊
HTML-loading动画1
原文地址：https://www.cnblogs.com/liuqingxia/p/9778173.html