网页设计中X射线效果的8个惊人例子
x射线是一种电磁辐射，其波长比可见光短。它很容易穿过实体，让你看到里面。它在物理学中有许多应用。然而，最值得注意的，毫无疑问，最有用的是用于医学的。
一个多世纪以来，x射线一直被用于检测和诊断感染、骨折等。Noel Delgado在CodePen上进行的名为“x射线me”的令人振奋的SVG实验说明了这一原理。一个巨大的圆圈可以让你看到角色的骨架，就像医疗中心的任何扫描一样。
这个想法很好，实现起来很完美。如果你认为这个实验只是一个单独的概念，我们将证明你错了。最近，x射线效应出现在网页设计领域。这不仅仅是一个一次性的事情，使一个戏剧性的入口。这一解决方案正在获得势头，并已被视为一个小的新兴趋势。
现实生活网站中的X射线效应
与Noel Delgado的代码片段非常相似，该解决方案也基于“透明”的概念。简而言之，有一个圆圈充当X射线扫描仪的角色。它可以让你窥视界面的基本元素，如标识、排版，甚至背景。你可能已经猜到了，这个圆圈是一个鼠标光标，它将习惯的箭头形状变成了一个圆环，并借用了超人的一些超能力，更准确地说是x射线视觉。
亚历克斯·塞里
这种影响表现在几个方面。第一种方法意味着揭示一个骨架式的基础，比如亚历克斯·塞里和他神奇的个人投资组合。
在这里，你可以偶然发现一个大的圆形鼠标光标，它有一个透明的身体和生动的白色边框。它只影响排版。当你将鼠标悬停在位于屏幕中心的项目名称上时，圆圈显示了项目的内部部分——将实心字体转换为空心字体。相反，滚轴标题将其幽灵般的风格转变为实体风格。太棒了。
塑料
实现这一趋势的另一种方法是反转各种元素的颜色。在大多数情况下，我们可以看到从黑人到白人的转变，反之亦然。考虑塑料。
与上一个示例不同，在该示例中，扫描仅影响滑块，此处x射线效果应用于界面的各种元素。请注意，鼠标光标比Alex Thery网站上的鼠标光标小，但它工作得非常好，不会因其巨大的尺寸而压倒访问者。
当它悬停在标题、标识、导航链接甚至这些分散在屏幕上的彩色小矩形上时，它会改变它们的颜色——巧妙地模仿x射线扫描行为。这是一个完美的例子，如何使你的最小，难以置信的通风网站看起来惊人。
Sabcomeed公司
虽然前两种实现在开发人员中广泛传播，但还有另一种方法可以模拟x射线效果。通常，这需要熟练地使用掩蔽。它让观众透过前几层看到，揭示了背景。想想Sabcomeed。
在这里，效果不涉及标题、文本或导航。取而代之的是，它允许你穿过背景，往里面看，看看窗帘后面发生了什么。事实证明，还有一层以精致的线条风格打造的美丽风景。
它与网站前景中呈现的自然主题完美契合。它还与标题中的一些单词相互作用。请注意设置为浅紫色的单词–当鼠标光标悬停在这些单词上时，它们会变成深紫色。另一个很棒的地方是，这种效果贯穿整个主页，从而创造了一致的用户体验。
Archi Site Mobius/White Square建筑工地
有许多例子表明，x射线效应几乎无法察觉，但它仍然存在，并产生了影响。考虑Archi Site Mobius和White Square。
这两个网站的英雄区相对较少。而在Archi Site Mobius的例子中，你会偶然发现一个全屏滑动条和标识，用白色方块你会发现只有抽象的图像背景和口号。仅此而已。
然而，它们并不像你想象的那么简单。x射线效应证明了这一点。它不仅丰富了用户体验，还为这两个项目带来了些许热情，使其与众不同。
相反Con
在选择鼠标光标的大小时，反向Con网站背后的团队依赖于中庸之道。他们的x射线扫描仪既不大也不小。这正是医生吩咐的。它不会分散人们对重要元素的注意力，同时允许用户在实际操作中享受这一奇妙的解决方案。
罗德里戈·马可纳托
与罗德里戈·马可纳托（Rodrigo Marconatto）的网站相比，前面提到的所有例子都相形见绌，至少在规模上是这样。欢迎部分用一个巨大的x射线扫描仪迎接你。如果你仔细观察，你会发现它也有放大镜的质量。这还不是全部。只要试着将鼠标光标移动到整个位置，您就会对其平滑的行为感到满意。感觉就像你正在顺利完成这个项目。
这种独特的效果和行为的混合，加上巨大的规模，使该解决方案成为派对上的明星和绝对赢家。
阿扎布
在这里，您不仅可以看到x射线效果，还可以看到应用于图像的红外效果。它们一起将常规用户体验转化为一次小冒险。尽管该网站在动态解决方案方面没有任何超现代的特色，但它看起来仍然很时髦。
结论
这听起来可能很有趣，也有点大胆，但x射线终于在网上得到了应用。当然，它不是一个精确的复制品（我们没有看到排版、标识或背景的实际骨架）。尽管如此，它看起来和行为都像我们期望的那样。
无论你选择像White Square这样的小扫描仪还是像Rodrigo Marconato这样的大扫描仪。无论您是仅将其应用于界面的一个元素，还是使其以其方式影响所有内容。无论如何，这一效果将为该项目增添独特魅力，留下深刻印象。
来源：https://speckyboy.com/looking-through-the-use-of-x-ray-effects/
