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

在日常開發中，為了強調凸顯某些文本或者元素，會加一些掃光動效，起到吸引眼球的效果，比如文本的

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

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

這些是如何實現的呢？一起看看吧

一、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%);
1.
準備工作做好了，下面看 3 種不同場景的實現

二、文本掃光
首先來看文本掃光。

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

前端偵探

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

h1{
font-size: 60px;
font-family: “RZGFDHDHJ”;
font-weight: normal;
color: #9747FF;
}
1.
2.
3.
4.
5.
6.
效果如下

現在我們通過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;
}
1.
2.
3.
4.
5.
效果如下

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

由于是在文本內部，所以這里可以通過改變background-position來實現掃光動畫了，動畫很簡單，如下

@keyframes shark-txt {
form{
background-position: -100%;
}
to {
background-position: 200%;
}
}
1.
2.
3.
4.
5.
6.
7.
8.
但是這樣做沒有動畫效果，完全不會動。

這是因為背景默認尺寸是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-p…

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
1.
2.
所以這種情況下，我們可以手動改小一點背景尺寸，比如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;
}
1.
2.
3.
4.
5.
6.
這樣就能完美實現文本掃光效果了

三、卡片容器掃光
還有一種比較常見的是容器內的掃光動效，通常是在一個圓角矩形的容器里。

像這種情況下就不能直接用背景漸變了，因為會被容器內的其他元素覆蓋。所以我們需要創建一個偽元素，然后通過改變偽元素的位移來實現掃光動畫了。

假設有一個容器，容器內有一張圖片，HTML如下

1. 2. 3. 簡單修飾一下

.card{
width: 300px;
border-radius: 8px;
background-color: #FFE8A3;
}
.card img{
display: block;
width: 100%;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
效果如下

下面通過偽元素來創建一個掃光層，設置位移動畫

.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%);
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
效果如下

最后直接超出隱藏就行了

.shark-wrap{
overflow: hidden;
}
1.
2.
3.
最終效果如下

也適合那種圓形頭像

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

很明顯在圖片之外的地方也出現了掃光，無法做到掃光在圖形的"內部"。

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

www.xbtourism.com
szdfyh.com
m.szdfyh.com
www.szdfyh.com
guohenghb.com

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