我想将一个渐变动画化为另一个渐变。这是我的代码笔:https://codepen.io/EYT/pen/YvPEVQ .我使用鼠标距离作为变量来向上设置渐变动画。
这个渐变应该是起点,它不应该低于这个(当鼠标距离大于 300px 时它会这样做):
$element.css('background', 'linear-gradient(0deg, rgba(255, 66, 42, 1) '+(300-distance)/2+'%, rgba(217, 60, 40, 1) '+(305.24-distance)/2+'%, rgba(174, 54, 39, 1) '+(312.1-distance)/2+'%, rgba(136, 48, 37, 1) '+(319.52-distance)/2+'%, rgba(104, 44, 36, 1) '+(327.42-distance)/2+'%, rgba(78, 40, 35, 1) '+(335.92-distance)/2+'%, rgba(58, 37, 34, 1) '+(345.26-distance)/2+'%, rgba(44, 35, 33, 1) '+(355.86-distance)/2+'%, rgba(35, 33, 33, 1) '+(368.84-distance)/2+'%, rgba(33, 33, 33, 1) '+(390.96-distance)/2+'%)');
并且在距离元素 100px 的途中,它应该被动画到这个渐变:
$element.css('background', 'linear-gradient(0deg, rgba(255, 66, 42, 1) '+(300-distance)/2+'%, rgba(217, 60, 40, 1) '+(325.24-distance)/2+'%, rgba(174, 54, 39, 1) '+(352.1-distance)/2+'%, rgba(136, 48, 37, 1) '+(379.52-distance)/2+'%, rgba(104, 44, 36, 1) '+(407.42-distance)/2+'%, rgba(78, 40, 35, 1) '+(435.92-distance)/2+'%, rgba(58, 37, 34, 1) '+(465.26-distance)/2+'%, rgba(44, 35, 33, 1) '+(495.86-distance)/2+'%, rgba(35, 33, 33, 1) '+(528.84-distance)/2+'%, rgba(33, 33, 33, 1) '+(570.96-distance)/2+'%)');
有人知道如何做到这一点吗?
谢谢!
最佳答案
尝试将 px 转换为 % 并使用 scaleY(${percent/100)})
这是一个示例,但您必须根据需要对其进行调整:
(function() {
var element = document.getElementById("element");
var onMouseMove = function(evt) {
const percent = ((evt.clientY / document.documentElement.scrollHeight) * 100);
element.style.transform = `scaleY(${(percent / 100)}`;
}
document.addEventListener('mousemove', onMouseMove);
})();
关于javascript - 使用 JavaScript 将一个 CSS 渐变动画化为另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50611377/