在css3中有一个hsl色彩模式，它是工业界的一种颜色标准,hsl分别代表色调，饱和度，亮度三个通道的颜色。通过这三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，这个标准几乎包括了人类视力所能看到的所有颜色，是目前运用最广的颜色系统之一。本编文章运用js配合hsl的色调的变换来实现body背景颜色由红到蓝的渐变交替效果。
效果如图所示：
做这个效果之前，我们先来了解一些属性：
requestAnimationFrame：动画帧。优点->1.经过浏览器优化，动画更流畅2.窗口没激活时，动画将停止，省计算资源。3.更省电，尤其是对移动终端。
hsl(h)：Hue(色调)，0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
hsl(s)：Saturation(饱和度)。取值为：0.0% - 100.0%
hsl(l)：Lightness(亮度)。取值为：0.0% - 100.0%
实现的原理：
利用js修改hsl色调的值通过requestAnimationFrame来调用，这样就形成了背景颜色渐变交替效果。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body id="body">
<script type="text/javascript">
var body = document.getElementById("body");
var bodyColor = 0;
function move(){
bodyColor ++;
body.style.backgroundColor = "hsl("+bodyColor+",100%,50%)";
requestAnimationFrame(move);
}
requestAnimationFrame(move)
</script>
</body>
</html>需要注意的是hsl是css3属性，可能会在一些低版本的浏览器不兼容，当然requestAnimationFrame在IE9以下都不支持的，使用的时候多测试。如有疑问或者写的不对的地方欢迎指出。