流体渐变_⼀个创建交互式流体渐变动画的JS库——granim.js 介绍
granim.js是⼀个在⽹页中创建流畅的交互式流体动画的⼩型JavaScript库，granim.js可以实现各种你想要的渐变的动画效果，是⽹页⾊彩更加丰富，视觉效果更佳！
canvas动画
Github
快速上⼿
以下是基本渐变动画(以下是Gif动图)
具有2种颜⾊组成的队列中的3个渐变的基本渐变动画。
#canvas-basic {    position: absolute;    display: block;    width: 100%;    height: 100%;    top: 0;    right: 0;    bottom: 0;    left: 0;}
var granimInstance = new Granim({    element: '#canvas-basic',    direction: 'left-right',    isPausedWhenNotInView: true,    states : {        "default-state": {    复杂渐变动画
复杂的渐变动画，队列中有2个渐变，不同位置由3种颜⾊组成。
var granimInstance = new Granim({    element: '#canvas-complex',    direction: 'left-right',    isPausedWhenNotInView: true,    states : {        "default-state": 具有图像和混合模式的渐变动画
具有2种颜⾊，背景图像和混合模式设置的渐变动画。
var granimInstance = new Granim({    element: '#canvas-image-blending',    direction: 'top-bottom',    isPausedWhenNotInView: true,    image : {        sourc 带有图像蒙版的渐变
带有图像蒙版的渐变动画，可在形状下创建渐变动画。
Granim.js
.bloc-logo {    position: relative;    width: 130px;    height: 49px;    float: left;}.bloc-logo canvas,.bloc-lo
go .logo-mask {    display: block;    width: 130px;    hei var granimInstance = new Granim({    element: '#logo-canvas',    direction: 'left-right',    states : {        "default-state": {            gradients: [                ['#EB33
总结
granim.js是⼀个⾮常不错的⽹页渐变⾊动画库，通过granim.js可以打造⼀个⾮常炫彩的⽹页⾊彩动画，为某些场景下的⽹页增加视觉冲击，效果颇为不错！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。