パーツ番号 03-14-06 ・ CSSのみ

区切り矢印アニメーションパンくず

階層名にホバーすると直後の矢印区切りが弾むように動き、次の階層への視線誘導になります。WordPressのシンプルなパンくずに軽いアクセントを加えられます。

hovercss

プレビュー

ソースコード

HTML

<nav class="d03-14-06-bc" aria-label="パンくずリスト">
          <a href="#" onclick="return false">ホーム</a>
          <span class="d03-14-06-sep">❯</span>
          <a href="#" onclick="return false">サービス</a>
          <span class="d03-14-06-sep">❯</span>
          <a href="#" onclick="return false">Web制作</a>
          <span class="d03-14-06-sep">❯</span>
          <span class="d03-14-06-current">料金プラン</span>
        </nav>

CSS

.d03-14-06-bc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-06-bc a{color:#475569;text-decoration:none;font-weight:600;transition:color .25s ease}
        .d03-14-06-bc a:hover{color:#2563eb}
        .d03-14-06-current{color:#0f172a;font-weight:700}
        .d03-14-06-sep{display:inline-block;color:#cbd5e1;font-size:11px;transition:transform .25s ease,color .25s ease}
        .d03-14-06-bc a:hover + .d03-14-06-sep{color:#2563eb;animation:d03-14-06-bounce .7s ease infinite}
        @keyframes d03-14-06-bounce{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

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