Using CSS3 to realize the flash effect of text right loop

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.