子比主题美化：给文章标题添加渐变光晕悬浮特效

子比（Zibll）主题作为 WordPress 生态中热门的博客类主题，以简洁的布局和丰富的自定义功能深受博主喜爱，但默认的文章标题样式较为单一，缺乏视觉亮点。本次分享的 CSS 美化代码，专为子比主题文章内的 H1/H2/H3 标题设计，通过添加渐变圆形光晕装饰和悬浮缩放动画，既能区分不同层级标题，又能提升文章页面的视觉精致度，且完全基于 CSS 实现，不影响网站加载速度。

效果预览

交互效果

鼠标悬浮到标题上时，光晕装饰会以中心为原点放大 1.2 倍，过渡时长 0.4 秒，动画流畅自然，让标题更具互动感，提升用户阅读体验。

代码部署

1. 登录你的 WordPress 后台管理面板；
2. 在左侧菜单栏找到并点击「主题设置」；
3. 在主题设置页面中，依次展开「全局 & 功能」→「自定义代码」；
4. 找到「自定义 css 样式」输入框；
5. 将以下完整的 CSS 代码粘贴到输入框中；
6. 滚动到页面底部，点击「保存设置」按钮，完成部署。

自定义调整

你可以根据自己的网站风格，修改以下参数实现个性化效果，所有调整均在上述 CSS 代码中完成：

1. 渐变颜色调整

找到对应标题的linear-gradient属性，替换颜色值即可更改光晕配色：

• H1 标题：#409eff（默认蓝色）→ 可替换为#e63946（红色）、#8b5cf6（紫色）等；
• H2 标题：#00ff62（默认绿色）→ 可替换为#22c55e（森绿）、#06b6d4（青色）等；
• H3 标题：#ff9800（默认橙色）→ 可替换为#f97316（橘红）、#eab308（黄色）等。

2. 光晕尺寸调整

修改height和width数值，调整光晕大小（数值越大，光晕越大）：

• 主光晕（::before）：H1 默认 35px、H2 默认 30px、H3 默认 25px；
• 副光晕（::after）：H1 默认 13px、H2 默认 10px、H3 默认 8px。

3. 光晕位置调整

修改top和left数值，调整光晕相对于标题的位置：

• top：数值为负向上偏移，为正向下偏移（如top: -8px会让光晕更靠上）；
• left：数值为负向左偏移，为正向右偏移（如left: -15px会让光晕更靠左）。

4. 动画效果调整

• 缩放倍数：transform: scale(1.2)中的1.2可改为 1.1（轻微缩放）、1.3（更大缩放）；
• 过渡时长：transition: 0.4s中的0.4s可改为 0.2s（动画更快）、0.6s（动画更缓）。

5. 透明度调整

修改opacity: 0.6中的数值（取值范围 0-1）：

• 数值越小（如 0.3），光晕越淡；
• 数值越大（如 0.8），光晕越明显。

结语

本次分享的子比主题标题美化代码，无需修改主题核心文件，仅通过自定义 CSS 即可实现，兼顾安全性和易用性。特效仅作用于文章内容区的 H1/H2/H3 标题，不会影响网站导航栏、侧边栏等其他区域的样式，兼容性适配主流浏览器。你可以根据自己的审美偏好，灵活调整配色、尺寸和动画参数，让文章标题既符合网站整体风格，又能形成独特的视觉标识。如果部署后特效未生效，可检查代码是否完整粘贴，或清空浏览器缓存后重试。