实现原理

次要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素应用伪元素 figure::before 示意, 前景元素应用 figure img 示意,当鼠标hover悬浮至figure元素时,背景元素产生变大成果,前景元素产生变大并向上挪动成果,从而从视觉上实现弹出成果。

背景元素 figure::before

前景元素 figure img

1. 应用 overflow: hidden 形式

主体元素的 html 构造由一个 figure 元素包裹的 img 元素形成:

<figure>  <img src='./man.png' alt='Irma'></figure>

css 中设置了两个变量 --hov--not-hov 用于管制 hover 元素时的放大以及位移成果。并对 figure 元素增加 overflow: hidden,设置 padding-top: 5% 用于前景元素超出背景元素时不被截断(非必须:并应用了 clamp() 函数用来动静设定 border-radius 以动静响应页面缩放)

figure {  --hov: 0;  --not-hov: calc(1 - var(--hov));  display: grid;  place-self: center;  margin: 0;  padding-top: 5%;  transform: scale(calc(1 - .1*var(--not-hov)));  overflow: hidden;  border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);}figure::before, figure img {  grid-area: 1/1;  place-self: end center;}figure::before {  content: "";  padding: clamp(4em, 20vw, 15em);  border-radius: 50%;  background: url('./bg.png') 50%/cover;}figure:hover {  --hov: 1;}img {  width: calc(2*clamp(4em, 20vw, 15em));  border-radius: clamp(4em, 20vw, 15em);  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}

2. 应用 clip-path: inset() 形式

<figure>  <img src='./man.png' alt='Irma'></figure>

款式基本上与第一种雷同,应用 clip-path 来截取圆形背景区域。

figure {  --hov: 0;  --not-hov: calc(1 - var(--hov));  display: grid;  place-self: center;  margin: 0;  padding-top: 5%;  transform: scale(calc(1 - .1*var(--not-hov)));  clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));}figure::before, figure img {  grid-area: 1/1;  place-self: end center;}figure::before {  content: "";  padding: clamp(4em, 20vw, 15em);  border-radius: 50%;  background: url('./bg.png') 50%/cover;}figure:hover {  --hov: 1;}figure:hover::before {  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}img {  width: calc(2*clamp(4em, 20vw, 15em));  border-radius: clamp(4em, 20vw, 15em);  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}

残缺示例

  <h2>应用overflow: hidden形式</h2>  <figure>    <img src='./man.png' alt='Irma'>  </figure>  <h2>应用clip-path: path()形式</h2>  <figure>    <img src='./man.png' alt='Irma'>  </figure>
body {  display: grid;  background: #FDFC47;  background: -webkit-linear-gradient(to right, #24FE41, #FDFC47);  background: linear-gradient(to right, #24FE41, #FDFC47);}figure {  --hov: 0;  --not-hov: calc(1 - var(--hov));  display: grid;  place-self: center;  margin: 0;  padding-top: 5%;  transform: scale(calc(1 - .1*var(--not-hov)));}figure:nth-of-type(1) {  overflow: hidden;  border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);}figure:nth-of-type(2) {  clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));}figure, figure img {  transition: transform 0.2s ease-in-out;}figure::before, figure img {  grid-area: 1/1;  place-self: end center;}figure::before {  padding: clamp(4em, 20vw, 15em);  border-radius: 50%;  background: url('./bg.png') 50%/cover;  content: "";  transition: .25s linear;}figure:hover {  --hov: 1;}figure:hover::before {  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}img {  width: calc(2*clamp(4em, 20vw, 15em));  border-radius: clamp(4em, 20vw, 15em);  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}