Professional Animated Cursor Effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Animated Cursor Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #121212;
            color: #ffffff;
            font-family: 'Arial', sans-serif;
            cursor: none;
        }
        .cursor {
            position: absolute;
            width: 30px;
            height: 30px;
            background: radial-gradient(circle, #ffbb00 30%, rgba(255,187,0,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: difference;
            animation: cursorAnimation 1s infinite alternate;
            transition: transform 0.1s ease-in-out;
        }
        .cursor::before, .cursor::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: pulseAnimation 1.5s infinite ease-in-out;
        }
        .cursor::before {
            background: rgba(255, 255, 255, 0.6);
            animation-delay: 0.5s;
        }
        .cursor::after {
            background: rgba(255, 255, 255, 0.3);
            animation-delay: 1s;
        }
        .emoji {
            position: absolute;
            font-size: 2rem;
            animation: floatAnimation 3s infinite ease-in-out;
            transition: transform 0.1s ease-in-out;
            pointer-events: none;
        }
        @keyframes cursorAnimation {
            0% { transform: scale(1); }
            100% { transform: scale(1.2); }
        }
        @keyframes pulseAnimation {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        @keyframes floatAnimation {
            0%, 100% { transform: translateY(-20px); }
            50% { transform: translateY(20px); }
        }
    </style>
</head>
<body>
    <div class="cursor" id="cursor"></div>
    <script>
        document.addEventListener('mousemove', (e) => {
            const cursor = document.getElementById('cursor');
            const emoji = document.getElementById('emoji');
            cursor.style.left = `${e.pageX - 15}px`;
            cursor.style.top = `${e.pageY - 15}px`;
            emoji.style.left = `${e.pageX + 20}px`;
            emoji.style.top = `${e.pageY + 20}px`;
        });
        document.addEventListener('mousedown', () => {
            const cursor = document.getElementById('cursor');
            const emoji = document.getElementById('emoji');
            cursor.style.transform = 'scale(0.8)';
            emoji.style.transform = 'scale(1.5)';
        });
        document.addEventListener('mouseup', () => {
            const cursor = document.getElementById('cursor');
            const emoji = document.getElementById('emoji');
            cursor.style.transform = 'scale(1.2)';
            emoji.style.transform = 'scale(1)';
        });
    </script>
</body>
</html>

Professional Animated Cursor Effect - MeggiTools