霓虹闪烁

像一根有点老化的灯管：亮起时会抖几下，平时稳定发光，偶尔又暗掉一拍。

CSS
文字
循环
收录于 2026-10-29

深夜营业

AI 提示词

用纯 CSS 制作霓虹灯文字效果。文字使用细体展示字体，并叠加多层 text-shadow 光晕（0 0 4px、0 0 12px、0 0 28px、0 0 56px，颜色为主色）。运行一个 4s 无限循环的 keyframe 动画，节奏要显得不规则：大部分时间完全点亮，在 8% 和 10% 附近快速暗两下，在 62% 到 66% 之间较长地暗下去，此时 opacity 降到 0.35 并去掉光晕。使用 linear 缓动，让暗下的瞬间干脆而不是渐变。元素离开屏幕时暂停动画。在 prefers-reduced-motion 下保留稳定的光晕，去掉闪烁。文字为“深夜营业”。

源代码

Demo.tsx

'use client'

import { useEffect, useRef } from 'react'
import s from './demo.module.css'

export default function NeonFlicker({ labels }: { labels: Record<string, string> }) {
  const ref = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    const el = ref.current
    if (!el) return
    const io = new IntersectionObserver(([e]) => el.toggleAttribute('data-paused', !e.isIntersecting))
    io.observe(el)
    return () => io.disconnect()
  }, [])

  return (
    <p ref={ref} className={s.sign}>
      {labels.text}
    </p>
  )
}

demo.module.css

.sign {
  --glow: var(--stage-accent);
  margin: 0;
  font: 300 clamp(2rem, 7vw, 2.75rem) / 1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--stage-ink);
  text-shadow: 0 0 4px var(--glow), 0 0 12px var(--glow), 0 0 28px var(--glow), 0 0 56px var(--glow);
  animation: flicker 4s linear infinite;
}

.sign[data-paused] { animation-play-state: paused; }

@keyframes flicker {
  0%, 7%, 9%, 11%, 61%, 67%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px var(--glow), 0 0 12px var(--glow), 0 0 28px var(--glow), 0 0 56px var(--glow);
  }
  8%, 10%, 62%, 66% { opacity: 0.35; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sign { animation: none; }
}