Heim >Web-Frontend >CSS-Tutorial >Fügen Sie Ihrer Website den Crazy Cursor Click-Effekt hinzu.
Fügen Sie Ihrer Website den Crazy Cursor Click-Effekt hinzu.
- Patricia ArquetteOriginal
- 2024-11-13 14:31:02777Durchsuche
Klicken Sie und sehen Sie Magie!
Github
Vorschau
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>
<p><strong>CSS</strong><br>
</p>
<pre class="brush:php;toolbar:false">* {
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);
});
});
Das obige ist der detaillierte Inhalt vonFügen Sie Ihrer Website den Crazy Cursor Click-Effekt hinzu.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Können wir benutzerdefinierte CSS-Eigenschaften verwenden, um Werte von übergeordneten Elementen zu erben?Nächster Artikel：Können wir benutzerdefinierte CSS-Eigenschaften verwenden, um Werte von übergeordneten Elementen zu erben?