静态展示

一、效果简介

在子比主题的网站中，我们可以通过添加特定的 CSS 代码，让用户名呈现出类似抖音那种跳动的酷炫效果。这种效果能够增加网站的趣味性和视觉吸引力，让用户在浏览网站时获得更加独特的体验。

二、实现步骤

2.1 准备工作

确保你已经拥有子比主题的网站，并且具备对网站进行自定义 CSS 设置的权限。通常，你可以登录到 WordPress 后台来进行相关操作。

2.2 找到子比自定义 CSS 位置

登录 WordPress 后台，进入 “子比主题设置-全局功能” - “自定义css” 选项。在自定义设置界面中，找到 “额外 CSS” 或者 “自定义 CSS” 的入口。不同版本的子比主题可能在名称上略有差异，但大致位置是相似的。

2.3 复制并粘贴 CSS 代码

将以下 CSS 代码复制到子比自定义 CSS 的输入框中：

• @keyframes 用于定义一个动画，shake-it 是动画的名称。
• 在不同的关键帧（0%、25%、50%、100%）中，通过改变 text-shadow 的偏移量，实现了阴影位置的动态变化，从而产生跳动的效果。

1. .display-name 选择器

2.4 代码解释

.display-name{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

2.5 保存设置

在粘贴完代码后，点击自定义设置界面中的 “保存并发布” 按钮，使设置生效。

三、效果验证

刷新网站页面，查看用户名是否已经呈现出跳动效果。如果没有看到效果，可以检查以下几点：

1. 确认代码是否正确复制和粘贴，没有遗漏或错误。
2. 检查子比主题是否支持自定义 CSS 功能，或者是否有其他 CSS 规则冲突。
3. 清除浏览器缓存，有时候缓存可能会导致新的样式没有及时显示。

通过以上步骤，你就可以在子比主题的网站中实现用户名的抖音跳动效果啦。