animation de dégradé de texte CSS3

Cette fois, je vais vous présenter une animation en dégradé de texte CSS3. Quelles sont les précautions pour mettre en œuvre une animation en dégradé de texte CSS3. Voici un cas pratique, jetons un coup d'œil.

Utilisez l'attribut CSS3 (écrêtage d'arrière-plan) :

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

Ce que j'ai utilisé cette fois est : -webkit-background -clip:text;

Châtaigne :

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>

Description :

-webkit-text-fill-color : transparent;( Une couleur transparente doit être remplie ici, afin que la couleur dégradée soit remplie sur le texte. Si vous la supprimez ou la remplissez avec une autre couleur, l'effet ne sera pas évident)

Récupérer ou définir le remplissage du texte. couleur dans l'objet, si elle est définie en même temps < ' text-fill-color '> et <', la couleur définie par <' ;' color '> attribut;

effet :

2. Semblable au premier marron, avec une couleur de fond supplémentaire, dégradé du local au 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>

Effet :

3. Utilisez le masque Webkit pour implémenter une animation de dégradé de texte

.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>

Effet :

4. Réaliser le dégradé de texte multicolore

.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>

Effet :

Parce que la première et la deuxième méthodes ne peuvent pas obtenir à elles seules la couleur de plusieurs textes, elles seront écrasées par la couleur définie par <' text-fill-color '>, donc si le texte est défini sur plusieurs couleurs, j'utiliserai une image à la place , mais on peut voir qu'un masque est utilisé pour obtenir le texte arc-en-ciel dégradé L'effet n'est pas bon -^-

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour des informations plus intéressantes. , veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image

Méthode du bas absolu du pied de page collant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!