Javascript 单击并拖动即可更改背景颜色

我正在尝试创建一个网站，当你点击并拖动它时，背景颜色会发生变化。问题是，在我的代码中背景颜色确实会更新，但它没有很好的平滑渐变效果。拖动时，它只是从一种颜色跳到另一种颜色

在这段代码中，我想要的效果是通过

mousemove

事件侦听器实现的：

document.addEventListener（'mousemove'，函数（事件）{
var width=window.innerWidth/255
var height=window.innerHeight/255
var xValue=event.clientX/宽度；
var yValue=event.clientY/高度；
document.getElementById（“bg”）.style.backgroundColor='rgb（'+yValue+'，'+yValue+'，'+xValue+'）；
});
*{
填充：0；
保证金：0；
}
身体{
背景色：白色；
高度：100vh；
宽度：100%；
}

根据这一点，您不能使用CSS转换背景渐变。他提供了一种可能的解决方案，通过使用伪元素和不透明度变换来实现这种效果


.gradient{
位置：相对位置；
背景图像：线性梯度(
对,，
hsl（211100%，50%），
hsl（179100%，30%）
);
z指数：1；
高度：100px；
}
.梯度：：之前{
位置：绝对位置；
内容：“；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性梯度(
归根结底，
hsl（344100%，50%），
hsl（31,100%，40%）
);
z指数：-1；
过渡：不透明度0.5s线性；
不透明度：0；
}
.gradient:悬停：：之前{
不透明度：1；
}

将鼠标悬停在上面的元素上以淡入背景渐变。
如果您想要平滑的颜色更改，请添加css
transition
：


document.addEventListener（'click'，函数（事件）{
var xValue=Math.floor（Math.random（）*256）；
var yValue=Math.floor（Math.random（）*256）；
document.getElementById（“bg”）.style.backgroundColor='rgb（'+yValue+'，'+yValue+'，'+xValue+'）；
});
*{
填充：0；
保证金：0；
}
身体{
背景色：白色；
过渡：500ms背景；
高度：100vh；
宽度：100%；
}

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面更改，仅链接的答案可能会无效。对不起，我不知道。谢谢