パーツ番号 02-17-08 ・ CSSのみ

ハイライトスイープ連鎖見出しセット

カーソルを乗せると、斜めの光の帯がh2・h3・h4の上を0.15秒刻みでリレーのように通過していく。単体のホバーではなく3レベルが連動する見せ方なので、事例紹介セクションの導入に高級感を添える。

hovercss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">導入事例</p>
          <p class="lv3">製造業のお客様</p>
          <p class="lv4">課題と成果</p>
        </div>

CSS

.d02-17-08 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-08 .lv2,.d02-17-08 .lv3,.d02-17-08 .lv4{ margin:0; position:relative; display:inline-block; overflow:hidden; }
        .d02-17-08 .lv2::after,.d02-17-08 .lv3::after,.d02-17-08 .lv4::after{ content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%); transform:skewX(-20deg); }
        .d02-17-08 .lv2{ font-size:22px; font-weight:800; color:#1e1b4b; }
        .d02-17-08 .lv3{ font-size:17px; font-weight:700; color:#312e81; padding-left:14px; }
        .d02-17-08 .lv4{ font-size:14px; font-weight:700; color:#4338ca; padding-left:28px; }
        .d02-17-08 .set:hover .lv2::after{ animation:d02-17-08-sweep .8s ease forwards; }
        .d02-17-08 .set:hover .lv3::after{ animation:d02-17-08-sweep .8s ease forwards .15s; }
        .d02-17-08 .set:hover .lv4::after{ animation:d02-17-08-sweep .8s ease forwards .3s; }
        @keyframes d02-17-08-sweep{ from{ left:-150%; } to{ left:150%; } }

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