弹性拉伸文字 · 文字
前端Wiki/CSS 特效合集/弹性拉伸文字

弹性拉伸文字

悬停时字间距瞬间拉开，文字像被拉伸的橡皮筋

← 返回 文字 类特效列表
STRETCH

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

CSS 代码

CSS
.fx .stretch{text-align:center;font-size:40px;font-weight:800;margin:56px 0;color:#fff;letter-spacing:4px;transition:letter-spacing .5s cubic-bezier(.34,1.56,.64,1),color .5s}
.fx .stretch:hover{letter-spacing:24px;color:#f778ba}

HTML 结构

HTML
<div class="fx">
<div class="stretch">STRETCH</div>
</div>
实现要点：letter-spacing 配合过冲缓动过渡；悬停变色增强对比

其它文字类特效

文字渐变文字文字空心描边文字文字3D 悬浮文字文字打字机效果文字文字逐字浮现文字彩虹流动文字
回到 前端Wiki 首页 · CSS 特效合集