18禁黄网站禁片国产免费观看,高清毛片无码4

主頁 > 知識(shí)庫 > 純CSS實(shí)現(xiàn)hover圖片pop-out彈出效果的實(shí)例代碼

純CSS實(shí)現(xiàn)hover圖片pop-out彈出效果的實(shí)例代碼

實(shí)現(xiàn)原理

主要圖形的組成元素由背景和前景圖兩個(gè)元素，以下示例代碼中，背景元素使用偽元素 figure::before 表示，前景元素使用 figure img 表示，當(dāng)鼠標(biāo) hover 懸浮至 figure 元素時(shí)，背景元素產(chǎn)生變大效果，前景元素產(chǎn)生變大并向上移動(dòng)效果，從而從視覺上實(shí)現(xiàn)彈出效果。

背景元素 figure::before

前景元素 figure img

1. 使用 overflow: hidden 方式

主體元素的 html 結(jié)構(gòu)由一個(gè) figure 元素包裹的 img 元素構(gòu)成：

<figure>
  <img src='./man.png' alt='Irma'>
</figure>

在 css 中設(shè)置了兩個(gè)變量 --hov 和 --not-hov 用于控制 hover 元素時(shí)的放大以及位移效果。并對(duì) figure 元素添加 overflow: hidden，設(shè)置 padding-top: 5% 用于前景元素超出背景元素時(shí)不被截?cái)啵ǚ潜匦瑁翰⑹褂昧?clamp() 函數(shù)用來動(dòng)態(tài)設(shè)定 border-radius 以動(dòng)態(tài)響應(yīng)頁面縮放）

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 來截取圓形背景區(qū)域。

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

到此這篇關(guān)于純CSS實(shí)現(xiàn)hover圖片pop-out彈出效果的文章就介紹到這了,更多相關(guān)css內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：試駕邀約綏化銅陵欽州無錫湖北焦作湘西

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《純CSS實(shí)現(xiàn)hover圖片pop-out彈出效果的實(shí)例代碼》，本文關(guān)鍵詞純,CSS,實(shí)現(xiàn),hover,圖片,pop-out,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。