atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

undo formatting

Browse Source
This commit is contained in:
xzadudu179
2025-08-28 18:15:26 +08:00
parent 3693222016
commit 89146978b7
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/content/Animations/TargetCursor/TargetCursor.vue
View File

@@ -35,7 +35,7 @@ const moveCursor = (x: number, y: number) => {
}); });
}; };
let cleanupAnimation: () => void = () => { }; let cleanupAnimation: () => void = () => {};
const setupAnimation = () => { const setupAnimation = () => {
if (!cursorRef.value) return; if (!cursorRef.value) return;
@@ -336,22 +336,30 @@ watch(
</script> </script>
<template> <template>
<div ref="cursorRef" <div
ref="cursorRef"
class="top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0" class="top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0"
:style="{ willChange: 'transform' }"> :style="{ willChange: 'transform' }"
<div class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform" >
:style="{ willChange: 'transform' }" /> <div
class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform"
:style="{ willChange: 'transform' }"
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform"
:style="{ willChange: 'transform' }" /> :style="{ willChange: 'transform' }"
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" /> :style="{ willChange: 'transform' }"
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" /> :style="{ willChange: 'transform' }"
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" /> :style="{ willChange: 'transform' }"
/>
</div> </div>
</template> </template>