CSS3-Textverlaufsanimation

Dieses Mal werde ich Ihnen eine CSS3-Textverlaufsanimation vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung einer CSS3-Textverlaufsanimation?

Verwenden Sie das CSS3-Attribut (Hintergrundausschnitt):

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

Kastanie:

1,

Beschreibung:

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

-webkit-text-fill-color: transparent;( Hier muss eine transparente Farbe gefüllt werden, damit die Verlaufsfarbe auf dem Text ausgefüllt wird. Wenn Sie diese entfernen oder mit einer anderen Farbe füllen, ist der Effekt nicht offensichtlich.)

Textfüllung abrufen oder festlegen Wenn im Objekt gleichzeitig <' text-fill-color '> festgelegt ist, überschreibt die durch <' definierte Farbe ;' color '> Attribut;

2. Ähnlich wie bei der ersten Kastanie, mit einer zusätzlichen Hintergrundfarbe, Farbverlauf von lokal zu global

Effekt:

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

3. Verwenden Sie die Webkit-Maske, um eine Textverlaufsanimation zu implementieren

Effekt:

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

4. Erzielen Sie den Farbverlauf von mehrfarbigem Text

Wirkung:

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

Weil die Mit der ersten und zweiten Methode allein kann die Farbe mehrerer Texte nicht erreicht werden. Sie werden durch die durch <'text-fill-color '> definierte Farbe überschrieben. Wenn der Text also auf mehrere Farben eingestellt ist, verwende ich stattdessen Bilder. Es ist jedoch ersichtlich, dass die Verwendung von Masken zur Erzielung eines Regenbogen-Textverlaufs nicht gut ist zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Dynamischer CSS3-Eingabeaufforderungseffekt, wenn sich die Maus in das Bild bewegt

Sticky Footer-Methode für den absoluten unteren Rand

Das obige ist der detaillierte Inhalt vonCSS3-Textverlaufsanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!