美图秀秀拼接渐变过渡_使用Granim.js创建漂亮的渐变过渡

网页设计充满美感和令人愉悦的界面设计。 一些功能可以使用，而其他功能仅用于展示。 渐变过渡 仅用于显示，但有很大的作用！

使用Granim.js ，您可以构建自定义的全色渐变过渡 ，使其看起来平滑且可以与任何网站很好地啮合。

您可以在主要示例页面上找到许多自定义示例 ，它们具有许多不同的样式，从简单的过渡到使用背景图像的更复杂的动画。

Granim是我了解的唯一处理渐变过渡的 JS库。 这是我一直想知道的问题 ，却从未真正找到一个好的答案。 Granim是完美的解决方案，它基于香草JavaScript构建 ，因此它可以与jQuery或任何其他JS库一起运行。

只需将granim.js文件拖放到您的页面即可开始。 您可以从GitHub下载副本，也可以从实时CDN 托管一个副本。

这是GitHub存储库中的基本代码示例 ：

<!-- Create a canvas element -->
<canvas id="granim-canvas"></canvas>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

事情要比这复杂得多，因此您确实应该深入研究示例以了解更多信息。 您将在每个示例下找到代码片段，因此可以为图像背景甚至图像蒙版创建渐变过渡 。

图像蒙版可用于徽标（例如PNG图像），该徽标隐藏在渐变后面。 这样，您就可以创建一个JS动画徽标 ，其中渐变在整个文本中缓慢过渡 。

请注意，此示例需要大量的JS / CSS代码，因此这不是一个简单的实现。

但是，您对Granim的练习越多，设置和自定义就越容易。 而且，由于它是唯一在线上真正的渐变过渡库，因此它是任何项目的绝对最佳解决方案。

该库仍会每隔半更新一次，因此您可以查看问题标签以获取更多信息。

这是一个很小的库，因此不会出现太多错误或需要更新的情况。 这就是Granim.js成为任何大小网站的可靠解决方案的原因。

要下载副本，请访问GitHub上的发布页面 ，或直接从cdnjs获取.js文件的副本。 并通过实时示例查看源代码， 请看一下 Jonathan Schneider创建的CodePen演示 。

翻译自: https://www.hongkiat.com/blog/granim/