css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
类别:Web前端 浏览量:2950
时间:2021-11-03 15:01:15 css的背景图的平铺方式有哪几种
纯CSS实现hover图片pop-out弹出效果的实例代码 实现原理主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before
表示, 前景元素使用 figure img
表示,当鼠标 hover
悬浮至 figure
元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果。
背景元素 figure::before
前景元素 figure img
1. 使用 overflow: hidden
方式
主体元素的 html
结构由一个 figure
元素包裹的 img
元素构成:
<figure> <img src='./man.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
在 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.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
2. 使用 clip-path: inset()
方式
<figure> <img src='./man.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
样式基本上与第一种相同,使用 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.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
完整示例
<h2>使用overflow: hidden方式</h2> <figure> <img src='./man.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
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.jpg" alt="css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)" border="0" />
到此这篇关于纯CSS实现hover图片pop-out弹出效果的文章就介绍到这了,更多相关css内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
- CSS中的伪类与伪元素
- css有三种基本的定位机制(10个非常实用的CSS hack技术)
- html结合css实现简单网页(基于HTML+CSS实现网页滑动门效果)
- css设置超链接样式
- css3导航条推荐(使用CSS3制作倾斜导航条和毛玻璃效果)
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- 网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)
- css图片水平旋转动画(css实现图片横向排列滚动效果)
- css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
- 用css实现滚动效果(CSS完成视差滚动效果)
- CSS网页布局的几个建议
- CSS设置字体
- css边框样式讲解(纯css实现动态边框的示例代码)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
热门推荐
- 服务器的维护与管理(浅谈网站服务器的维护管理)
- vue验证码(vue_drf实现短信验证码)
- windowsmysql服务在哪里(解决windows service 2012阿里云服务器在搭建mysql时缺少msvcr100.dll文件的问题)
- navicat如何连接服务器的数据库(Navicat如何远程连接云服务器数据库)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- dedecms如何使用标签(dedecms 移动文章后,原来生成的HTML依然存在解决方法)
- dedecmswap设置(dedecms 问答系统取消积分与用户登陆验证的方法)
- html5+css样式代码(详解HTML5中CSS外观属性)
- python中怎么实现队列的创建(python 堆和优先队列的使用详解)
- mac更改mysql密码(Mac下mysql 8.0.22 找回密码的方法)