鼠标指针特效

<template>  <div class="effect-container" @mousemove.prevent="applyEffect">    <div class="effect-indicator" :style="{ top: effectY-10 + 'px', left: effectX-10 + 'px' }"></div>    <!-- 页面其他内容 -->    {{effectX}}    {{effectY}}  </div></template><script setup lang="ts">import { ref } from 'vue';// 声明响应式变量存储特效位置const effectX = ref(0);const effectY = ref(0);// 鼠标移动事件处理器function applyEffect(event: MouseEvent) {  // 更新响应式变量的值  effectX.value = event.clientX;  effectY.value = event.clientY;}</script><style scoped>.effect-container {  position: relative;  /* 适当设置宽高，覆盖整个页面或需要应用特效的区域 */  width: 100%;  height: 100vh;}.effect-indicator {  border-radius: 50%;  width:10px;  height: 10px;  box-shadow: 0 1px 20px 0 red;  position: absolute;  opacity: 0;  transition: opacity 0.3s ease;  pointer-events: none; /* 避免影响鼠标事件 */}.effect-container:hover .effect-indicator {  opacity: 1;}</style>