グロウ・グラデ枠カード
枠を光のグラデーションがぐるぐる回る、Linear風のカード。@property で角度を滑らかにアニメーションし、ホバーで一段まぶしくなる。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- 新機能・注目プランのカードを目立たせる
- ダーク基調のプロダクトサイト
- 1画面に1つだけ置くアクセント
- 避ける場面
- 一覧の全カードに付ける（どれも目立たない）
- 明るい背景（発光が見えない）
- @property 非対応ブラウザで動きが必須
- 構成要素
- 回る光の枠
- 背面のにじみ
- カード本体
- キッカー
- 見出し・説明
- 持っている状態
- 通常
- ホバー
- キーボード
マウス・タッチ専用（ホバーで発光が強まるだけ）。装飾のため代替操作は不要
- 支援技術
枠の回転光は装飾で情報を持たない。カード内テキストがそのまま読み上げ対象。prefers-reduced-motion: reduce で回転を停止する
- 動き
conic-gradient の角度を @property で 2.4s linear 無限回転。ホバーで発光 300ms 強化。新しさ・注目を示す
デザインの要点
- 回すのは背景ではなく conic-gradient の角度。@property で <angle> と宣言しないと補間されず 0/360 で跳ぶ
- 枠は padding 4px のグラデ面に内側の暗い面を重ねて作る。border-image だと角丸で途切れる
- 同じグラデを ::before で背面にぼかして重ね、にじみを出す。枠だけでは細い線が回るだけで光に見えない
- 2.4s linear で回し、ホバーは影の強さだけ変える。回転速度まで変えると視線が枠に取られて中身が読めない
実装メモ
回る枠は @property --angle で角度を補間しています(Chrome/Edge/Safari対応、未対応ブラウザでは静止)。枠幅は padding、内側の色は .glow-inner の background で調整します。
コード（コピーして使えます）
<div class="glow-card">
<div class="glow-inner">
<p class="glow-kicker">NEW</p>
<p class="glow-title">Glow Border</p>
<p class="glow-desc">枠を光がめぐるカード</p>
</div>
</div>