锥形描边环加载 · 加载
前端Wiki/CSS 特效合集/锥形描边环加载

锥形描边环加载

锥形渐变 + 蒙版做出的描边环,旋转无锯齿

← 返回 加载 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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)}}

HTML 结构

HTML
<div class="fx">
<div class="crw"><div class="rng"></div></div>
</div>
实现要点:conic-gradient 描边 + radial-gradient 蒙版挖空中心

其它加载类特效

回到 前端Wiki 首页 · CSS 特效合集