让你的子比主题用户名”活”起来！3个CSS特效代码直接用

还在羡慕别人网站上那些会动的用户名吗？其实实现起来超级简单！今天就教你用几行CSS代码，让你的子比主题用户名瞬间变得生动有趣。

快速上手指南

定位代码添加位置

WordPress后台 →Zibll主题设置 → 全局&功能 → </> 自定义代码 → 自定义CSS样式

添加代码

/*昵称流彩字体效果*/
.display-name{background-image:-webkit-linear-gradient(90deg,#07c160,#fb6bea 25%,#3aedff 50%,#fb6bea 75%,#28d079);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-size:100% 600%;animation:wzw 10s linear infinite;}
@keyframes wzw{from{background-position:0 0;}to{background-position:0 -300%;}}

自定义参数配置

可以通过调整参数实现不同效果：

/*昵称流彩字体效果*/
.display-name{
    background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079); /* 创建线性渐变背景：90度水平渐变，包含5种颜色 */
    -webkit-text-fill-color: transparent; /* 将文字填充色设为透明，让背景渐变透过文字显示 */
    -webkit-background-clip: text; /* 将背景裁剪到文字形状，只在文字区域显示渐变 */
    background-size: 100% 600%; /* 设置背景尺寸：宽度100%，高度600%，为动画提供移动空间 */
    animation: wzw 10s linear infinite; /* 应用动画：名称wzw，持续10秒，线性变化，无限循环 */
}

@keyframes wzw {
    from {background-position: 0 0;} /* 起始位置，可调整 */
    to {background-position: 0 -300%;} /* 结束位置，可调整 */
}

可调参数说明：

1. 动画时长：1s-10s，推荐3s-6s
2. 背景位置：0 0（起始位置）、0 -300%（结束位置，可调-100%到-500%）
3. 缓动函数：linear（匀速）、ease（默认）、ease-in-out（先慢后快再慢）
4. 循环次数：infinite（无限）、数字（具体次数）
5. 背景尺寸：100% 600%（宽度100%，高度可调400%-800%）
6. 渐变颜色：可替换#07c160、#fb6bea、#3aedff等颜色值

其它效果

彩虹波浪流动

七彩渐变色呈波浪状流动，3秒循环，视觉冲击力强

/*彩虹波浪流动效果*/
.display-name{background:linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:400% 400%;animation:rainbow 3s ease infinite;}
@keyframes rainbow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

抖音故障风格

模拟抖音APP的故障特效，青红双色阴影抖动，1.5秒循环，潮流感十足

/*昵称抖音故障风格*/
.display-name{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);animation:shake-it 1.5s reverse infinite cubic-bezier(0.68,-0.55,0.27,1.55);}
@keyframes shake-it{0%{text-shadow:0 0 rgba(0,255,255,.5),0 0 rgba(255,0,0,.5);}25%{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);}50%{text-shadow:-5px 0 rgba(0,255,255,.5),3px 0 rgba(255,0,0,.5);}100%{text-shadow:3px 0 rgba(0,255,255,.5),5px 0 rgba(255,0,0,.5);}}

写在最后

本教程由RanShare技术分享平台原创出品，秉承”发现·分享·成长”的核心理念，致力于为技术爱好者提供最实用、最前沿的网站美化技巧。

本文链接：https://www.ranshare.com/?p=380