网页设计中的 12 种令人惊叹的复古霓虹灯效果
已发表: 2021-04-06从盖斯勒管演变而来的霓虹灯标志是 1920 年代至 60 年代美国的一个特征。 它标志着几十年，并创造了自己独特的时代——一个明亮多彩的夜晚，每个角落都有霓虹灯招牌。
毫无疑问，霓虹灯标志是过去的事情。 它是复古风格的代名词。 但它并不像过去美好时光中的古老东西那么沉闷。 它有热情； 它有一种氛围。 它丰富多彩的性质和鲜明的个性使它保持活力。
尽管在现实生活中使用霓虹灯的趋势正在消亡，让位于更复杂、更优雅的“绿色”解决方案，但在网上仍有很多地方可以看到它。 这是它可以发挥其魅力的地方。 鉴于一股怀旧浪潮席卷全球，霓虹灯标志可以成为创造符合当今主流设计的理想选择。
有几种方法可以在您的界面中引入复古荧光触摸。 最明显和最简单的方法是将其用作显示铭牌、标语或仅显示网站基于文本的详细信息的风格选择。 今天，我们将向您展示一些将这种效果变为现实的优秀代码片段。
Aaron Minnamon 的 Hot Ones 霓虹灯广告
Aaron Minnamon 的项目对 50 年代的美国城市风格有着独特的感觉。 它明亮、大胆、大胆。 它看起来很真实，这要归功于以不断闪烁而闻名的霓虹灯标志的巧妙再现行为。 这个小而令人印象深刻的动画是在 HTML、SCSS 和 JavaScript 的帮助下实现的。
来自 Nodws 的 CSS 动画霓虹灯标志 / Riccardo Tartaglia 来自拉斯维加斯的霓虹灯
Nodws 和他出色的 Dribble 专用项目，以及 Riccardo Tartaglia 和他出色的来自拉斯维加斯的 Neon，都选择了传统路线。 他们提出了完美模仿传统霓虹路牌的概念。
演示看起来很相似。 每一个都有霓虹灯标志，靠在砖墙上。 两者都富含微小的动态，使场景看起来很生动； 并且每一个都有光鲜亮丽的外表。 艺术家们只用了几行 HTML 代码和 CSS，使解决方案不仅令人赏心悦目，而且轻巧。
Kyle Lavery 的复古霓虹灯广告
如果您需要在您的网站上营造出明显的复古感，您应该尝试 Kyle Lavery 的 Vintage Neon Sign。 它在各个方面都散发着 60 年代的气息。 轮廓分明的排版，加上霓虹灯色彩，并由漂亮的管状背景支持，看起来棒极了。 即使字体没有设置为装饰类型，它无疑会给任何项目增添一些花哨的感觉。
Prima Utama Apriansyah 的项目
Prima Utama Apriansyah 的项目具有悬停时显示的霓虹灯效果。 共有三种颜色可供选择：红色、蓝色和黄色。 每一个看起来都很棒。 一切都是用纯 HTML 和 CSS 制作的——不需要 JavaScript。 这种解决方案的优点是霓虹灯效果是隐藏的，并且在显示时会给访问者留下深刻印象。
Mai El-Awini 的霓虹灯网格装载机
好了，文字效果就到此为止。 让我们考虑一些在界面中添加荧光魔法的其他方法。 一种替代方法是将霓虹灯样式应用于加载动画，就像 Mai El-Awini 对 Neon Grid Loaders 所做的那样。
在这里，您会发现四种不同的加载器，它们与一个主题和颜色相关联。 尽管它们很原始，但霓虹灯效应肯定会将它们提升到一个新的水平。 在黑暗的背景下，它们看起来简直太棒了。 他们将在等待您的网站完成所有准备工作时招待访问者。
Simone 纽扣 / Elwin van den Hazel 霓虹纽扣
其他界面细节也可以从霓虹灯风格中受益。 例如，考虑按钮。 由于“幽灵”号召性用语仍然很受欢迎，因此霓虹灯效果再合适不过了。
有两个优秀的代码片段可供尝试：一个由 Simone 制作，另一个由 Elwin van den Hazel 制作。 它们都包括一个简单而优雅和微妙的霓虹灯按钮。 虽然第一个由于柔和的色彩而有点阴沉，但第二个肯定会以其充满活力的蓝色调和发光效果立即吸引眼球。 一切都是用纯 HTML 和 CSS 制作的。
Hugo DarbyBrown 的霓虹灯对话框
您也可以将霓虹灯样式应用于对话框。 看看 Hugo DarbyBrown 的 Neon Dialog Boxes。 作者包含了四个常规的对话面板。 他们看起来大胆而迷人，但没有在所有方面尖叫。 霓虹灯效果给平庸的 UI 元素带来了不错的转折。
Matei Copot 的霓虹灯六边形 / Neon Hex Particles – Brett 的娱乐 / Gerard Ferrandez 的一段时间
虽然我们认为霓虹灯样式可以应用于网站的独立细节（如按钮、排版或加载器），但它也可以轻松制作杀手级背景。 考虑一下 Matei Copot 的霓虹灯六边形、Brett 的 Neon Hex Particles – Recreation 和 Gerard Ferrandez 的一段时间。
Matei Copot 为在线访问者提供了一个奇妙的霓虹灯风格的蜂窝式背景，每个单元都有自己的寿命。 颜色从紫色变为绿松石色，看起来很鼓舞人心。
布雷特的概念带有神秘色彩。 它也是基于六边形的，但这次你也可以看到一个显示动画。 图案出现在中心并向两侧生长。 有一个控制面板，您可以在其中进行设置。
与前两个示例不同，Gerard Ferrandez 的项目采用了现代风格的霓虹灯风格。 在这里，您会发现数以千计的小颗粒形成一个矩形。 使用鼠标光标扰动平坦的表面，并掀起以金色霓虹色为标志的波浪。
发光的例子
虽然霓虹灯效应并没有做任何不寻常的事情，但它仍然是那些立即引起注意的事情之一。 这是使网站的细节更加突出的好工具。
它可以用来设置焦点，或者只是用荧光性质的明亮魅力来为事情增添一点情趣。 它与排版、按钮甚至背景完美搭配。
是的，它有一个很大的缺点——它只有在黑暗的环境中才能展现出它的美丽和潜力。 因此，如果您使用的是较轻的 UI，那么它不是最佳选择。 但是，如果您有一些黑暗的设计，那么霓虹灯效果可以成为给您的访客留下深刻印象的完美工具。