ウェブサイトにクレイジーカーソルクリック効果を追加します。-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ウェブサイトにクレイジーカーソルクリック効果を追加します。

Patricia Arquette

Nov 13, 2024 pm 02:31 PM

Add Crazy Cursor Click Effect on your website..

クリックして魔法を見てください!

Github

プレビュー

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

ログイン後にコピー

以上がウェブサイトにクレイジーカーソルクリック効果を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。