网页设计充满美感和令人愉悦的界面设计。 一些功能可以使用,而其他功能仅用于展示。 渐变过渡 仅用于显示,但有很大的作用!
使用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动画徽标 ,其中渐变在整个文本中缓慢过渡 。
![Granim演示](https://i-blog.csdnimg.cn/blog_migrate/b4ea11620b42e7bb3c593911ac02c266.png)
请注意,此示例需要大量的JS / CSS代码,因此这不是一个简单的实现。
但是,您对Granim的练习越多,设置和自定义就越容易。 而且,由于它是唯一在线上真正的渐变过渡库,因此它是任何项目的绝对最佳解决方案。
该库仍会每隔半更新一次,因此您可以查看问题标签以获取更多信息。
这是一个很小的库,因此不会出现太多错误或需要更新的情况。 这就是Granim.js成为任何大小网站的可靠解决方案的原因。
要下载副本,请访问GitHub上的发布页面 ,或直接从cdnjs获取.js
文件的副本。 并通过实时示例查看源代码, 请看一下 Jonathan Schneider创建的CodePen演示 。