纯CSS实现hover图片pop-out弹出效果的实例代码
程序员文章站
2022-03-24 08:08:45
实现原理主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fig...
实现原理
主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 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))); }
到此这篇关于纯css实现hover图片pop-out弹出效果的文章就介绍到这了,更多相关css内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!