霓虹发光文字 · 文字
前端Wiki/CSS 特效合集/霓虹发光文字

霓虹发光文字

荧光蓝多层发光,偶尔像坏灯管一样闪烁

← 返回 文字 类特效列表
NEON

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

CSS 代码

CSS
.fx{background:#0b0e17;border-radius:10px}
.fx .nt{text-align:center;font-size:48px;font-weight:800;margin:50px 0;color:#fff;text-shadow:0 0 6px #61dafb,0 0 14px #61dafb,0 0 30px #61dafb,0 0 60px #03a9f4}
.fx .nt span{animation:kfx-flick 4s infinite}
@keyframes kfx-flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}

HTML 结构

HTML
<div class="fx">
<div class="nt"><span>NEON</span></div>
</div>
实现要点:霓虹文字 = 多层 text-shadow 外扩 + 周期性闪烁opacity

其它文字类特效

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