子比主题美化 – 高颜值滚动祝福卡片部署教程

想让你的子比主题网站告别单调，增添一抹灵动又吸睛的视觉亮点？今天分享的这款高颜值滚动祝福卡片，绝对能满足你对页面美化的需求！它不仅自带渐变流光、粒子背景、文字呼吸等多重动态特效，还支持全响应式适配，在手机和电脑端都能完美呈现。只需简单几步部署，就能让你的网站侧边栏、首页底部等区域瞬间焕新，给访客带来耳目一新的浏览体验。

效果预览

这款美化代码为你的子比主题添加一个高颜值的滚动祝福卡片，具备以下特色：

• 🌟 渐变色彩 + 粒子背景交互效果，视觉体验拉满
• 🎯 文字滚动切换 + 呼吸 / 跳动动画，动态感十足
• 📱 全响应式适配，手机 / 平板 / 电脑端均完美展示
• ✨ 悬浮交互效果，提升用户体验
• 🎨 半透明毛玻璃质感，适配各类网站风格

代码部署

1. 部署位置

推荐部署在子比主题的「文章页自定义侧边栏」中

2. 具体操作

1. 登录 WordPress 后台
2. 进入「外观」→「小工具」
3. 找到「自定义 HTML」小工具，添加到目标位置（如侧边栏）
4. 复制下方完整代码，粘贴到自定义 HTML 小工具中
5. 保存小工具，刷新前台页面即可生效

3. 完整部署代码

自定义修改指南

你可以根据自己的网站风格和需求，修改以下内容：

1. 修改文字内容

找到以下代码区域，替换成你想要的文案：

<div class="container-box-1-1">✨ 欢迎来到夏天屋，愿你</div>
<div id="flip-box-1">
  <div><div class="flip-box-1-1">🎈 每天都有好心情！</div></div>
  <div><div class="flip-box-1-2">📚 收获满满的知识！</div></div>
  <div><div class="flip-box-1-3">🚀 奔赴更好的生活！</div></div>
  <div><div class="flip-box-1-4">💖 被温柔与美好包围！</div></div>
  <div><div class="flip-box-1-5">🌟 闪闪发光不迷茫！</div></div>
  <div><div class="flip-box-1-6">🍀 好运常伴不迷路！</div></div>
</div>
<div class="container-box-1-2">💌 感谢你的每一次来访！</div>

2. 修改配色方案

找到以下 CSS 样式区域，修改渐变颜色值：

/* 顶部渐变装饰线条 */
#container-box-1::before {
  background: linear-gradient(90deg, #FF7E40, #C166FF, #4ec7f3, #42c58a, #FF7E40);
}

/* 滚动项背景色配置 */
.flip-box-1-1 { background: linear-gradient(135deg, rgba(255,126,64,0.92), rgba(255,154,104,0.92)); }
.flip-box-1-2 { background: linear-gradient(135deg, rgba(193,102,255,0.92), rgba(211,137,255,0.92)); }
.flip-box-1-3 { background: linear-gradient(135deg, rgba(78,199,243,0.92), rgba(110,215,248,0.92)); }
.flip-box-1-4 { background: linear-gradient(135deg, rgba(66,197,138,0.92), rgba(100,211,160,0.92)); }
.flip-box-1-5 { background: linear-gradient(135deg, rgba(241,97,125,0.92), rgba(245,130,152,0.92)); }
.flip-box-1-6 { background: linear-gradient(135deg, rgba(255,204,0,0.92), rgba(255,221,87,0.92)); }

3. 修改动画速度

找到以下 CSS 样式，修改动画时长（单位：秒）：

/* 文字滚动核心动画 */
#flip-box-1 div:first-child {
  animation: show 15s ease-in-out infinite; /* 15s为滚动周期，数值越大越慢 */
}

/* 顶部渐变线条移动动画 */
@keyframes gradientMove {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}
/* 10s为移动周期，在上方定义 */

总结

1. 该代码为子比主题提供了高颜值的滚动祝福卡片，支持粒子背景、文字滚动、呼吸动画等多种视觉效果
2. 部署方式简单，只需复制代码到 WordPress 后台的「自定义 HTML」小工具中即可生效
3. 支持高度自定义，你可以修改文字内容、配色方案和动画速度，适配自己的网站风格