模糊聚焦文字 · 文字
前端Wiki/CSS 特效合集/模糊聚焦文字

模糊聚焦文字

默认毛玻璃模糊,悬停后逐渐聚焦清晰

← 返回 文字 类特效列表
悬停聚焦清晰

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

CSS 代码

CSS
.fx .blur2{text-align:center;font-size:42px;font-weight:800;margin:56px 0;color:#fff;filter:blur(12px);transition:filter .8s ease;cursor:default}
.fx .blur2:hover{filter:blur(0)}

HTML 结构

HTML
<div class="fx">
<div class="blur2">悬停聚焦清晰</div>
</div>
实现要点:filter:blur 大小过渡;hover 归零即聚焦

其它文字类特效

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