[CSS 3] Avatar hover effect
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS avatar scale</title>
<style>
.avatar {
width: 150px;
height: 150px;
background-size: cover;
border: 5px solid black;
border-radius: 50%;
cursor: pointer;
position: relative;
background-image: url("./girl.png");
}
.avatar::before, .avatar::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
}
.avatar::before {
background-color: rgba(0, 0, 0, 0.3);
}
.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>
</body>
</html>
分类:
CSS3
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
2023-10-05 [Signal] 1 - Basic version of signal
2022-10-05 [RxJS] Defer task execution with the asapScheduler (microtask)
2022-10-05 [Typescript] 42. Medium - Remove Index Signature
2020-10-05 [Typescript] Performance Bundling and tslib
2020-10-05 [Typescript] Enforcing Code Quality
2020-10-05 [Typescript] Understanding “lib” and ES libraries
2020-10-05 [Typescript] Configuration Inheritance with Extends