Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "Utf-8">5 <style>6 . Shadow{7 text-align:Center;8 /*background Color linear gradient*/9 /*Old fashioned notation*/Ten /*linear is a linear gradient, or it can be written in the following way. Left Top,right top refers to the direction of the gradient, top to right*/ One /*The color-stop function, the first representing the position of the gradient, 0 for the starting point, 0.5 for the midpoint, 1 for the end point, and the second for the color of the point. So this gradient is gray on both sides, and the middle is fading white*/ A background:-webkit-gradient (linear, left top, right top, color-stop (0, #4d4d4d), Color-stop (. 4, #4d4d4d), Color-stop (. 5, white) , Color-stop (. 6, #4d4d4d), Color-stop (1, #4d4d4d)); - /*New Style*/ - /*background:-webkit-linear-gradient (left top, right top, color-stop (0, #4d4d4d), Color-stop (. 4, #4d4d4d), Color-stop (. 5, white), Color-stop (. 6, #4d4d4d), Color-stop (1, #4d4d4d)); */ the - /*set to text, which means to trim the background out of the text content*/ - -webkit-background-clip:text; - /*sets the text fill color in the object here to transparent*/ + -webkit-text-fill-color:Transparent; - /*call the following CSS3 animation every 2 seconds the infinite property performs animate for the loop*/ + -webkit-animation:Animate 1.5s Infinite; A } at /*compatible notation, to be placed in front of @keyframes*/ - @-webkit-keyframes Animate{ - /*The background moves from the horizontal position of the -100px to the horizontal position of the +100px. If you want to move the y-axis, set a second value*/ - From {background-position:-100px;} - to{background-position:100px;} - } in @keyframes Animate{ - From {background-position:-100px;} to to{background-position:100px;} + } - </style> the </Head> * <Body> $ <Divclass= "Shadow">Text-to-right flash effect</Div>Panax Notoginseng </Body> - </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.
If there are any questions, welcome message ha!!!
Pure CSS3 to the right loop flash effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
