效果
思路
设置 3 层元素，最上层元素使用 clip-path 裁剪成圆，hover 改变圆大小，添加过渡效果。
实现代码
<!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>
