DEMO
CODE
<div class="demo-stage csp-stage"><div class="csp-card"><span>HOVER OVER ME</span></div></div>
.csp-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; }
.csp-card { position:relative; width:260px; height:170px; border-radius:16px; background:#1A1A1A; border:1px solid rgba(255,255,255,.08); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.9rem; }
.csp-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle 140px at var(--mx,-200px) var(--my,-200px),rgba(233,27,137,.4),transparent 70%); opacity:0; transition:opacity .3s; }
.csp-card:hover::before { opacity:1; }
.csp-card span { position:relative; }
(function(){
var card = document.querySelector('.csp-card');
if(!card) return;
card.addEventListener('mousemove', function(e){
var r = card.getBoundingClientRect();
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
});
})();
AI PROMPT
カード上でカーソルを追うスポットライトが表面を照らすホバーエフェクトを作って。カードの ::before に radial-gradient(circle 140px at var(--mx) var(--my), accent, transparent 70%) を置き、初期 opacity:0、:hover で opacity:1。mousemoveで getBoundingClientRect から相対座標を取り CSS変数 --mx/--my を更新。overflow:hidden で角を切る。価格表・特徴カードを上質に見せる。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
カード上でカーソルを追う柔らかなスポットライトが表面を照らすホバーエフェクト。価格表・特徴カードを上質に見せる。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。