连续的颜色过渡

检查这个JSFiddle是否有一个花哨的图形的过渡。

/* ==================== Required Functions ==================== */
// This is required to get the initial background-color of an element.
// The element might have it's bg-color already set before the transition.
// Transition should continue/start from this color.
// This will be used only once.
function getElementBG(elm) {
	var bg	= getComputedStyle(elm).backgroundColor;
		bg	= bg.match(/'((.*)')/)[1];
		bg	= bg.split(",");
	for (var i = 0; i < bg.length; i++) {
		bg[i] = parseInt(bg[i], 10);
	}
	if (bg.length > 3) { bg.pop(); }
	return bg;
}
// A function to generate random numbers.
// Will be needed to generate random RGB value between 0-255.
function random() {
	if (arguments.length > 2) {
		return 0;
	}
	switch (arguments.length) {
		case 0:
			return Math.random();
		case 1:
			return Math.round(Math.random() * arguments[0]);
		case 2:
			var min = arguments[0];
			var max = arguments[1];
			return Math.round(Math.random() * (max - min) + min);
	}
}
// Generates a random RGB value.
function generateRGB(min, max) {
	var min		= min || 0;
	var max		= min || 255;
	var color	= [];
	for (var i = 0; i < 3; i++) {
		var num = random(min, max);
		color.push(num);
	}
	return color;
}
// Calculates the distance between the RGB values.
// We need to know the distance between two colors
// so that we can calculate the increment values for R, G, and B.
function calculateDistance(colorArray1, colorArray2) {
	var distance = [];
	for (var i = 0; i < colorArray1.length; i++) {
		distance.push(Math.abs(colorArray1[i] - colorArray2[i]));
	}
	return distance;
}
// Calculates the increment values for R, G, and B using distance, fps, and duration.
// This calculation can be made in many different ways.
function calculateIncrement(distanceArray, fps, duration) {
	var fps			= fps || 30;
	var duration	= duration || 1;
	var increment	= [];
	for (var i = 0; i < distanceArray.length; i++) {
		var incr = Math.abs(Math.floor(distanceArray[i] / (fps * duration)));
		if (incr == 0) {
			incr = 1;
		}
		increment.push(incr);
	}
	return increment;
}
// Converts RGB array [32,64,128] to HEX string #204080
// It's easier to apply HEX color than RGB color.
function rgb2hex(colorArray) {
	var color = [];
	for (var i = 0; i < colorArray.length; i++) {
		var hex = colorArray[i].toString(16);
		if (hex.length < 2) { hex = "0" + hex; }
		color.push(hex);
	}
	return "#" + color.join("");
}
/* ==================== Setup ==================== */
// Duration is not what it says. It's a multiplier in the calculateIncrement() function.
// duration = 1-4, fast-to-slow
var fps				= 30;
var duration		= 3;
var transElement	= document.body;
var currentColor	= getElementBG(transElement);
var transHandler	= null;
startTransition();
/* ==================== Transition Initiator ==================== */
function startTransition() {
	clearInterval(transHandler);
	
	targetColor	= generateRGB();
	distance	= calculateDistance(currentColor, targetColor);
	increment	= calculateIncrement(distance, fps, duration);
	
	transHandler = setInterval(function() {
		transition();
	}, 1000/fps);
}
/* ==================== Transition Calculator ==================== */
function transition() {
	// checking R
	if (currentColor[0] > targetColor[0]) {
		currentColor[0] -= increment[0];
		if (currentColor[0] <= targetColor[0]) {
			increment[0] = 0;
		}
	} else {
		currentColor[0] += increment[0];
		if (currentColor[0] >= targetColor[0]) {
			increment[0] = 0;
		}
	}
	
	// checking G
	if (currentColor[1] > targetColor[1]) {
		currentColor[1] -= increment[1];
		if (currentColor[1] <= targetColor[1]) {
			increment[1] = 0;
		}
	} else {
		currentColor[1] += increment[1];
		if (currentColor[1] >= targetColor[1]) {
			increment[1] = 0;
		}
	}
	
	// checking B
	if (currentColor[2] > targetColor[2]) {
		currentColor[2] -= increment[2];
		if (currentColor[2] <= targetColor[2]) {
			increment[2] = 0;
		}
	} else {
		currentColor[2] += increment[2];
		if (currentColor[2] >= targetColor[2]) {
			increment[2] = 0;
		}
	}
	
	// applying the new modified color
	transElement.style.backgroundColor = rgb2hex(currentColor);
	
	// transition ended. start a new one
	if (increment[0] == 0 && increment[1] == 0 && increment[2] == 0) {
		startTransition();
	}
}

body {
  background: white;
}

这是使用纯JavaScript和CSS的颜色过渡/动画的另一种实现

const randomColor = () => '#' + Math.random().toString(16).substr(-6)
const changeColor = () => document.body.style.backgroundColor = randomColor()
setInterval(() => {
  changeColor()
}, 5000)
// start color animation as soon as document is ready
document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    changeColor()
  }
}

body {
  transition: background 5s;
}

的变量太多了？这样呢？

var el = document.getElementById("sandbox"),
    interval = 2000;
function getNewColor(){
    //generate color
}
function getOldColor(el){
    //get current color
}
function switchColor(el, oldColor, newColor){
    //change color
}
setInterval(function(){
    swithColors(el, getOldColor(el), getNewColor());
},interval);

akinuri，我设法将他的答案调整为在请求动画帧上运行的动态函数。再次感谢阿基努里，不错的代码。ps：currentColor 和 targetColor 请求一个带有 rgb 值（'rgb（0,0,0）'）的字符串

