空心描边文字 · 文字
前端Wiki/CSS 特效合集/空心描边文字

空心描边文字

只有描边的描边字，悬停时填色变实心

← 返回 文字 类特效列表
悬停变实心

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

CSS 代码

CSS
.fx .outline{text-align:center;font-size:56px;font-weight:900;margin:36px 0;color:transparent;-webkit-text-stroke:2px #f778ba;transition:color .4s}
.fx .outline:hover{color:#f778ba}

HTML 结构

HTML
<div class="fx">
<div class="outline">悬停变实心</div>
</div>
实现要点：空心 = text-stroke 描边 + color:transparent；悬停填色

其它文字类特效

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