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

CRTモニターにじみテキスト

走査線とにじみ(ブルーム)を伴い、上下にわずかにロールする古いテレビ画面のような演出です。WordPressのレトロ・アーケード風コンセプトサイトの見出しに使えます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-09-10-txt">RETRO TV</h4>
        <div class="d02-09-10-scan"></div>

CSS

.d02-09-10{background:#020604;position:relative}
        .d02-09-10-txt{margin:0;font-size:30px;font-weight:900;color:#8bffb0;font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;
          position:relative;z-index:1;text-shadow:0 0 4px #8bffb0,0 0 12px rgba(139,255,176,.6),0 0 24px rgba(139,255,176,.35);
          animation:d1060roll 6s ease-in-out infinite}
        .d02-09-10-scan{position:absolute;inset:0;pointer-events:none;
          background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px);
          mix-blend-mode:multiply}
        @keyframes d1060roll{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}92%{opacity:1}93%{opacity:.6}94%{opacity:1}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-10-txt{animation:none}
        }

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