通过数字为 CSS 属性设置动画答案

【问题标题】：Animate CSS properties by numbers通过数字为 CSS 属性设置动画
【发布时间】：2018-05-30 08:50:32
【问题描述】：

我想创建一个动画，其中当鼠标接近某个元素时颜色会发生变化。我发现这个fiddle 显示了鼠标距离。有没有一种通过数字输出实现颜色变化的有效方法？我在 JavaScript 方面不是很有经验，所以我一直在寻找可以提供帮助的东西并找到了这个 code-sn-p：

<p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>

var percent_number_step = $.animateNumber.numberStepFactories.append(' %')

$('#fun-level').animateNumber({
    number: 100,
    color: 'green',
    'font-size': '30px',
    easing: 'easeInQuad',
    numberStep: percent_number_step
  },
  15000
);

但我不确定如何将其应用于我的情况。我还发现了这个jQuery plugin，它完全符合我的要求，但是颜色变化不起作用，所以我想自己重做这个脚本。

【问题讨论】：

在 sn-p 的 mousemove 调用中，我添加了 $element.css('background-color', 'hsl('+distance+',100%,50%)');。这会根据距离改变色调。快速和hacky只是为了给出一个想法
是的，这有点用。但是在my case 中，元素已经有了颜色，应该将新颜色添加到旧颜色中。但更具体地说，我制作了一个带有线性渐变的 div 作为背景颜色，它应该变成一种颜色，甚至更好地变成不同的渐变。我很确定将它设置为不同的渐变是很痛苦的。

标签： javascript jquery css animation numbers

【解决方案1】：

你想要这个吗？

当您接近圆圈时，此代码会变暗。

var ball = document.getElementById('ball')
document.addEventListener('mousemove', mouseMoveHandler)
function mouseMoveHandler (e) {
     var x = e.clientX
     var y = e.clientY

     var diffX = Math.abs(x - ball.offsetLeft)
     var diffY = Math.abs(y - ball.offsetTop)
     ball.style.backgroundColor = `rgb(${diffX}, ${diffY}, ${diffX + diffY})`
}

#ball {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 50px;
     background-color: gray;

     border-radius: 50%;
     left: 50%;
     top: 50%;
     margin-top: -25px;
     margin-left: -25px;
}

&lt;span id="ball"&gt;&lt;/span&gt;

【讨论】：

这很酷，但是in my case 我想将已经具有特定颜色的元素更改为另一种特定颜色，或者更准确地说，我制作了一个带有线性渐变作为背景颜色的 div它应该变成一种颜色，甚至更好地变成不同的渐变。我不确定如何使用您的代码实现这一目标。你知道我该怎么做吗？