css3 text gradient animation-CSS Tutorial-php.cn

css3 text gradient animation

php中世界最好的语言

Release： 2018-03-21 09:56:36

Original

4457 people have browsed it

This time I will bring you css3 text gradient animation. What are the precautions to implement css3 text gradient animation? The following is a practical case, let’s take a look.

Use the css3 attribute (background clipping):

<a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: border-box || padding-box || context-box || no -clip || text

What I used this time is: -webkit-background-clip:text;

Chestnut:

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" >
        <h1>→css3文字渐变动画效果 >></h1>
</p>

Copy after login

Instructions:

-webkit-text-fill-color: transparent;(A transparent color must be filled here so that the gradient color will fill the text. If you remove this or fill it with another color, the effect will not be good. Obvious)

Retrieve or set the text fill color in the object, if both <' text-fill-color '> and <' color '> are set, <' text-fill-color ' > The defined color will overwrite the <' color '> attribute;

Effect:

2. It’s similar to the first chestnut, give more Set a background color, gradient from local to global

.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文字渐变动画效果 >></p>

Copy after login

Effect:

3. Use webkit mask to implement 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;">
     <img src="img/text.png" />
     <p class="mask"><i></i></p>    
</p>

Copy after login

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;">
   <img src="img/text3.png" />
   <p class="mask"><i></i></p>    
</p>

Copy after login

Effect:

# #Because the first and second methods alone cannot achieve multiple text colors, they will be overwritten by the color defined by <' text-fill-color '>, so if you set multiple text colors, I will use pictures Instead, it can be seen that the effect of using a mask to achieve a text gradient rainbow is not good -^-

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other php Chinese websites. related articles!