自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一個(gè)有意思的CSS圖片Hover效果

作者：XboxYan
開(kāi)發(fā) 前端
提到切割，可以想到鏤空，進(jìn)而可以想到遮罩（CSS Mask）。關(guān)于遮罩，這個(gè)技巧非常實(shí)用。

今天來(lái)分享一個(gè)比較有意思的圖片 hover 效果，如下：

圖片

案例來(lái)源于https://codepen.io/t_afif/details/abRWELR[1]，略有修改。

仔細(xì)觀察，這個(gè)效果主要有兩個(gè)要點(diǎn)。

  1. 圖片被切割成多個(gè)矩形。
  2. 每個(gè)矩形會(huì)旋轉(zhuǎn) 90 度。

那么，這個(gè)是如何實(shí)現(xiàn)的呢？花幾分鐘時(shí)間一起看看吧。

一、分割的矩形

假設(shè)HTML是這樣的，很簡(jiǎn)單，就一個(gè)圖片。

<img src="xxx.jpg" alt="xxx">

然后，我們需要一個(gè)變量，來(lái)控制分割的數(shù)量，比如2表示2*2，這里可以用 CSS 變量。

img{
  --n: 4; /*橫縱分割的數(shù)量*/
}

那么，如何來(lái)切割呢？

提到切割，可以想到鏤空，進(jìn)而可以想到遮罩（CSS Mask）。關(guān)于遮罩，這個(gè)技巧非常實(shí)用，之前在多篇文章中都有用到

  • CSS 如何實(shí)現(xiàn)羽化效果？[2]
  • 別用圖片了，CSS 遮罩合成實(shí)現(xiàn)帶圓角的環(huán)形 loading 動(dòng)畫(huà)[3]
  • CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果[4]
  • CSS 實(shí)現(xiàn)Chrome標(biāo)簽欄的技巧[5]
  • CSS 實(shí)現(xiàn)優(yōu)惠券的技巧[6]

原理很簡(jiǎn)單，最終效果只顯示不透明的部分，透明部分將不可見(jiàn)，半透明類(lèi)推，例如：

圖片

在這里，我們可以通過(guò)類(lèi)似背景平鋪的方式，來(lái)將一個(gè)完整的圖片切割成n*n個(gè)矩形，如下：

img{
  --n: 4;
  -webkit-mask: radial-gradient(black, transparent);
  -webkit-mask-size: calc(100% / var(--n)) calc(100% / var(--n));
}

這里用了一個(gè)徑向漸變做了遮罩圖片，遮罩尺寸是100% / var(--n)，剛好將完整的圖片分成了n*n份，效果如下，分別是2*2和4*4的效果。

圖片

這就是分割的原理了。

二、旋轉(zhuǎn)的矩形

那么，問(wèn)題來(lái)了，這里是背景層，并沒(méi)有rotate這樣的屬性，如何讓一個(gè)矩形旋轉(zhuǎn)呢？或者說(shuō)，如何繪制一個(gè)傾斜的矩形呢？

下面就來(lái)一步一步實(shí)現(xiàn)。

由于遮罩和背景的語(yǔ)法基本一致，為了方便調(diào)試，可以先用背景代替。

大家都知道，線性漸變是可以設(shè)置角度的，為了計(jì)算方便，我們可以用 CSS 變量來(lái)表示。

div{
  --r: 45deg;
  background: linear-gradient(var(--r), red, orange)
}

這樣可以得到一個(gè)45deg的漸變。

圖片

然后，我們可以將這個(gè)漸變改成透明→純色→透明的漸變。

div{
  --r: 45deg;
  background: linear-gradient(var(--r), transparent 5%, orange 0 95%, transparent 0)
}

效果如下：

圖片

為了計(jì)算方便，可以將透明的比例用 CSS 變量來(lái)表示。

div{
  --r: 45deg;
  --d: 30%;
  background: linear-gradient(var(--r), transparent var(--d), orange 0 calc(100% - var(--d)), transparent 0)
}

下面是30%的效果。

圖片

接下來(lái)，用同樣的方式繪制和這個(gè)垂直的圖形，也就是角度相差90deg。

