悬停时渐变方向反转需同时取反角度并调换色标顺序，如90deg→-90deg且#3a7bd5,#00d2d3→#00d2d3,#3a7bd5；background-image不可过渡，须用background简写配合transition: background；iOS Safari需补充:active确保点击反馈。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

悬停时渐变方向反转的实现原理 CSS 渐变本身没有“反转颜色”的内置指令，所谓“反转”实际是通过改变 linear-gradient() 的起始/结束角度或色标顺序来模拟。直接写 background: linear-gradient(to right, #ff6b6b, #4ecdc4) 和悬停时改成 to left 是最直观的方式，但要注意：仅改方向不够——如果两个渐变的色标顺序也一致，视觉上可能看不出明显变化（尤其当颜色对比不强时）。真正可靠的反转，是角度取反 + 色标顺序调换，比如从 to bottom + #f093fb, #f5576c 变为 to top + #f5576c, #f093fb。

transition 为什么对 background-image 无效？background-image 属于不可过渡属性（non-interpolable），即使你写了 transition: background-image 0.3s，浏览器也会静默忽略。必须用可过渡的替代方案：

• 用 background 简写属性（含渐变）+ transition: background 0.3s，但需确保初始和悬停状态都使用完整渐变语法，且浏览器支持（现代浏览器 OK）
• 更稳妥的做法：用 background-color 过渡 + background-image 固定叠加一层透明渐变遮罩（如伪元素），但会增加 DOM 复杂度
• 实际项目中推荐第一种，只要避免混用 background-color 和 background-image（比如初始设纯色、悬停设渐变），就能触发过渡

一个能跑通的最小可行代码片段

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  /* 初始渐变：左→右 */
  background: linear-gradient(90deg, #3a7bd5, #00d2d3);
  /* 关键：只过渡 background，且必须用完整渐变值 */
  transition: background 0.3s ease;
}
<p>.btn:hover {
/<em> 角度取反（90deg → -90deg），色标顺序调换 </em>/
background: linear-gradient(-90deg, #00d2d3, #3a7bd5);
}

注意：90deg 和 -90deg 在视觉上等价于 to right 和 to left，但用数值角度更利于精确控制；若用 to bottom，对应悬停应写 to top，而非 to bottom 的负值。

移动端点击反馈和 Safari 兼容性坑 iOS Safari 对 :hover 支持不稳定（尤其未触碰过页面时），单纯依赖 :hover 会导致按钮在 iPhone 上无响应。必须补充 :active 状态：

• 加 .btn:active { opacity: 0.8; } 是最轻量的点击反馈
• 如果要用渐变反转做 active 效果，得单独写 .btn:active 规则，且不能和 :hover 冲突（例如 hover 已触发反转，再点 active 就没变化了）
• Safari 旧版本（linear-gradient 的 angle 单位支持较弱，建议统一用 deg 而非 turn 或无单位数字

渐变反转不是魔法，它靠的是两套完全独立但对称的渐变定义——漏掉色标顺序、角度符号或过渡属性绑定，都会让效果“看起来没动”。