圆形放大的hover效果

<template>
  <div class="container">
    <div class="avatar"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
</script>
<style lang="scss" scoped>
//  clip-path: circle(); // 以元素的中心点为圆的中心点，最小宽度一半为圆的半径。
//  clip-path: circle(50%);  // 半径50%；
//  clip-path: circle(at 50% 50%); // 中心点位置在x：50%，y：50%。
//  clip-path: circle(50% at 50% 50%); // 半径50%；中心点位置在x：50%，y：50%。
//  clip-path: circle(50px at 50px 50px); // 半径50px；中心点位置在x：50px，y：50px。
.avatar{
  background: url('https://picsum.photos/200/300') center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 5px solid #000;
}
.avatar::before,.avatar::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: all 0.3s;
  left: 0;
  top: 0;
}
.avatar::before{
  background: rgba(0,0,0,0.5);
}
.avatar::after{
  background: inherit;
  clip-path: circle(0% at 50% 50%);
}
.avatar:hover::after{
  clip-path: circle(50% at 50% 50%);
}
</style>