彩虹流动文字 · 文字
前端Wiki/CSS 特效合集/彩虹流动文字

彩虹流动文字

彩虹渐变在文字上持续流淌,循环无接缝

← 返回 文字 类特效列表
彩虹流动 RAINBOW

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .rainbow{text-align:center;font-size:48px;font-weight:800;margin:50px 0;background:linear-gradient(90deg,#f778ba,#e78a3e,#57ab5a,#4a9eff,#a371f7,#f778ba);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:kfx-flow 3s linear infinite}
@keyframes kfx-flow{to{background-position:300% 0}}

HTML 结构

HTML
<div class="fx">
<div class="rainbow">彩虹流动 RAINBOW</div>
</div>
实现要点:流光文字 = 300% 渐变 + 持续平移 background-position + background-clip:text

其它文字类特效

回到 前端Wiki 首页 · CSS 特效合集