* { padding:0; margin:0; list-style:none; text-decoration:none; } .Loading { width:100%; height:100vh; background-color:#5f5f5f; position:fixed; top:0; left:0; z-index:999999; display:flex; align-items:center; justify-content:center; /* display:none; */ } .Loading-warp .color { width:60px; height:60px; background:#D55921; border-radius:15px; margin:auto; margin-bottom:35px; color:#fff; font-size:40px; display:flex; justify-content:center; align-items:center; animation:color 1.5s infinite ease; transform:rotate(0deg); } .Loading-warp .Thread { width:150px; height:3px; background-color:#cfcfcf; position:relative; overflow:hidden; } .Loading-warp .Thread:hover::after { left:75%; } .Loading-warp .Thread::after { content:""; position:absolute; left:-25%; top:0; width:50%; height:100%; background:firebrick; animation:Loading 1.5s infinite ease; } @keyframes color { 0% { background:firebrick; transform:rotate(-360deg); } 50% { background:#D55921; transform:rotate(0deg); } 100% { background:firebrick; transform:rotate(-360deg); } }@keyframes Loading { 0% { left:-25%; background:firebrick; } 50% { left:75%; background:#D55921; } 100% { left:-25%; background:firebrick; } }
更新时间:2021-12-17 01:04:02
很不错的加载页面效果