グラデーション枠が回るカード
カードの枠線がカラフルなグラデーションで時計回りに回り続ける、プレミアム感を出す演出カードです。仕掛けは ::before 疑似要素にカードより大きい conic-gradient を敷き、 @keyframes で rotate(360deg) を無限ループさせる方式。
解説
カードの枠線がカラフルなグラデーションで時計回りに回り続ける、プレミアム感を出す演出カードです。仕掛けは ::before 疑似要素にカードより大きい conic-gradient を敷き、@keyframes で rotate(360deg) を無限ループさせる方式。その上に白い内側ボックスを重ねることで、回転する色が縁取りだけに見えます。isolation と z-index で重なり順を制御し、JavaScript なしで滑らかに回転します。
こんな場面で使えます
- 有料プランや会員限定機能への誘導カード
- キャンペーンや特典を目立たせたい CTA
- おすすめプランを 1 枚だけ際立たせたいとき
カスタマイズは conic-gradient に並べた色を入れ替えればブランドカラーの縁取りになり、animation の秒数を長くすると回転がゆったりします。枠の太さは外側の padding 値で決まります。注意点として常時アニメーションは目を引く反面うるさく感じられやすいので、ページ内で多用せず主役の 1 枚に絞るのが効果的です。回転を避けたいユーザー向けに prefers-reduced-motion で停止させる配慮も入れておきましょう。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
枠の色を自社のブランドカラーに変えられますか。
変えられます。回転する縁取りは conic-gradient に並べた色で作られているので、その色の並びを入れ替えればブランドカラーの枠にできます。2 色だけにするとシンプルに、4 色以上にすると華やかになります。
アニメーションは重くないですか。
回転は transform を使った GPU が得意な処理なので、1 枚であれば負荷はごく軽いです。ただし常時動くため視線を奪いやすく、ページ内では主役のカード 1 枚に絞り、動きを嫌う人向けに prefers-reduced-motion で止める配慮をすると安心です。