多种CSS技巧实现霓虹灯和灯光效果

从太阳的自然光到我们家中的人造光，离线世界中的光线无处不在。光线会影响我们的视觉能力，也可以用来创造美感。您可以使用 CSS 创建光效，从而提高网站的视觉吸引力。虽然网页没有光源，但我们可以利用 CSS 的一些属性和元素来创建模仿光线的视觉效果。本文将向你展示用 CSS 创建光效的五种方法。

霓虹灯或荧光灯

在现实世界中，霓虹灯是通过电流穿过气体而产生的。霓虹灯的亮度和色彩取决于气体的种类。因此，霓虹灯常用于装饰展示。

您可以使用 CSS 为阴影添加颜色，从而创建这种效果。您可以使用两个属性来创建阴影，即 box-shadow 和 text-shadow 。

box-shadow 属性会在元素周围添加阴影，而 text-shadow 则会在文字周围添加阴影。

这是我们正在使用的 HTML：

<div>
<h1>Neon/Glowing Light</h1>
<h3>Colored shadows create glowing light</h3>
</div>

下面介绍如何使用 box-shadow 创建霓虹灯效果：

.content {
box-shadow: 0px 0px 10px 10px #00c2cb;
}

下面是如何使用 text-shadow 进行相同操作：

.content h1 {
text-shadow: 0px 0px 10px #00c2cb, 0px 0px 20px #fff;
}

下面是一张截图，显示了它的外观：

box-shadow 和 text-shadow 的样式类似。不同的是，文字阴影没有 spread。

您可以添加多个阴影层并使用不同的颜色来创建这种效果。

下面是 CodePen 演示：

请注意，还有第三种为元素添加阴影的方法，那就是使用 CSS drop-shadow() 过滤器。该过滤器只适用于图像，非常适合为背景透明的图像添加阴影。

漫反射

漫反射是指光线从粗糙的表面反射出来，如水泥墙、地板、纸张和衣服。

为此，您将使用 :before 伪元素。您可以使用任何 HTML 元素，但在本例中我们将使用一些文本。

<div>
<h1>Diffuse Reflection</h1>
</div>

接下来，创建一个伪元素，其 background-color 和尺寸与文本相同：

.content h1 {
position: relative;
font-size: 3rem;
font-weight: 600;
color: #00c2cb;
text-shadow: 0px 0px 10px #00c2cb, 0px 0px 20px #00c2cb;
margin: 3px;
}
.content h1::before {
content: "";
position: absolute;
top: 80%;
left: 0;
height: 100%;
width: 100%;
background: #00c2cb;
}

此时，你所拥有的只是一个普通的盒子。

为了让它看起来像光的反射，我们需要更多的属性，如 transform, blur, 和 opacity。

.content h1::before {
content: "";
position: absolute;
top: 80%;
left: 0;
height: 100%;
width: 100%;
background: #00c2cb;
transform: perspective(10px) rotateX(10deg) scale(1, 0.2);
filter: blur(1em);
opacity: 0.5;
}

perspective() 函数是 Z 轴上的距离，可以产生深度的错觉；它就像你的视点。 rotateX() 函数可以水平旋转元素。最后，scale() 在 x 轴和 y 轴上缩放元素，使其看起来更大或更小。在本例中，我们将在 Y 轴上缩小元素。

下面是反射的截图：

您还可以添加更多功能，如悬停效果。

这是您可以与之互动的 CodePen：

镜子反射

如果没有光线，你就无法看到镜子中的自己。使用 CSS 创建镜面反射有两种方法：使用 box-reflect 属性或伪元素。

box-reflect 属性对浏览器的支持有限。它只能在 Chrome、Edge 和 Opera 上使用 -webkit- 前缀。火狐浏览器不支持。

box-reflect: <position> <offset> <mask>;

在本例中，我们将使用一张图片。

<div>
<img src="1.jpg" alt="" />
</div>

然后，应用 box-reflect 属性并指定反射的位置。

.content img {
-webkit-box-reflect: below;
}

下面是此时您将看到的截图：

