欢迎光临
我的个人博客网站

两种纯CSS方式实现hover图片pop-out弹出效果

两种纯CSS方式实现hover图片pop-out弹出效果

实现原理

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

背景元素 figure::before
两种纯CSS方式实现hover图片pop-out弹出效果

前景元素 figure img
两种纯CSS方式实现hover图片pop-out弹出效果

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

文章地址: https://www.cnblogs.com/dragonir/p/14663284.html 作者:dragonir

赞(0) 打赏
未经允许不得转载:张拓的天空 » 两种纯CSS方式实现hover图片pop-out弹出效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