Click And See Magic !
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Diwali - Bomb Blast Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container" id="container">Click and See Magic</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #2c3e50, #4ca1af);
height: 100vh;
overflow: hidden;
color: white;
font-family: 'Arial', sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.container {
position: relative;
text-align: center; /* Center text */
font-size: 2em; /* Increase font size */
font-weight: bold; /* Make text bold */
color: #ffcc00; /* Text color */
text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.8); /* Add shadow for effect */
}
.bomb {
position: absolute;
width: 20px;
height: 20px;
background: #ffcc00;
border-radius: 50%;
animation: pulse 0.4s forwards;
}
.light {
position: absolute;
border-radius: 50%;
animation: lightSpread 1s forwards;
opacity: 0;
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes lightSpread {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('container');
container.addEventListener('click', (e) => {
// Create the bomb element
const bomb = document.createElement('div');
bomb.className = 'bomb';
bomb.style.left = e.clientX + 'px';
bomb.style.top = e.clientY + 'px';
container.appendChild(bomb);
// Create light effects
for (let i = 0; i < 10; i++) {
const light = document.createElement('div');
light.className = 'light';
light.style.left = e.clientX + 'px';
light.style.top = e.clientY + 'px';
light.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
light.style.width = Math.random() * 20 + 10 + 'px'; // Random width
light.style.height = light.style.width; // Keep it circular
// Set a random angle and distance for spreading lights
const angle = Math.random() * 2 * Math.PI; // Random angle
const distance = Math.random() * 200 + 50; // Random distance
light.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
container.appendChild(light);
// Remove the light effect after animation
setTimeout(() => {
light.remove();
}, 1000);
}
// Remove the bomb after animation
setTimeout(() => {
bomb.remove();
}, 400);
});
});
Top comments (0)