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

ブラウン管風の歪みテキスト

古いブラウン管モニターのように文字がわずかに波打ち歪み続けます。WordPressのレトロゲーム・90年代テイストのランディングページの見出しに最適です。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-09-07-txt">CRT WARP</h4>
        <div class="d02-09-07-vignette"></div>

CSS

.d02-09-07{background:#0a0f0a}
        .d02-09-07-txt{margin:0;font-size:32px;font-weight:900;color:#c8ffb0;font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;
          text-shadow:0 0 3px rgba(200,255,176,.7);position:relative;z-index:1;
          animation:d1057warp 3.2s ease-in-out infinite}
        .d02-09-07-vignette{position:absolute;inset:0;pointer-events:none;
          background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%),
            repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px)}
        @keyframes d1057warp{
          0%,100%{transform:scaleY(1) skewX(0deg)}
          20%{transform:scaleY(1.03) skewX(.6deg)}
          45%{transform:scaleY(.97) skewX(-.4deg)}
          70%{transform:scaleY(1.02) skewX(.3deg)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-09-07-txt{animation:none}
        }

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