实现原理
主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before
表示, 前景元素使用 figure img
表示,当鼠标 hover
悬浮至 figure
元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果。
背景元素 figure::before
前景元素 figure img
overflow: hidden
方式
1. 使用 主体元素的 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);