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

静電ノイズホバーテキスト

マウスを乗せると文字が微振動し、砂嵐のようなノイズが重なって表示されます。WordPressの製品紹介カードやボタン周りのインタラクションにデジタルな緊張感を加えられます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-09-05-txt">STATIC</h4>
        <div class="d02-09-05-noise"></div>

CSS

.d02-09-05{background:#111;cursor:pointer}
        .d02-09-05-txt{margin:0;font-size:38px;font-weight:900;color:#e5e7eb;font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;position:relative;z-index:1}
        .d02-09-05:hover .d02-09-05-txt{animation:d1055jit .15s steps(2) infinite}
        .d02-09-05-noise{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .1s;
          background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),
            repeating-radial-gradient(circle at 70% 80%,rgba(255,255,255,.14) 0 1px,transparent 1px 3px);
          mix-blend-mode:overlay}
        .d02-09-05:hover .d02-09-05-noise{opacity:1;animation:d1055static .12s steps(1) infinite}
        @keyframes d1055jit{0%{transform:translate(0,0)}50%{transform:translate(-2px,1px)}100%{transform:translate(2px,-1px)}}
        @keyframes d1055static{0%{background-position:0 0,0 0}100%{background-position:37px 19px,-23px 11px}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-05:hover .d02-09-05-txt{animation:none}
          .d02-09-05:hover .d02-09-05-noise{animation:none;opacity:.4}
        }

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