子比美化教程：两种彩虹彩色标题动效样式，提升列表页面视觉质感

一、效果介绍

本篇分享两套适配子比（zibll）WordPress主题的文章标题彩色美化CSS代码，分别为鼠标悬浮流动彩虹标题、全局永久呼吸彩虹标题，两套效果可按需选用：

1. 悬浮动效：仅鼠标悬停文章标题时，文字显示四色流动渐变，平时保持原有文字颜色，轻量化不抢视觉焦点；
2. 呼吸动效：页面加载后所有文章标题永久显示七彩渐变，搭配明暗呼吸透明度动画，视觉冲击力更强，完美适配子比列表页item-heading标题结构。

两套代码均可直接粘贴至主题自定义CSS，兼容电脑端与移动端，无样式冲突，无需修改主题核心文件。

二、第一套：鼠标悬浮流动彩色标题代码

2.1 完整CSS代码

2.2 效果说明

• 触发条件：鼠标悬浮文章标题、文本省略标签、友链列表文字；
• 渐变配色：浅青、紫、金黄、翠绿四色循环横向流动；
• 动画周期：4秒完成一次完整色彩循环；
• 适配范围：PC端680px以上屏幕，移动端不触发悬浮渐变，保持原生样式。

三、第二套：全局永久七彩呼吸标题（2025.10.05更新版）

3.1 完整CSS代码

3.2 更新版优势详解

1. 永久生效：页面加载完成后标题持续显示七彩渐变，无需鼠标触发；
2. 双层动效：同时实现色彩横向流动+透明度明暗呼吸，层次感更强；
3. 丰富七色渐变：粉、橙、黄、绿、蓝、紫、紫红完整彩虹色系；
4. 悬浮增强：鼠标划过标题时动画加速，添加柔和文字阴影；
5. 移动端适配：768px以下自动调整标题字号，避免文字拥挤；
6. 兼容加固：给item-heading容器设置固定行高与外边距，杜绝和子比原有样式冲突。

四、安装使用教程

1. 登录WordPress网站后台，进入「外观」-「自定义」；
2. 在自定义面板找到「额外CSS/自定义CSS」选项；
3. 根据需求复制第一套悬浮渐变或第二套永久呼吸渐变完整代码，粘贴至输入框；
4. 点击发布保存，刷新网站首页、列表页即可预览标题彩色动效；
5. 两套代码不建议同时启用，会造成动画叠加卡顿，按需保留其中一套即可。