zoukankan      html  css  js  c++  java
  • 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理

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

  • 相关阅读:
    Linux下通过.desktop 文件创建桌面程序图标及文件编写方式(Desktop Entry文件概述)
    Ubuntu16.04进入挂起或休眠状态时按任何键都无法唤醒问题解决办法
    Ubuntu16.04+Gnome3 锁定屏幕快捷键无效解决办法
    A start job is running for Raise network interface(5min 13s )问题解决方法
    Ubuntu16.04 “有线未托管”有线网络不可用问题解决
    A start job is running for Network Manager wait online (29s / no limit) 等待30s解决办法
    Linux 串口终端调试工具minicom
    Linux 终端仿真程序Putty
    Oracle:在 debian9 上完美安装 oracle 10.2.0.5 x64
    从debian9、ubuntu18.04的deb包依赖来看,似乎不是那么好!!
  • 原文地址:https://www.cnblogs.com/dragonir/p/14663284.html
Copyright © 2011-2022 走看看