动画中最引人注目的元素之一是颜色转换。它立刻吸引了人们的眼球，并产生了令人惊叹的效果。它也非常适合突出显示网页的部分，将用户的注意力吸引到页面上的特定区域。

Hueristic是一个小巧但高度可定制的jQuery插件，可以在颜色之间平滑过渡。这将有助于在网站或界面上创建良好的效果和过渡。它可以与任何具有颜色属性（文本颜色、背景颜色等）的DOM元素配合使用，并允许您使用JavaScript控制色调、饱和度、亮度和alpha通道。

如何使用它:

1.在jQuery之后下载并插入Hueristics库。

<script src="/path/to/cdn/jquery.js"></script>
<script src="/path/to/js/jquery.hueristics.js"></script>

2.使用默认参数调用hueristics插件。这将以给定的速度更改整个页面的背景色。

$(function(){
  $('body').hueristics();
});

3.配置颜色转换的所有可能参数。

$('body').hueristics({

  // color property
  property: 'background-color',

  // start color
  startColor: '',

  // control hue, saturation, lightness, and alpha channels here
  hue: 0,
  saturation: 100,
  lightness: 50,
  alpha: 1,

  // transition mode
  moveVal: 'hue',

  // max/min values
  maxVal: 360,
  minVal: 0,

  // transition speed
  speed: 70,

  // step size
  step: 1,

  // reverse
  reverse: false,

});

预览截图

jQuery色调创建平滑 颜色转换