Using CSS3 to realize the flash effect of text right loop

This article is mainly to share with you the use of pure CSS3 to realize the text to the right loop flash effect of the relevant data, because the problem of compatibility, often used for mobile, the effect is very good, the text gives a detailed introduction and sample code, the need for friends below to see it together.

This article introduces the use of pure CSS3 implementation of text to the right to loop the effect of the relevant data, the following words do not say, we first look at the sample code it.

Example code:

<!            DOCTYPE html>

Here's the following:


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


Come on, come on! 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!

Finally, talk about 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.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!