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


Posted in HTML / CSS onApril 16, 2021

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

到此这篇关于纯CSS实现hover图片pop-out弹出效果的文章就介绍到这了,更多相关css内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 #HTML / CSS
Html5新增了哪些功能
Apr 16 #HTML / CSS
Html5调用企业微信的实现
Apr 16 #HTML / CSS
CSS3 制作的图片滚动效果
CSS3常见动画的实现方式
Apr 14 #HTML / CSS
CSS3实现的水平标题菜单
Apr 14 #HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
详解php实现页面静态化原理
2017/06/21 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
cookie的secure属性详解
2015/04/08 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python中实现k-means聚类算法详解
2017/11/11 Python
pandas中去除指定字符的实例
2018/05/18 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python操作gitlab API过程解析
2019/12/27 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
adidas美国官网:adidas US
2016/09/21 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
撤诉申请书法院范本
2015/05/18 职场文书
在校证明模板
2015/06/17 职场文书
在校学生证明格式
2015/06/24 职场文书
美容院管理规章制度
2015/08/05 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
python 单机五子棋对战游戏
2022/04/28 Python