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

ハイライトスイープ見出し

ホバーすると斜めの光の帯が見出しの上を一瞬で通過するハイライト演出。プレミアムプラン名やアワード表記に高級感を添えます。

hovercss

プレビュー

ソースコード

HTML

<h4 class="d02-01-24-h">PREMIUM PLAN</h4>

CSS

.prev.d02-01-24{ background:#111827; }
        .d02-01-24 .d02-01-24-h{
          position:relative;
          display:inline-block;
          font-size:30px;
          font-weight:800;
          letter-spacing:.06em;
          color:#f8fafc;
          overflow:hidden;
        }
        .d02-01-24 .d02-01-24-h::after{
          content:"";
          position:absolute;
          top:0; left:-150%;
          width:60%;
          height:100%;
          background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
          transform:skewX(-20deg);
        }
        .d02-01-24 .d02-01-24-h:hover::after{
          animation:d02-01-24-sweep .9s ease forwards;
        }
        @keyframes d02-01-24-sweep{
          from{ left:-150%; }
          to{ left:150%; }
        }

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