您的位置：首页 > Web前端 > > 正文

css的背景图的平铺方式有哪几种（纯CSS实现hover图片pop-out弹出效果的实例代码）

更多时间：2021-11-03 15:01:15 类别：Web前端浏览量：2950

css的背景图的平铺方式有哪几种

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

实现原理

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

背景元素 figure::before

css的背景图的平铺方式有哪几种（纯CSS实现hover图片pop-out弹出效果的实例代码）

前景元素 figure img

css的背景图的平铺方式有哪几种（纯CSS实现hover图片pop-out弹出效果的实例代码）

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 hover 图片弹出

上一篇：sqlserver备份整表数据的语句（SqlServer批量备份多个数据库且删除3天前的备份）

下一篇：python爬虫第一本书（我用Python抓取了7000 多本电子书案例详解）

您可能感兴趣

css的背景图的平铺方式有哪几种（纯CSS实现hover图片pop-out弹出效果的实例代码）

css的背景图的平铺方式有哪几种

热门推荐

排行榜