子比主题美化教程：给文章标签添加炫酷流光特效

在子比（Zibll）主题中，标签是展示文章分类、关键词的重要元素，默认的标签样式过于单调。今天教大家给文章标签添加纯文字流光特效（无多余方框、仅文字炫彩流动），让博客视觉质感瞬间提升，适配深色 / 明亮双模式，新手也能一键上手！

效果预览

✅ 核心效果：

• 标签文字呈现紫 / 蓝 / 青渐变流光，循环流动
• 无任何底色方框，仅保留文字特效，简洁高级
• 适配子比主题深色 / 明亮模式，无兼容性问题

代码部署

1. 登录 WP 后台 → 主题设置 → 全局功能 →自定义代码 → 自定义CSS样式;
2. 复制以下完整 CSS 代码，粘贴到 CSS 编辑框中。

刷新你的博客文章页面，即可看到标签文字的流光效果！

自定义技巧

1. 调整流光速度

找到代码中的 animation: textLight 3s linear infinite;，将 3s 改为你想要的数值：

• 数值越小，流光越快（如 2s 更快）
• 数值越大，流光越慢（如 5s 更柔和）

2. 更换流光配色

修改 linear-gradient 中的颜色值，即可自定义流光色彩：

/* 示例：改为红/橙/黄渐变 */
background: linear-gradient(90deg, #ff5e5c, #ffbb50, #ffdd00, #ff5e5c);

推荐配色方案：

• 清新风：#1ac756, #19B5FE, #00ffff, #1ac756
• 复古风：#8b5cf6, #ec4899, #f43f5e, #8b5cf6
• 极简风：#4A4A4A, #666666, #888888, #4A4A4A

3. 调整标签间距 / 大小

• 调整 padding: 4px 10px;：数值越大，标签内边距越宽
• 调整 font-size: 12px;：修改文字大小
• 调整 margin: 0 5px 5px 0;：修改标签之间的间距

六、总结

本次教程通过纯 CSS 实现了子比主题标签的文字流光特效，核心优势：

1. 无多余方框，仅文字炫彩流动，风格简洁高级；
2. 纯前端实现，不占用服务器资源，不影响加载速度；
3. 支持自定义配色、速度、描边，适配不同博客风格；
4. 兼容子比主题深色 / 明亮双模式，无显示异常。