光る枠カード（ホバー）
濃紺の背景に置くと、ホバーした瞬間にカードの輪郭が虹色に光って回り出す、テック系で人気の枠グローです。枠線そのものを光らせる定番テクニックを使っていて、 ::before に conic-gradient （円錐グラデーション）で多色の縁を敷き、 mask と mask-composite: exclude で中央…
解説
濃紺の背景に置くと、ホバーした瞬間にカードの輪郭が虹色に光って回り出す、テック系で人気の枠グローです。枠線そのものを光らせる定番テクニックを使っていて、::before に conic-gradient（円錐グラデーション）で多色の縁を敷き、mask と mask-composite: exclude で中央をくり抜き、外周の細い枠だけを残しています。通常時は opacity: 0 で隠れていて、ホバーで現れると同時に animation でグラデーションが回転し、光が枠を巡るように見えます。内側のコンテンツは別レイヤーなので、光は文字に干渉しません。
こんな用途に
- SaaS の料金表で上位プランを目立たせるハイライト枠
- ダークテーマのダッシュボードやポートフォリオのカード
- 新機能・おすすめを示すバッジ的な強調枠
光の色は conic-gradient に並べた色を入れ替えるだけで自由に変えられ、回転の速さは animation の秒数で決まります。背景が明るいページでは効果が見えにくいので、内側 gl-card__in を暗い色に保つのがコツです。注意点として、mask-composite は比較的新しい記法で、古いブラウザでは枠が出ないことがあります。常時回転は視覚的に強いので、prefers-reduced-motion でアニメーションを止める分岐を入れておくと安心です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
光る枠の色を自分のブランドカラーにできますか？
できます。before の conic-gradient に並んでいる色を、ブランドに合わせた値へ書き換えてください。最初と最後の色を同じにしておくと、回転したときに継ぎ目が目立たず滑らかにつながります。回転スピードはアニメーションの秒数で調整します。
明るい背景のページでも使えますか？
使えますが、グローは暗い背景でいちばん映えます。内側カードの背景を暗い色に保てば、明るいページの中でも光の輪郭が浮き立ちます。逆に内側まで白くすると効果が薄れるため、カード内側だけ濃色にするのがおすすめです。