子比主题美化教程：多款首页文章列表鼠标悬停CSS动效合集

针对WordPress子比主题首页文章列表卡片，整理了4套不同风格的鼠标悬停CSS动画代码，包含3D立体上浮、轻微放大、多层阴影渐变、简洁上浮阴影四种方案。所有代码直接粘贴至主题后台「自定义CSS」即可生效，无需修改模板文件，移动端自动适配，能大幅提升网站交互质感与视觉层次感。

方案一：3D立体上浮悬停特效

该效果拥有透视3D旋转+上浮位移动画，悬停时卡片抬升、带立体景深变化，搭配圆角与深色投影，视觉冲击力更强。

代码参数说明

1. transform: translateY(-5px)：基础向上浮动5px
2. border-radius: 20px：卡片圆角大小，可自行修改数值
3. box-shadow：悬浮阴影深浅，数值越大阴影越厚重
4. perspective(2000px)：3D透视景深，数值越小立体效果越夸张
5. animation：自定义缓动曲线，控制动画顺滑程度

方案二：轻微放大柔和阴影效果

无上浮位移，仅做卡片轻微放大+单层柔和阴影，风格简约低调，适合清新、轻量化站点。

方案三：多层渐变阴影悬浮效果

仅强化阴影层次，不移动、不放大卡片，依靠多层叠加阴影营造悬浮浮空感，不会打乱页面排版高度。

方案四：基础简洁上浮阴影效果

最通用经典的上浮方案，卡片向上偏移10px并搭配一层浅阴影，性能占用低、兼容性最好，适合绝大多数网站。

部署使用教程

1. 登录WordPress后台，进入子比主题设置面板；
2. 找到「自定义CSS/自定义样式」输入框；
3. 任选一套方案代码完整复制粘贴至输入框；
4. 保存设置，刷新网站首页，鼠标划过文章列表卡片即可查看效果。

自定义调整小贴士

1. 浮动距离：修改translateY()内数字，数值越大上浮越高；
2. 卡片缩放：修改scale()数值，1.02代表放大2%；
3. 阴影深浅：调整rgba最后一位小数，0~1之间，数值越大阴影越深；
4. 动画速度：修改transition后的0.3s，数值越大动画越缓慢。