How to Build Animated Cursor Neon using HTML, CSS and JavaScript? - Coding

The neon cursor moves with your mouse, creating a cool visual effect. You can change the neon color to match your website. You can also adjust how bright and wide the neon glow is to fit your style. You can transform your cursor into a bright neon trail. You can choose different colors, adjust the glow, and set the trail length. It’s perfect for dark backgrounds and won’t slow down your website.

Prerequisite

Approach

To create an animated neon cursor, begin by designing your HTML with a ‘div’ for the cursor and another for the content. In the CSS, give the cursor a neon effect using ‘border’, ‘box-shadow’, and ‘animation’, and add a ‘pulse’ keyframe to make it glow. Finally, use JavaScript to follow the mouse with the ‘mousemove’ event, adjusting the cursor’s position based on where the mouse is to make it follow smoothly.

Example: This example illustrates the creation of an Animated Cursor Neon using HTML, CSS, & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Neon Cursor</title>
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="container">
        <div id="title">
            <h1>NEON<br />CURSOR</h1>
        </div>
    </div>
    <div id="neon-cursor"></div>
    <script src="script.js"></script>
</body>

</html>

CSS

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    font-family: 'Montserrat', sans-serif;
}

#container {
    text-align: center;
}

#title {
    color: #fff;
    font-size: 4em;
}

#neon-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid #0ff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff;
    transition: transform 0.1s, box-shadow 0.1s;
    transform: translate(-50%, -50%);
}

JavaScript

document.addEventListener('mousemove', (e) => {
    const cursor = document.getElementById('neon-cursor');
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
});

Output:

Reffered: https://www.geeksforgeeks.org

CSS

Related
How To Use Inline Styles in ReactJS?
CSS Navigation Bar
Modern CSS Features You Need to Know in 2024
How To Style a Table with CSS?
How to Change the Checked Mark Color of a Checkbox using CSS?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	23