WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dégradé du curseur de la souris
1303
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 August 2025
Extrait de code d'animation CSS Heart
27 November 2024
Site Web de portfolio terminé
30 November 2024
Animations pilotées par défilement
HTML
Copy
Hover me
CSS
Copy
.mouse-cursor-gradient-tracking { position: relative; background: #7983ff; padding: 0.5rem 1rem; font-size: 1.2rem; border: none; color: white; cursor: pointer; outline: none; overflow: hidden; } .mouse-cursor-gradient-tracking span { position: relative; } .mouse-cursor-gradient-tracking::before { --size: 0; content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, pink, transparent); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } .mouse-cursor-gradient-tracking:hover::before { --size: 200px; }
JS
Copy
let btn = document.querySelector(".mouse-cursor-gradient-tracking"); btn.addEventListener("mousemove", (e) => { let rect = e.target.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; btn.style.setProperty("--x", x + "px"); btn.style.setProperty("--y", y + "px"); });