使用filter实现聚光灯效果

废话不多说，先上效果

light

实现很简单，首先准备两张重叠图片底部图片显示灰度，上方图片显示原图并利用css的filter属性裁剪出圆形部分，即可实现如上效果，代码如下：

<div id="box">
  <img class="bg" ondragstart="return false;" src="https://i.pinimg.com/736x/a4/96/00/a496008c58815f0e1677ba24013f19bb.jpg" />
  <img id="filter-bg" class="bg-check" ondragstart="return false;" src="https://i.pinimg.com/736x/a4/96/00/a496008c58815f0e1677ba24013f19bb.jpg" />
</div>

1
2
3
4
5

div {
  position: relative;
  img {
    width: 500px;
    height: 300px;
    object-fit: cover;
    user-select: none;
    
  }
  .bg {
    filter: grayscale(95%);
  }
  .bg-check {
    position: absolute;
    left: 0;
    top: 0;
    clip-path: circle(50px at 142px 55px);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在js中，利用和拖拽一样的写法在鼠标点击、拖动时重新设置裁剪位置clip-path

let box = document.getElementById('box')
let sX, sY;
let clipEle = document.getElementById('filter-bg')
box.addEventListener('mousedown', (e) => {
  console.log('mousedown')
  sX = e.clientX;
  sY = e.clientY;
  console.log(sX, sY)
  clipEle.style.clipPath = `circle(50px at ${sX}px ${sY}px)`
  box.addEventListener('mousemove', mouseMove)
  box.addEventListener('mouseup', mouseUp)
})

function mouseMove(e) {
  sX = e.clientX;
  sY = e.clientY;
 clipEle.style.clipPath = `circle(50px at ${sX}px ${sY}px)`
}

function mouseUp() {
  // 移除鼠标移动和释放事件的监听
  box.removeEventListener('mousemove', mouseMove);
  box.removeEventListener('mouseup', mouseUp);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

上次更新: 2025/09/05, 8:09:00

← CSS实现圆角梯形利用backface-visibility hidden实现3d翻转双面card→