웹사이트에 Crazy Cursor 클릭 효과를 추가하세요..-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

웹사이트에 Crazy Cursor 클릭 효과를 추가하세요..

Patricia Arquette

Nov 13, 2024 pm 02:31 PM

Add Crazy Cursor Click Effect on your website..

클릭하면 마법이 보입니다!

깃허브

미리보기

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

로그인 후 복사

자바스크립트

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

로그인 후 복사

위 내용은 웹사이트에 Crazy Cursor 클릭 효과를 추가하세요..의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.