我正在尝试创建一个网站,在您单击并拖动它时背景颜色会发生变化。问题是背景颜色确实会在我的代码中更新,但没有那种很好的平滑一致平滑渐变效果。拖动时,它随颜色而跳。
在此代码中,我想要的效果是通过mousemove
事件监听器实现的:
document.addEventListener('mousemove', function(event) {
var width = window.innerWidth / 255
var height = window.innerHeight / 255
var xValue = event.clientX / width;
var yValue = event.clientY / height;
document.getElementById("bg").style.backgroundColor = 'rgb(' + yValue + ',' + yValue + ',' + xValue + ')';
});
* {
padding: 0;
margin: 0;
}
body {
background-color: white;
height: 100vh;
width: 100%;
}
<body id="bg">
<div></div>
</body>