マウスの位置をJSで --mx --my に入れて、枠と面に光を当てています。カードを何枚並べても1つずつ光ります。
EFFECT
CSSエフェクト素材
マウスを乗せたときやクリックしたときの演出です。カードや画像、ボタンなど、いろいろな要素に付けて使えます。
12種類
backdrop-filter で後ろをぼかしています。後ろの丸い色は写真の代わりなので、背景を url(…) の画像に差し替えて使えます。
同じ文字を data-text に書き、赤と青にずらして重ねています。ふだんは静かで、数秒おきに一瞬だけ乱れます。
押した位置に丸い波紋を出して、広がり終わったら消しています。.cs-ef04 を付ければボタン以外(カードなど)でも使えます。
マウスの位置に合わせてカードが傾き、表面に光が映ります。傾きの大きさは --cs-tilt です。スマホでは傾きません。
ぼかさない影を斜めに伸ばして、カードが持ち上がったように見せます。リンクのカードに向いています。
上→右、下→左の順に線が伸びて、四角い枠が描かれます。2つの疑似要素の幅と高さを順番に伸ばしています。
暗い面のうち、マウスの周りだけが明るく見えます。スマホでは指でなぞると動きます。最初は中央を照らしています。
ふだんは消えているネオン管が、マウスを乗せると一瞬チカッとしてから灯ります。暗い背景向けです。
右下の角が紙のようにめくれます。めくれた後ろは透けて背景が見えます。@property 非対応の古いブラウザでは、めくれた状態で止まって表示されます。
:has() で「どれかにマウスが乗っている」ことを見て、それ以外を薄くぼかします。メニューやカードの一覧に。
ボタンの近くでマウスを動かすと、磁石のように少しついてきます。外れるとなめらかに戻ります。強さは JS の .3 で変えられます。