你可以使用JavaScript的addEventListener方法和CSS的transition属性来实现这个效果。以下是一个简单的示例：

HTML:

```html

```

CSS:

css .myDiv { background-color: #f00; transition: background-color 0.5s ease; }

JavaScript:

javascript var myDiv = document.getElementById('myDiv'); myDiv.addEventListener('mousemove', function(e) { myDiv.style.backgroundColor = myDiv.style.backgroundColor + ' + (0.5 * (e.clientX - myDiv.offsetLeft)) + 'px'; });

在这个示例中，当鼠标移动到div上时，背景颜色会根据鼠标的位置而变化。变化的速度可以通过transition属性的值来控制，这里是0.5s ease，这意味着背景颜色变化的速度是线性的，随着时间的推移而增加。