Neon Circle Cursor - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Circle Cursor</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #222; cursor: none; } .cursor { position: absolute; width: 15px; height: 15px; border: 3px solid #00ffff; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; } .cursor::before { content: ''; position: absolute; width: 200%; height: 200%; border: 3px solid #00ffff; border-radius: 50%; top: -50%; left: -50%; box-shadow: 0 0 30px #00ffff; animation: pulse 1.5s infinite ease-in-out; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } </style> </head> <body> <div class="cursor" id="cursor"></div> <script> document.addEventListener('mousemove', (e) => { const cursor = document.getElementById('cursor'); cursor.style.left = `${e.pageX}px`; cursor.style.top = `${e.pageY}px`; }); </script> </body> </html>