CSS3 implementing text Gradient animation effects

Source: Internet
Author: User
Tags transparent color

Use the CSS3 attribute (background clipping):

Border-box | | Padding-box | | Context-box | | No-clip | | Text

The use of this time is: -webkit-background-clip:text;

Chestnuts:

1.

<style>. Masked{text-align:Center;Background-image:-webkit-linear-gradient (left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);-webkit-text-fill-color:Transparent;-webkit-background-clip:text;-webkit-background-size:200% 100%;-webkit-animation:masked-animation 4s infinite linear;      }@-webkit-keyframes masked-animation{0%{background-position:0 0;}100%{background-position:-100% 0;}    }</style><Divclass= "Masked" >        <H1>→CSS3 text gradient animation effect >></H1></Div>

Description

-webkit-text-fill-color:transparent; (This must be filled with a transparent color, so that the gradient color will fill the text above, remove this or fill the other color, the effect is not obvious)

Retrieves or sets the text fill color in an object,

    • If you set both < ' Text-fill-color ' > and < ' color ' >,< ' text-fill-color ' > The color defined will override the < ' color ' > attribute;
    • Effect:

2, the same as the first chestnut, more give a background color, from local to global gradient

. slideshine{background: #871317-webkit-linear-gradient (left, #561214, #febaf7 50%, #ff0 90%, #561214) no-repeat 0 0;      background-size:20% 100%;     -webkit-background-clip:text;     -webkit-text-fill-color:transparent;     font-size:36px;     Text-align:center;     Font-weight:bold; Text-decoration:underline;}. slideshine {-webkit-animation:slideshine 4s linear infinite;animation:slideshine 4s linear infinite;}        @-webkit-keyframes Slideshine {0% {background-position:0 0;      } 100% {background-position:100% 100%;     }} @keyframes Slideshine {0% {background-position:0 0;} 100% {background-position:100% 100%;}}<Pclass= "Slideshine" >→CSS3 text gradient animation effect >></P>    

Effect:

3, using WebKit mask to achieve text gradient animation

. text{position:relative;width:57%;max-width:531px;}
. Text. Mask{position:absolute;width:100%;height:95%;top:0;left:0;-webkit-mask-image:url (img/text.png);} . Text. Mask I{position:absolute;height:100%;width:20%;left:0;top:0;background:-webkit-linear-gradient (left,# 561214, #febaf7 50%, #ff0 90%, #561214) no-repeat 0 0;animation:lightline1 4s linear infinite;-webkit-animation: LightLine1 4s linear infinite;background-size:100% 100%;} @keyframes lightline1{0%{transform:translatex (0);} 100%{transform:translatex (500%);}}
@-webkit-keyframes lightline1{0%{-webkit-transform:translatex (0);} 100%{-webkit-transform:translatex (500%);}}<Divclass= "text"style= "margin:150px auto;"> <imgsrc= "Img/text.png" /> <Divclass= "Mask"><I></I></Div> </Div>

Effect:

4. Realize the gradient of multi-color text

. text2{position:relative;width:63%;max-width:586px;}
. Text2. Mask{position:absolute;width:100%;height:95%;top:0;left:1px;-webkit-mask-image:url (img/text3.png);}
. Text2 Mask I{position:absolute;height:100%;width:20%;left:0;top:0;background:-webkit-linear-gradient (left,# 561214, #febaf7 50%, #ff0 90%, #561214) no-repeat 0 0;animation:lightline2 4s linear infinite;-webkit-animation: LightLine2 4s linear infinite;background-size:100% 100%;} @keyframes lightline2{0%{transform:translatex (0);} 100%{transform:translatex (420%);}} @-webkit-keyframes lightline2{0%{-webkit-transform:translatex (0);} 100%{-webkit-transform:translatex (420%);}}<Divclass= "Text2"style= "margin:150px auto;"> <imgsrc= "Img/text3.png" /> <Divclass= "Mask"><I></I></Div>
</Div>

Effect:

Because the first to second method can not achieve a variety of text color, he will be < ' text-fill-color ' > definition of color coverage, so if you set the text in a variety of colors, I will use the picture instead of, but you can see, Using masks to achieve a text gradient rainbow does not work well-^-

CSS3 implementing text Gradient animation effects

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.