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

走査線ノイズテキスト

文字の上を水平のノイズ線が流れ続け、時折フリッカーします。WordPressのサイバーパンク系・ゲーム紹介サイトのセクション見出しに近未来的な雰囲気を加えられます。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-09-02-txt">SCANLINE</h4>
        <div class="d02-09-02-lines"></div>

CSS

.d02-09-02{background:#001a12;position:relative}
        .d02-09-02-txt{margin:0;font-size:36px;font-weight:900;color:#4ade80;font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;position:relative;z-index:1;animation:d1052flicker 4s infinite}
        .d02-09-02-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);animation:d1052scan 5s linear infinite;pointer-events:none}
        @keyframes d1052scan{0%{background-position-y:0}100%{background-position-y:120px}}
        @keyframes d1052flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.55}97%{opacity:1}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-02-lines{animation:none}
          .d02-09-02-txt{animation:none}
        }

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