您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现hover图片pop-out弹出效果的实例代码利用HTML、CSS实现的图片预览弹出层的教程jquery+css3实现的鼠标滑过图片向上弹出放大效果

2021-09-02 1175人已围观

简介这篇文章主要介绍了纯CSS实现hover图片pop-out弹出效果的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

实现原理

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

背景元素 figure::before

前景元素 figure img

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

完整示例

使用overflow: hidden方式
使用clip-path: path()方式

 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内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS3实现的文字弹出特效纯css3发光霓虹灯文字闪烁特效代码CSS3文字图标组合悬停UI动画特效源码css3鼠标悬停图片3D翻页显示文字描述特效基于css3+svg实现的文字轮廓边框线条动画特效源码css3悬停文字交叉飘动切换动画特效CSS3实现的立体文字重叠动画特效源码CSS3+SVG实现炫酷的霓虹灯发光文字动画特效源码CSS3文字震动破碎特效源码CSS3实现的下划线跟随文字导航特效源码

下一篇：CSS3鼠标悬浮过渡缩放效果

您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现hover图片pop-out弹出效果的实例代码利用HTML、CSS实现的图片预览弹出层的教程jquery+css3实现的鼠标滑过图片向上弹出放大效果

实现原理

使用overflow: hidden方式

使用clip-path: path()方式

相关内容

点击排行

本栏推荐

猜你喜欢