本文介紹的利用純CSS3實(shí)現(xiàn)文字向右循環(huán)閃過(guò)效果的相關(guān)資料，下面話(huà)不多說(shuō)，大家先來(lái)看看示例代碼和效果圖吧。

一、直接上代碼！下面這是效果圖：


 

二、這個(gè)白色漸變閃過(guò)效果用CSS3做很容易也很方便，唯一不好的地方應(yīng)該就是兼容問(wèn)題了。所以現(xiàn)在一般都用在移動(dòng)端上面了。

三、來(lái)啦來(lái)啦！(敲黑板) 我覺(jué)得代碼注釋已經(jīng)比較清楚了，所以畫(huà)畫(huà)重點(diǎn)就好了！！！

1、infinite     這是循環(huán)執(zhí)行的屬性，有了它，才能一閃一閃滴！

2、-webkit-text-fill-color: transparent;    文字填充顏色為透明，沒(méi)有設(shè)置的話(huà)，看不出白色漸變劃過(guò)效果的！

3、-webkit-background-clip: text;          把文本內(nèi)容之外的背景給裁剪掉，如果不加，文字顯示不出來(lái)，只顯示漸變的顏色！

4、color-stop() 漸變的color-stop              函數(shù)，表示漸變的位置和顏色，就是它，我們才能想在哪里漸變就哪里漸變，再讓它移動(dòng)起來(lái)，就出現(xiàn)一閃一閃的效果了！

四、最后，說(shuō)一下思路：

　　首先，設(shè)置一個(gè)中間白色、兩邊灰色的漸變背景色；

　　其次，文字填充顏色設(shè)為透明(才能看到白色背景)；

　　接著，把文字之外的背景色給裁剪掉(只顯示文字)；

　　最后，用@keyframes，讓背景白色位置循環(huán)從左到右執(zhí)行。