CSS3 implementing text Gradient animation effects

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