波浪起伏文字 · 文字
前端Wiki/CSS 特效合集/波浪起伏文字

波浪起伏文字

文字像波浪一样上下起伏,颜色同步切换

← 返回 文字 类特效列表
波浪起伏文字

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

CSS 代码

CSS
.fx .wv{text-align:center;font-size:38px;font-weight:700;margin:50px 0}
.fx .wv span{display:inline-block;animation:kfx-wv 1.6s ease-in-out infinite}
.fx .wv span:nth-child(2){animation-delay:.12s}
.fx .wv span:nth-child(3){animation-delay:.24s}
.fx .wv span:nth-child(4){animation-delay:.36s}
.fx .wv span:nth-child(5){animation-delay:.48s}
.fx .wv span:nth-child(6){animation-delay:.6s}
@keyframes kfx-wv{0%,100%{transform:translateY(0);color:#4a9eff}50%{transform:translateY(-14px);color:#f778ba}}

HTML 结构

HTML
<div class="fx">
<div class="wv"><span>波</span><span>浪</span><span>起</span><span>伏</span><span>文</span><span>字</span></div>
</div>
实现要点:逐字 delay 形成相位差 + translateY 正弦式起伏

其它文字类特效

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