子比主题美化：打造灵动打字机文字特效，提升页面交互感

在个性化建站的过程中，细节处的动态特效往往能让博客页面更具吸引力。今天给大家分享一个适配子比主题的打字机文字特效，无需复杂插件，几行代码就能让首页、侧边栏或文章页出现逐字弹出的文字动画，为你的博客增添灵动的交互体验～

特效预览

页面中会循环展示预设的文案，文字逐字 “敲出”，打完一句后停留 2 秒自动切换下一句，打字间隔随机模拟真实打字节奏，适配中文显示，和子比主题的简约风格完美契合。

添加核心 CSS 样式

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

添加HTML 部分

1. 登录 WP 后台 → 主题设置 → 页面显示 → 顶部多功能组件 → 叠加搜索组件 → 额外内容；
2. 复制以下完整 html代码，粘贴到编辑框中。

<div class="typewriter" id="textContainer"></div>

添加JS 部分

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

个性化修改建议

1. 修改文案：修改sentences数组里的内容，换成你的博客标语、个人介绍、业务口号等；
2. 调整样式：
   • 字号：修改.typewriter里的font-size；
   • 颜色：修改color（文字色）；
   • 间距：调整padding（内边距）、margin（外边距）；
3. 调整打字速度：修改setTimeout(typeWriter, Math.random() * 100 + 100)中的数值（数值越大，打字越慢）；
4. 调整停留时间：修改setTimeout(() => {...}, 2000)中的2000（单位：毫秒，数值越大，停留越久）。

这个简单的打字机特效能让子比主题的页面更有 “呼吸感”，无论是装饰侧边栏还是强化首页视觉焦点，都能起到不错的效果。大家可以根据自己的博客风格调整样式和文案，让美化更贴合个人需求～