渐变这种高级操作，你竟然还不会用到网站里，你太让我失望了！
9102年了，还不会用渐变吗？相信我，网站里如果有漂亮的渐变这种元素，你就等着苏大强站起来给你鼓掌吧。
老实说，渐变完全可以把一个网站的配色提升N多个level，从平凡拉升到华丽。并且渐变这种元素永远都会在视觉中心出现，作为这个网站的设计核心。
下面推荐5个案例，每个都是经典，为你设计网站背景和BANNER的时候提供一些灵感（附素材下载包）。
阶梯感渐变的BANNER
这张炫目的BANNER给人的视觉享受，简直让人词穷！对比色的渐变一定是让人挪不开眼的。人物背部强烈灯光反射的这种设计方式，使它成为整个网站的焦点。
The HR Manifesto
gradient-usage-examples-02.jpg
这个网站做的非常有趣，渐变色彩和丰富的动效做的同样出色。首页是重头戏，采用了可收缩的快速导航，能够在庞大的信息量中迅速找到自己需要的内容。同时页面充分利用了渐变元素，从上到下贯穿了BANNER和有趣的插画。以冷静的紫色、清凉的蓝色、柔和醒目的粉色为主，完美的搭配出了整个页面的多彩效果。
重点是网站的动效做的很有丰富，但实际做起来并不复杂，网页比较长，这里我拿出来一屏做一个分析，重点展开说一说。（感兴趣的小伙伴继续看，不感兴趣的小伙伴这段跳过哈~）
网址：https://www.atomic.ie/dna/manifesto/#introduction
大多数效果只需要 css 做样式+设计师的巧思就能实现，相对简单易懂上手快。这里举两个例子：
- 灯光闪烁：只需要一张 PNG 的图片配合 css 中的动画帧对透明度的控制就能实现。
（动图效果不佳，欢迎推荐好用的软件给我 ps:免费）
- 人物飞过去：原理和灯光闪烁相似, 只需要一张 PNG 的图片配合 css 中的动画帧控制图片的位移和缩放就能实现。
（动图效果不佳，欢迎推荐好用的软件给我 ps:免费）
3.不断变化的水滴：这个网站的多数效果都是依靠 css 中的动画帧实现的，但水滴的效果比较有意思，这个效果是通过 SVG 的路径变化来实现的，（这个效果实现起来比较复杂，但是原理也十分简单）。
（做得不够圆滑，意思对就行 嘻）
关于水滴的效果，我们可以将制作好的 svg 路径，以下面的方式加入页面， 代码如下：
<svg
class=“morph”
width=“1400”
height=“770”
viewBox=“0 0 1400 770”
style=“transform: scaleX(0.4) scaleY(0.4) translateX(0px) translateY(-100px) rotate(70deg);”>
<path
d=“M 262.9,252.2 C 210.1,338.2 261.8341746666727,416.9526093333247 296.6677346666676,526.4034839999966 332.86132666666185,637.1254973333347 511.2,533.5354693333353 620.3,552.0354693333353 750.6,574.1354693333352 869.9521693333345,710.3467359999985 987.3,686.5 1099.544386666668,664.0321853333342 1208.5553333333382,545.3254973333346 1173,429.2 1137.4446666666618,311.18556933333304 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z”
style=“fill: rgb(97, 35, 245);”>
素材包
参与和本篇有关的话题讨论+后台留言即可领取~
梯度渐变的着陆页
gradient-usage-examples-03.jpg
用来生成渐变方案的站点，当然知道如何更好的运用渐变。右边的海报能马上吸引到眼球，这样的配色方案，在吸引访客对LOGO或指向某链接的按钮十分有效果，不信可以试试~
D25 /视频
gradient-usage-examples-04.jpg
这个案例并没有大面积的采用渐变色，但依然非常微妙。尤其是在页面的开头，图形上的蓝色和红色像调色板交融在一起，颜色很漂亮。紧接着，在它的下面，引导出了一个红色的色块，更加引人注目。
99Seconds 游戏原型图
gradient-usage-examples-06.jpg
这款游戏有很强的概念性，它的艺术风格也是如此。你能发现各种各样抽象层次，同时，每个层次都有一个美丽的渐变背景，它的渐变甚至做得像一个梯度渐变生成工具一样完美。这些元素结合在一起，创造出来的游戏当然会让人爱不释手。
是不是被这些渐变案例美到了？
在需要加强视觉重点的地方，大可以加入这些有色彩对比的渐变元素，突出让访客感兴趣的区域，另外辅助有趣的动效，达到更好的交互效果。