子比主题美化：侧边栏添加动态描边时钟小工具

子比（Zibll）主题的侧边栏是提升网站个性化的重要区域，默认的小工具样式往往偏简洁，缺乏视觉亮点。本次分享一款超实用的美化代码 —— 为子比主题侧边栏添加动态描边时钟小工具，通过 SVG 文字描边 + CSS 动画效果，让侧边栏显示实时时钟，且时钟文字带有彩色描边滚动动画，既实用又能增强页面的视觉吸引力，全程无需修改主题核心文件，新手也能轻松部署。

效果预览

时钟动画以 8 秒为周期循环，描边滚动流畅无卡顿，实时时间精准同步系统时间，既不占用过多服务器资源，又能为侧边栏增添动态活力，不会影响网站整体加载速度。

代码部署

1. 登录 WordPress 后台，依次点击「外观」→「小工具」；
2. 在侧边栏（如 “侧边栏 – 默认”）区域，添加「自定义 HTML」小工具；
3. 将以下完整代码复制粘贴到 HTML 编辑框中；

4. 点击「保存」按钮，刷新网站前台，即可在侧边栏看到动态描边时钟效果。

自定义调整

你可根据子比主题的整体配色和布局，调整以下参数适配自己的网站：

1. 调整时钟文字大小

修改 .words 类中的 font-size: 60px;，数值越小文字越小（如移动端建议改为 40px）：

.words {
  font-size: 40px; /* 移动端适配大小 */
  /* 其他样式不变 */
}

2. 修改描边颜色和光影效果

替换 .words-1 至 .words-4 中的颜色值（如改为子比主题主色 #409eff），并调整 text-shadow 数值改变光影模糊程度：

.words-1 {
  stroke: #409eff; /* 子比主题蓝色 */
  text-shadow: 0 0 30px #409eff; /* 减小模糊半径更精致 */
  animation-delay: -2s;
}

3. 调整动画速度

修改 animation: drawing 8s linear infinite; 中的 8s，数值越小动画越快（如 6s 更快，10s 更慢）：

.words {
  /* 其他样式不变 */
  animation: drawing 6s linear infinite; /* 加快动画速度 */
}

结语

本次分享的子比主题侧边栏动态描边时钟小工具，通过 HTML+CSS+JS 实现，无需依赖任何插件，轻量化且易部署。该效果不仅能丰富侧边栏的展示形式，还能提升网站的个性化和趣味性，适配所有子比主题版本。