クリックした画像が溶けて消える展開を作成してみました。
ルート階層の中に・・・
picフォルダー（image.png）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>溶ける画像</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: turquoise;
}
/* .melting-imageクラスで画像の初期スタイルを設定。
transitionプロパティを使用して、
アニメーションを滑らかにするための時間（2秒）に設定。 */
.melting-image {
width: 300px;
cursor: pointer;
transition: transform 2s, opacity 2s, filter 2s;
}
/* .meltedクラスで画像クリック時に適用されるスタイルを指定。
transformプロパティにて画像を垂直方向に引き伸ばし、
下に移動させ、opacityを0にして透明にし、
filterプロパティでぼかし効果を加える。 */
.melting-image.melted {
transform: translateY(100px) scaleY(1.5);
opacity: 0;
filter: blur(20px);
}
</style>
</head>
<body>
<img src="pic/image.png"
alt="キャラクター" class="melting-image" id="image">
<script>
const image = document.getElementById('image');
/* addEventListenerで画像がクリックされたら、
meltedクラスを追加。
これで、CSSで指定されたアニメーションが実行。 */
image.addEventListener('click', function() {
this.classList.add('melted');
});
</script>
</body>
</html>
<!-- index.html -->
実際にクリック〜溶けて消える展開（ちょっと微妙）
