JQuery渐变色动画效果
jquery.gradientify.min.js插件
渐变色插件链接
在页面中引入js库与插件
<script src="js\jquery-3.0.0.min.js"></script>
<script src="js\jquery.gradientify.min.js"></script>
参数
gradients: 默认值:[],渐变的开始和结束颜色,RGB值,必填参数。
angle: 默认值:0deg,渐变的角度,可选参数。
fps: 默认值:60,每秒钟的频率。值越大则过渡动画越平滑,但对性能的影响也越大,可选参数。
transition_time: 默认值:8,两个渐变过渡之间的时间间隔(单位:秒),可选参数。
示例:
为< div >元素设置一组背景渐变色过渡动画的js代码如下:
$('div').gradientify({
gradients:[{start:[255,0,0],stop:[255,165,0]},
{start:[255,165,0],stop:[255,255,0]},
{start:[255,255,0],stop:[0,255,0]},
{start:[0,255,0],stop:[0,255,255]},
{start:[0,255,255],stop:[0,0,255]},
{start:[0,0,255],stop:[255,0,255]},
{start:[255,0,255],stop:[255,0,0]},
],
angle:'45deg',
fps:'300',
transition_time:'1'
});