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

電波障害ホバーグリッチ

通常時は静止した文字が、ホバー時のみ電波障害のような断続的なRGBずれとジッターを起こします。WordPressのカードやボタンに仕込むとホバーインタラクションとして注目を集められます。

hoverautocss

プレビュー

ソースコード

HTML

<h4 class="d02-09-09-txt" data-text="NO SIGNAL">NO SIGNAL</h4>

CSS

.d02-09-09{background:#0a0a0f;cursor:pointer}
        .d02-09-09-txt{position:relative;margin:0;font-size:26px;font-weight:900;color:#e5e7eb;letter-spacing:2px;font-family:ui-monospace,Menlo,monospace}
        .d02-09-09-txt::before,.d02-09-09-txt::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;animation-play-state:paused}
        .d02-09-09-txt::before{color:#00e5ff;left:3px;animation:d1059g1 .5s infinite linear}
        .d02-09-09-txt::after{color:#ff2d95;left:-3px;animation:d1059g2 .4s infinite linear}
        .d02-09-09:hover .d02-09-09-txt::before,.d02-09-09:hover .d02-09-09-txt::after{animation-play-state:running}
        .d02-09-09:hover .d02-09-09-txt{animation:d1059jit .18s steps(2) infinite}
        @keyframes d1059jit{0%{transform:translateX(0)}50%{transform:translateX(-3px)}100%{transform:translateX(3px)}}
        @keyframes d1059g1{0%,100%{clip-path:inset(15% 0 70% 0)}50%{clip-path:inset(55% 0 10% 0)}}
        @keyframes d1059g2{0%,100%{clip-path:inset(60% 0 20% 0)}50%{clip-path:inset(10% 0 65% 0)}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-09:hover .d02-09-09-txt{animation:none}
          .d02-09-09:hover .d02-09-09-txt::before,.d02-09-09:hover .d02-09-09-txt::after{animation:none;opacity:.5}
        }

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