纯CSS代码实现图片弹出效果

1. 使用 overflow: hidden 方式

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 {
–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)));
}

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、本站解压密码统一为:yudouyudou
3、本站微信客服/失效补发:rsst58
4、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
5、关于下载,播放声音字幕,解压等问题,请点击查看>>常见问题
时光屋 » 纯CSS代码实现图片弹出效果

发表评论

至臻视听_发烧收藏

会员介绍 常见问题