如何用纯 CSS 实现元素背景色无限闪烁并自动回归初始颜色-html教程-PHP中文网

如何用纯 CSS 实现元素背景色无限闪烁并自动回归初始颜色

使用 CSS @keyframes 配合 linear() 自定义缓动函数，可在不硬编码初始颜色的前提下，让元素无限闪烁至白色后精准返回其原始背景色。

使用 css `@keyframes` 配合 `linear()` 自定义缓动函数，可在不硬编码初始颜色的前提下，让元素无限闪烁至白色后精准返回其原始背景色。

在纯 CSS 动画中，实现“闪烁回原始颜色”而非固定色值（如 green），关键在于避免在 @keyframes 中显式声明起始/结束色值——因为一旦写死（如 30% { background-color: green; }），就丧失了样式复用性和上下文适应性。

现代 CSS 提供了更优雅的解法：animation-timing-function: linear() 的分段语法（即 linear(0, 0 30%, 1 50%, 0 70%, 0)），它允许我们定义动画过程中属性值的精确插值路径，而无需在关键帧中重复指定颜色。

✅ 核心原理：

@keyframes blink { to { background-color: white; } } 定义了唯一变化：从当前计算出的初始色 → 白色；
linear(0, 0 30%, 1 50%, 0 70%, 0) 控制 background-color 的数值变化节奏：
- 0 → 起始值（即元素自身的 background-color，由 body { background-color: green; } 等实际声明决定）；
- 0 30% → 在 0%–30% 时段保持起始色（“暂停”）；
- 1 50% → 在 30%→50% 线性过渡到 white（1 表示目标值的 100%，即 to 所定义的 white）；
- 0 70% → 在 50%→70% 线性返回起始色（0 表示目标值的 0%，即回到原始色）；
- 最后 0 → 70%–100% 保持起始色，完成循环。

? 完整可运行示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

body {
  background-color: #2a5c82; /* 任意初始色 —— 可动态修改，无需改动画代码 */
  animation: blink 3s infinite linear(0, 0 30%, 1 50%, 0 70%, 0);
}

@keyframes blink {
  to { background-color: white; }
}

⚠️ 注意事项：

linear() 分段语法是 CSS Easing Functions Level 2 规范特性，已获 Chrome 109+、Firefox 111+、Safari 16.4+ 全面支持（caniuse.com）；旧版浏览器需降级为传统 steps() 或 cubic-bezier() 模拟，但将失去“自动回原始色”的灵活性；
inherit / initial 在 @keyframes 中无效，是因为动画会覆盖继承链，且 initial 是关键字重置值（非计算值），无法参与颜色插值；
此方案完全依赖 CSS 计算流程，无需 JS 干预，符合“CSS-only”约束，且天然支持 CSS 变量（如 background-color: var(--theme-bg);），进一步提升主题适配能力。