文字像波浪一样上下起伏,颜色同步切换
← 返回 文字 类特效列表上方为纯 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}}<div class="fx">
<div class="wv"><span>波</span><span>浪</span><span>起</span><span>伏</span><span>文</span><span>字</span></div>
</div>