让文章标题动起来！

快速上手指南

定位代码添加位置

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

添加代码

/* 全功能彩虹文字特效:悬停触发+四色流动渐变+无障碍适配 */
:root{--ra:30deg;--rc:#32c5ff 25%,#b620e0 50%,#f7b500 75%,#20e050 100%;--rd:4s}.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{color:#32c5ff;background-image:-webkit-linear-gradient(var(--ra),var(--rc));background-image:linear-gradient(var(--ra),var(--rc));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;-webkit-background-size:200% 100%;background-size:200% 100%;will-change:background-position;-webkit-animation:maskedAnimation var(--rd) infinite linear;animation:maskedAnimation var(--rd) infinite linear}@keyframes maskedAnimation{0%{background-position:0 0}100%{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{animation:none;-webkit-animation:none}}@media(prefers-contrast:high){.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{color:#06c!important;background:none!important;text-decoration:underline}}

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

/* 全功能彩虹文字特效:悬停触发+四色流动渐变+无障碍适配 */
:root {
    --ra: 30deg;                                    /* 渐变角度，可调0deg-360deg */
    --rc: #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%;  /* 四色渐变配置 */
    --rd: 4s;                                       /* 动画时长，推荐2s-8s */
}
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
    color: #32c5ff;                                 /* 基础颜色 */
    background-image: -webkit-linear-gradient(var(--ra), var(--rc));
    background-image: linear-gradient(var(--ra), var(--rc));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-background-size: 200% 100%;             /* 背景尺寸，200%实现流动效果 */
    background-size: 200% 100%;
    will-change: background-position;               /* 性能优化提示 */
    -webkit-animation: maskedAnimation var(--rd) infinite linear;
    animation: maskedAnimation var(--rd) infinite linear;
}
@keyframes maskedAnimation {
    0% { background-position: 0 0; }                /* 动画起始位置 */
    100% { background-position: -100% 0; }          /* 动画结束位置 */
}
/* 无障碍适配：减少动画 */
@media (prefers-reduced-motion: reduce) {
    .item-heading :hover,
    .text-ellipsis :hover,
    .text-ellipsis-2 :hover,
    .links-lists :hover {
        animation: none;
        -webkit-animation: none;
    }
}
/* 无障碍适配：高对比度 */
@media (prefers-contrast: high) {
    .item-heading :hover,
    .text-ellipsis :hover,
    .text-ellipsis-2 :hover,
    .links-lists :hover {
        color: #06c !important;
        background: none !important;
        text-decoration: underline;
    }
}

 霓虹发光特效（科技感十足）

蓝色霓虹灯效果，适合科技类和游戏类网站

/* 文章标题霓虹灯发光效果:多层阴影营造发光感+闪烁动画 */
.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{color:#fff;text-shadow:0 0 5px #00f3ff,0 0 10px #00f3ff,0 0 20px #00f3ff,0 0 40px #00f3ff;animation:neon-flicker 2s infinite alternate}@keyframes neon-flicker{0%,100%{opacity:1}50%{opacity:0.8}}

呼吸发光效果（温和优雅）

红色光晕周期变化，适合情感类和生活类博客

/* 文章标题呼吸发光特效:光晕强度周期变化+温和节奏 */
.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{color:#ff6b6b;animation:breathe-glow 3s ease-in-out infinite}@keyframes breathe-glow{0%,100%{text-shadow:0 0 5px #ff6b6b}50%{text-shadow:0 0 20px #ff6b6b,0 0 30px #ff6b6b}}

 旋转彩虹（炫彩夺目）

色相旋转变化，适合创意类和设计类网站

/* 文章标题旋转彩虹特效:色相旋转+七彩光谱+2秒循环 */
.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{background:linear-gradient(45deg,#f00,#ff7f00,#ff0,#0f0,#00f,#4b0082,#9400d3);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow-rotate 2s linear infinite}@keyframes rainbow-rotate{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

故障风格（赛博朋克）

RGB分离抖动效果，适合科幻类和技术类网站

/* 文章标题故障风格特效:RGB分离+抖动+赛博朋克风格+完整版 */
.item-heading :hover,.text-ellipsis :hover,.text-ellipsis-2 :hover,.links-lists :hover{position:relative;color:#fff;animation:glitch-effect 0.5s infinite;text-shadow:2px 0 #f00,-2px 0 #0ff}@keyframes glitch-effect{0%,100%{transform:translate(0)}10%{transform:translate(-2px,-1px)}20%{transform:translate(-1px,2px)}30%{transform:translate(1px,1px)}40%{transform:translate(2px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(-1px,1px)}70%{transform:translate(2px,1px)}80%{transform:translate(-2px,-1px)}90%{transform:translate(1px,2px)}}

写在最后

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

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