CSS3 Text Gradient Animation

This time to bring you CSS3 text gradient animation, the realization of CSS3 text gradient animation of the note, the following is the actual case, together to see.

Use the CSS3 attribute (background clipping):

background-clip: 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><p class= "Masked" >        
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 set < ' Text-fill-color ' > and < ' color ' >,< ' text-fill-color ' > defined colors will override < ' color ' &G T Properties

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%;}} <p class= "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%);}} <p class= "text" style= "margin:150px auto;" >          <p class= "Mask" ><i></i></p>    </p>
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%);}} <p class= "Text2" style= "margin:150px auto;" >      <p class= "Mask" ><i></i></p>    </p>
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-^-

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 mouse move into the picture dynamic prompt effect

Sticky Footer Absolute Bottom method