jquery-gradientify是一款可以制作网页背景渐变色平滑过渡动画的jQuery插件。该插件使用简单,它通过参数的方式来提供一组渐变色,并使元素的背景色在这组渐变色之间反复平滑过渡。

使用方法

在页面中引入jquery2.0+和jquery.gradientify.min.js文件。

<script type="text/javascript" src="path/to/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.gradientify.min.js"></script>                  
                
初始化插件

例如为<body>元素设置一组背景渐变色过渡动画的js代码如下:

$('body').gradientify({
    gradients: [
        { start: [49,76,172], stop: [242,159,191] },
        { start: [255,103,69], stop: [240,154,241] },
        { start: [33,229,241], stop: [235,236,117] }
    ]
});                 
                

配置参数

jquery-gradientify插件的可用配置参数如下:

参数 默认值 描述
gradients [] 渐变的开始和结束颜色,RGB值,必填参数。
angle 0deg 渐变的角度,可选参数。
fps 60 每秒钟的频率。值越大则过渡动画越平滑,但对性能的影响也越大。可选参数。
transition_time 8 两个渐变过渡之间的时间间隔。可选参数。

jquery-gradientify背景渐变过渡动画插件的github地址为:https://github.com/codefog/jquery-gradientify