function startColorFade(fps, duration, element, currentColor, targetColor) {
    var stop = false;
    var fpsInterval = 1000 / fps;
    var now;
    var then = Date.now();
    var elapsed;
    var startTime = then;
    var currentColorArray = getElementBG(currentColor);
    var targetColorArray  = getElementBG(targetColor);
    var distance = calculateDistance(currentColorArray, targetColorArray);
    var increment = calculateIncrement(distance, fps, duration);
    animateColor(duration, element, currentColorArray, targetColorArray, increment, stop, fpsInterval, now, then, elapsed, startTime);
}
function animateColor( duration, element, currentColorArray, targetColorArray, increment, stop, fpsInterval, now, then, elapsed, startTime ) {  
    var step = function() {
        if (stop) {
            return;
        }       
        // request another frame
        requestAnimationFrame(function() //arguments can passed on the callback by an anonymous funtion 
        {
            animateColor(duration, element, currentColorArray, targetColorArray, increment, stop, fpsInterval, now, then, elapsed, startTime);
            colorTransition(element, currentColorArray, targetColorArray, increment);
        });     
        // calc elapsed time since last loop
        now = Date.now();
        elapsed = now - then;       
        // if enough time has elapsed, draw the next frame
        if (elapsed > fpsInterval) {
            // Get ready for next frame by setting then=now, but...
            // Also, adjust for fpsInterval not being multiple of 16.67
            then = now - (elapsed % fpsInterval);
            // draw stuff here    
            var sinceStart = now - startTime;               
        }   
        if (sinceStart / 1000 * 100 >= duration * 100)
        {
            stop = true;
        }   
    }
    step();
}
function colorTransition(element, currentColorArray, targetColorArray, increment) {
    // checking R
    if (currentColorArray[0] > targetColorArray[0]) {
        currentColorArray[0] -= increment[0];
        if (currentColorArray[0] <= targetColorArray[0]) {
            increment[0] = 0;
        }
    } else {
        currentColorArray[0] += increment[0];
        if (currentColorArray[0] >= targetColorArray[0]) {
            increment[0] = 0;
        }
    }    
    // checking G
    if (currentColorArray[1] > targetColorArray[1]) {
        currentColorArray[1] -= increment[1];
        if (currentColorArray[1] <= targetColorArray[1]) {
            increment[1] = 0;
        }
    } else {
        currentColorArray[1] += increment[1];
        if (currentColorArray[1] >= targetColorArray[1]) {
            increment[1] = 0;
        }
    }    
    // checking B
    if (currentColorArray[2] > targetColorArray[2]) {
        currentColorArray[2] -= increment[2];
        if (currentColorArray[2] <= targetColorArray[2]) {
            increment[2] = 0;
        }
    } else {
        currentColorArray[2] += increment[2];
        if (currentColorArray[2] >= targetColorArray[2]) {
            increment[2] = 0;
        }
    }    
    // apply the new modified color
    element.style.backgroundColor = rgb2hex(currentColorArray);    
}
function getElementBG(elmBGColor) { 
    var bg  = elmBGColor; // i.e: RGB(255, 0, 0)
        bg  = bg.match(/'((.*)')/)[1];
        bg  = bg.split(",");
    for (var i = 0; i < bg.length; i++) {
        bg[i] = parseInt(bg[i], 10);
    }
    if (bg.length > 3) { bg.pop(); }
    return bg; // return array
}
function calculateDistance(colorArray1, colorArray2) {
    var distance = [];
    for (var i = 0; i < colorArray1.length; i++) {
        distance.push(Math.abs(colorArray1[i] - colorArray2[i]));
    }
    return distance;
}
function calculateIncrement(distanceArray, fps, duration) {
    var increment = [];
    for (var i = 0; i < distanceArray.length; i++) {
        increment.push(Math.abs(Math.floor(distanceArray[i] / (fps * duration))));
        if (increment[i] == 0) {
            increment[i]++;
        }
    }
    return increment;
}
function rgb2hex(colorArray) {
    var hex = [];
    for (var i = 0; i < colorArray.length; i++) {
        hex.push(colorArray[i].toString(16));
        if (hex[i].length < 2) { hex[i] = "0" + hex[i]; }
    }
    return "#" + hex.join("");
}
 //random rgb values in array, very nice
function generateRGB(min, max) {
    var min   = min || 0;
    var max   = max || 255;
    var color = [];
    for (var i = 0; i < 3; i++) {
        var num = Math.floor(Math.random() * max);
        while (num < min) {
            num = Math.floor(Math.random() * max);
        }
        color.push(num);
    }
    return color;
}

使用hsl()

例如，在ReactJS（这里使用CoffeeScript）作用于SVG文本元素，尽管相同的技术也适用于HTML p/span/h1等（颜色而不是填充属性）：

render: ->
              #[... svg setup]
    text
        x: 50
        y: 50
        fontSize: 20
        fill: "hsl(#{@state.el_hue}, #{@state.el_sat}%, @state.el_lum)%"
        "Hello from randomly changing color text."
getInitialState: ->
    el_hue: 0
    el_sat: 0
    el_lum: 0
componentDidMount: ->
    setInterval =>
        @setState
            el_hue: Math.random() * 360
            el_sat: Math.random() * 100
            el_lum: Math.random() * 100
    , 30
       # should do crazy things, change color etc

在这里，我只是在每个间隔对 hsl vals 做了随机的事情，但你可以通过这种方式做任何事情。 因此，您只需适当更改色调值即可设置红色到蓝色的过渡。