Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1137" href="#landscapes" aria-label="風景作品を見る"><span class="tbx-1137__land"><i class="tbx-1137__sun"></i><i class="tbx-1137__hill"></i><i class="tbx-1137__hill2"></i></span><span class="tbx-1137__slats" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="tbx-1137__caption">LANDSCAPE <b>↗</b></span></a>CSS
.tbx-1137{position:relative;display:block;width:min(290px,100%);height:190px;background:#75b0bf;color:#fff;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden;border-radius:11px;isolation:isolate}
.tbx-1137__land{position:absolute;inset:0;background:linear-gradient(180deg,#efc9aa,#f9dbc2 52%,#648f89 52%)}.tbx-1137__sun{position:absolute;top:27px;right:52px;width:54px;height:54px;background:#fff1b8;border-radius:50%}.tbx-1137__hill{position:absolute;bottom:-25px;left:-35px;width:220px;height:119px;background:#456d73;clip-path:polygon(0 100%,51% 0,100% 100%)}.tbx-1137__hill2{position:absolute;bottom:-20px;right:-30px;width:220px;height:115px;background:#285564;clip-path:polygon(0 100%,58% 10%,100% 100%)}
.tbx-1137__slats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr)}.tbx-1137__slats i{background:linear-gradient(160deg,#193d58 0%,#3c7791 60%,#14384e);box-shadow:inset 1px 0 #f5ffff1b;transform:scaleY(1);transform-origin:top;transition:transform .48s cubic-bezier(.65,0,.25,1)}
.tbx-1137__slats i:nth-child(2){transition-delay:.035s}.tbx-1137__slats i:nth-child(3){transition-delay:.07s}.tbx-1137__slats i:nth-child(4){transition-delay:.105s}.tbx-1137__slats i:nth-child(5){transition-delay:.14s}.tbx-1137__slats i:nth-child(6){transition-delay:.175s}.tbx-1137__slats i:nth-child(7){transition-delay:.21s}.tbx-1137__slats i:nth-child(8){transition-delay:.245s}
.tbx-1137__caption{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.1em;text-shadow:0 1px 4px #132e44}
.tbx-1137:is(:hover,:focus-visible) .tbx-1137__slats i{transform:scaleY(0)}.tbx-1137:focus-visible{outline:3px solid #ca915e;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1137, .tbx-1137 *, .tbx-1137::before, .tbx-1137::after, .tbx-1137 *::before, .tbx-1137 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。