实现代码

组件特点：动态感与实用性的平衡

• 视觉聚焦：左侧固定的 “哈喽～” 标签自带主题色背景，快速吸引用户目光；
• 动态提醒：右侧公告文本持续水平滚动，避免静态文字的单调感；
• 风格统一：使用子比主题全局变量（如--theme-color），自动适配网站配色；
• 轻量高效：纯 CSS 动画实现，不依赖额外插件，加载速度无负担。

子比主题中使用教程

1. 找到自定义 HTML 小工具：进入 WordPress 后台 → 外观 → 小工具，选择 “自定义 HTML” 组件（适合放在侧边栏、首页顶部等位置）；
2. 粘贴代码：将完整代码（CSS+HTML）复制到小工具内容区；
3. 调整位置：根据需求将小工具拖到目标区域（如 “首页顶部通知栏”“侧边栏上部”）；
4. 保存生效：点击保存后刷新前台页面，即可看到滚动公告效果

为什么推荐这个滚动公告框？

• 轻量无负担：纯前端代码，不占用服务器资源，不影响网站加载速度；
• 高度可控：从文字到动画速度，每一处细节都能按需求修改；
• 风格统一：依赖子比主题全局变量，不会出现 “样式脱节” 问题。