WordPress子比主题彩虹跑马灯公告美化教程

在搭建 WordPress 博客的过程中，一个醒目的公告栏能快速传递重要信息（比如站点更新、资源通知、活动提醒等）。今天就给大家分享一款高颜值彩虹跑马灯公告代码，完美适配子比主题，无需复杂插件，复制粘贴即可使用，还支持移动端自适应和悬停暂停功能！

效果演示

这款彩虹跑马灯公告具备以下亮点：

1. 渐变深色背景搭配彩虹发光边框，视觉冲击力拉满；
2. 文字自带彩虹渐变滚动效果，质感高级；
3. 左侧图标悬浮动画，增加灵动性；
4. 文字匀速滚动，鼠标悬停可暂停查看；
5. 完美适配手机、平板等移动端设备，样式自动适配。

安装方法

登录WordPress后台 → 仪表盘 → 外观 → 小部件 → 添加自定义HTML小工具 → 在可用小部件中找到“自定义HTML” →拖拽到需要显示区域 → 粘贴代码 → 将以下完整代码复制粘贴到HTML内容区域 → 点击“保存”按钮 → 刷新前台页面查看效果

修改彩虹颜色

• 边框彩虹：找到notice-marquee::before中的background: linear-gradient，替换其中的颜色值即可；
• 文字彩虹：找到marquee-text中的background: linear-gradient，修改颜色值可自定义文字渐变效果。

修改图标样式

找到<span class="marquee-icon">✨</span>，将✨替换为你喜欢的图标（如🔥、📢、⭐等），也可以使用 FontAwesome 图标（需确保站点已加载 FontAwesome 库）。