How to use CSS3 to achieve the right loop flash effect

How to use CSS3 to achieve the right loop flash effect

<!                 DOCTYPE html>
First, directly on the code! Here's the following:


Second, this white gradient flash effect with CSS3 do very easy also very convenient, the only bad place should be compatibility problem. So now it's generally used on the mobile side.


Three, come here! I think the code comments are relatively clear, so the focus on the painting is good!!!

1, infinite This is the property of the loop execution, with it, can flash a flash drop!

2,-webkit-text-fill-color:transparent; Text fill color is transparent, no setting, can not see the white gradient across the effect!

3,-webkit-background-clip:text; The text outside the background to cut off, if not added, the text does not appear, only show the color gradient!

4, Color-stop () gradient of the Color-stop function, indicating the position and color of the gradient, that is, we can want to where the gradient on the gradient, and then let it move, there will be a flashing effect!

Four, finally, say the idea:

First, set a middle white, gray gradient background color;

Second, the text fill color is set to transparent (to see the white background);

Next, cut out the background color outside the text (text only);

Finally, with @keyframes, let the background white position loop from left to right.