Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1236"><a class="map" href="#tb1236"><span class="head"><small>HOW WE WORK</small><b>From idea to launch</b></span><span class="route"><span class="rail" aria-hidden="true"></span><span class="point"><i>01</i><small>Plan</small></span><span class="point"><i>02</i><small>Build</small></span><span class="point"><i>03</i><small>Launch</small></span></span></a></div>CSS
.tbx-1236{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1236 * ,.tbx-1236 *::before,.tbx-1236 *::after{box-sizing:border-box}
.tbx-1236{background:#e4eced}.tbx-1236 .map{display:grid;gap:23px;width:min(100%,319px);height:158px;background:#173d53;color:#fff;text-decoration:none;padding:20px;border-radius:9px;overflow:hidden}.tbx-1236 .head{display:grid;gap:5px}.tbx-1236 .head small{font:800 9px system-ui;letter-spacing:.17em;color:#7db4be}.tbx-1236 .head b{font-size:17px}.tbx-1236 .route{display:flex;justify-content:space-between;position:relative;isolation:isolate;align-items:start}.tbx-1236 .rail{position:absolute;z-index:-1;left:15px;right:15px;top:15px;height:3px;background:#89b3ba44;overflow:hidden}.tbx-1236 .rail::after{content:"";display:block;background:#ffc96c;width:100%;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .55s}.tbx-1236 .point{display:grid;justify-items:center;gap:7px}.tbx-1236 .point i{font-style:normal;background:#285771;color:#fff;border:2px solid #87b2be;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;font-size:11px;font-weight:800;transition:background .3s,transform .3s}.tbx-1236 .point small{font-size:11px;color:#c9e1e9;opacity:.55;transform:translateY(5px);transition:all .4s}.tbx-1236 .map:is(:hover,:focus-visible) .rail::after{transform:scaleX(1)}.tbx-1236 .map:is(:hover,:focus-visible) .point i{background:#e6aa52;color:#173d53;transform:translateY(-2px)}.tbx-1236 .map:is(:hover,:focus-visible) .point small{opacity:1;transform:translateY(0)}.tbx-1236 .map:focus-visible{outline:3px solid #e6aa52;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1236 *, .tbx-1236 *::before,.tbx-1236 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Corporate, Services
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。