正反双圈不同速旋转,最经典的加载等待方案
← 返回 加载 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .spin{display:flex;gap:30px;justify-content:center;padding:50px 0}
.fx .spin div{width:44px;height:44px;border-radius:50%;border:4px solid rgba(74,158,255,.2);border-top-color:#4a9eff;animation:kfx-spin 1s linear infinite}
.fx .spin .rev{border:4px solid rgba(247,120,186,.2);border-top-color:#f778ba;animation:kfx-spin 1.4s linear infinite reverse}
@keyframes kfx-spin{to{transform:rotate(360deg)}}<div class="fx">
<div class="spin"><div></div><div class="rev"></div></div>
</div>