四角线框跟随移动

实现思路

pointer设置绝对定位，使用css变量动态改变线框的位置，通过mask蒙层设置线框只显示四个角

  <div class="container">
      <div class="pointer"></div>
      <div class="item">
        <img src="https://picsum.photos/id/311/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/312/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/313/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/314/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/315/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/316/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/317/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/318/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/319/240/240" alt="" />
      </div>
    </div>
  </body>

const imgs = document.querySelectorAll('.container img')
const pointer = document.querySelector('.pointer')

imgs.forEach(img => {
  img.addEventListener('mouseenter', e => {
    pointer.style.setProperty('--s', img.offsetWidth + 'px')
    pointer.style.setProperty('--x', img.offsetLeft + 'px')
    pointer.style.setProperty('--y', img.offsetTop + 'px')
  })
})

  <style>
    body {
      padding: 80px;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 80px;
      position: relative;
    }
    .item {
      width: 240px;
      height: 240px;
    }
    .item img {
      object-fit: cover;
      cursor: pointer;
      display: block;
    }
    .pointer {
      position: absolute;
      /* 线框的四角线长度 */
      --l: 30px;
      /* 线框的粗细 */
      --t: 3px;
      /* 线框的间距 */
      --g: 15px;
      /* 图片的尺寸 需要js控制*/
      --s: 240px;
      /* 图片左上角的横坐标 需要js控制*/
      --x: 0px;
      /* 图片左上角的纵坐标 需要js控制*/
      --y: 0px;
      /* 线框的宽度 */
      width: calc(var(--s) + var(--g) * 2);
      /* 线框的高度 */
      height: calc(var(--s) + var(--g) * 2);
      /* 线框的边框 */
      border: var(--t) solid #000;
      left: calc(var(--x) - var(--g));
      top: calc(var(--y) - var(--g));
      transform: 0.3s;
      /* 锥形渐变 */
      mask: conic-gradient(at 50px 50px, #0000 75%, blue 75%) left top/calc(100% - 50px) calc(100% - 50px);
    }
  </style>

来源

dy 渡一