div{
  --r: 45deg;
  --d: 30%;
  background: linear-gradient(var(--r), transparent var(--d), orange 0 calc(100% - var(--d)), transparent 0),
    linear-gradient(calc(var(--r) + 90deg), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0),
}

效果如下：

圖片

注意觀察，兩個(gè)重疊的部分不就是一個(gè)旋轉(zhuǎn)45deg的矩形嗎？如下：

圖片

可以任意改變角度。

div{
  --deg: 15deg
}

圖片

下面改變背景尺寸，變成4*4的效果：

div{
  background-size: 50% 50%
}

圖片

是不是和我們想要的效果有點(diǎn)相似呢？下面將背景用做遮罩。

img{
  --r: 30deg;
  --d: 30%;
  -webkit-mask:
    linear-gradient(var(--r), transparent var(--d),red 0 calc(100% - var(--d)), transparent 0),
    linear-gradient(calc(var(--r) + 90deg), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0);
  -webkit-mask-size: calc(100%/var(--n)) calc(100%/var(--n));
}

變成了這樣。

圖片

是不是很凌亂？這是因?yàn)楝F(xiàn)在的遮罩還是直接疊加的，并不是只顯示重疊部分，可以設(shè)置遮罩合成mask-composite，也就是將圖形進(jìn)行布爾運(yùn)算，得出我們想要的圖形，這里簡(jiǎn)單介紹一下。

mask-composite - CSS: Cascading Style Sheets | MDN (mozilla.org)[7]

/* Keyword values */
mask-composite: add; /* 疊加（默認(rèn)） */
mask-composite: subtract; /* 減去，排除掉上層的區(qū)域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */

相信在很多圖形設(shè)計(jì)軟件中都見(jiàn)到類(lèi)似的操作（下面是 photoshop）。

圖片

這些是標(biāo)準(zhǔn)屬性，Chrome 還不支持，可以用帶前綴的屬性-webkit-mask-composite[8] ，但是值和上面這些不同，非常多，主要有這些。

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; /*疊加，兩者都顯示*/
-webkit-mask-composite: source-in; /*只顯示重合的地方*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over; /*疊加，兩者都顯示*/
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只顯示不重合的地方*/

回到這里，我們想要得到兩者重疊的部分，所以可以。

-webkit-mask-composite: source-in;

效果如下：

圖片

三、動(dòng)畫(huà)

最后就是動(dòng)畫(huà)了。

我們需要在hover的時(shí)候，將矩形旋轉(zhuǎn)90deg，可以直接改變--r這個(gè)變量。

img{
  --r: 0deg;
}
img:hover{
  --r: 90deg;
  transition: 0.5s;
}

但是，僅僅這樣是沒(méi)有動(dòng)畫(huà)的，因?yàn)?-r并不是一個(gè)合法的、可以過(guò)渡的屬性。

圖片

這時(shí)可以用到 CSS @property[9]?？梢宰屓我庾兞肯耦伾粯舆M(jìn)行支持過(guò)渡和動(dòng)畫(huà)

@property --r {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
}

現(xiàn)在就有過(guò)渡效果了。

圖片

現(xiàn)在還有一個(gè)問(wèn)題，空隙太大了，還需要改變--d的大小，起始點(diǎn)應(yīng)該是0%，在中間45deg時(shí)最大，也就是0%→20%→0%，可以用animation實(shí)現(xiàn)。

@keyframes d {
  0%,100%{
    --d: 0%
  }
  50%{
    --d: 20%
  }
}
img:hover{
  --r: 90deg;
  transition: 0.5s;
  animation: d .5s;
}

效果如下：

圖片

當(dāng)然還可以將這個(gè)過(guò)渡和動(dòng)畫(huà)寫(xiě)在一個(gè)動(dòng)畫(huà)里。

@keyframes r {
  0%{
    --d: 0%
  }
  100%{
    --d: 0%;
    --r: 90deg
  }
  50%{
    --d: 20%
  }
}
img:hover{
  animation: r .5s;
}

這樣也能實(shí)現(xiàn)相同的效果，下面分別是2*2、4*4、6*6的效果。

