大小双圈反向旋转，带轨道感的加载组件
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .drw{height:150px;display:flex;align-items:center;justify-content:center;position:relative}
.fx .drw .r{width:60px;height:60px;border-radius:50%;border:6px solid rgba(247,120,186,.25);border-top-color:#f778ba;animation:kfx-spin 1s linear infinite}
.fx .drw .r2{position:absolute;width:92px;height:92px;border:6px solid rgba(74,158,255,.18);border-top-color:#4a9eff;animation:kfx-spin 1.6s linear infinite reverse}
@keyframes kfx-spin{to{transform:rotate(360deg)}}<div class="fx">
<div class="drw"><div class="r"></div><div class="r2"></div></div>
</div>