火星网校
web渐变设计如何玩转？这篇文章你可能需要
在网页设计中使用渐变的趋势时有发过好几次。如果你浏览了这些年来网页设计趋势的各种列表，你会发现经常包含很多种渐变。多年来，它们在网页设计中的使用方式已经从我们现在认为俗气的方式发展到极富想象力和美观的方式。
在本文中，我们将研究Web设计中一些启发性的渐变用法，并提供一些可用于创建自己的渐变色的工具，以及一些免费的渐变图像网址。
1、实时游戏分析的登陆页面
在此网站模型中，使用美丽的紫色到粉红色到珊瑚混合的背景渐变，并结合前景渐变和匹配的矢量插图，提供了一种独特而新颖的技术。
2、X字母标志设计
三维徽标设计采用了浅褐色至几乎橙色的渐变色，使其具有丰富的深度和优雅感。
3、在悬停和过渡中
将鼠标悬停在这个屡获殊荣的网站中的元素上，即可看到在黑色背景上弹出的令人惊叹的动画渐变。单击菜单以显示神奇的渐变动画！
4、渐变点+径向彩虹渐变
如屏幕截图所示，该网站使用鲜艳的多色渐变背景，并在不那么显眼的位置使用渐变作为配对。
5、具有渐变Blob动画的渐变背景
这个令人惊叹的网站充满了明亮多彩的渐变背景，并带有一些非常酷的动画，包括在屏幕上移动的粘稠渐变斑点。
6、背景和形状
在背景中有趣地使用渐变，并在网站的每个面板上设置各种形状的动画，所有这些都设置为内容的背景。
7、渐变背景
该网站使用明亮的渐变背景来照亮页面，并为将内容带到最前沿提供了丰富多彩的基础。
8、对角头渐变
Stripe在标题中使用对角线背景渐变来增加深度，并设置舞台以匹配对角线内容，从而实现不同而又醒目的设计。
9、整个渐变
在整个页面中，该网站利用背景和前景插图中的渐变，形状动画以及更聪明和更丰富多彩的方法。
10、渐变标题逐渐变为白色
该样机在标题中使用了柔和的颜色渐变背景和形状，这些颜色和形状平滑地淡化为主要内容的白色，从而提供了清晰、舒缓的陈述。
（本文来源于：小阿田的设计笔记公众号，原文作者：ShotStash，译者：Tzw_n）
下一篇 如何设计更好体验的UI导航？
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
Blender确实不是那么容易上手的软件，尤其是如果你之前用的是像Maya或Max这样的传统软件。但当你终于掌握了它，那种成就......
-
《哪吒之魔童闹海》幕后纪录片《不破不立》上线，揭秘制作艰辛与匠心。哪吒冲破穿心咒场景灵感源自防盗玻璃，导演饺子分享角色塑造心得......
-
你还在苦苦寻觅今年的挣钱新风口吗？这里为大家盘点了一些今年乃至明年会有增长点的新风口。大家可以结合自己的优势和特长做一下拼接，......
-
从学舞蹈到做开发再到做动画，这位《哪吒2》动画师都经历了什么
吴同学从舞蹈转软件开发，再转行学动画，在火星时代教育学习后入职制作公司，参与《哪吒2》动画制作获成就感，强调打好基础对工作和职......
-
大学生跨专业求职，应找兴趣方向，分析职业能力并提升，利用人脉资源公开求职意愿，尝试私信招聘方，保持开放心态降低要求，耐心投简历......
-
伴随着《哪吒2》火爆全网，它所带来的不仅仅是电影票房的一路飙升，更是让动画公司和动画创作者群体，再一次走进大众视野。
