css鼠标移动效果高亮追随效果

如图所示，鼠标移动有一块高亮随着鼠标移动。代码如下：(vue3篇)

<div class="container">
      <span class="use-hover-hglh-element trail" :style="isShow ? dyStyle : { opacity: 0 }"></span>
    </div>

  const isShow = ref(false)
  const dyStyle = {
    height: "240px",
    width: "240px",
    filter: "blur(48px)", //模糊程度，数值越大越模糊
  }
  onMounted(() => {
    const container = document.querySelector(".container")
    const trail = document.querySelector(".trail")
    container.addEventListener("mousemove", function (e) {
      isShow.value = true
      // 获取 container 的边界信息
      const rect = container.getBoundingClientRect()

      // 计算鼠标相对于 container 的位置
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      // 将拖尾的元素位置更新到鼠标的位置
      trail.style.transform = `translate(${x}px, calc(${y}px - 50%))`
    })

    container.addEventListener("mouseleave", function () {
      isShow.value = false
      trail.style.removeProperty("transform")
    })
  })

 .container {
    z-index: 0;
    inset: 0px;
    overflow: hidden;
    border-radius: 12px;
    width: 300px;
    height: 300px;
    background: hsla(0, 0%, 100%, 0.5);
    border-radius: 12px;
    box-sizing: border-box;
    border: 1px solid #fff;
    margin-bottom: 16px;
    cursor: pointer;
    padding: 24px 24px 0;
    position: relative;
    transition: background color 0.3s;
    &:hover {
      background: linear-gradient(90deg, #33adff, #1a7af8);
      border-width: 0;
      color: #fff;
    }
    .use-hover-hglh-element {
      z-index: 0;
      position: absolute;
      left: -25%;
      top: 0%;
      padding-bottom: 58%;
      width: 58%;
      height: 0px;
      pointer-events: none;
      border-radius: 50%;
      background: rgb(0, 194, 255);
      filter: blur(24px);
      // opacity: 0;
    }
  }

原文地址：https://blog.csdn.net/m0_65915285/article/details/143792594

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！