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

傷城~ 2022-08-28 04:49 14阅读 0赞

![f5c139023768c483ccef11d0111c1310.gif][]

## 实现原理 ##

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

背景元素 `figure::before`  
![2aa2041fd3bbad38439d392452748ebb.png][]

前景元素 `figure img`  
![a34b7564390b5cda771675b6822dc6ab.png][]

## 1. 使用 `overflow: hidden` 方式 ##

主体元素的 `html` 结构由一个 `figure` 元素包裹的 `img` 元素构成：

在 `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()` 方式 ##

样式基本上与第一种相同，使用 `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

[f5c139023768c483ccef11d0111c1310.gif]: /images/20220828/5ca23f4f250241a6baa64371756d2273.png
[2aa2041fd3bbad38439d392452748ebb.png]: /images/20220828/cb61310b016c49eb8a6d118bb18f6da9.png
[a34b7564390b5cda771675b6822dc6ab.png]: /images/20220828/8224279e079c4dbdb2a94fa571b8e238.png