Home >Web Front-end >CSS Tutorial >Add Crazy Cursor Click Effect on your website..

Add Crazy Cursor Click Effect on your website..

Patricia ArquetteOriginal: 2024-11-13 14:31:02777browse

Click And See Magic !

Github

Preview

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);
    });
});

The above is the detailed content of Add Crazy Cursor Click Effect on your website... For more information, please follow other related articles on the PHP Chinese website!

JavaScript html github

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can We Use CSS Custom Properties to Inherit Values From Parent Elements?Next article：Can We Use CSS Custom Properties to Inherit Values From Parent Elements?

See more

Add Crazy Cursor Click Effect on your website..

Related articles