Verwenden Sie SVG und CSS, um animierte Texteffekte zu erstellen

Vor kurzem habe ich meinem Freund Jez geholfen, seine Newsletter -Website für Begeisterung zu erstellen, und ich hatte eine Idee: Was ist, wenn wir das Wort "Begeisterung" im Titel leicht bewegen lassen? Was ist zum Beispiel, wenn jeder Buchstabe im Wort mit Vitalit?t auf und ab schl?gt?

Die Effekte sind wie folgt:

Sehr cool, oder? Ich wei?, dass wir SVG verwenden k?nnen, um Text zu erstellen und dann CSS zu verwenden, um Animationen zu erstellen. Jeder Buchstabe ist ein Pfad mit seinem eigenen Klassennamen, der es erm?glicht, jeden Buchstaben auszuw?hlen. Trotzdem hindert uns nichts davon, HTML und CSS zu verwenden, um dies zu erreichen. Die Verwendung von SVG war nur eine M?glichkeit, dass ich es damals angemessen hielt.

Zuerst ?ffnen wir Figma und geben den Text in ein separates Textfeld ein. Dies geschieht dies, wenn wir hier auf den Menüelement "Surrine Stroke" klicken ...

… Wir k?nnen einen separaten Vektor für jeden Buchstaben bekommen. Dies hilft uns beim Hinzufügen der richtigen CSS -Klasse für jedes Element beim Exportieren von SVG. Sobald wir die Schl?ge jedes Buchstabens gezeichnet haben, k?nnen wir die Punkte im Vektor bearbeiten (aber für das, was wir tun, müssen wir dies nicht tun):

Wenn wir den gesamten Text in ein Feld einfügen und auf "Gliederungsstreich" klicken, wird ein einzelner Vektor erstellt, der alle diese Buchstaben enth?lt. Es wird dann einen einzelnen Pfad mit Koordinaten schaffen, was für mich sehr schwierig ist, zu stylen und sogar zu verstehen, was dort vor sich geht.

Als n?chstes habe ich all diese Buchstaben in einen Rahmen gesteckt (der die Art und Weise die Artikett nennt) und jedes Wort in eine Gruppe eingebracht. Auf diese Weise befindet sich jedes Wort in seinem eigenen g -Tag, was uns auch hilft, die Buchstaben zu stylen, wenn sie als SVG exportiert werden:

Dann exportierte ich SVG - aber! —— Ich muss sicherstellen, dass die ID -Option beim Exportieren enthalten ist.

Wenn wir dies nicht tun, erhalten wir für jeden Brief eine Reihe von Pfadelementen, aber sie haben kein ID -Attribut.

Nach dem Export erhalten wir die folgenden Ergebnisse:

Ich bin mir nicht sicher, wie viele seltsame Dinge mein Problem sind. Wie viele sind die SVG -Exportprobleme für Figma, aber ich habe gel?scht<rect></rect> Element, weil es unn?tig ist. Ich setze dann einen Hintergrund für das K?rperelement ein, damit ich den Text sehen und die Eigenschaften der Inline -H?he und Breite des SVG selbst entfernen kann:<rect></rect>

wunderbar! Jetzt k?nnen wir uns in den interessanten Teil einlassen: Animieren Sie jeden Buchstaben im Wort.

Wenn Sie sich das HTML im obigen Beispiel ansehen, werden Sie feststellen, dass es ein g -Element mit derselben ID wie den Framework -Namen in Figma gibt. Jedes Wort hat auch ein g -Element und jeder Pfad, der das Wort bildet, hat eine separate ID. (Deshalb ist es wichtig, unsere Frameworks und Gruppen ordnungsgem?? zu benennen und eine gute Organisation in jeder Designanwendung zu erhalten.)

Eine Sache, die mich überraschte, war die Reihenfolge des Exportierens für jeden Weg: Es war das Gegenteil der von mir erwarteten Orden, und der erste Brief in der "Begeisterung" -Gruppe war M. Also habe ich es ein wenig aufger?umt, um sicherzustellen, dass jeder Buchstaben in der richtigen Reihenfolge angeordnet ist.

Um die Animation funktionieren zu lassen, verschieben wir zuerst jeden Buchstaben um 2 Pixel:

 G Pfad {
  Transformation: Translatey (2px);
}

Dies liegt daran, dass ich m?chte, dass jeder Brief 2 Pixel springt, und wir werden sp?ter darüber sprechen. Ich habe auch bemerkt, dass ich mit dieser ?nderung auch das SVG -Ansichtsfenster aktualisieren muss. Andernfalls wird der Boden jedes Buchstabens abgeschnitten:

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

Ich sollte den Text wahrscheinlich einfach im Rahmen in Figma neu positionieren und ihn erneut exportieren, aber das reicht für das, was ich brauche.

Jetzt kann ich die dritte Gruppe in SVG (das Wort "Begeisterung") finden und animation-count auf unendlich einstellen:

 / * zielt auf das Wort "Begeisterung" */////
G: N-te-Kind (3) Pfad {
  Animationsname: Wigglewiggle;
  Animationsdauer: 2,5s;
  Animationsveranstalter: Infinite;
}

Der obige Code ruft die folgende wiggleWiggle -Animation auf:

 @keyframes wigglewiggle {
  20%,
  100% {
    Transformation: Translate (0, 2px); / * Bleib für den gr??ten Teil der Animationsdauer */
  }

  0% {
    Transformation: Translate (0, 0px); / * hüpfen auf */
  }
  10% {
    Transformation: Translate (0, 2px); / * kehre zur Grundlinie zurück */
  }
}

Haben Sie den Beginn dieses Keyframe gesehen - 20% , 100% Teil? Es bedeutet "den gesamten Text für den gr??ten Teil der Animation auf dem Basislinie zu halten". Dies bringt eine gute Verz?gerung zwischen den einzelnen Rebounds:

Ich habe diesen Trick aus diesem sehr guten Artikel von Geoff on Animationszeit gelernt. Wenn Sie kurz davor sind, CSS -Animation zu lernen, empfehle ich dringend, ihn zu überprüfen.

Jetzt ist der interessante Teil: Verwenden animation-delay Eigenschaft k?nnen wir jeden Buchstaben nach dem vorherigen Brief biegen lassen. Ich habe definitiv eine intelligentere M?glichkeit, dies zu tun, aber ich habe nur die ID eines jeden Buchstabens verwendet, zum Beispiel:

 #E {
  Animation-Delay: 0s;
}

#N {
  Animation-Zelay: 0,1s;
}

#T {
  Animation-Zelay: 0,15s;
}

#H {
  Animation-Zelay: 0,2s;
}

#U {
  Animation-Zelay: 0,25s;
}

#S_2 {
  Animation-Zelay: 0,3s;
}

#ICH {
  Animation-Zelay: 0,35s;
}

#A {
  Animation-Zelay: 0,4s;
}

#S {
  Animation-Zelay: 0,45s;
}

#M {
  Animation-Zelay: 0,5s;
}

Es ist wirklich chaotisch, aber das Schreiben einer Schleife spart mir nicht viel Zeit und ich muss sie in Zukunft nicht aktualisieren, also denke ich, dass es gut genug ist. Auf diese Weise sind wir fast fertig!

Jetzt haben wir einen abprallenden, lebendigen Titel, um Hallo zu sagen. Jubeln Sie die schlagenden Worte!

Das obige ist der detaillierte Inhalt vonWie man Text mit SVG und CSS animiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!