純 CSS 實(shí)現(xiàn)的三種掃光效果
介紹一個(gè)比較常見的動(dòng)畫效果。
在日常開發(fā)中，為了強(qiáng)調(diào)凸顯某些文本或者元素，會(huì)加一些掃光動(dòng)效，起到吸引眼球的效果，比如文本的：
圖片
或者是一個(gè)卡片容器，里面可能是圖片或者文本或者任意元素。
除此之外，還有那種不規(guī)則的圖片，比如獎(jiǎng)品圖案：
這些是如何實(shí)現(xiàn)的呢？一起看看吧！
一、CSS 掃光的原理
CSS掃光動(dòng)畫的原理很簡(jiǎn)單，就是一個(gè)普通的、從左到右的、無限循環(huán)的位移動(dòng)畫。
圖片
位移動(dòng)畫可以選擇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 種不同場(chǎng)景的實(shí)現(xiàn)。
二、文本掃光
首先來看文本掃光。
由于掃光在文本內(nèi)部，所以需要將這個(gè)漸變作為文本的顏色。文本漸變色，可以用backgrond-clip:text來實(shí)現(xiàn)，假設(shè)HTML是這樣的。
<h1 class="shark-txt">前端偵探</h1>為了讓效果看起來更加明顯，我們用一個(gè)比較粗的字體。
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;
}效果如下：
最后就是讓這個(gè)掃光動(dòng)起來了。
由于是在文本內(nèi)部，所以這里可以通過改變background-position來實(shí)現(xiàn)掃光動(dòng)畫了，動(dòng)畫很簡(jiǎn)單，如下：
@keyframes shark-txt {
form{
background-position: -100%;
}
to {
background-position: 200%;
}
}但是這樣做沒有動(dòng)畫效果，完全不會(huì)動(dòng)。
這是因?yàn)楸尘澳J(rèn)尺寸是100%，根據(jù)背景偏移百分比的計(jì)算規(guī)則，當(dāng)背景尺寸等于容器尺寸時(shí)，百分比完全失效，具體規(guī)則如下
給定背景圖像位置的百分比偏移量是相對(duì)于容器的。值 0% 表示背景圖像的左（或上）邊界與容器的相應(yīng)左（或上）邊界對(duì)齊，或者說圖像的 0% 標(biāo)記將位于容器的 0% 標(biāo)記上。值為 100% 表示背景圖像的 右（或 下）邊界與容器的 右（或 下）邊界對(duì)齊，或者說圖像的 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)所以這種情況下，我們可以手動(dòng)改小一點(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)的掃光動(dòng)效，通常是在一個(gè)圓角矩形的容器里。
像這種情況下就不能直接用背景漸變了，因?yàn)闀?huì)被容器內(nèi)的其他元素覆蓋。所以我們需要?jiǎng)?chuàng)建一個(gè)偽元素，然后通過改變偽元素的位移來實(shí)現(xiàn)掃光動(dòng)畫了。
假設(shè)有一個(gè)容器，容器內(nèi)有一張圖片，HTML如下：
<div class="shark-wrap card">
<img src="https://imgservices-1252317822.image.myqcloud.com/coco/b11272023/ececa9a5.7y0amw.jpg">
</div>簡(jiǎn)單修飾一下：
.card{
width: 300px;
border-radius: 8px;
background-color: #FFE8A3;
}
.card img{
display: block;
width: 100%;
}效果如下：
圖片
下面通過偽元素來創(chuàng)建一個(gè)掃光層，設(shè)置位移動(dòng)畫。
.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)適合大部分場(chǎng)景了，其實(shí)還有一種情況，就是那種不規(guī)則的圖片掃光。這種圖片無法直接通過overflow:hidden去隱藏多余部分，比如這樣。
圖片
很明顯在圖片之外的地方也出現(xiàn)了掃光，無法做到掃光在圖形的"內(nèi)部"。
那么，有沒有辦法根據(jù)圖片的外形去裁剪呢？當(dāng)然也是有辦法的，這里需要用到CSS mask遮罩。
簡(jiǎn)單來說，就是直接將該圖片作為遮罩圖片，這樣只有形狀內(nèi)的部分可見，形狀外的直接被裁剪了
圖片
在上一種場(chǎng)景的情況下，只需要在此基礎(chǔ)之上，添加一個(gè)完全相同的 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]
五、總結(jié)一下
以上就本文的全部內(nèi)容了，共介紹了3種不同的掃光場(chǎng)景，你學(xué)到了嗎？下面總結(jié)一下重點(diǎn)：
- 掃光樣式本身可以直接用線性漸變繪制而成
- 掃光動(dòng)畫原理很簡(jiǎn)單，就是一個(gè)水平的位移動(dòng)畫
- 文本掃光動(dòng)畫需要通過改變background-postion實(shí)現(xiàn)
- 當(dāng)背景尺寸等于容器尺寸時(shí)，設(shè)置background-postion百分比無效
- 普通容器的掃光效果需要借助偽元素實(shí)現(xiàn)，因?yàn)槿绻褂帽尘皶?huì)被容器內(nèi)的元素覆蓋
- 普通容器的掃光動(dòng)畫可以直接用transfrom實(shí)現(xiàn)
- 使用overflow:hidden裁剪容器外的部分
- 不規(guī)則圖片的掃光效果無法直接根據(jù)形狀裁剪
- 借助CSS mask可以根據(jù)圖片本身裁剪掉掃光多余部分
對(duì)了，這個(gè)屬于常規(guī)需求，只是普通的動(dòng)畫效果，沒有兼容性限制，放心使用，除了本文的樣式，還可以根據(jù)需求改變掃光的大小，角度，顏色等，這個(gè)就看具體需求了。
