CSS如何创建由中心扩散的色彩动画_radial-gradient与size变化-css教程-PHP中文网

结论：用 background-size 动画控制 radial-gradient 半径扩张最可靠；因浏览器不支持直接动画渐变内部 stop 值（如 70%），而 background-size 是广泛兼容且硬件加速的方案，通过缩放渐变图像实现视觉扩散，需匹配渐变透明起点与 size 终值以防失真。

css如何创建由中心扩散的色彩动画_radial-gradient与size变化

直接说结论：用 background-size 动画控制 radial-gradient 的半径扩张，是最可靠、兼容性最好、无需 JS 的方案；但必须写对渐变结构和尺寸起止值，否则动画会拉伸失真或完全不动。

为什么不能直接动画 `radial-gradient` 的颜色 stop 百分比？

浏览器不支持对 radial-gradient 函数内部参数（如 50%、70%）做 CSS 动画。哪怕你用 CSS 变量包裹 stop 位置，在 Chrome 94 之前、Safari 15.3 及更早版本中，transition 会失效或跳变。Firefox 虽支持变量驱动的 stop 动画，但多层叠加时渲染一致性差。真正被广泛支持且硬件加速的，只有 background-size 和 background-position。

`background-size: 0 0 → 200% 200%` 是怎么控制扩散的？

关键在于：radial-gradient 本身是“固定图像”，而 background-size 控制的是这张渐变图在容器里的缩放比例。从 0 0 开始，相当于把整个渐变压缩成一个点；放大到 200% 200%，就让渐变从中心撑满并溢出容器——视觉上就是“由中心向外扩散”。

必须用两个值（宽、高），比如 0 0 和 200% 200%，单值 0 或 200% 会被解释为等比缩放，可能变形
起始值 0 0 对应“无可见渐变”，终点值建议 ≥ 200% 200%，确保在各种宽高比下都能覆盖全容器
渐变本身要写成 radial-gradient(circle at center, #007bff 0%, transparent 70%) —— 这里的 70% 是透明起点，必须和 background-size 终点匹配，否则边缘会出现硬边或色块残留

Safari 15.4 以下怎么 fallback？

Safari 15.3 及更早不支持 background-size 动画作用于渐变背景，会静止在初始状态。此时需降级为 transform: scale() 模拟：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

button {
  background: radial-gradient(circle at center, #007bff 0%, transparent 70%);
  transition: background-size 0.25s ease;
}
button:active {
  background-size: 200% 200%;
}
@supports not (background-size: 0 0) {
  button:active {
    transform: scale(1.1);
    opacity: 0.95;
  }
}

注意：@supports not (background-size: 0 0) 比检测具体属性值更稳妥，因为 Safari 旧版虽认得 background-size 这个属性名，但不支持它对渐变生效。

容易被忽略的三个细节

第一，radial-gradient 必须配合 background-image 使用，写成 background: ... 会覆盖掉 background-color 且无法单独控制 size；第二，如果元素有 border-radius，但渐变没设 circle，默认椭圆会在圆角区域产生割裂感；第三，多个 radial-gradient 叠加时，每层都要独立控制 background-size，不能共用一个 transition，否则各层动画节奏不同步，会发灰或闪烁。