彩虹渐变在文字上持续流淌,循环无接缝
← 返回 文字 类特效列表上方为纯 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}}<div class="fx">
<div class="rainbow">彩虹流动 RAINBOW</div>
</div>