avatar-out #

<template>
 <!-- https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/#top-of-site -->
 <div>
   <img
     src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0734ec5bd1449d8933ce76fb4b9a700~tplv-k3u1fbpfcp-watermark.image?"
     alt="">
 </div>
</template>
<script setup>

</script>
<style scoped>
img {
 box-sizing: content-box;
 --s: 200px;
 /* image size */
 --b: 6px;
 /* border thickness */
 --c: #ae3ec9;
 /* border color */
 --cb: #e9ecef;
 /* background color */
 --f: 1;
 /* initial scale */

 width: var(--s);
 aspect-ratio: 1;
 padding-top: calc(var(--s)/5);
 cursor: pointer;
 border-radius: 0 0 999px 999px;
 --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
 --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
 outline: var(--b) solid var(--c);
 outline-offset: var(--_o);
 background:
   radial-gradient(circle closest-side,
     var(--cb) calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g);
 -webkit-mask:
   linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
   radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
 transform: scale(var(--f));
 transition: .5s;
}

img:hover {
 --f: 1.4;
 /* hover scale */
}


body {
 margin: 0;
 min-height: 100vh;
 display: grid;
 place-content: center;
 grid-auto-flow: column;
 gap: 30px;
 background: #E0E4CC;
}
</style>