純 CSS 實現的三種掃光效果
介紹一個比較常見的動畫效果。
在日常開發中，為了強調凸顯某些文本或者元素，會加一些掃光動效，起到吸引眼球的效果，比如文本的：
圖片
或者是一個卡片容器，里面可能是圖片或者文本或者任意元素。
除此之外，還有那種不規則的圖片，比如獎品圖案：
這些是如何實現的呢？一起看看吧！
一、CSS 掃光的原理
CSS掃光動畫的原理很簡單，就是一個普通的、從左到右的、無限循環的位移動畫。
圖片
位移動畫可以選擇transform或者改變background-position都行。
至于掃光，我們只需要繪制一條斜向上45deg的線性漸變就可以了，示意如下：
圖片
用CSS實現就是
background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);準備工作做好了，下面看 3 種不同場景的實現。
二、文本掃光
首先來看文本掃光。
由于掃光在文本內部，所以需要將這個漸變作為文本的顏色。文本漸變色，可以用backgrond-clip:text來實現，假設HTML是這樣的。
<h1 class="shark-txt">前端偵探</h1>為了讓效果看起來更加明顯，我們用一個比較粗的字體。
h1{
font-size: 60px;
font-family: "RZGFDHDHJ";
font-weight: normal;
color: #9747FF;
}效果如下：
圖片
現在我們通過background-clip來添加掃光，由于是裁剪背景，所以需要將當前文本顏色設置透明，建議通過-webkit-text-fill-color: transparent來設置，這樣可以保留文本原有顏色，好處是其他地方，比如background-color可以直接使用原有文本顏色currentColor，具體實現如下：
.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;
}效果如下：
最后就是讓這個掃光動起來了。
由于是在文本內部，所以這里可以通過改變background-position來實現掃光動畫了，動畫很簡單，如下：
@keyframes shark-txt {
form{
background-position: -100%;
}
to {
background-position: 200%;
}
}但是這樣做沒有動畫效果，完全不會動。
這是因為背景默認尺寸是100%，根據背景偏移百分比的計算規則，當背景尺寸等于容器尺寸時，百分比完全失效，具體規則如下
給定背景圖像位置的百分比偏移量是相對于容器的。值 0% 表示背景圖像的左（或上）邊界與容器的相應左（或上）邊界對齊，或者說圖像的 0% 標記將位于容器的 0% 標記上。值為 100% 表示背景圖像的 右（或 下）邊界與容器的 右（或 下）邊界對齊，或者說圖像的 100% 標記將位于容器的 100% 標記上。因此 50% 的值表示水平或垂直居中背景圖像，因為圖像的 50% 將位于容器的 50% 標記處。類似的，background-position: 25% 75% 表示圖像上的左側 25% 和頂部 75% 的位置將放置在距容器左側 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)所以這種情況下，我們可以手動改小一點背景尺寸，比如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;
}這樣就能完美實現文本掃光效果了。
圖片
三、卡片容器掃光
還有一種比較常見的是容器內的掃光動效，通常是在一個圓角矩形的容器里。
像這種情況下就不能直接用背景漸變了，因為會被容器內的其他元素覆蓋。所以我們需要創建一個偽元素，然后通過改變偽元素的位移來實現掃光動畫了。
假設有一個容器，容器內有一張圖片，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%;
}效果如下：
圖片
下面通過偽元素來創建一個掃光層，設置位移動畫。
.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;
}最終效果如下：
圖片
也適合那種圓形頭像。
圖片
四、不規則圖片掃光
其實前面兩種情況已經適合大部分場景了，其實還有一種情況，就是那種不規則的圖片掃光。這種圖片無法直接通過overflow:hidden去隱藏多余部分，比如這樣。
圖片
很明顯在圖片之外的地方也出現了掃光，無法做到掃光在圖形的"內部"。
那么，有沒有辦法根據圖片的外形去裁剪呢？當然也是有辦法的，這里需要用到CSS mask遮罩。
簡單來說，就是直接將該圖片作為遮罩圖片，這樣只有形狀內的部分可見，形狀外的直接被裁剪了
圖片
在上一種場景的情況下，只需要在此基礎之上，添加一個完全相同的 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>這樣就可以把掃光多余的部分裁剪掉了。
圖片
換張圖也能很好適配：
圖片
以上所有 demo 可以查看以下鏈接
- CSS shark animation (codepen.io)[1]
- CSS shark animation (juejin.cn)[2]
五、總結一下
以上就本文的全部內容了，共介紹了3種不同的掃光場景，你學到了嗎？下面總結一下重點：
- 掃光樣式本身可以直接用線性漸變繪制而成
- 掃光動畫原理很簡單，就是一個水平的位移動畫
- 文本掃光動畫需要通過改變background-postion實現
- 當背景尺寸等于容器尺寸時，設置background-postion百分比無效
- 普通容器的掃光效果需要借助偽元素實現，因為如果使用背景會被容器內的元素覆蓋
- 普通容器的掃光動畫可以直接用transfrom實現
- 使用overflow:hidden裁剪容器外的部分
- 不規則圖片的掃光效果無法直接根據形狀裁剪
- 借助CSS mask可以根據圖片本身裁剪掉掃光多余部分
對了，這個屬于常規需求，只是普通的動畫效果，沒有兼容性限制，放心使用，除了本文的樣式，還可以根據需求改變掃光的大小，角度，顏色等，這個就看具體需求了。
