Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS3-Textverlaufsanimation

php中世界最好的语言
Freigeben: 2018-03-21 09:56:36
Original
4428 Leute haben es durchsucht

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>
Nach dem Login kopieren
-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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage