😀🎈🎉
🎨🚀💥
🌟🐱👤
Click Me!
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Fun App</title>
<style>
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; overflow: hidden; border: 2px solid black; margin: auto;">
<canvas id="canvas1" width="400" height="400" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
<canvas id="canvas2" width="400" height="400" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>
<div style="position: absolute; bottom: 10px; left: 10px; font-size: 24px; animation: bounce 2s infinite;">
😀🎈🎉
</div>
<div style="position: absolute; bottom: 10px; right: 10px; font-size: 24px; animation: spin 5s linear infinite;">
🎨🚀💥
</div>
<div style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 24px; animation: wiggle 2s infinite;">
🌟🐱👤
</div>
<div id="clickMe" style="position: absolute; top: 50%; left: 50%; width: 100px; height: 50px; text-align: center; line-height: 50px; background: yellow; border: 2px solid red; transform: translate(-50%, -50%); cursor: pointer; animation: pop 2s infinite;">
Click Me!
</div>
</div>
<script>
const image1 = new Image();
const image2 = new Image();
image1.src = "image1.png";
image2.src = "image2.png";
image1.onload = () => {
const canvas1 = document.getElementById('canvas1');
const ctx1 = canvas1.getContext('2d');
ctx1.drawImage(image1, 0, 0, 400, 400);
let imageData1 = ctx1.getImageData(0, 0, 400, 400);
for (let i = 0; i < imageData1.data.length; i += 4) {
if (imageData1.data[i] > 200 && imageData1.data[i + 1] > 200 && imageData1.data[i + 2] > 200) {
imageData1.data[i + 3] = 0;
} else {
imageData1.data[i] = 255;
imageData1.data[i + 1] = 0;
imageData1.data[i + 2] = 0;
}
}
ctx1.putImageData(imageData1, 0, 0);
};
image2.onload = () => {
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');
ctx2.drawImage(image2, 0, 0, 400, 400);
let imageData2 = ctx2.getImageData(0, 0, 400, 400);
for (let i = 0; i < imageData2.data.length; i += 4) {
if (imageData2.data[i] > 200 && imageData2.data[i + 1] > 200 && imageData2.data[i + 2] > 200) {
imageData2.data[i + 3] = 0;
} else {
imageData2.data[i] = 0;
imageData2.data[i + 1] = 0;
imageData2.data[i + 2] = 255;
}
}
ctx2.putImageData(imageData2, 0, 0);
};
document.getElementById('clickMe').addEventListener('click', () => {
alert('🎉 Hooray! You clicked the button! 🎉');
});
</script>
</body>
</html>
```