Maison > Article > interface Web > Ajoutez un effet de clic Crazy Cursor sur votre site Web.

Ajoutez un effet de clic Crazy Cursor sur votre site Web.

Patricia Arquetteoriginal: 2024-11-13 14:31:02716parcourir

Add Crazy Cursor Click Effect on your website..

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html github

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pouvons-nous utiliser des propriétés personnalisées CSS pour hériter des valeurs des éléments parents ?Article suivant：Pouvons-nous utiliser des propriétés personnalisées CSS pour hériter des valeurs des éléments parents ?

Articles Liés

Voir plus