查看最终结果
长话短说
glassmorphim效果是从2020年开始的趋势之一，到2021年也将持续存在。尽管这种效果并不是Web设计中真正的新功能，但本文稍后将详细介绍。 “磨砂玻璃”效果最常用于信用卡的可视化，赢得了许多设计师的青睐，并掌握了Dribbble之类的网站。 我们有柔和的版本，有鲜艳的颜色或深色模式，有很多可能性。 但是，今天，我想向您展示如何在您的网站设计（例如，登录页面或投资组合）中使用这种出色的效果。 让我们谈正事吧。
它从哪里来的
正如我在简介中所提到的，Windows Vista UI中已经使用了模糊的背景，例如在单击“开始”时打开的菜单中。 那是黑色的透明背景。 2013年，Apple在iOS 7中引入了这种效果，包括在屏幕上向上滑动时，这种效果都是可见的。 当前，Microsoft在其设计语言Fluent Design System中使用称为The Acrylic的效果。 我认为已经有足够的历史了，所以让我们继续学习在Web项目中创建glassmorphsim效果所必需的现代准则。
这种趋势的规律是什么
glassmorphism的特征是：
- 它通过使用背景模糊来模仿毛玻璃的外观
- 透明的概念
- 层的层次结构和结构
- 在背景中使用清晰的形状和鲜艳的色彩来强调模糊的透明度
- 半透明的对象具有微妙的边界
如何用CSS达到这种效果
使用MDB生成器来实现这种效果非常简单，您可以在下面的链接中找到。 只需使用滑块选择“模糊”和“透明”值并选择背景颜色，该工具就会生成必要的CSS和HTML代码。 然后，将生成的代码添加到您的项目中，瞧！ 您的网站上已经出现了美丽的，微妙的玻璃同化效果。 为了使您更轻松，更愉快，我准备了三个项目，在其中向您展示了其使用的各种可能性。
项目1-简单的简介页面
在此项目中，我将glassmorphim效果用作背景蒙版，以使照片模糊成鲜艳的色彩，并在简介中心突出显示最重要的文本。
项目2-带卡片的简介页
在这个项目中，我创建了一个glassmorphism卡，在其中向生成器的基本样式添加了一些其他样式，例如border，border-radius，background-clip等，并附加了MDB动画以获得更好的视觉效果 影响。
项目3-个人卡
在这个项目中，我创建了一组卡片，您可以使用这些卡片来表示您的团队或客户的意见。 除了使用卡的白色半透明背景之外，我还使用了深灰色，以便您也可以在黑暗模式下使用玻璃变形效果，并且还添加了更精美的动画。
概括
希望上面的示例可以使您相信玻璃同质化是使用CSS可以轻松实现的趋势，但却具有令人赞叹的效果。 当您想要突出重要的内容和简约风格的东西时，它绝对有用。 当然，不值得过度使用它，我相信该站点上的一两个部分就足够了。 尝试，试验和共享MDB代码片段中的项目。 祝你好运！
