锥形渐变 + 蒙版做出的描边环,旋转无锯齿
← 返回 加载 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .crw{height:150px;display:flex;align-items:center;justify-content:center}
.fx .crw .rng{width:64px;height:64px;border-radius:50%;background:conic-gradient(#4a9eff 0 70%,#2d3748 70% 100%);-webkit-mask:radial-gradient(transparent 56%,#000 57%);mask:radial-gradient(transparent 56%,#000 57%);animation:kfx-spin 1.2s linear infinite}
@keyframes kfx-spin{to{transform:rotate(360deg)}}<div class="fx">
<div class="crw"><div class="rng"></div></div>
</div>