<img src="xxx.jpg" alt="xxx" style="--n:2">
<img src="xxx.jpg" alt="xxx" style="--n:4">
<img src="xxx.jpg" alt="xxx" style="--n:6">

圖片

完整代碼可以查看以下任意鏈接：

  • CSS img hover (juejin.cn)[10]
  • CSS img hover (runjs.work)[11]
  • CSS img hover (codepen.io)[12]

四、總結(jié)和說(shuō)明

以上就是實(shí)現(xiàn)的全部過(guò)程了，代碼其實(shí)不多，其實(shí)主要難點(diǎn)在于旋轉(zhuǎn)矩形的繪制，整體實(shí)現(xiàn)其實(shí)并不困難，難點(diǎn)其實(shí)是創(chuàng)意，可惜的是平時(shí)接觸的還是太少??。下面總結(jié)一下實(shí)現(xiàn)要點(diǎn)：

  1. 提到切割，可以想到鏤空，進(jìn)而可以想到遮罩。
  2. 分割成n*n塊，其實(shí)就是遮罩背景的平鋪。
  3. 旋轉(zhuǎn)的矩形其實(shí)就是兩個(gè)互相垂直的線性漸變重疊而成。
  4. CSS 變量的過(guò)渡動(dòng)畫(huà)需要用到CSS @property 特性。

兼容性其實(shí)就取決于CSS @property了，這是CSS Houdini的一部分，目前只有 Chrome 和 Safari支持。

圖片

參考資料

[1]https://codepen.io/t_afif/details/abRWELR: https://codepen.io/t_afif/details/abRWELR。

[2]CSS 如何實(shí)現(xiàn)羽化效果？: https://juejin.cn/post/7176094306124431421。

[3]別用圖片了，CSS 遮罩合成實(shí)現(xiàn)帶圓角的環(huán)形 loading 動(dòng)畫(huà): https://juejin.cn/post/7217731969307328571。

[4]CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果: https://juejin.cn/post/7033188994641100831。

[5]CSS 實(shí)現(xiàn)Chrome標(biāo)簽欄的技巧: https://juejin.cn/post/6986827061461516324。

[6]CSS 實(shí)現(xiàn)優(yōu)惠券的技巧 : https://juejin.cn/post/6945023989555134494。

[7]mask-composite - CSS: Cascading Style Sheets | MDN (mozilla.org): https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fmask-composite。

[8]-webkit-mask-composite: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2F-webkit-mask-composite。

[9]CSS @property: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property。

[10]CSS img hover (juejin.cn): https://code.juejin.cn/pen/7232884497778704440。

[11]CSS img hover (runjs.work): https://runjs.work/projects/a1f43973537d4e05。

[12]CSS img hover (codepen.io): https://codepen.io/xboxyan/pen/vYVaNNp。

責(zé)任編輯：姜華 來(lái)源： 前端偵探
CSSCSS Mask
相關(guān)推薦

2020-12-12 13:50:16

云開(kāi)發(fā)

2021-01-27 13:54:05

開(kāi)發(fā)云原生工具

2018-06-24 16:39:28

Tomcat異常線程

2024-05-20 01:10:00

Promise變量

2009-08-26 17:53:31

C# DropDown

2021-04-09 08:23:30

Css前端加載動(dòng)畫(huà)

2022-03-21 10:21:50

jQuery代碼模式

2021-03-25 06:12:55

SVG 濾鏡CSS

2012-06-15 10:33:06

JavaScript

2015-03-12 10:46:30

代碼代碼犯罪

2012-05-22 10:12:59

jQuery

2024-03-18 08:14:07

SpringDAOAppConfig

2021-06-10 08:15:49

CSS 文字動(dòng)畫(huà)技巧

2022-06-15 07:21:47

鼠標(biāo)指針交互效果CSS

2022-08-15 22:34:47

Overflow方向裁切

2021-02-20 16:01:26

Github前端開(kāi)發(fā)

2022-07-11 13:09:26

mmapLinux

2020-03-10 14:59:16

oracle數(shù)據(jù)庫(kù)監(jiān)聽(tīng)異常

2022-05-20 07:36:02

LiveTerm工具

2020-08-03 08:30:00

JSCSS排序
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)