如何使用 HTML 和 CSS 创建聚光灯效果

聚光灯效果是一种常见的网页设计效果，它可以让某个元素在高亮的同时，让其它元素模糊、透明或变灰色。本文将介绍如何使用 HTML 和 CSS 创建聚光灯效果。

实现方式

我们可以使用 CSS 的 filter 属性实现聚光灯效果。filter 属性可以改变元素的可视效果，它可以应用一个或多个滤镜函数来模糊、调整亮度、对比度、饱和度等效果。

下面我们来看一个简单的例子：

<div class="wrapper">
    <div class="spotlight"></div>
</div>

.wrapper {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #eee;
}

.spotlight {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    filter: blur(25px) brightness(0.5);
}

如上所示，我们创建一个宽为 300px、高为 200px 的父容器，里面包含一个宽为 200px、高为 100px 的子容器，用于展示聚光灯效果。我们给父容器设置了背景颜色，用于展示效果。子容器使用了圆形遮罩，并且添加了模糊和调整亮度的效果，最终呈现出聚光灯的效果。

更多效果

除了模糊和调整亮度之外，我们还可以使用更多的滤镜函数来实现更加丰富的聚光灯效果。

1. 透明度

通过设置 alpha 通道，我们可以让聚光灯变得透明，从而展现出下面的元素。

.spotlight {
    /* ... */
    background-color: rgba(255, 255, 255, 0.3);
    filter: blur(25px) brightness(0.5) opacity(0.5);
}

2. 变灰

我们可以使用 grayscale() 函数让元素变灰，从而让聚光灯更加突出。

.spotlight {
    /* ... */
    filter: grayscale(100%);
}

3. 饱和度

我们可以使用 saturate() 函数调整元素的饱和度，从而达到更加鲜明的聚光灯效果。

.spotlight {
    /* ... */
    filter: saturate(200%);
}

总结

本文介绍了如何使用 HTML 和 CSS 创建聚光灯效果，通过使用 CSS 的 filter 属性，我们可以轻松实现模糊、调整亮度、饱和度等滤镜效果来创造不同的聚光灯效果。