入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。
.spotlight-card {
position: relative;
width: 640px;
height: 360px;
background: #1A1A1A;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
--x: 50%;
--y: 50%;
}
.spotlight-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle 240px at var(--x) var(--y),
rgba(233, 27, 137, 0.45),
transparent 60%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.spotlight-card:hover::before { opacity: 1; }
.spotlight-text {
font-family: 'Oswald', sans-serif;
font-size: 4rem;
font-weight: 600;
letter-spacing: 0.15em;
color: #FAFAFA;
z-index: 1;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.spotlight-card::before { transition: none; }
}const card = document.querySelector('.spotlight-card');
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
card.style.setProperty('--x', x + '%');
card.style.setProperty('--y', y + '%');
});※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
マウスカーソル位置に円形のハイライトが追従する。暗い空間に光が差し込み、視線の中心を明示する。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ナビゲーション・リンク・サムネイル・カードなど、マウスを乗せた要素のフィードバックに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。