在单击和拖动时更改背景颜色

问题描述 投票:0回答:1

我正在尝试创建一个网站,在您单击并拖动它时背景颜色会发生变化。问题是背景颜色确实会在我的代码中更新,但没有那种很好的平滑一致平滑渐变效果。拖动时,它随颜色而跳。

在此代码中,我想要的效果是通过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>
javascript css dom
1个回答
0
投票

根据此page,您无法使用CSS转换背景渐变。他提供了一种可能的解决方案,可借助伪元素和不透明度转换来实现该效果。检查同一页page

© www.soinside.com 2019 - 2024. All rights reserved.