CSS特效：圆形、头像、蒙层hover效果，让你的设计秒变高级感！
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆形放大hover特效</title> </head> <style> .avatar { width: 200px; height: 200px; border-radius: 50%; cursor: pointer; position: relative; background: url(./icon.png) no-repeat; background-size: cover; border: 3px solid #000; }
.avatar::after, .avatar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.avatar::before { background: rgba(0, 0, 0, .5); }
.avatar::after { background: inherit; clip-path: circle(0% at 50% 50%); transition: .3s ease-in-out; }
.avatar:hover::after { clip-path: circle(50% at 50% 50%); } </style>
<body> <div class="avatar"></div> </body>
</html> |
