パーツ番号 02-09-04 ・ CSSのみ

点滅ネオンサイン風テキスト

実物のネオン管のように時折チカチカと明滅する演出です。WordPressの飲食店・バー・エンタメ系サイトの営業中表示やロゴ見出しに使えます。

cssdark

プレビュー

ソースコード

HTML

<h4 class="d02-09-04-txt">OPEN</h4>

CSS

.d02-09-04{background:#0d0d14}
        .d02-09-04-txt{margin:0;font-size:50px;font-weight:800;color:#fff;font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;
          text-shadow:0 0 6px #ff2ecc,0 0 12px #ff2ecc,0 0 24px #ff2ecc,0 0 48px #b3009e;
          animation:d1054neon 4s infinite}
        @keyframes d1054neon{
          0%,3%,6%,7%,9%,100%{opacity:1;text-shadow:0 0 6px #ff2ecc,0 0 12px #ff2ecc,0 0 24px #ff2ecc,0 0 48px #b3009e}
          4%,5%,8%{opacity:.3;text-shadow:none}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-09-04-txt{animation:none;opacity:1}
        }

クラス名 .d02-09-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。