效果
思路
设置 3 层元素，最上层元素使用 clip-path 裁剪成圆，hover 改变圆大小，添加过渡效果。
实现代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
body {
background: #000;
}
.avatar {
background: url(../../../images/demo/img.jpg);
background-size: cover;
height: 200px;
width: 200px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.avatar::after,
.avatar::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
}
.avatar::before {
background: rgba(0, 0, 0, 0.5);
}
.avatar::after {
background: inherit;
clip-path: circle(0% at 50% 50%);
transition: 0.3s;
}
.avatar:hover::after {
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="avatar"></div>
<script></script>
</body>
</html>