前端 CSS 经典：图层放大的 hover 效果
效果
思路
设置 3 层元素，最上层元素使用 clip-path 裁剪成圆，hover 改变圆大小，添加过渡效果。
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="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>