CSS怎样制作文字霓虹闪烁效果？animation动画循环-css教程-PHP中文网

CSS怎样制作文字霓虹闪烁效果？animation动画循环

蓮花仙者

发布： 2025-08-06 08:58:01

原创

531人浏览过

要优化霓虹效果的视觉表现，应选用粗壮的无衬线字体如arial black以增强光晕承载力；2. 使用深色背景如黑色或深灰来提升对比度，突出发光效果；3. 在text-shadow中分层使用颜色，内层用白色外层用霓虹色并增加扩散阴影以模拟真实光晕；4. 调整动画节奏，采用@keyframes中的不规则关键帧或steps()函数来模拟故障闪烁；5. 考虑性能时可添加will-change: text-shadow, color优化渲染。该方案在现代浏览器兼容性良好，但需注意不同设备上因渲染差异可能影响光晕细腻度，且多层阴影与持续动画可能在低端设备造成卡顿，建议减少阴影层数或简化动画以保障流畅性。霓虹效果不仅限于文字，还可应用于图标、按钮、边框及svg元素，通过box-shadow、伪元素或svg滤镜实现发光与动画，提升交互科技感。

CSS怎样制作文字霓虹闪烁效果？animation动画循环

想要让文字在网页上像霓虹灯一样闪烁，那种带着复古又有点赛博朋克的韵味，其实CSS完全可以做到。核心思路很简单：用多层

text-shadow

登录后复制

堆叠出光晕感，然后通过

@keyframes

登录后复制

动画让这些光晕或者文字颜色本身在不同状态间切换，形成那种忽明忽灭的闪烁效果。

解决方案

这里面的核心玩法，就是通过多层

text-shadow

登录后复制

来模拟霓虹灯那种由内而外逐渐扩散的光晕。你看，我用了好几层，从近到远，颜色也从白色过渡到霓虹色，这样层次感就出来了。动画部分，

@keyframes neon-flicker

登录后复制

定义了整个闪烁过程。我特意在50%那里让光晕和文字颜色稍微暗淡一点，甚至在51%的时候给了一个极短的“熄灭”状态，紧接着又在52%瞬间恢复，这样就能模拟出那种真实霓虹灯偶尔接触不良的“一闪而过”的感觉，而不是简单的渐变。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 霓虹闪烁效果</title>
    <style>
        body {
            background-color: #000; /* 深色背景更能衬托霓虹效果 */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden; /* 防止滚动条 */
            font-family: 'Arial Black', sans-serif; /* 粗体字体效果更好 */
        }

        .neon-text {
            font-size: 5em;
            color: #fff; /* 文字基础色，会被阴影覆盖部分 */
            text-align: center;
            /* 多层 text-shadow 模拟光晕 */
            text-shadow:
                0 0 7px #fff,    /* 最内层白光 */
                0 0 10px #fff,
                0 0 21px #fff,
                0 0 42px #0fa,   /* 霓虹主色光晕 */
                0 0 82px #0fa,
                0 0 92px #0fa,
                0 0 102px #0fa,
                0 0 151px #0fa;
            animation: neon-flicker 1.5s ease-in-out infinite alternate; /* 动画循环播放 */
        }

        @keyframes neon-flicker {
            0%, 100% {
                text-shadow:
                    0 0 7px #fff,
                    0 0 10px #fff,
                    0 0 21px #fff,
                    0 0 42px #0fa,
                    0 0 82px #0fa,
                    0 0 92px #0fa,
                    0 0 102px #0fa,
                    0 0 151px #0fa;
                color: #fff; /* 动画开始和结束时文字颜色 */
            }
            50% {
                text-shadow:
                    0 0 2px #fff, /* 稍微暗淡的内层光 */
                    0 0 5px #fff,
                    0 0 10px #fff,
                    0 0 20px #0fa, /* 霓虹主色光晕也稍微暗淡 */
                    0 0 40px #0fa,
                    0 0 45px #0fa,
                    0 0 50px #0fa,
                    0 0 75px #0fa;
                color: #ccc; /* 文字颜色变暗 */
            }
            51% { /* 模拟瞬间熄灭 */
                text-shadow: none;
                color: transparent;
            }
            52% { /* 瞬间恢复 */
                text-shadow:
                    0 0 7px #fff,
                    0 0 10px #fff,
                    0 0 21px #fff,
                    0 0 42px #0fa,
                    0 0 82px #0fa,
                    0 0 92px #0fa,
                    0 0 102px #0fa,
                    0 0 151px #0fa;
                color: #fff;
            }
        }
    </style>
</head>
<body>
    <div class="neon-text">霓虹闪烁</div>
</body>
</html>

登录后复制