CSS圆环旋转动画：conic-gradient使用教程

本文深入解析了如何利用 CSS 的 conic-gradient 函数高效实现旋转圆环加载动画——凭借其原生按角度划分颜色的能力，无需复杂拼接 radial-gradient 或依赖 transform: rotate() 驱动伪元素，显著提升代码简洁性与动画流畅度；同时客观指出其在 IE 全系及旧版 Safari 中的兼容限制，为开发者提供实用、现代且兼顾兼容性的视觉动效解决方案。

为什么 conic-gradient 适合做加载圆环

它能直接按角度切分颜色，不用拼接多个 radial-gradient 或靠 transform: rotate() 驱动伪元素，动画更平滑、CSS 更简洁。但注意：它不支持 IE，且 Safari 旧版本（conic-gradient 动画有渲染卡顿，需加 will-change: background 缓解。

用 conic-gradient 绘制静态圆环

核心是两层渐变叠加：外圈用 conic-gradient 做“进度色带”，内圈用纯色遮罩出“空心”效果。关键点在于控制色标位置和透明度：

• conic-gradient(#3b82f6 0%, #3b82f6 25%, transparent 25%, transparent 100%) —— 这样只画出 1/4 圆弧；想画完整环，把第一个色标设为 0%，第二个设为 100%，再让透明段“吞掉”中间
• 实际常用写法：conic-gradient(#3b82f6 0%, #3b82f6 75%, transparent 75%, transparent 100%)，这样 75% 是实色，25% 是透明缺口，视觉上就是带缺口的环
• 必须配合 border-radius: 50% 和固定宽高，否则不是正圆

让圆环真正转起来：animation + background-position

conic-gradient 本身不能直接用 rotate 动画，但可以靠 background-position 配合 background-size 模拟旋转——前提是把它当背景图用，且设为 background-clip: content-box 或结合 padding 控制显示区域：

• 给元素设 width: 40px; height: 40px;，border-radius: 50%，再加 padding: 4px，让内容区缩成小圆，背景在 padding 区绘制
• 背景用 background: conic-gradient(#3b82f6 0%, #3b82f6 75%, transparent 75%, transparent 100%)
• 关键动画：animation: spin 1s linear infinite;，其中 @keyframes spin { from { background-position: 0 0; } to { background-position: 360px 0; } }
• 必须配 background-size: 200% 200%，否则 background-position 移动无效

兼容 fallback 和性能提醒

如果目标环境要兼容 Safari 15.x 或安卓 WebView 旧版，conic-gradient 动画可能跳帧或不动。这时别硬扛，直接降级：

• 用 @supports not (background: conic-gradient()) 包裹新方案，里面写传统 border + transform: rotate() 方案
• 避免在列表项里大量使用该动画，每个都会触发重绘；加 will-change: background-position 只对正在动画的元素生效，别全局加
• 真要极致性能，改用 SVG + stroke-dasharray + stroke-dashoffset，CPU 占用更低

最易被忽略的是 background-size 和 background-position 的单位匹配——background-position: 360px 能转一圈，前提是 background-size 设得够大，不然位移根本没效果。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~