Color Trail Cursor Animation
Home
Snippets
Color Trail Cursor Animation
HTML
CSS
JS
<body></body>
body { margin: 0; background: #111; overflow: hidden; } .trail { position: absolute; width: 12px; height: 12px; background: hsl(0, 100%, 50%); border-radius: 50%; pointer-events: none; animation: fadeOut 1s forwards; } @keyframes fadeOut { to { opacity: 0; transform: scale(0.5); } }
let hue = 0; document.addEventListener("mousemove", (e) => { const dot = document.createElement("div"); dot.classList.add("trail"); dot.style.left = `${e.clientX}px`; dot.style.top = `${e.clientY}px`; dot.style.background = `hsl(${hue}, 100%, 50%)`; document.body.appendChild(dot); hue += 10; setTimeout(() => dot.remove(), 1000); });
Ad #1
Ad #2
Scroll to Top