加入收藏 | 设为首页 | 会员中心 | 我要投稿 好传媒网 (https://www.haochuanmei.com/)- 区块链、物联平台、物联安全、数据迁移、5G!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

如何用CSS实现头像图片的弹出效果

发布时间:2023-12-18 08:27:51 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是用CSS怎样实现头像图片的弹出效果的示例,实现效果如果,鼠标移过有图像弹出来的效果,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴
这篇文章给大家分享的是用CSS怎样实现头像图片的弹出效果的示例,实现效果如果,鼠标移过有图像弹出来的效果,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。

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

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怎样实现头像图片的弹出效果的介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习CSS的使用有帮助。

(编辑:好传媒网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章