点状边框模拟齿轮咬合，正反双齿同框旋转
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .grs{height:150px;display:flex;align-items:center;justify-content:center;position:relative}
.fx .grs .g1{width:62px;height:62px;border-radius:50%;border:6px dotted #f778ba;animation:kfx-spin 2.5s linear infinite}
.fx .grs .g2{position:absolute;width:40px;height:40px;border:5px dotted #4a9eff;animation:kfx-spin 1.8s linear infinite reverse}
@keyframes kfx-spin{to{transform:rotate(360deg)}}<div class="fx">
<div class="grs"><div class="g1"></div><div class="g2"></div></div>
</div>