<body>
<h1>
基本のマウスストーカー
</h1>
<div id="mouse-stalker"></div>
</body>
#mouse-stalker {
pointer-events: none;
position: fixed;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
background: rgba(0,165,160,0.5);
border-radius: 50%;
transform: translate(0,0);
transition: transform 0.2s;
transition-timing-function: ease-out;
z-index: 999;
}
/* 以下、関係のない記述です。 */
body {
margin: 20px;
text-align: center;
h1 {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
}
const stalker = document.getElementById('mouse-stalker');
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});