Heim >Web-Frontend >CSS-Tutorial >Detaillierte Beispiele zum Erstellen von Text-Streamer-Verlaufseffekten mit CSS3
Detaillierte Beispiele zum Erstellen von Text-Streamer-Verlaufseffekten mit CSS3
- PHP中文网nach vorne
- 2016-05-16 12:03:284821Durchsuche
Dieser Artikel stellt hauptsächlich die Produktionsmethode des Text-Streamer-Verlaufseffekts mit CSS3 vor. Ich hoffe, dass er für interessierte Freunde hilfreich ist.
Zuerst das Rendering
Das Folgende ist der Code
HTML-Teil
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="masked"> <h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4> </p> </body> </html>
CSS-Teil
<style>
.masked h4{
display: block;
width: 600px;
height: 100px;
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
</style> Eigentlich ist dies ein sehr einfaches Beispiel. Ich werde hier nicht näher auf die Rolle von Attributen eingehen, da die Dokumentation hier hauptsächlich zu finden ist.
1. Das Attribut „linearer Farbverlauf“ fügt dem Text eine lineare Farbverlaufshintergrundfarbe hinzu 
2. Transparent Stellen Sie den Text auf transparent ein
Zu diesem Zeitpunkt werden Sie feststellen, dass der Text verschwunden ist und nur noch die Hintergrundfarbe auf dem Bildschirm übrig ist, aber wir wissen, dass der Text nicht verschwunden ist, transparent Das Element ist noch im Dokument vorhanden (nimmt immer noch Platz ein).
3. Der Hintergrundclip schneidet den Hintergrund in Text und der Bildschirm sieht so aus. 
Um eine Analogie zu verwenden: Du trägst einen Unsichtbarkeitsumhang und wirst unsichtbar. Zu diesem Zeitpunkt schüttet jemand einen Eimer Farbe über dich und du erscheinst
(Ich weiß nicht, ob das die richtige Art ist, es zu beschreiben. Ich habe vage das Gefühl, dass es dafür eine bessere Erklärung geben wird. Ich hoffe, jeder kann mir einen Rat geben)
4. Animationseinstellungsanimation Wir erreichen diesen Effekt hier durch Ändern der Hintergrundfarbposition, daher müssen wir zuerst die Hintergrundgröße vergrößern, damit die Hintergrundposition Raum zum Ändern hat .
Einfach ausgedrückt sind die oben genannten Schritte: Fügen Sie dem Text einen Verlaufshintergrund hinzu, stellen Sie den Text transparent ein, verwenden Sie dann den Text als Bildschirmhintergrund und erzielen Sie diesen Effekt durch Steuerung der Positionsänderung der Hintergrundfarbe.
【Empfohlene verwandte Tutorials】
1. CSS-Video-Tutorial
2. CSS-Online-Handbuch
3. Bootstrap-Tutorial