子比主题美化：首页文章列表「免费资源」标签炫彩美化（流光渐变特效）

在使用子比主题搭建资源站、博客站时，首页文章列表的付费 / 免费资源标签是最直观的视觉标识。默认标签样式单调、辨识度低，无法突出「免费资源」的吸引力。

本次教程专为子比主题定制，不修改主题源码、不影响网站速度，仅需添加一段 CSS 样式，即可让「免费资源」标签拥有：

✅ 梦幻炫彩渐变背景✅ 动态流光扫过特效✅ 玻璃质感 + 柔和阴影✅ 鼠标悬浮微动放大

让你的网站首页更精致、更吸睛，大幅提升用户体验！

效果预览

代码部署

登录 WordPress 后台，进入 子比主题设置 找到 自定义代码 → 自定义 CSS 样式 将下面的代码粘贴到输入框内，保存设置，清空缓存，刷新首页即可生效

自定义调整

你可以根据自己的网站风格，微调以下参数：

1. 修改标签大小

padding:4px 12px;

• 更小：2px 8px
• 更大：6px 16px

2. 修改文字大小

font-size:12px;

• 调大：13px / 调小：11px

3. 修改圆角（椭圆 / 直角）

border-radius:999px;

• 椭圆不变：保持 999px
• 轻微圆角：4px / 6px

4. 修改动画速度

animation: freeTagLight 2.8s linear infinite;

• 更快：2s
• 更慢：3.5s

5. 更换渐变颜色

直接替换 linear-gradient 内的色值即可，支持多色渐变。

结语

这段「免费资源」标签美化代码，是子比主题资源站、博客站的必备小优化。

无需插件、不改动核心文件、不影响 SEO，仅一段 CSS 就能让你的网站颜值翻倍，突出免费资源标识，提升网站整体质感。