Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Beim Verwenden von Animation.css habe ich festgestellt, dass sich die Schriftart der offiziellen Website allmählich ändert. Ich habe mir das CSS angesehen und fand es sehr interessant.

  .site__title {
    Farbe: #f35626;
    Hintergrundbild: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: Text;
    -webkit-text-fill-color: transparent;
    -Webkit-Animation: Farbton 60 s unendlich linear;
  }
@-webkit-keyframes Farbton {
    aus {
      -webkit-filter: Farbton-Drehung (0 Grad);
    }
    Zu {
      -webkit-filter: Farbton-Drehung (-360 Grad);
    }
  }

Hier verwenden wir -webkit-background-clip: text, um das Hintergrundbild zuzuschneiden und nur den Textteil stehen zu lassen.

Verwenden Sie dann -webkit-text-fill-color: transparent, um die Textfüllfarbe auf transparent einzustellen

Verwenden Sie die Farbtonanimation, um den Farbton innerhalb von 60 Sekunden von 0 Grad auf -360 Grad anzupassen und so den Effekt einer sich mit der Zeit ändernden Schriftfarbe zu erzielen.

Dies ist das Ende dieses Artikels über die Verwendung von CSS3 zur Implementierung von Farbverläufen für Schriften. Weitere relevante Inhalte zu Farbverläufen für Schriften mit CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!