Web知识:纯CSS实现hover图片pop-out弹出效果的实例代码

2024年04月12日 14:00:21益点益滴648

实现原理

主要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素使用伪元素 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)));  }

Web知识:纯CSS实现hover图片pop-out弹出效果的实例代码都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~