实现原理
次要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素应用伪元素 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)));
}