【vue3】vue3中实现鼠标点击后出现点击特效

参考文章：vue3中实现鼠标点击后出现点击特效

一、效果展示

图片下方为效果体验地址

完整代码

我是将效果代码放到layout文件中，这样所有页面都经过layout 就是都有点击效果了。作者原文章是用到了ts，我这里没用就删掉了，项目中用ts的可以去看看作者原文章，写的也很好，可以多多支持下。参考文章：vue3中实现鼠标点击后出现点击特效

<template>
  <div class="layout">
    <router-view></router-view>
  </div>
</template>

<script setup >
window.addEventListener("click", (e) => {
  const pointer = document.createElement("div");
  pointer.classList.add("pointer");
  pointer.style.left = `${e.clientX}px`;
  pointer.style.top = `${e.clientY}px`;
  pointer.style.transform = "translate(-50%, -50%)";
  document.body.appendChild(pointer);
  // 监听动画结束事件，结束后移除元素
  pointer.addEventListener("animationend", () => {
    pointer.remove();
  });
});
</script>

<style>
.pointer {
  position: absolute;
  border-radius: 50%; /* 确保形状为圆形 */
  background-color: rgba(
    22,
    66,
    75,
    0.4
  ); /* 半透明红色作为示例，可以根据需要调整 */
  opacity: 0; /* 初始不显示，动画开始时会逐渐显现 */
  z-index: 999; /* 确保圆圈在最上层 */
  animation: grow 0.4s forwards; /* 指定动画名称和持续时间 */
  pointer-events: none;
}

/* 动画关键帧，实现圈的扩大效果 */
@keyframes grow {
  from {
    width: 0;
    height: 0;
    opacity: 1;
  }
  to {
    width: 100px; /* 圈的最大直径 */
    height: 100px;
    opacity: 0;
  }
}
</style>

下班~