Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS

In der täglichen Entwicklung streiten sich Front-End-Studenten oft über einige Animationen und Designs. Die Designer möchten sie mit Code implementieren, während die Front-End-Designer GIF-Bilder entwerfen möchten. Am Ende gibt niemand nach, die Designer gehen und die Front-End-Designer müssen allein Überstunden machen ...

CSS-Technologie ist eine Fähigkeit, die vom Frontend beherrscht werden muss. Man muss sie nicht nur beherrschen, sondern auch kompetent darin sein. Da der aktuelle Trend zu Front-End-Frameworks vorherrscht, haben Programmierer immer weniger Möglichkeiten, Stile zu schreiben. Bei der komponentenbasierten Entwicklung besteht kaum noch die Notwendigkeit, eine einzige Zeile CSS-Code für eine Seite zu schreiben. Auch wenn Sie es nicht schreiben, müssen Sie das Prinzip dahinter verstehen.

Aus Sicht der Webseitenleistung sollten Animationen, die mit CSS implementiert werden können, niemals JS verwenden, und Animationen, die mit JS implementiert werden können, sollten niemals GIF verwenden. Beim Ausführen von Animationen kann CSS die GPU des Computers zur Ausführung aufrufen, sodass seine Leistung natürlich viel besser ist als die von JS. Das obige Zittern des TikTok-Textes kann mithilfe einer CSS-Animation erreicht werden, indem die Schattenrichtung des Textes geändert und der Unschärfeeffekt des geloopten Animationsrahmens eingestellt wird. Wenn man das Prinzip kennt, ist es viel einfacher. Denken Sie in Ihrem Alltag ruhig öfter daran.

Das Wirkungsdiagramm sieht wie folgt aus:

Fügen Sie den Code an

Körper {
  Rand: 0;
  Polsterung: 0;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Mindesthöhe: 100vh;
  Hintergrund: #000;
}
h2 {
  Farbe: #fff;
  Schriftfamilie: serifenlos;
  Schriftgröße: 4em;
  Animation: 0,5 s linear unendlich animieren;
}

@keyframes animieren {
  0 %, 100 % {
    Textschatten: -1,5px -1,5px 0 #0ff, 1,5px 1,5px 0 #f00;
  }
  25 % {
    Textschatten: 1,5px 1,5px 0 #0ff, -1,5px -1,5px 0 #f00;
  }
  50 % {
    Textschatten: 1,5px -1,5px 0 #0ff, 1,5px -1,5px 0 #f00;
  }
  75 % {
    Textschatten: -1,5px 1,5px 0 #0ff, -1,5px 1,5px 0 #f00;
  }
}

Damit ist dieser Artikel über die Verwendung von CSS zum Implementieren von TikTok-Textschütteleffekten abgeschlossen. Weitere relevante CSS-Textschüttelinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten stehenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!