修改CSS linear-gradient角度为180deg后悬停动画失效，如何实现垂直渐变动效？

核心失效原因 #

原水平渐变动效依赖X轴方向的背景偏移实现动画，仅修改linear-gradient角度没有同步调整背景尺寸和偏移参数，会导致渐变没有可移动的空间，自然无法触发动画效果。

必须同步修改的3项配置 #

• 调整background-size参数：将原水平适配的background-size: 200% 100%改为垂直适配的background-size: 100% 200%，保证垂直方向有足够的渐变滚动空间
• 调整background-position过渡值：将原水平偏移的X轴参数改为Y轴参数，初始状态设为background-position: 0% 0%，hover状态设为background-position: 0% -100%
• 确认transition属性正确配置：保证过渡属性绑定background-position，示例配置为transition: background-position 0.6s ease

完整可运行示例代码 #

/* 将 .target-element 替换为你要绑定的WordPress动态元素选择器即可 */
.target-element {
  /* 原有元素样式保留，新增以下配置 */
  background: linear-gradient(180deg, #ff7e5f, #feb47b, #ff7e5f);
  background-size: 100% 200%;
  background-position: 0% 0%;
  transition: background-position 0.6s ease;
  /* 如需叠加到元素原有背景上，可取消下一行注释调整融合效果 */
  /* mix-blend-mode: overlay; */
}

.target-element:hover {
  background-position: 0% -100%;
}

WordPress端部署方法 #

无需修改主题源代码，直接登录WordPress后台，依次进入「外观」-「自定义」-「额外CSS」，将上述代码粘贴进去，把.target-element替换为你要添加效果的动态元素类名（比如文章卡片、按钮、标题等），保存即可生效，主题更新也不会丢失配置。

内容的提问来源于stack exchange，提问作者allegri