ハートを押すと弾んで膨らむ「いいね」アニメーション。checkboxハックとオーバーシュートするイージングが鍵です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
チェック状態をCSSだけで扱うため、非表示のcheckboxと隣接セレクタ（:checked + .like）を使っています。弾む質感の正体はcubic-bezier(0.175, 0.885, 0.32, 1.4)——第4引数が1を超えると「行き過ぎて戻る」オーバーシュートになります。keyframesでも60%で1.3倍まで膨らませて仕上げの弾みを重ねています。
実務ではbutton要素+aria-pressedで実装し、:checkedの代わりに[aria-pressed="true"]で同じCSSを当てるとよりアクセシブルです。
この「いいね」ボタンを押したときに、ハートがぽんっと弾むアニメーションを付けて。:checkedかクラス切り替えで、scaleのkeyframesで。
いいねのポップに、ハートの周りに小さな粒子が飛び散る演出を追加して。CSSだけで。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。