它是图像的复制品。然后，你可以在图像和倒影之间添加一个间隙。我们可以使用渐变透明的 linear-gradient 蒙版。

.content img {
-webkit-box-reflect: below 5px linear-gradient(transparent 50%, #22232e20);
}

下面是结果截图。

下面是 CodePen 演示：

同样，只有在支持 -webkit- 前缀的浏览器上才能看到这种效果，即使在 CodePen 上查看也是如此。

您还可以将此效果应用于文本。这就是使用相同代码所获得的效果：

由于 box-reflect 反映的是 HTML 元素周围的 “box”，因此图像和反射之间有很大的差距。

您可以调整偏移量来减小间隙。

 -webkit-box-reflect: below -30px linear-gradient(transparent 20%, #22232e20);

接着是伪元素。使用该方法为文本添加倒影的一种方法是输入伪元素的 content 属性。

.content h1::before {
content: "Mirror Reflection";
position: absolute;
top: 60%;
left: 0;
height: 100%;
width: 100%;
transform: rotate(180deg) scaleX(-1);
opacity: 0.1;
filter: blur(2px);
}

要添加淡出效果，可添加与 :before 元素大小相同的 :after 伪元素，并为其添加渐变 background，从透明渐变为与父元素背景相同的颜色。

.content h1::after {
content: "";
position: absolute;
top: 60%;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(transparent, #22232e 80%);
}

另外，在使用伪元素为文本添加反射时，也可以使用 data-text HTML 属性。

<div>
<h1 data-text="Mirror Reflection">Mirror Reflection</h1>
</div>

然后，您可以使用 CSS 进行样式调整：

.content h1::before {
content: attr(data-text);
position: absolute;
top: 60%;
left: 0;
height: 100%;
width: 100%;
transform: rotate(180deg) scaleX(-1);
opacity: 0.2;
}

这就是如何为文本添加镜像效果。所有现代浏览器都支持伪元素。

下面是 CodePen 演示：

对于图片，您需要使用 background-image 属性，而不是图片本身。

下面是 HTML：

<section id="main">
<div class="image"></div>
</section>

然后，您可以在 div 中添加一个 background-image，其类名为 image。

.image {
background-image: url(/1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: red;
width: 350px;
height: 200px;
position: relative;
}

然后，添加伪元素，它将具有与主元素相同的大部分属性。transform 属性将旋转和反转反射图像。

.image::before {
content: "";
position: absolute;
top: 102%;
left: 0;
width: 350px;
height: 200px;
background-color: red;
background-image: url(/1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scaleY(-1);
opacity: 0.2;
}

最后，添加第二个伪元素，完成反射效果。

.image::after {
content: "";
position: absolute;
top: 102%;
left: 0;
width: 350px;
height: 200px;
background-image: linear-gradient(transparent, #22232e 50%);
}

为了避免重复，可以简化 CSS 代码。

.image {
background: url(/1.jpg) center / cover no-repeat;
width: 350px;
height: 200px;
position: relative;
}
.image::before,
.image::after {
content: "";
position: absolute;
top: 102%;
left: 0;
width: 350px;
height: 200px;
}
.image::before {
transform: scaleY(-1);
opacity: 0.2;
background: url(/1.jpg) center / cover no-repeat;
}
.image::after {
background-image: linear-gradient(transparent, #22232e 50%);
}

下面的 CodePen 演示了这种效果：

水面倒影

您将按照与镜面反射几乎相同的步骤使用伪元素来获得这种效果。不同之处在于添加了 feTurbulence 和 feDisplacementMap 这两个 SVG 滤镜基元来创建水波效果。

您将在 HTML 文档的 body 中添加 SVG。SVG 滤镜与 HTML <filter> 元素配合使用，CSS  filter 属性将通过 id 引用该元素。

下面是一个 SVG 语法示例：

<svg>
<filter id="">
<!--Add filter primitives-->
</filter>
</svg>

我们从 feTurbulence 过滤器原型开始。

<svg>
<filter id="water">
<feTurbulence
id="turbulence"
type="turbulence"
numOctaves="1"
result="WAVES"
></feTurbulence>
</filter>
</svg>

当应用于图像时，会产生噪点效果。下面是它的截图：

该基元包含两个属性： numOctaves 和 baseFrequency ，用于控制失真程度。

接下来，添加 feDisplacementMap 原始元素。这将把一个元素的纹理应用到另一个元素上。在本例中，它将把 feTurblance 创建的变形（以 result 或名称 WAVES 表示）应用到 sourceGraphic（即伪元素反射）上。

<svg>
<filter id="wavy">
<feTurbulence
id="turbulence"
type="turbulence"
numOctaves="1"
result="NOISE"
></feTurbulence>
<feDisplacementMap
in="SourceGraphic"
in2="NOISE"
scale="50"
></feDisplacementMap>
<animate
xlink:href="#turbulence"
attributeName="baseFrequency"
dur="60s"
keyTimes="0;0.5;1"
values="0.01 0.02;0.1 0.2;0.01 0.02"
repeatCount="indefinite"
></animate>
</filter>
</svg>

<animate> 元素定义了 SVG 动画的行为。它包含一个链接，指向我们要应用动画的基元的 id 。它还包含了我们要应用动画的属性名称，即 baseFrequency。接着，设置动画的持续时间和 keyTimes，其功能类似于 CSS 动画中的 @keyframes。然后，在每个停止点添加动画属性 values 和迭代。

下面的 CodePen 演示了这种效果：

聚光灯悬停效果

您需要使用 JavaScript onmousemove 事件监听器来创建此效果。

我们将从 HTML 开始，HTML 将是一张带有一些文字的简单卡片。

<section>
<div class="content" style="--light: #00c2cb;">
<h1>Spotlight Effect</h1>
<h3>Hover on this card to see the magic</h3>
</div>
</section>

它包含一个 CSS 自定义属性 --light，即灯光的颜色。

接下来，使用 CSS 创建样式。

section {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.content {
position: relative;
width: 600px;
height: 400px;
border-radius: 20px;
background: rgba(31,32,39,1);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1;
}
.content h1{
font-size: 3rem;
color: #00c2cb;
z-index: 3;
}
.content h3{
font-size: 20px;
color: #e0ffff;
z-index: 3;
}

现在在卡片上创建一个 :before 伪元素。

.content::before{
content: '';
position: absolute;
background: radial-gradient(var(--light),transparent,transparent);
width: 600px;
height: 600px;
}

background 将作为聚光灯，它是一个radial-gradient ，使用 HTML 中指定的自定义颜色。

下面是你应该得到的截图：

let content = document.querySelectorAll('.content');
content.forEach(card => {
card.onmousemove = function (e) {
let x = e.pageX - card.offsetLeft;
let y = e.pageY - card.offsetTop;
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
};
});

onmousemove 事件监听器会计算鼠标指针相对于元素的 X 和 Y 坐标，并将自定义属性 --x 和 --y 设置为这些坐标。

接下来，将此应用于 :before 伪元素。

.content::before{
content: '';
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%,-50%);
background: radial-gradient(var(--light),transparent,transparent);
width: 600px;
height: 600px;
opacity: 0;
transition: 0.5s, top 0s, left 0s;
}
.content:hover::before{
opacity: 1;
}

我们还将不透明度设置为 0 ，使聚光灯在悬停在卡片上时可见。

此时，您可以决定添加 :after 伪元素。

.content::after{
content: '';
position: absolute;
inset: 2px;
border-radius: 18px;
background-color: rgba(31,32,39,0.7);
z-index: 2;
}

与 :before 元素相比，该元素的背景略微透明，并且有一个 inset，因此看起来就像卡片有边框一样。

下面是一个代码段，显示了您可以与之交互的最终结果：

小结

你刚刚学会了用 CSS 创建光效的五种不同方法。首先，我们为两个阴影属性添加了颜色，以创建霓虹灯光。然后，我们使用 :before 和 :after 伪元素以及 box-reflect CSS 属性，介绍了几种反射类型。最后，我们使用 onmousemove JavaScript 事件监听器创建了聚光灯效果。

灯光在离线环境下有很多用途，在在线环境下也可以增加网站的视觉吸引力。