实现代码

先睹为快：这个小工具到底长啥样？

• 顶部固定文本：“坚持每天来逛逛，会让你” 搭配奔跑、疑问等表情图标，拉近距离；
• 中间翻转区域：6 句不同的积极文案（比如 “生活也美好了”“腰也不酸了”）通过平滑动画轮流展示，彩色渐变背景 + 无缝切换效果，瞬间抓住注意力；
• 底部收尾文案：“你好我也好，不要忘记哦！” 用开心、大笑表情收尾，强化记忆点。

拆解代码：它是怎么在子比主题里 “跑” 起来的？

1. HTML 结构：清晰的层级设计

• 结构清晰的嵌套设计，让内容分区明确，也方便后续样式调整。

2. CSS 动画：让文字 “动” 起来的核心

• 代码中的@keyframes show是动画灵魂：通过改变margin-top值，让 6 组文本在垂直方向依次上移，实现 “翻转切换” 效果。关键帧设置精准控制了每个文本的停留时间（约 1.3 秒 / 句），确保动画流畅不卡顿：
• 配合linear infinite属性，动画会循环播放，持续吸引用户注意。

3. 子比主题适配：无缝融入的细节

• 用var(--main-radius)继承主题全局圆角设置，避免风格冲突；
• 表情图标采用svg引用（xlink:href），适配主题可能使用的 iconfont 图标库；
• 响应式宽度（width:100%）确保在不同设备的侧边栏中都能正常显示。

实操指南：3 步把它加到你的 WP 网站

1. 添加小工具：进入 WordPress 后台→外观→小工具，在 “文章侧边栏” 区域添加 “自定义 HTML” 小工具；
2. 粘贴代码：将这段代码复制到自定义 HTML 的内容框中（注意保留完整结构，包括<style>样式部分）；
3. 保存生效：点击保存，刷新文章页即可看到效果。

进阶玩法：根据网站风格自定义

• 改文案：把翻转文本换成与网站内容相关的句子（比如电商站可改为 “折扣不错过”“购物更省心”）；
• 换颜色：修改linear-gradient的色值，匹配网站主色调（例如科技类网站可用蓝色系渐变）；
• 调动画：修改@keyframes中的百分比和margin-top值，调整翻转速度或停留时间。

为什么说它是提升用户粘性的 “神器”？

• 低干扰性：作为侧边栏元素，不影响文章阅读，却能在用户浏览间隙留下印象；
• 积极心理暗示：通过 “生活美好”“工作轻松” 等正向文案，让用户将 “访问网站” 与 “愉悦体验” 关联；
• 互动感设计：动态动画比静态文本更易触发用户潜意识的 “关注行为”，间接提升回访率。