パーツ番号 02-01-36 ・ CSSのみ

アウトライントレース見出し

ホバーすると文字のアウトラインだけが左から右へネオンのように光のトレースで描かれていく演出。ゲーム・テック系サイトのボタン隣接見出しに。

hovercssdark

プレビュー

ソースコード

HTML

<h4 class="d02-01-36-h" data-text="OUTLINE TRACE">OUTLINE TRACE</h4>

CSS

.prev.d02-01-36{ background:#0d1117; }
        .d02-01-36 .d02-01-36-h{
          position:relative;
          font-size:28px;
          font-weight:800;
          letter-spacing:.08em;
          color:transparent;
          -webkit-text-stroke:1.5px #334155;
        }
        .d02-01-36 .d02-01-36-h::before{
          content:attr(data-text);
          position:absolute;
          inset:0;
          color:transparent;
          -webkit-text-stroke:1.5px #5eead4;
          -webkit-text-fill-color:transparent;
          clip-path:inset(0 100% 0 0);
        }
        .d02-01-36 .d02-01-36-h:hover::before{
          animation:d02-01-36-trace 1.4s linear forwards;
        }
        @keyframes d02-01-36-trace{
          to{ clip-path:inset(0 0 0 0); filter:drop-shadow(0 0 6px #5eead4); }
        }

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