利用css属性clip-path来绘制图片遮罩

MDN

<template>
  <img ref="img" class="img active" src="./assets/pic.jpg" alt="">
</template>

<style>
:root {
  box-sizing: border-box;
}

html,
body {
  all: unset
}

.app {
  background-color: var(--color);

}

.img {
  object-fit: cover;
  width: 500px;
  height: 500px;
  clip-path: circle(0% at 0% 50%);
  transition: 1s;
}

.img.active {
  clip-path: circle(50% at 50% 50%);
}
</style>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
const img = ref(null)
const timer = onMounted(() => {
  setInterval(() => {
    img.value.classList.toggle('active')
  }, 1500);
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>