Hình minh họa :
(Xem đầy đủ tại https://dnniscode.blogspot.com/)
<div class='cursor'>
<div class='inner-cursor'/>
</div>
<style>
.cursor {
position: fixed;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
border: 2px solid #d1cfcf;
pointer-events: none;
z-index: 9999;
}
.inner-cursor {
position: fixed;
width: 10px;
height: 10px;
top : 100%;
left : 100%;
transform: translate(100%, 100%);
border-radius: 50%;
background-color: transparent;
border: 2px solid #d1cfcf;
pointer-events: none;
z-index: 9999;
transition: all 0.01s ease-in-out;
}
</style><script>
document.addEventListener("mousemove", function(event) {
const cursor = document.querySelector(".cursor");
const innerCursor = document.querySelector(".inner-cursor");
cursor.style.left = event.clientX + "px";
cursor.style.top = event.clientY + "px";
innerCursor.style.left = event.clientX + "px";
innerCursor.style.top = event.clientY + "px";
});
</script>
