INS页面的加载顶部会出现一条渐变流动进度条,特效代码如下。(JS代码自行适配)
<div class="BHkOG PID-B"></div>
CSS:
@-webkit-keyframes LoadingBarProgress{0%{background-position:0% 0}
to{background-position:125% 0}
}
@keyframes LoadingBarProgress{0%{background-position:0% 0}
to{background-position:125% 0}
}
@-webkit-keyframes LoadingBarEnter{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes LoadingBarEnter{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
#BHkOG {
height:3px;
background:#27c4f5 -webkit-gradient(linear,left top,right top,from(#27c4f5),color-stop(#a307ba),color-stop(#fd8d32),color-stop(#58c322),to(#27c4f5));
background:#27c4f5 -webkit-linear-gradient(left,#27c4f5,#a307ba,#fd8d32,#58c322,#27c4f5);
background:#27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#58c322,#27c4f5);
background-size:500%;
-webkit-animation:2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
animation:2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
-webkit-transform-origin:left;
transform-origin:left;
width:100%
}
#PID-B {
left:0;
position:fixed;
right:0;
top:0;
z-index:12
}
声明:本站文章原创有部分资源来源于网络,如无特殊说明或标注。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系 admin@liitk.com 进行删除处理!。
评论(0)