CSS 3 flashes to the right and CSS 3 flashes to the right.

CSS 3 flashes to the right and CSS 3 flashes to the right.

1 <! DOCTYPE html> 2 
1. directly add the code! Here is:

2. It is easy and convenient to use CSS3 for this white gradient flash effect. The only bad thing should be compatibility. Therefore, it is generally used on mobile terminals.

3. Coming! (Knock on the blackboard) I think the code comments are clear, so the focus of painting is good !!!
1. infinite: This is the attribute of loop execution. With it, you can see a flash!
2.-webkit-text-fill-color: transparent; the text fill color is transparent. If it is not set, the white gradient will not show the effect!
3.-webkit-background-clip: text: crops out the background except the text content. If no background is added, the text cannot be displayed, and only the gradient color is displayed!
4. The color-stop () function of the color-stop gradient indicates the position and color of the gradient, that is, the gradient where the gradient is located, and then let it move, A flash of results will pop up!
4. Finally, let's talk about the following ideas:
First, set a gradient background color in the middle white and gray on both sides;
Second, the text fill color is set to transparent (to see the white background );
Next, crop the background color outside the text (only show the text );
Finally, use @ keyframes to run the white position loop of the background from left to right.
If you have any questions, please leave a message !!!