我在我的网站上使用了一个小脚本，它跟随用户的光标和一个页面元素。动画有点尖锐，我需要做的是对其应用某种过渡/关键帧。
我曾尝试使用 window.setTimeout 设置延迟，但没有成功...
我想达到这样的效果 site .鼠标平滑移动的地方，有没有办法在不构建巨大的 50kB 库的情况下做到这一点？
document.body.addEventListener("mousemove", function(e) {
var curX = e.clientX;
var curY = e.clientY;
document.getElementById('mouse').style.left = curX - 10 + 'px';
document.getElementById('mouse').style.top = curY - 10 + 'px';
});body {
height: 500px;
width: 500px;
background: orange;
}
#mouse {
position: fixed;
height: 20px;
width: 20px;
background: black;
top: 40px;
left: 40px;
z-index: 100;
}<body style="height">
<div id="mouse"></div>
</body>我希望元素在光标之后平滑移动。 此刻它会立即遵循准确的路径。
最佳答案
添加一个转换:
document.body.addEventListener("mousemove", function(e) {
var curX = e.clientX;
var curY = e.clientY;
document.getElementById('mouse').style.left = curX - 10 + 'px';
document.getElementById('mouse').style.top = curY - 10 + 'px';
});body {
height: 500px;
width: 500px;
background: orange;
}
#mouse {
position: fixed;
height: 20px;
width: 20px;
background: black;
top: 40px;
left: 40px;
z-index: 100;
transition: .1s linear
}<body style="height">
<div id="mouse"></div>
</body>关于Javascript:试图平滑自定义光标动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54151823/