css聚光灯效果

CSS聚光灯效果是一种非常酷的效果，可以将页面中的某个元素高亮出来，使其成为焦点。下面我们来学习如何实现聚光灯效果。

/* 定义聚光灯 */
.spotlight {
  position: relative;
}
/* 聚光灯遮罩 */
.spotlight::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}
/* 聚光灯中心点 */
.spotlight::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
 

首先，我们需要定义一个包裹聚光灯元素的容器，并为其设置相对定位。接着，我们需要添加一个伪元素来充当聚光灯的遮罩，避免对页面其他元素产生影响。对于遮罩，我们可以使用绝对定位和半透明背景色来实现。同时，我们需要将遮罩的z-index属性设置为1，以使其在聚光灯的中心点之前。

接下来，我们需要为聚光灯添加一个中心点。我们同样可以使用伪元素来实现，将其放置在聚光灯元素的中心位置，并为其设置相对的尺寸、边框、背景色和阴影效果。将中心点的z-index属性设置为2，以使其位于聚光灯遮罩之上。

最后，我们只需要将需要聚光的元素包裹在聚光灯元素内即可。为了让聚光灯效果更佳，可以使用JavaScript动态改变聚光灯的位置和尺寸。