先上效果图
再上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
align-items: center;
background-color: #f2f2f2;
display: flex;
font-family: "Merriweather", serif;
flex-wrap: wrap;
justify-content: center;
height: 100vh;
margin: 0;
}
.person {
align-items: center;
display: flex;
flex-direction: column;
width: 280px;
}
.container {
border-radius: 50%;
height: 312px;
-webkit-tap-highlight-color: transparent;
transform: scale(0.48);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
width: 400px;
}
.container:after {
background-color: #f2f2f2;
content: "";
height: 10px;
position: absolute;
top: 390px;
width: 100%;
}
.container:hover {
transform: scale(0.54);
}
.container-inner {
clip-path: path(
"M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
);
position: relative;
transform-origin: 50%;
top: -200px;
}
.circle {
background-color: #fee7d3;
border-radius: 50%;
cursor: pointer;
height: 380px;
left: 10px;
pointer-events: none;
position: absolute;
top: 210px;
width: 380px;
}
.img {
pointer-events: none;
position: relative;
transform: translateY(20px) scale(1.15);
transform-origin: 50% bottom;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.container:hover .img {
transform: translateY(0) scale(1.2);
}
.img1 {
left: 22px;
top: 164px;
width: 340px;
}
.img2 {
left: -46px;
top: 174px;
width: 444px;
}
.img3 {
left: -16px;
top: 144px;
width: 466px;
}
.divider {
background-color: #ca6060;
height: 1px;
width: 160px;
}
.name {
color: #404245;
font-size: 36px;
font-weight: 600;
margin-top: 16px;
text-align: center;
}
.title {
color: #6e6e6e;
font-family: arial;
font-size: 14px;
font-style: italic;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="person">
<div class="container">
<div class="container-inner">
<img
class="circle"
src="../web/img/women.png"
alt="背景"
/>
<img
class="img img1"
src="../web/img/women1.png"
alt="人物"
/>
</div>
</div>
<div class="divider"></div>
<div class="name">Alma</div>
<div class="title">Product Manager</div>
</div>
<div class="person">
<div class="container">
<div class="container-inner">
<img
class="circle"
src="../web/img/wow.png"
alt="背景"
/>
<img
class="img img2"
src="../web/img/wow1.png"
alt="人物"
/>
</div>
</div>
<div class="divider"></div>
<div class="name">Irma</div>
<div class="title">Senior Developer</div>
</div>
<div class="person">
<div class="container">
<div class="container-inner">
<img
class="circle"
src="../web/img/man.png"
alt="背景"
/>
<img
class="img img3"
src="../web/img/man1.png"
alt="人像"
/>
</div>
</div>
<div class="divider"></div>
<div class="name">Anton</div>
<div class="title">Senior UX</div>
</div>
</body>
</html>
