圆形聚光灯示例

鼠标移动时始终跟随光标的圆形聚光灯效果。

可用于突出显示网页上的关键元素和新功能。

使用CSS背景渐变属性。

如何使用

.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(50px 50px at center center, transparent, transparent 100px, rgba(0, 0, 0, 0.6) 150px);
  opacity: 0;
  animation: fadein 2s 1s 1 both;
}