純 CSS 實(shí)現(xiàn)的三種掃光效果

作者：XboxYan 2024-07-31 20:38:18

開發(fā) 前端

由于掃光在文本內(nèi)部，所以需要將這個漸變作為文本的顏色。文本漸變色，可以用backgrond-clip:text來實(shí)現(xiàn)，假設(shè)HTML是這樣的。

介紹一個比較常見的動畫效果。

在日常開發(fā)中，為了強(qiáng)調(diào)凸顯某些文本或者元素，會加一些掃光動效，起到吸引眼球的效果，比如文本的：

圖片

或者是一個卡片容器，里面可能是圖片或者文本或者任意元素。

除此之外，還有那種不規(guī)則的圖片，比如獎品圖案：

這些是如何實(shí)現(xiàn)的呢？一起看看吧！

一、CSS 掃光的原理

CSS掃光動畫的原理很簡單，就是一個普通的、從左到右的、無限循環(huán)的位移動畫。

圖片

位移動畫可以選擇transform或者改變background-position都行。

至于掃光，我們只需要繪制一條斜向上45deg的線性漸變就可以了，示意如下：

圖片

用CSS實(shí)現(xiàn)就是

background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);

準(zhǔn)備工作做好了，下面看 3 種不同場景的實(shí)現(xiàn)。

二、文本掃光

首先來看文本掃光。

由于掃光在文本內(nèi)部，所以需要將這個漸變作為文本的顏色。文本漸變色，可以用backgrond-clip:text來實(shí)現(xiàn)，假設(shè)HTML是這樣的。

<h1 class="shark-txt">前端偵探</h1>

為了讓效果看起來更加明顯，我們用一個比較粗的字體。

h1{
  font-size: 60px;
  font-family: "RZGFDHDHJ";
  font-weight: normal;
  color: #9747FF;
}

效果如下：

圖片

現(xiàn)在我們通過background-clip來添加掃光，由于是裁剪背景，所以需要將當(dāng)前文本顏色設(shè)置透明，建議通過-webkit-text-fill-color: transparent來設(shè)置，這樣可以保留文本原有顏色，好處是其他地方，比如background-color可以直接使用原有文本顏色currentColor，具體實(shí)現(xiàn)如下：

.shark-txt{
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%) -100%/50% no-repeat currentColor;
  -webkit-background-clip: text;
}

效果如下：

最后就是讓這個掃光動起來了。

由于是在文本內(nèi)部，所以這里可以通過改變background-position來實(shí)現(xiàn)掃光動畫了，動畫很簡單，如下：

@keyframes shark-txt {
  form{
    background-position: -100%;
  }
  to {
    background-position: 200%;
  }
}

但是這樣做沒有動畫效果，完全不會動。

這是因?yàn)楸尘澳J(rèn)尺寸是100%，根據(jù)背景偏移百分比的計算規(guī)則，當(dāng)背景尺寸等于容器尺寸時，百分比完全失效，具體規(guī)則如下

給定背景圖像位置的百分比偏移量是相對于容器的。值 0% 表示背景圖像的左（或上）邊界與容器的相應(yīng)左（或上）邊界對齊，或者說圖像的 0% 標(biāo)記將位于容器的 0% 標(biāo)記上。值為 100% 表示背景圖像的右（或下）邊界與容器的右（或下）邊界對齊，或者說圖像的 100% 標(biāo)記將位于容器的 100% 標(biāo)記上。因此 50% 的值表示水平或垂直居中背景圖像，因?yàn)閳D像的 50% 將位于容器的 50% 標(biāo)記處。類似的，background-position: 25% 75% 表示圖像上的左側(cè) 25% 和頂部 75% 的位置將放置在距容器左側(cè) 25% 和距容器頂部 75% 的容器位置。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

所以這種情況下，我們可以手動改小一點(diǎn)背景尺寸，比如50%

.shark-txt {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%) -100% / 50% no-repeat currentColor;
    -webkit-background-clip: text;
    animation: shark-txt 2s infinite;
}

這樣就能完美實(shí)現(xiàn)文本掃光效果了。

圖片

三、卡片容器掃光

還有一種比較常見的是容器內(nèi)的掃光動效，通常是在一個圓角矩形的容器里。

像這種情況下就不能直接用背景漸變了，因?yàn)闀蝗萜鲀?nèi)的其他元素覆蓋。所以我們需要創(chuàng)建一個偽元素，然后通過改變偽元素的位移來實(shí)現(xiàn)掃光動畫了。

假設(shè)有一個容器，容器內(nèi)有一張圖片，HTML如下：

<div class="shark-wrap card">
    <img src="https://imgservices-1252317822.image.myqcloud.com/coco/b11272023/ececa9a5.7y0amw.jpg">
</div>

簡單修飾一下：

.card{
  width: 300px;
  border-radius: 8px;
  background-color: #FFE8A3;
}
.card img{
  display: block;
  width: 100%;
}

效果如下：

圖片

下面通過偽元素來創(chuàng)建一個掃光層，設(shè)置位移動畫。

.shark-wrap::after{
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
  animation: shark-wrap 2s infinite;
  transform: translateX(-100%);
}
@keyframes shark-wrap {
  to {
    transform: translateX(100%);
  }
}

效果如下：

圖片

最后直接超出隱藏就行了。

.shark-wrap{
  overflow: hidden;
}

最終效果如下：

圖片

也適合那種圓形頭像。

圖片

四、不規(guī)則圖片掃光

其實(shí)前面兩種情況已經(jīng)適合大部分場景了，其實(shí)還有一種情況，就是那種不規(guī)則的圖片掃光。這種圖片無法直接通過overflow:hidden去隱藏多余部分，比如這樣。

圖片

很明顯在圖片之外的地方也出現(xiàn)了掃光，無法做到掃光在圖形的"內(nèi)部"。

那么，有沒有辦法根據(jù)圖片的外形去裁剪呢？當(dāng)然也是有辦法的，這里需要用到CSS mask遮罩。

簡單來說，就是直接將該圖片作為遮罩圖片，這樣只有形狀內(nèi)的部分可見，形狀外的直接被裁剪了

圖片

在上一種場景的情況下，只需要在此基礎(chǔ)之上，添加一個完全相同的 mask遮罩就行了。

<div class="shark-wrap" style="-webkit-mask: url(https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png) 0 0/100%">
  <img class="logo" src="https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png">
</div>

這樣就可以把掃光多余的部分裁剪掉了。

圖片