ng加载动画效果

HTML代码 ：

​ ​ ​

CSS代码：

* { 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; } }​ * { 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; } }​ * { 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; } }​

js代码：

$(.Loading).delay(5000).fadeOut(slow);​ $(.Loading).delay(5000).fadeOut(slow);​ $(.Loading).delay(5000).fadeOut(slow);​ 内容看完了 © 版权声明 1:本网站名称：蜡笔傻新

2:本站永久网址：https://labishaxin.com/

3:本站部分内容收集于互联网 ，载动如果有侵权内容 、画效请联系我们删除 ，载动不妥之处，画效敬请谅解

4:本站一切资源不代表本站立场，载动并不代表本站赞同其观点和对其真实性负责

5:本站一律禁止以任何方式发布或转载任何违法的画效相关信息 ，访客发现请向站长举报

6:本站资源大多存储在云盘，载动如发现链接失效
，画效请联系我们我们会第一时间更新

载动