js怎么实现颜色的渐变

/* 线性渐变 */
background: linear-gradient(to right, red, blue);

/* 径向渐变 */
background: radial-gradient(circle, red, blue);

function colorTransition(element, startColor, endColor, duration) {
    let start = startColor.match(/\w\w/g).map(x => parseInt(x, 16));
    let end = endColor.match(/\w\w/g).map(x => parseInt(x, 16));
    let steps = duration / 10; // 分成10步完成
    let currentStep = 0;

    function step() {
        if (currentStep < steps) {
            let color = start.map((startValue, index) => {
                let endValue = end[index];
                let value = Math.round(startValue + (endValue - startValue) * currentStep / steps);
                return value.toString(16).padStart(2, '0');
            }).join('');
            element.style.backgroundColor = '#' + color;
            currentStep++;
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}

// 使用示例
let element = document.getElementById('myElement');
colorTransition(element, 'ff0000', '0000ff', 3000); // 从红色渐变到蓝色，持续3秒