条纹永不停歇的进度条,增长与流动双重视觉
← 返回 加载 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .prog{width:80%;max-width:420px;height:18px;margin:50px auto;border-radius:9px;overflow:hidden;background:#1c2330}
.fx .prog .bar{height:100%;width:0;border-radius:9px;background:repeating-linear-gradient(45deg,#4a9eff 0 12px,#6cb1ff 12px 24px);background-size:24px 24px;animation:kfx-grow 4s ease forwards,kfx-stripe .8s linear infinite}
@keyframes kfx-grow{to{width:78%}}
@keyframes kfx-stripe{to{background-position:24px 0}}<div class="fx">
<div class="prog"><div class="bar"></div></div>
</div>