Erste Schritte mit CSS-Animationen

1. Willkommen im Kurs!: Bei so vielen atemberaubenden Websites und einigen, die auch nicht so atemberaubend sind, kann es oft schwierig sein , Ihre Website von der Masse abzuheben. Eine Möglichkeit, dies zu tun, besteht darin, Ihrem Text einige Animationen hinzuzufügen z. B. einen Seitentitel oder einen anderen Überschriftentext. Wir wollen nicht übertreiben und alles animieren aber ein auffälliger Text kann Aufmerksamkeit des Benutzers auf sich ziehen. Hier sehen Sie die Beispiele dafür, was wir in dieser Klasse mit HTML und CSS erstellen werden. Gemeinsam erstellen wir 10 Beispiele, die Sie anschließend problemlos auf reale Projekte anwenden können. Mit all diesen bewegten Texten und komplex aussehenden Animationen denken sie, dass diese wirklich komplex zu erstellen sind. Nun, eigentlich ist alles, was Sie hier sehen, ziemlich einfach die meisten nur ein paar Zeilen CSS benötigen , um die Animation zu erstellen. Tatsächlich schreiben wir oft mehr CSS, damit unser Text aussieht, wie wir es möchten, und wir verwenden es tatsächlich für die Animation selbst. Sie lernen alle nützlichen Techniken wie Keyframes, Bill-Modi, die Dauer von Animationen, Verzögerungen, Beschleunigungseffekt , Berechnung von Werten mit Variablen, Kombinieren von Animationen, Polygonen und Clip-Pfaden und auch etwas allgemeines CSS. Diese Klasse ist so konzipiert , dass sie anfängerfreundlich ist, obwohl ein gewisser HTML und CSS ein echter Vorteil ist, da davon ausgegangen wird, dass Sie die Grundlagen kennen. Sie müssen in der Vergangenheit keine Animationsarbeit geleistet haben . Außerdem wird alles, was wir erstellen, völlig kostenlos im Browser erstellt . Sie benötigen keine zusätzlichen Käufe oder Software. Wir können sofort im Browser loslegen. Damit gehen wir nun zur ersten Animation über und wir sehen uns im kommenden Video. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich Zeit, um jede Lektion zu bearbeiten. Überprüfen Sie den Code, den Sie schreiben, und überlegen Sie, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken. Sie können sogar einen Schritt zurücktreten , nachdem Sie den Kurs beendet haben, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran , Ihr Projekt hier auf Skillshare zu Ich werde es mir nicht nur ansehen, sondern es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. Animation 1: Grundlegende Animationen und Keyframes: Wie im Einführungsvideo erwähnt, keine zusätzliche Software oder sind keine zusätzliche Software oder Käufe erforderlich , um diesen Kurs abzuschließen. Alles wird im Browser über eine Website namens codepen.io abgeschlossen . Werfen wir einen kurzen Blick auf diese Website und sehen wir, wie wir die Dinge einrichten. Um loszulegen, gehe zu codepen.io. Dies wird die Website sein, auf der wir all diese Animationen erstellen werden. Wenn Sie möchten und bereits einen Texteditor wie Visual Studio Code eingerichtet haben, können Sie diesen kostenlos verwenden. Das ist völlig in Ordnung. Aber für mich werde ich für jedes dieser Codebeispiele einen neuen Stift erstellen . Sobald Sie ein Konto erstellt und sich bei Codepen angemeldet haben, wird ein Bildschirm angezeigt, der diesem ähnlich sieht. Auf der linken Seite haben wir eine Seitenleiste, in der wir einen neuen Stift erstellen können. Klicken Sie auf diesen Stift und dies sollte ein neues leeres Site-Foto erstellen . Innerhalb des Codepen werden wir einen HTML-Abschnitt, einen Stylesheet-Abschnitt und auch einen JavaScript-Abschnitt haben einen Stylesheet-Abschnitt . Alle diese werden verknüpft und kombiniert, damit wir unseren Code schreiben und diese Vorschau im Fenster unten sehen können. Es ist wirklich einfach, einfache Codefragmente zu erstellen und die Ergebnisse sehr schnell zu sehen. In den kommenden Beispielen werden wir uns einige verschiedene Varianten von Animationen ansehen und wie wir mit verschiedenen Textarten arbeiten können . Dafür brauchen wir einen großartigen Logo-Text, mit dem wir arbeiten können. In diesem speziellen Beispiel werde ich jeden Buchstaben im Text so isolieren jeden Buchstaben im Text ein einzelnes Element ist, und wir werden sehen, warum, wenn wir loslegen. Erstellen Sie zunächst ein div, das ein Wrapper für unseren gesamten Text sein wird. Fügen Sie eine Klasse hinzu , die title_container entspricht , und wir verwenden diese, um sehr bald ein gewisses Styling hinzuzufügen. Für diese kommenden Beispiele werde ich einen Firmennamen namens Cupcake-Fabrik verwenden . Für einige der späteren Beispiele können wir es als vollständige Textzeichenfolge eingeben, genau so. Aber für diese spezielle Animation werden wir mit jedem dieser Charaktere einzeln arbeiten . Das bedeutet, dass wir jedes einzelne davon isolieren müssen, indem wir jedes Zeichen zu seinen eigenen HTML-Elementen hinzufügen. Dazu können wir so etwas wie eine Spanne mit Span-Elementen erstellen . Jetzt erstellen wir unsere Texte mit jeweils einem Zeichen Control oder Command C zum Kopieren verwenden. Fügen Sie mit Control oder Command V ein. Dann machen wir so lange weiter, bis wir das Wort Cupcake-Fabrik buchstabiert haben. Sie können dies auch in einen anderen Namen ändern , wenn Sie möchten. Es macht wirklich keinen Unterschied. Auch wenn Ihr Name länger oder kürzer ist, macht es keinen Unterschied, die Animation. T-O-R-Y. Da haben wir's. Dies ist unser Text, der vollständig buchstabiert ist. Auch für die letzte Wortfabrik, nur um einen anderen Stil hinzuzufügen. Tatsächlich werde ich das trennen, indem ich eine Klasse hinzufüge. Setzen Sie den Klassennamen gleich factory und dann können wir diesen auch kopieren und in jedes der folgenden Elemente einfügen. Wir sehen den Text der Cupcake-Fabrik. In der Tat müssen wir sicherstellen, dass wir das richtig buchstabieren. Da haben wir's. Diese werden alle unten in der Vorschau angezeigt. Zu Beginn können wir im CSS einige Stile und Layouts hinzufügen und wir werden dem Body-Abschnitt einige allgemeine Stile hinzufügen . Zuallererst die Höhe. Dies dient ausschließlich der Präsentation. Wir legen diesen Wert auf 100 Prozent der Ansichtsfensterhöhe fest. Wir verwenden die Flexbox, indem wir den Anzeigetyp auf Flex setzen . Dadurch können wir unseren Text in der Mitte dieses Fensters positionieren . Wir tun dies, indem wir ausrichtenden Inhalt so einstellen, in der Mitte befindet, und sie sollten den Text horizontal in die Mitte schieben. Richten Sie Elemente in der Mitte aus. Dies gibt uns die vertikale Ausrichtung. Beide Optionen sind möglich, da der Standardanzeigetyp in einer Zeile befinden soll. Das bedeutet, dass sich der Inhalt von links nach rechts auf der gesamten Seite und nicht in einer Spalte von oben nach unten. Nach unserer Positionierung fügen wir einige Schriftarten hinzu. Stellen Sie die Schriftfamilie auf Georgia ein. Ein Fallback der Serifen. Sie können dies auch ändern, wenn Sie unterschiedliche Schriftarten oder einen Stil in der Schriftgröße verwenden möchten. Mache das mit 62 Pixeln etwas größer. Dadurch wird es im Browser etwas besser lesbar. Denken Sie daran, dass jedes dieser Zeichen in unserem Wort von diesem Span-Element umgeben ist. Schnappen wir uns dieses Span-Element. Dann können wir uns an die Arbeit machen, indem wir etwas Styling hinzufügen. Die Farbe von Schiefergrau. Bisher dient das gesamte Styling, das wir machen, nur zur Präsentation. Es hat derzeit keine Auswirkungen auf die Animation, die wir gleich erstellen werden. Dann mach es einfach ein bisschen anders als im Werksbereich. Wir schnappen uns unsere Werksklasse und ändern auch die Farbe für diese. Da es sich um eine Klasse handelt, verwenden wir den Punkt. Schnapp dir den Werkstext. Dann können wir hier die Farbe einstellen. Ich werde mich für einen Hexagonwert entscheiden , der EEC 549 Semikolon ist. all diese grundlegenden Stylings aus dem Weg sind, können wir jetzt daran arbeiten, einige grundlegende Animationen hinzuzufügen. Um eine Animation in CSS zu erstellen, besteht eine wirklich einfache Möglichkeit darin, den Start- und Endstatus der Animation festzulegen . Zwischen diesen beiden Zuständen, dem Anfang und dem Ende, können wir jede der gewünschten CSS-Eigenschaften ändern . Zum Beispiel können wir die Startfarbe unseres Textes auf Grau setzen Startfarbe unseres Textes auf und dann können wir die Endfarbe auf eine andere Farbe festlegen . Wir können die Schriftgröße ändern. Wir können mit dem Abstand und jeder anderen Eigenschaft herumspielen , die Sie möchten. Um diese Änderungen oder diesen Übergang festzulegen, müssen wir Keyframes verwenden. Diese Keyframe-Regel hat eine Reihe von geschweiften Klammern wie diese und im Inneren legen wir den Start- und den Endzustand unserer Animation fest. Wir können dies tun, indem wir dies auf null oder null Prozent setzen. Dann können wir unsere Styles in die geschweiften Hosenträger einfügen. Danach liegt der Zustand, in dem wir erscheinen möchten, wenn die Animation beendet ist, bei 100 Prozent. Da wir nur mit einem einfachen Beispiel beginnen , werden wir nur diese beiden Prozentsätze verwenden, aber Sie können auch alle anderen Werte hinzufügen , innerhalb derer Sie möchten. Dadurch entstehen mehr Zwischenzustände und komplexe Animationen. Keyframe-Regel nicht nur unsere Keyframes hinzufügen, Wir müssen dieser Keyframe-Regel nicht nur unsere Keyframes hinzufügen, sondern auch einen Namen geben. Nennen wir das Animation. Dann legen wir den Null-Prozent-Status fest, was der Anfang unserer Animation ist. Damit sich jeder dieser Buchstaben bewegt, fügen wir einen Rand hinzu , der einen gewissen Abstand außerhalb der Elemente auf der linken Seite darstellt. Fügen wir links von 10 Pixeln einen Rand hinzu. Sobald die Animation fertig ist, reduzieren wir sie, sodass der Rand nur fünf Pixel beträgt. Was dies für jedes unserer einzelnen Elemente, nämlich die Span-Elemente, bewirken wird, werden wir diese Animation hinzufügen, die damit beginnt mehr Platz auf der linken Seite hinzuzufügen und dies dann zu reduzieren auf weniger Abstand reduziert, wodurch jeder dieser Buchstaben effektiv nacheinander verschoben wird. Um dies mit unseren Span-Elementen zu verknüpfen, können wir in den Span-Abschnitt springen. Platzieren Sie den Animationsnamen , der diesem Namen entspricht, den wir unseren Keyframes gegeben haben. Wenn Sie dies speichern, sehen wir derzeit keine Änderungen in dieser Vorschau. Der Grund dafür ist, dass wir, obwohl wir den Anfangs- und Endstatus festgelegt haben, auch deklarieren müssen, wie schnell diese Animation abläuft. Wie viele Sekunden dauert die Dauer vom Anfang bis zum Ende der Keyframes. Dazu können wir direkt unter dem Animationsnamen die Animationsdauer hinzufügen. Dafür möchte ich drei Sekunden nutzen. Wir können das S für Sekunden oder MS auch für Millisekunden verwenden. Für Millisekunden entspricht 1.000 einer ganzen Sekunde. Ich halte das nur auf drei Sekunden. Wenn wir nun auf die Schaltfläche Speichern klicken oder auch aktualisieren, werden Sie zwei Dinge an dieser Animation bemerken. Das erste ist, dass es tatsächlich funktioniert. Es geht von einem linken Rand von 10 Pixeln und endet dann bei einem kleineren Wert von fünf Pixeln, wodurch sich jeder dieser Buchstaben bewegt. Nun, wenn Sie auch genau hinschauen, lassen Sie uns das Ganze auffrischen. Sobald wir ganz am Ende der Animation angelangt sind, sehen wir diesen Sprung ganz am Ende. Was das macht, ist, dass die Animation beginnt, sie endet und dann kehrt sie in den ursprünglichen Zustand zurück , den sie vor der Verarbeitung der Animation war. Dies ist völlig in Ordnung, wenn Sie dies tun möchten, wenn Sie es wieder im ursprünglichen Format wiederherstellen möchten. Alternativ möchten Sie oft den Endstatus genau so belassen , wie die Animation beendet wurde. Nun, um dies zu tun, können wir eine Eigenschaft namens Animationsfilmmodus verwenden und diesen Wert auf Forwards setzen. Dadurch wird sichergestellt dass am Ende unserer Animation der Vorwärtsmodus bedeutet, dass sie im Endzustand bleibt , der in unseren Keyframes festgelegt wurde. Wenn wir die Seite jetzt speichern und neu laden, können wir sehen, dass unsere Animation wirksam wird und sie im Endzustand unserer Keyframes verbleibt . Um das zu beenden, setze ich das gleich dem Cupcake-Factory-Logo Nummer 1. Dies ist jetzt unser erstes Logo oder unsere erste Animation, die jetzt fertiggestellt ist. Wir sehen uns im zweiten. 4. Animation 2: Animationen kombinieren: Für unsere zweite Animation kombinieren wir zwei separate Animationen. Was wir zunächst tun werden, ist, dass wir mit dem Cupcake arbeiten, ich werde den Raum und die Grundstücke wieder nutzen , um das Ganze breiter zu beginnen. Die Animation beginnt und dann schließen sich diese zusammen und danach, sobald alles fertig ist, werden sie im Wort der Fabrik verblassen. Um dies zu starten, erstellen wir einen neuen Stift, indem wir unten auf die Gabeltaste klicken. Dadurch wird eine Kopie unseres bestehenden Projekts erstellt, sodass wir einen Ausgangspunkt mit allen HTML- und Basisstilen erhalten , die wir benötigen. Ich werde das in Logo Nummer zwei ändern. Wie bereits erwähnt, behalten wir den gesamten Text bei, wir behalten den Textkörper und all diese Basisschriftarten bei, aber wir werden unsere neuen Keyframes unten erstellen. Um klar zu halten, was genau wir tun, ändern wir dies in die Keyframes, die als Abstand bezeichnet werden , und dadurch wird der Rand erneut angepasst. Dies gilt zwar für alle unsere Span-Elemente, wir werden im Werk verblassen, sodass dies nicht sichtbar ist. Wir werden gleich danach mit dem Werkstext arbeiten, also fügen wir zunächst einen vollen Rand hinzu und nicht nur links. Platzieren wir nun den Nullrand oben und unten, ich nehme 14 Pixel links und rechts. Dies wird der Anfangszustand bei null Prozent sein und ich werde ihn auch bei 25 Prozent hinzufügen. Dadurch wird sichergestellt, dass unsere Marge für das erste Quartal der Animation gleich bleibt und danach, ganz am Ende, wird sie zu einem anderen Margenwert verschmelzen . Ändern wir den Rand, wir behalten oben und unten Null und machen es links und rechts zu vier Pixeln Probieren wir es aus und sehen, wie das aussieht. Wenn wir zur Spanne gehen. Nun, ich werde diesen Rand als Ausgangszustand unserer Animation kopieren diesen Rand als Ausgangszustand . Sobald dies geladen wird, haben unsere Spanne oder unsere Buchstaben diesen Rand links und rechts. Dies bleibt für das erste Quartal der Animation bestehen und dann reduzieren wir den Abstand zwischen den einzelnen Animationen auf vier Pixel, also seit wir den Animationsnamen geändert haben Quartal der Animation bestehen und dann reduzieren wir den Abstand zwischen den einzelnen Animationen auf vier Pixel, also seit wir den Animationsnamen geändert haben Animation als Abstand, lassen Sie uns das ändern und wir können auch eine Abkürzung für all das erstellen, anstatt all diese Animationseigenschaften auf zwei separaten Zeilen hinzuzufügen , können wir alle diese platzieren in eine Animationseigenschaft. Wir haben den Namen unserer Animation, und anstatt das Timing und den Filmmodus als separate Eigenschaften zu haben, können wir alle diese in derselben Zeile hinzufügen. Dies bedeutet, dass wir unsere Dauer und unseren Füllmodus entfernen können. Alles sollte immer noch wie zuvor funktionieren. Jetzt speichern und aktualisieren, wir beginnen mit 14 Pixeln Rand links und rechts. Dies bleibt für das erste Quartal der Animation erhalten und am Ende reduziert sich dies auf vier Pixel. Da wir den Füllmodus auf vorwärts gesetzt haben, ist dies auch der Endzustand, anstatt zum ursprünglichen Wert zurückzukehren. Sehen wir uns das noch einmal an. 14 Pixel auf 4, und das bleibt bestehen. Zu Beginn dieses Videos erwähnte ich, dass wir zwei separate Animationen kombinieren werden. Die Animation, die wir haben, wollen wir einfach auf die Wörter anwenden, den Cupcake und dann werden wir das Wort Fabrik einblenden , sobald das fertig ist. Dazu müssen wir unten bei Keyframes eine separate Keyframe-Regel erstellen unten bei Keyframes eine separate Keyframe-Regel . Wir nennen das die Verzögerung. Das wird also mit der CSS-Opazitätseigenschaft funktionieren und wir beginnen bei 0 Prozent und auch bei 30 Prozent. Der Grund, warum wir hier zwei verschiedene Werte setzen, ist , dass wir plötzlich den Opazitätswert gleich 0 haben. Was wir tun werden, ist das zu jedem der Werksbriefe hinzuzufügen . Dadurch wird die Deckkraft festgelegt, was bedeutet, dass sie vollständig durchsichtig ist, sodass keines der Wörter für die ersten 30 Prozent unserer Keyframes angezeigt wird. Dann, ganz am Ende, 100 Prozent, setzen wir den Opazitätswert auf 1, was vollständig undurchsichtig ist, was bedeutet, dass unser Text wieder auf seinem regulären Wert ist. Wir werden in die Geruchsklasse direkt darüber destillieren , direkt unter der Farbe. Wir stellen die Animation ein, wiederum die Kurzschrift verwenden wir in den Animationsnamen Delay einfügen können , und diese über fünf Sekunden ausführen. Wir können also wieder sehen, wenn wir die ersten 30 Prozent der Animation aktualisieren, wird die Deckkraft auf Null gesetzt und gegen Ende beginnt diese zu verblassen. Lass das auch ein bisschen besser aussehen, ich werde den Abstand zwischen jedem dieser Buchstaben reduzieren und es auch kursiv machen. Also zurück in die Werksklasse. Platzieren Sie in der Font-Style-Eigenschaft von Italic, probieren wir diese aus und reduzieren Sie auch den Rand, also 0 oben und unten und fünf Pixel links und rechts. Lass uns etwas weniger gehen, wir ändern das einfach in zwei Pixel. Los geht's und so können wir zwei oder mehr Animationen kombinieren und all diese CSS-Eigenschaften auch zu einer Animations-Kurzschrift zusammenführen . 5. Animation 3: Einfacher und Skewing: Willkommen zurück zu unserer dritten Demonstration. Wir werden uns für diese Bindung an denselben HTML-Code halten und auch viele der gleichen Stile, sodass wir schnell damit beginnen können, unser Projekt zu duplizieren. Also Fork, unser zweites Logo. Dadurch werden unsere ursprünglichen Inhalte dupliziert. Der HTML-Code bleibt also genau derselbe sodass wir alle einzelnen Buchstaben kontrollieren können Wir werden dies später ändern. Der Körper kann gleich bleiben , die Spanne, wir können den Rand entfernen, und auch die Duplikate sollten wir nicht haben. Dann machen wir uns an die Arbeit, indem wir unsere Keyframes erstellen. In diesem Fall werden wir alle Buchstaben mit der Eigenschaft Letterspacing weiter verteilen oder beabstandet machen Letterspacing weiter verteilen oder beabstandet . Also fangen wir wirklich weit an, Brief, um allen Draw zurück in die ursprüngliche Position zu verleihen . Dann machen wir ganz am Ende den Text kursiv, indem wir eine Transformation setzen. Wir können also einen dieser Keyframes entfernen. Sie benötigen einen Satz Keyframes für diesen, und wir nennen das die Animation da es immer noch mehrere Dinge gibt. Wieder bei null Prozent. Wie bereits erwähnt, verwenden wir für diesen die Eigenschaft Buchstabenabstand. Wir setzen dies ganz am Anfang auf 10 Pixel, wir legen auch einen Zwischenzustand fest , der 50 Prozent beträgt, in dem der Buchstabenabstand breiter wird. Wir beginnen also zunächst mit einer Breite von 10 Pixeln, dann wird die Animation in der Mitte der Animation viel breiter. Lass uns für 100 Pixel gehen. Dann, ganz am Ende, setzen wir unseren Buchstabenabstand auf 20 Pixel. Dies ist jedoch ein bisschen breiter als der ursprüngliche Startzustand. Speichern wir das. Wir können unsere Animation in unsere Spanne einfügen und den Animationsnamen platzieren. Mal sehen, wie das aussieht. Sie können sehen, dass es breiter wird und dann innerhalb von drei Sekunden wieder in die Mitte zurückkehrt . Erfrischen wir uns einfach und sehen uns das noch einmal an. Also hier, bei null Prozent, setzen wir den Buchstabenabstand auf 10 Pixel und wir beenden mit einer Breite von 20 Pixeln. So können wir nicht nur den Anfangs - und Endzustand festlegen, wir können diese Animationen auch vereinfachen oder einbauen, wir können sie lockern, was nach und nach unser erstes Date einbringt, und wir können sie auch vereinfachen, um unsere Animation schrittweise fertigzustellen oder zu beenden. Um dies innerhalb unserer Animation zu tun, werden wir es einfacher machen. Dadurch wird unsere Animation etwas reibungsloser integriert, aber wenn Sie möchten, dass dies erleichtert und auch ausgeblendet wird, können wir Ease-In-Out und Refresh auswählen, und in diesem Fall sieht alles gut aus. Eine Sache, die wir auch mit dem Factory-Text tun müssen, ist das Entfernen der nicht verwendeten Animation von zuvor. Wir können auch den Schriftstil von kursiv entfernen, da wir hier alle Texte auf dem Bildschirm überspringen werden. Eine Sache, die Sie vielleicht auch bemerken Wenn wir mit diesem Buchstabenabstand oder Rand arbeiten, drücken wir den Text so, dass er wirklich breit ist und vom Bildschirm verschwindet. Lass uns einfach speichern und aktualisieren. Manchmal werden Sie feststellen, dass der Text in zusätzliche Zeilen umbrochen wird, das ist offensichtlich nicht der Look , den wir anstreben werden. Um dies zu beheben, können wir mit dem Titelcontainer arbeiten. Schnappen wir uns das, das ist der Container für all diesen Text hier. Dies ist der Cluster, also verwenden wir den Punkt. Was wir hier tun werden, ist einfach den Anzeigetyp auf Flex einzustellen . Lass uns das ausprobieren. Sie können jetzt sehen, dass der Text von der Seite verschoben wird, ohne in die nächste Zeile zu umbrechen. Der Grund dafür ist, dass wir standardmäßig versuchen, die Flex-Box in eine einzelne Zeile zu passen , es sei denn, wir fügen eine zusätzliche Eigenschaft wie Flex-Wrap hinzu. Flex-Wrap beschränkt dies auf die Breite des Containers der Seite und ermöglicht den Umbruch auf mehrere Zeilen. Natürlich wollen wir das nicht, also können wir es entfernen und die Standardeinstellungen beibehalten. Das Letzte, was wir tun werden, ist, zu unseren Keyframes zurückzukehren und die Verzerrung unseres Textes festzulegen. Zunächst setzen wir die Transformation auf einen Wert von Null bei 50 Prozent des Weges durch unsere Animation. der Transformation verwenden wir die Eigenschaft skewx und setzen diese auf einen Anfangswert von Null. Dies bedeutet, dass wir in der Mitte unserer Animation keine Wirkung der Transformation haben. Aber sobald wir ganz am Ende angelangt sind, kopieren wir das und fügen es bei 100 Prozent ein und setzen die Geschwindigkeit auf negative 20 Grad Dies wird jetzt einen Offset ganz am Ende unserer Animation verursachen . was wir jetzt sehen werden. Es kippt dann um 20 Grad über alle Texte und gibt uns diesen kursiven Effekt. Du kannst auch damit herumspielen und paar wirklich verrückte Dinge tun. Wenn wir zum Beispiel Beginn der Animation wollten, der gesamte Text von den Rändern des Bildschirms geschoben wird . Um dann in die Mitte zu kommen, könnten wir etwas tun, wie einen Rand auf der linken Seite hinzuzufügen , was wir zuvor gemacht haben, 100 vw, was der Breite des Bildschirms entspricht. Das fängt dann richtig weit an und dann kommen alle Texte ins Zentrum. Entfernen wir das einfach und behalten unsere Originalanimation bei. Großartig. Nur um das zu beenden, springen wir nach oben und wir nennen es das Logo Nummer 3. Speichern, öffnen und wir sehen uns im nächsten. 6. Animation 4: Verzögerungen und übersetzen: Fahren Sie jetzt mit Animation Nummer 4 fort. Wie immer, klicken Sie auf die Schaltfläche „Fork“, um eine Kopie unseres Logos Nummer 3 zu erstellen. Wir ändern dies in Nummer 4 als Titel, und wir können einen Großteil des gleichen Codes aus früheren Beispielen wiederverwenden . Aber was wir tun werden, ist die Wörter aufzuteilen, den Cupcake und die Fabrik. Wir lassen die Fabrik von links und rechts hineingleiten und sobald wir fertig sind, nach einer Zeitverzögerung, verblassen wir die Worte des Cupcakes. Wir haben bereits diese Klasse, eine Fabrik um mit diesem Wort zu arbeiten. Was wir auch tun werden, ist zu den Wörtern Cupcake überzugehen und eine Klasse hinzuzufügen, die Cupcake entspricht. Auf diese Weise können wir mit diesem speziellen Abschnitt arbeiten und ihn kopieren und in jeden der folgenden Buchstaben einfügen. Jetzt haben wir zwei klare Abschnitte und anstatt mit der Spanne zu arbeiten, würden wir diese durch die Cupcake-Klasse ersetzen. Die Farbe ist in Ordnung, aber was wir mit den Worten des Cupcakes machen werden, ist, das am Ende einzublenden . Wir beginnen mit einem Opazitätswert von Null. Das bedeutet, dass wir diese beiden Wörter zunächst nicht sehen, aber wir werden sie mit unserer Animation einblenden. Gehen wir jetzt auf den Grund. Wir richten unsere Keyframes ein. Dafür werden wir mit zwei getrennten arbeiten. Entfernen Sie den gesamten Inhalt aus unserer Animation und wir nennen das Slide-Right. Dieser wird für die Wörter Fabrik gelten. Es wird links von vorne beginnen und dann auf der X-Achse in Opposition übergehen. Anstatt die Prozentsätze innerhalb der Keyframes festzulegen , können wir einfach sagen, wenn Sie nur von einem Zustand in einen anderen wechseln möchten wenn Sie nur von einem Zustand in einen anderen wechseln möchten. Dies beginnt mit unseren Start-CSS-Eigenschaften , die wir oben haben und dann animieren wir zu den Eigenschaften, die wir hier hinzufügen. Wir können das einfach duplizieren, unsere Fade-Sektion und wir nennen das Fade. Dieser kann das Oberteil auch drinnen halten. Für den Fade fügen wir das zu den Worten Cupcake hinzu. Denken Sie daran, dass wir die Deckkraft derzeit auf Null gesetzt haben. Wir beginnen damit als Null und wenn wir das dann kopieren und in unser Fade einfügen , wird es in eins geändert und dies wird am Ende unserer Animation sein. Was wir tatsächlich haben, ist diese Opazität bei null Prozent und dann diese ganz am Ende. Wir können das dann einrichten. Wir können die Cupcake-Klasse ändern, die Animation von Fade haben. Lass das über 1,5 Sekunden funktionieren. Speichern Sie das und wir werden sehen, wie unsere Animation jetzt eingeblendet wird. Wir haben ein bekanntes Problem, das ganz am Ende ist, wir kehren in den ursprünglichen Zustand der Opazität zurück , um Null zu sein. Wir können den Endzustand der Animation beibehalten , indem wir dies auf vorwärts setzen, um es zu versuchen. Dies bleibt jetzt bestehen. Jetzt können wir mit dem Werkstext arbeiten , der links beginnt und dann nach rechts gleitet. Wir haben bereits dieses Klassen-Setup und die Farbe. Hier können wir den Anfangszustand unserer Animation einrichten . Wir verwenden die transform-Eigenschaft, bei der wir den Wert der X-Achse von negativen 150 Pixeln kreuzen . Wenn wir das speichern, können wir sehen, dass es nach links verschoben wird , 150 Pixel, und dies wird der Startzustand unserer Animation sein. Wir können dies kopieren und es wieder auf den Wert Null beenden. Natürlich müssen wir diese Slide-Right-Animation zu unserer Factory-Klasse hinzufügen . Platzieren Sie dies in der Animation , die wir Slide-Right nennen. Wir machen das über zwei Sekunden. Außerdem behalten wir den Endzustand bei Forwards bei. Das alles funktioniert gut, aber eine Sache, die Sie bemerken werden, ist, dass wir diese Überschneidung der Fabrik haben diese Überschneidung der Fabrik die über die Worte Cupcake geht. Eine Möglichkeit, dies zu beheben, besteht darin , eine Animationsverzögerung hinzuzufügen. Wir blenden erst ein, nachdem wir den Werkstext nach rechts verschoben haben. Der Weg, dies zu tun, ist, wenn wir in unsere Cupcake-Abteilung gehen und wir haben zwei Möglichkeiten, dies zu tun. Wir könnten entweder eine Animationsverzögerung hinzufügen und diese auf eine beliebige Anzahl von Sekunden setzen diese auf eine , die Sie möchten. Dadurch wird unser Fade-In um 1,5 Sekunden verzögert. Oder wir könnten dies auch der Kurzschrift hinzufügen. Platzieren wir das kurz vor unserem Animationsnamen. Wir kommentieren das. Dies gibt uns immer noch die erforderliche Zeitverzögerung. 7. Animation 5: Sliding: Dieser nächste wird ein kleines Spiel mit dem sein , was wir bereits haben. Wir werden mit der Fabrikgruppe zusammenarbeiten und dann beginnen wir das oben rechts von vorne und dann bewegen wir es diagonal nach unten, sodass es unter den Worten Cupcake steht . Das wird unten stehen. Danach, nach einer kleinen Verzögerung, bringen wir die Worte TheCupcake ein, indem wir die Deckkraft ändern. Wir gehen runter zum Fork-Button und duplizieren unser Projekt. Machen Sie eine Kopie davon und dann ändern wir es Logo Nummer 5. Dazu fügen wir zunächst einen gewissen Rand zu den Worten Factory hinzu, wodurch sie von irgendwo oben rechts verschoben und dann diagonal nach unten gebracht werden. Um dies zu tun, werden wir einen gewissen Spielraum nutzen. Derzeit arbeiten wir mit jeder dieser Fabrikklassen. Wenn wir jedem dieser Buchstaben einen gewissen Spielraum hinzufügen würden, würde dies für jeden einzelnen Buchstaben einzeln gelten. Um dies als eine ganze Gruppe zu verschieben, werde ich stattdessen eine ganze Gruppe zu verschieben, werde ich jede dieser Factory-Klassen ausschneiden, alle Bereiche ausschneiden und einen neuen div-Abschnitt erstellen. Dieser wird die Klasse von factory_wrapper hier haben , fügen Sie unseren Inhalt ein. Dies gibt uns jetzt eine Verpackung, in der wir mit all diesen Wörtern arbeiten können, damit wir unsere Basisstile für den Körper, den Behälter und auch den Cupcake beibehalten können. Das ist alles in Ordnung. Wir können diesen kommentierten Abschnitt entfernen und dann wird er mit der Fabrik zusammenarbeiten sodass wir nicht transformieren müssen. Wir werden für diesen Fall mit Margin arbeiten. Wir können die Animation verschieben, da wir die Animation auf unseren Factory-Wrapper anwenden werden. Lass uns das machen. Wählen Sie unsere Klasse und fügen Sie dann eine Animationseigenschaft hinzu. Mit dieser Animationseigenschaft können wir den vorhandenen Keyframe-Namen der Folie direkt über die Dauer von zwei Sekunden verwenden. Wir belassen das im Vorwärtszustand. Denken Sie daran, dass Forwards die Endzustände unserer Animation beibehalten. Bis zu unserer Animation in unsere Keyframes der Folie rechts, hier drin, sowie das Hinzufügen der beiden Eigenschaften, könnten wir auch den Startzustand mit den Wörtern hinzufügen , von. Wir können das in diese lockigen Zahnspangen einfügen. Dafür schieben wir unseren Werkstext nach oben rechts, irgendwo in diesem Bereich. Fügen Sie dazu auf der linken Seite etwas Rand hinzu. Wir werden das um 300 Pixel über die Seite schieben. Danach, ganz am Ende, ändern wir dies in einen oberen Rand von 50 Pixeln. Mal sehen, welche Wirkung das haben wird. Wie Sie sehen können, wird zu Beginn der Transformation dieser Rand links auf die linke Seite angewendet, wobei dieser Text nach rechts verschoben wird. Am Ende werden dann allmählich einige hinzugefügt Rand oben , der diesen Text dann unter die Worte des Cupcakes schiebt . Speichern wir das einfach und aktualisieren damit wir es noch einmal sehen können. Gut, das funktioniert gut, aber nur als letzter letzter Schliff möchte ich die Worte Factory weiter nach links verschieben . Wir fügen das direkt unter den Worten ein, Kuchen. Gehen Sie dazu in den Endzustand unserer Animation. Wir können dann den linken Spielraum verringern. Versuchen wir es mit einem negativen Wert von 100 Pixeln. Sehen Sie, wie das aussieht. Das sieht besser aus. Vielleicht 120. Gut. Damit steht das Wort Factory nun knapp unter dem Wort „Kuchen“. 8. Animation 6: Variablen, Drehen und Berechnungen: Willkommen zurück und beginnen wir mit unserer Animation auf Nummer 6, [unverständlich], in der wir an unseren aktuellen Projekten arbeiten. Benennen Sie diese Nummer 6 um. Wir bleiben beim Text der Cupcake-Fabrik, aber machen Sie ihn ein bisschen anders nur um ihn interessant zu halten. Im Moment können wir den Factory Wrapper entfernen , der alle Werkstexte umgibt. Entferne dieses div, das die öffnenden und schließenden Tags für dieses ist. Bis zum Körper, mach es ein bisschen größer. Gehen wir für die Schriftgröße 100 Pixel. Wir mischen die Dinge mit einer anderen Hintergrundfarbe. Sie können dies als jede Farbe platzieren, die Sie möchten, aber ich werde mich für 1f1c1c entscheiden, nur um dem eine dunklere Hintergrundfarbe zu geben. Wir können den Titelcontainer behalten. Wir brauchen diesen Cupcake-Kurs nicht mehr. Wir werden auch den Factory-Wrapper entfernen, damit wir auch das entsprechende CSS entfernen können . Um die Farbe für die Wörter Cupcake wieder herzustellen, fügen Sie dies dem Körper hinzu. Die Farbe, die hell schiefergrau war. Wir können jetzt mit unserer Animation loslegen. Dieser wird eine Reihe von Drehungen sowohl auf der X- als auch auf der Y-Achse und wir werden uns ansehen, wie das geht, indem wir dies zu jedem unserer Buchstaben mit dem span-Element hinzufügen. Fügen wir die Spanne hinzu. Hier drin werden wir unsere Animation platzieren. Unter Verwendung der ersten Schlüsselbilder nennen wir diesen RotaTeX. Sie benötigen nur einen einzigen Zustand, da wir vom ursprünglichen Wert bis zu 90 Grad rotieren, sodass wir diesen Wert als einen Wert von null Prozent platzieren können. Dies erfordert eine Transformation, die den Text auf der X-Achse dreht. Innerhalb der Klammern können wir einen Wert innerhalb von Grad eingeben, und wenn Sie sehen möchten, wie dies ohne die Animation aussieht, können wir dies einfach in unsere Span-Elemente einfügen. Wenn wir dies als 90 Grad speichern, sehen wir nichts auf dem Bildschirm da dieser außer Sichtweite gedreht wird. Wenn wir dies jedoch in eine andere Zahl ändern, z. B. 100, können wir die Rotation von 120 sehen. Dies ist der Effekt , den wir erzielen werden, indem wir ihn auf der X-Achse drehen und dann wieder in den ursprünglichen Zustand zurückkehren. Wir verschieben das, platzieren es als Animation von drei Sekunden, den Keyframe-Namen von RotaTeX. Speichern Sie dies, und jetzt können Sie sehen, dass es bei einem Wert von 90 Grad beginnt , sobald Sie bei null Prozent beginnen und dann in den Standardzustand zurückkehren. Dieser dreht sich die X-Achse, aber wir können auch um die X-Achse, aber wir können auch auf der Y-Achse rotieren, um diesem einen Spin-Effekt zu verleihen. Dafür nennen wir unsere Schlüsselbilder Spin. Da wir genau wie hier nur mit einem einzigen Wert beginnen wollen , beginnen wir bei null Prozent und nutzen auch die Transformation, aber dieser wird RotaTey sein. Um eine volle Drehung zu machen, müssen wir diese 360 Grad drehen, also platzieren wir sie bis zu unserer Spannweite in unsere Animation. Dieser wird Spin sein. Wir verkürzen dies auf zwei Sekunden, speichern und dann dreht sich unser Text um 360 Grad und dreht ihn dann zurück in den Anfangszustand. Wie wir sehen können, wird dies nur einmal wiederholt, aber wir können auch festlegen, wie oft dies wiederholt werden soll. Wenn wir zwei wollen, ersetzen Sie diese kurz danach darin, diese dreht sich zweimal und wir können dies auch weiter wiederholen, indem wir dies auf den Wert unendlich setzen. Dies sind zwei verschiedene Arten, wie wir entweder auf der X- oder der Y-Achse rotieren können . Aber wir können auch etwas anderes tun, anstatt alles gleichzeitig zu drehen . Im Moment dreht sich jeder dieser Buchstaben genau zur gleichen Zeit, um uns diesen Effekt zu verleihen. Wir können dies aber auch etwas komplexer gestalten indem wir zwischen jedem einzelnen eine Zeitverzögerung hinzufügen. Wir können dies tun, indem jedem unserer Buchstaben eine Variable hinzufügen. Wir machen das in Form eines Stilattributs. Wir benötigen diese Klasse nicht in jedem dieser Cupcakes-Abschnitte und können die Stilattribute ersetzen. Dies entspricht einer Variablen , die ich —i aufrufen und die Variable auf einen Wert setzen werde. Der Wert wird um den Wert eines dieser Bereiche erhöht . Dies bedeutet, dass sich dies mit der Zeitverzögerung vervielfacht. Machen Sie sich keine Sorgen, wenn das im Moment keinen Sinn ergibt, wir kopieren es einfach und fügen es in jeden dieser Buchstaben ein. Wir werden uns gleich ansehen, wie das genau funktioniert. Dann Nummer 3, ich füge das in jeden unserer Briefe ein. Was wir jetzt hier haben, ist eine Variable namens —i und jede von ihnen hat einen entsprechenden Wert. Wir können zu unserer Animation gehen, die gerade hier ist. Wir behalten die Spinanimation bei, die sich um 360 Grad auf der Y-Achse dreht . Anstatt dies alles gleichzeitig zu tun, können wir für jeden dieser Charaktere eine Animationsverzögerung hinzufügen . Nach der Animation wird eine Animationsverzögerung übergeben. Wenn wir wollten, könnten wir einfach eine Verzögerung von etwa einer Sekunde machen , und das gilt für das Ganze. Da wir keinen Verweis auf unsere Variablen haben, wenden wir dies nur auf jede der Spannweiten an. Stattdessen können wir eine Berechnung anwenden, die Funktion calc, und wir werden jede dieser Berechnungen um 0,1 Sekunden verzögern . Wir multiplizieren dies mit dem Variablenwert, der —i ist. Dies gibt uns diese nette Verzögerung für jedes unserer span-Elemente. Sehen wir uns das noch einmal an. Was ich hier gemacht habe, ist, dass wir jede unserer Variablen nacheinander erfasst haben . Beim ersten multiplizieren wir 0,1 Sekunden mit eins. Dies ist einfach 0,1 Sekunden, und dann sind dies 0,2 Sekunden, 0,3 bis zum allerletzten Buchstaben, dem y, und dies wird um 1,7 Sekunden verzögert. Stellen Sie die Farbe als letzten Schliff wieder her. Wir fügen diese Fabrikklasse auch wieder in unsere Buchstaben ein, sodass Klasse gleich Fabrik Kopieren Sie sie und fügen Sie sie in die folgenden Buchstaben ein. Los geht's, und da ist unsere Animation, die zeigt, wie wir der Rotationstransformationen auf der X- und Y-Achse mithilfe der Rotationstransformationen auf der X- und Y-Achse rotieren können und wie wir jeder eine andere Zeitverzögerung hinzufügen können . unserer Charaktere, wie die Verwendung der Funktion calc und der Variablen. 9. Animation 7: Bewegliche Farben: Willkommen zurück. Wir beginnen mit unserer Animation Nummer 7, indem wir unser aktuelles Projekt teilen. Um alle Basisstile und Inhalte zu erhalten. Wir nennen das Nummer 7. Dies wird eine relativ einfache Animation sein Dinge verwendet werden, die bereits gelernt wurden, aber auch eine wirklich gut aussehende Animation. Was wir tun werden, ist mit verschiedenen Farben zu arbeiten, und wir werden auch die Variablen in der Animationsverzögerung verwenden , an der wir zuvor gearbeitet haben. Dadurch werden unsere vier verschiedenen Farben gefiltert und gedreht. Dafür benötigen wir nur einen Satz Keyframes. Die Keyframes nennen wir die Farbe. Wir setzen einfach die CSS-Farbeigenschaft. Der erste wird bei hellem Schiefergrau beginnen. Dann platzieren wir drei verschiedene Farben darin. Insgesamt vier Farben. Der nächste wird bei 25 Prozent liegen. Die Farbe liegt bei Ihnen, aber ich werde mich bei 25 Prozent für Hot Pink entscheiden. Fünfzig Prozent werden die Farbe von Khaki haben. Dann bei 100 Prozent die Farbe Hellblau. Mal sehen, wie das aussieht, wenn wir die Farbe in unsere Animation einfügen. Ich werde daraus eine Fünf-Sekunden-Animation machen. Wenn wir dies speichern, können wir jetzt sehen sich unsere Farben durch unsere verschiedenen Phasen der Animation drehen. Es passiert aber auch nur einmal. Denken Sie daran, dass wir diese Animationen zuvor auch in einer Schleife laufen lassen konnten. Wir können festlegen, wie oft dies ausgeführt werden soll, oder wir können dies auch auf einen Wert von unendlich setzen. Dadurch läuft unsere Animation ständig weiter. Sie können auch sehen, sobald wir zu einem bestimmten Stadium des Werkstextes kommen , immer noch diese gelbe Farbe hat, die wir zuvor eingestellt haben. Wir müssen auch die Klassen aus jedem dieser Buchstaben entfernen . Entferne all diese. Das ist gespeichert, und das sieht jetzt viel besser aus, wir haben keinen Konflikt in CSS. Wir können auch die Fabrikfarbe entfernen. Dies funktioniert wie in früheren Videos, da wir diese Variable haben, die jedem dieser Aufrufe die Zeitverzögerung oder eine Animationsverzögerung hinzufügt . Jede dieser Farben wird nach der Zeitverzögerung von 0,1 Sekunden von links nach rechts auf die Buchstaben aufgetragen . 10. Animation 8: 8:: Hier gehts mit der Animation Nummer 8. Dieser wird ziemlich einfach sein, wenn wir auf dem aufbauen, was wir zuvor hatten. Derzeit haben wir in der vorherigen Animation, die Nummer 7 ist, eine Animationsverzögerung erstellt, die diesen Effekt und den Farbwechsel von links nach rechts verursacht . Wir haben dies getan, indem wir eine Variable eingefügt haben, und dann haben wir diese Zeitverzögerung berücksichtigt. Ich habe es mit 0,1 Sekunden multipliziert. Wir sind in verschiedenen Phasen durch alle vier Farben gefahren und werden auf dieser Animation für Nummer 8 aufbauen, indem wir jeder dieser Farben einen Sprungeffekt verleihen. Dazu verwenden wir die Transformationsskala y, die wir zuvor verwendet haben, um jedes dieser Zeichen vertikal zu erweitern. Ich werde das mit einer Zeitverzögerung zwischen den einzelnen tun. Forken wir diesen aktuellen Stift und benennen ihn in Nummer 8 um. Es wird nicht viel Farbe für diesen geben, aber wir lassen ihn viel besser aussehen. Gehen Sie auf den Grund, wir erstellen eine zweite Keyframe-Regel. Wir nennen diese Welle, um dem einen Welleneffekt zu verleihen. Jetzt kannst du damit richtig verrückt werden. Sie können beliebig viele Transformationen verschiedene Phasen hinzufügen. Aber ein netter, einfacher und subtiler Effekt besteht darin, dies auf halbem Weg oder zu 50 Prozent zu tun , wobei wir die Transformation so einstellen können dass sie die Skala auf der Y-Achse transformiert, und dies kann ein beliebiger Wert sein, den Sie möchte. Der Wert von Eins ist nur die reguläre Größe der Spanne. Aber wir machen es 1,3-mal so groß. Mit unserer Welle können wir dies als zweite Animation zu unserer Spanne hinzufügen und durch ein Komma trennen. Lass uns das über zwei Sekunden ausprobieren. Es ist in unserer Welle. Jetzt schauen wir uns an, wie das aussieht. Wir haben einen schönen Effekt, der von links nach rechts läuft, mit der gleichen Zeitverzögerung wie zuvor. Aber ich werde das auch beschleunigen. Lass es uns eine Sekunde versuchen. Das ist in Ordnung. Lass uns ein bisschen langsamer gehen, 0.7. Sie können mit diesen Werten herumspielen und dafür sorgen, dass sie genau so funktionieren, wie Sie es möchten. Aber so können wir diese beiden Animationen kombinieren , um einen gut aussehenden Effekt zu erzielen. 11. Animation 9: Glanz-Effekt: Willkommen zurück bei Animation Nummer 9. Wir werden die Dinge ein wenig durcheinander und mit einem anderen Titel arbeiten. Konzentrieren Sie sich, erstellen wir eine Kopie. Das ist Nummer 9. In der Tat wird dieser einen anderen Text verwenden also nennen wir diese leckeren Burger und springen dann in den HTML-Code. Wir verschieben jeden dieser Bereiche aus dem Titelcontainer heraus und platzieren einfach ein p-Element. Dieses p-Element wird den Text von leckeren Burgern enthalten . Was ich für diesen Fall tun möchte, ist einen gut aussehenden Neonglüheffekt im Hintergrund zu erzeugen . Dazu werden wir erneut mit der Animation arbeiten, aber wir werden die CSS-Eigenschaft text shadow verwenden. Wir beginnen mit dem Tech-Schatten, um einen bestimmten Wert zu haben. Dann erhöhen wir sie für die Animation und setzen sie dann wieder auf den niedrigeren Wert und Sie sehen, wie das sehr bald aussehen wird. Für den Körper können wir die Höhe des Displays beibehalten. Wir können diese Farbe für den Text verschieben. Der Titelcontainer , um dies in der Mitte zu belassen , verschiebt den Bereich, da wir alle Span-Elemente entfernt haben und nur mit diesem Titelcontainer arbeiten. den Keyframes benötigen wir nur einen Satz Keyframes, da wir die einzelne Animation mit dem Inhalt verwenden die einzelne Animation mit und diese in glühen umbenennen. Da wir von einem Staat in einen anderen animieren werden , können wir null Prozent oder 100 Prozent verwenden. Oder wir könnten das verwenden, was wir uns zuvor angesehen haben, nämlich von und nach. Dies ist der Anfangs - und Endzustand. Das Glühen. Dies wird durch das Erstellen einer anderen Farbe und auch eines Textschattens verursacht. Im Bundesstaat, der ganz am Anfang steht, stellen wir die Farbe auf eine hellgraue Farbe von CCC ein. Sie dann innerhalb des Zweistaats Ändern Sie dann innerhalb des Zweistaats die Farbe in Weiß. Wir werden gleich darauf zurückkommen und sehen, wie das aussieht, indem wir unsere Keyframes zum Titelcontainer innerhalb der Animationseigenschaft hinzufügen. Ich sende ein Glühen. Wird dies über einen Zeitraum von zwei Sekunden tun. Unsere Animation funktioniert wie Sie sehen können. Wir werden das einfach auffrischen. Es beginnt mit der grauen Farbe, die CCC ist, und geht dann zur weißen Farbe über, bevor es den Standardschwarzzustand zurückkehrt. Nun gibt es ein paar Dinge, die wir tun wollen, um dies zu verbessern. Zunächst möchten wir, dass dies unendlich weiterläuft , damit wir die unendliche Eigenschaft hier hinzufügen können. Dadurch läuft die Animation weiter von der Frontfarbe zur weißen Farbe. Wir können fast sehen, wie dies wirksam aber was wäre wirklich gut, wenn wir vom Color CCC zum Weiß und dann zurück zum CCC und dann zurück zum Weiß wechseln und dann zurück zum CCC und dann und weiter durchlaufen würden Jeder dieser Korrelationen radelt weiter durch die Animation und bewegt sich von oben nach unten. Um diese auf alternative Weise zu gestalten, können wir auch eine Eigenschaft namens alternate hinzufügen. Schau, wie das aussieht. Diese rotiert nun zwischen jeder dieser Farben. Wir können das besser sehen, wenn wir es in eine dunklere Farbe wie Rot ändern . Das funktioniert eindeutig. Wir setzen das wieder in unser CCC ein. Um diesen Glow-Effekt im Hintergrund zu erzielen, verwenden wir die CSS-Eigenschaft text-shadow. Wenn das vom Staat, im Textschatten. Wir wollen keinen Versatz auf der X- oder Y-Achse für den Schatten, wir wollen ihn einfach in der Mitte jedes dieser Zeichen haben und dann aus der Mitte herausdrücken. Wir behalten es bei 00. Wir können einen Textschatten von 10 Pixeln und die Farbe Cyan hinzufügen . Das ist die Front. Kopieren Sie dies und fügen Sie es zu den beiden Abschnitten hinzu. Aber dieses Mal wird es ein bisschen größer. Lass uns für 50 Pixel gehen. Es befindet sich jetzt in Zyklen von unserem kleineren oder größeren Wert. Dann kehrt es, genau wie bei der Farbe, da wir die ultimative Eigenschaft verwenden, auf den kleinen Wert zurück und wechselt weiter zwischen den beiden. Damit haben wir jetzt diesen schönen Leuchteffekt für unser Logo. 12. Animation 10: Background und Clip: Herzlichen Glückwunsch, du hast es bis zur endgültigen Animation geschafft und diese wird ein wirklich cool aussehender Effekt sein. Wie immer gehen wir zum Fork-Button, um eine Kopie zu erstellen, und wir werden diese umbenennen. In diesem wird ein anderer Text verwendet. Ich nenne es Waterside Cafe, unsere Animationsnummer 10. Wir geben diesem Thema ein Wasserthema weil wir einen Wasserhintergrund verwenden werden. Wir werden gleich sehen, wie das aussieht. Im Moment entfernen wir den Titelcontainer. Wir können diese Keyframes auch entfernen und die Texte durch Waterside Cafe ersetzen. Wir können diese Klasse verschieben. Dann gibt es unseren Texten einen Cluster-Workload. Die Klasse wird Welle entsprechen , weil wir einen Welleneffekt im Wasserstil erzeugen werden. Wir werden den Überblick über unsere aktuellen Texte haben, nämlich Waterside Cafe. Dann haben wir im Hintergrund einen bewässerten Effekt , der wie eine Welle auf und ab geht. Das wird uns einen wirklich gut aussehenden Effekt geben. Dafür ändere ich die Schriftfamilie. Lass uns Garamond holen. Wir können den Hintergrund beibehalten , der völlig in Ordnung ist. Alles andere ist in Ordnung. Dann runter zu unserer Wave-Klasse. Bevor wir Animationen machen, stellen wir zunächst sicher, dass der Text umrissen ist. Wir können sehen, wie die Welle effektiv aussieht, als würde sie sich in jedem dieser Buchstaben auf und ab bewegen. Dazu verwenden wir zwei Eigenschaften, nämlich die Breite des Textstrichs und auch die Farbe des Textstrichs. Der Strich gibt uns den Umriss jedes Zeichens und nicht einen vollständig soliden Buchstaben, wie wir ihn haben. Dabei wird das Webkit-Präfix verwendet, um sicherzustellen, dass es mit modernen Browsern kompatibel ist. Dann eine Textstrichbreite. Ich habe die Linie so eingestellt, dass sie ein Pixel breit ist. Wir können sehen, dass dadurch die Farbe des Hintergrunds transparent wird. Stellen Sie dann die Farbe unseres Textstrichs auf eine beliebige Farbe ein, und ich möchte mich für Hellblau entscheiden. Genau wie bei der obigen Eigenschaft müssen wir aus Kompatibilitätsgründen auch das Webkit-Präfix verwenden, also die Farbe des Textstrichs. Ich möchte mich für Hellblau entscheiden. Dies gibt uns die Grundlage für die Wirkung. Wir haben die Gliederung und dann besteht der nächste Schritt darin, unsere Animation zu erstellen, die in unserem Text auf und ab winkt. Erstellen Sie unsere Keyframes von Wave. Dazu müssen wir einen sogenannten Clip-Pfad in Form eines Polygons verwenden . Werfen wir einen kurzen Blick darauf, wie wir damit arbeiten. Ein Clip-Pfad ist quasi eine Form oder ein Pfad, der den Rest des Inhalts ausschneidet oder ausblendet. Sie haben einen Clip-Pfad mit einem Kreis erstellt. Dadurch wird das Bild maskiert und der gesamte Inhalt , der es umgibt, blockiert . Darunter haben wir eine Ellipsenform, die uns diese abgerundete Kante verleiht. Danach haben wir ein Polygon , das eine Diamantform hat, dann unten eine völlig andere Form. Um einen dieser Pfade zu erreichen, müssen wir eine Reihe von Punkten oder Koordinaten durchlaufen . Wie bekommen wir die? Nun, wir könnten manuell mit diesen Zahlen herumspielen. Wir könnten diese in bestimmten Grafiken oder Programmen zeichnen oder wir könnten auch einige Online-Generatoren verwenden. Ein Beispiel dafür ist eine Website namens cssportal.com, über einen Clip-Path-Generator verfügt, der uns viele verschiedene Formen bietet, von denen wir ausgehen können. Sie können sehen, dass diese alle die Hintergrundform maskieren. Wir können auch jeden dieser Punkte ziehen , um einen anderen Clip-Pfad zu erstellen. Dies wird automatisch für uns generiert. Dies ist eine wirklich einfache Art, unsere Clip-Pfade zu erstellen. Da wir einen Welleneffekt erzeugen, wollen wir uns etwas wie ein benutzerdefiniertes Polygon ansehen . Dies gibt uns mehrere Punkte auf der gesamten Seite. Wir können auf verschiedene Stufen im Bild klicken , genau wie sie hier sind. Ich werde so viele verschiedene Punkte erstellen , wie ich möchte. Wie Sie sehen können, gibt uns dies diesen Clip-Pfad , der eine Polygonform ist. In jedem dieser Punkte befindet sich dann jeder dieser Punkte, der eine bestimmte Position auf der x- und der y-Achse hat . Sie können weitermachen und mit diesen Werten herumspielen , wenn Sie möchten. Ich habe bereits einige Zahlen im Kopf, die ich verwenden werde. Gehen wir zurück zu unserem Projekt in den Keyframes. Die Idee dahinter, was wir tun werden, ist zwei separate Sätze von Clip-Pfaden einzurichten . Wir werden einen bestimmten Weg einrichten, der bei null Prozent der Anfangszustand sein wird . Richten Sie eine Nullprozentregel ein Dann ändern wir diese halben 50 Prozent in einen anderen Wellenstil. Dies wird einen Übergang zwischen unseren beiden Werten schaffen. Am Ende kehren wir dann 100 Prozent mit 100 Prozent in den ursprünglichen Zustand zurück. In diesem Sinne können wir auch eine Abkürzung verwenden, die diese beiden Werte durch ein Komma trennt , und dann unsere Clip-Pfade innerhalb dieser platzieren . Fangen wir an. Genau wie wir im Generator gesehen haben, verwenden wir den Clip-Pfad , der eine Polygonform ist. Dann fügen wir in die Klammern jeden der Pfade ein , die wir verwenden möchten. Die erste Position liegt bei null Prozent und dann bei 65. Dann gehen wir eine Reihe aller Punkte durch , wie wir sie am Generator gesehen haben. Der nächste ist 15 und 49 Prozent, alle gegenwärtigen Werte sind durch ein Komma getrennt, 32 Prozent und 55 Prozent, 58 und 69, 69, 74, 82 und 89, 94, 93, 100 Prozent und 100 Prozent, und der letzte für diesen ist null Prozent und 100. Dies ist der Anfangs- und Endzustand unseres Übergangs. Dann können wir zu einem anderen Wert innerhalb der 50 Prozent übergehen . Wie zuvor richten wir unseren Clip-Pfad ein, ein Polygon ist , und fügen dann unsere Werte ein. Diese Werte werden eine kleine Variante der obigen Zahlen sein kleine Variante der obigen Zahlen , sie ergeben einen subtil aussehenden Effekt, wir beginnen bei null Prozent und 60 Prozent, 12 und 65, 31 und 66. 49 und 62, 57 und 50, 68 und 45 Prozent, 100, 46, 100, 100, und dann schließlich bei null Prozent und 100. Dies ist unser Clip-Pfad, der jetzt abgeschlossen ist. Wir werden innerhalb unserer Welle zwischen diesen beiden wechseln , wie immer werden wir das mit der Animation tun den Namen der Keyframes weitergeben. Halten Sie dies über die Dauer von sechs Sekunden relativ langsam . Wir wollen dies auch mit unendlich wiederholen. Sobald Sie dies tun, werden Sie feststellen, dass die Animation wirksam wird , aber es ist nicht ganz der Effekt, den wir wollten. Wir wollen die Umrisse dieses Waterside Cafe jederzeit beibehalten dieses Waterside Cafe jederzeit und die Welle effektiv hineinstecken. Wie Sie sehen können, wurden wir derzeit im Gliederungstext entfernt , anstatt die Welle darin zu platzieren. Der Weg, dies zu tun, ist , dass wir auch auf unsere Welle direkt darüber zugreifen. Wir werden die Pseudoelemente von früher hinzufügen. Dies fügt effektiv ein untergeordnetes Element vor unserer Welle hinzu. Effektiv etwas direkt vor diesen p-Elementen erstellen , ohne es tatsächlich zu erstellen. Aber was wollen wir eigentlich schaffen? Wir wollen unsere Animation einfügen, damit wir sie an unserer Stelle ausschneiden und einfügen können. Stellen Sie sicher, dass diese Elemente , die wir gerade erstellt auch den gleichen Inhalt haben, den wir hier sehen. Wir können auch die Inhaltseigenschaft hinzufügen , die den Text von Waterside Cafe hinzufügen wird. Dadurch bleibt es in der gleichen Form wie das, was wir derzeit haben. Aber wie Sie jetzt sehen können, haben wir, wenn wir sparen, effektiv zwei Elemente. Dies ist vor Elementen, und dies ist eines, das wir mit den p-Elementen erstellt haben. Der erste Schritt besteht darin, diese aus den Dokumenten zu entfernen und direkt dahinter zu platzieren. Wir können dies tun, indem den CSS-Positionswert auf den Wert von absolut setzen. Dadurch wird der Fluss des restlichen Inhalts effektiv unterbrochen, was bedeutet, dass er effektiv keinen Platz beansprucht. Jetzt haben wir diesen Inhalt gemacht, der sich hinter der ursprünglichen Welle oder dem Originaltext befindet , was bedeutet, dass wir ihn nicht sehen können. Um das zu sehen, müssen wir dem tatsächlich etwas Farbe geben. Stellen wir dies auf hellblau ein, mit derselben Farbe wie der Textumriss. gibt uns diesen gut aussehenden Wasserwelleneffekt , der sich im Text zu befinden scheint. 13. Vielen Dank: Herzlichen Glückwunsch von mir, an diesem Kurs teilgenommen und zum Ende gekommen bin. Ich hoffe es hat euch gefallen und ihr habt auch ein paar neue Techniken gelernt. Hoffentlich können Sie einige dieser Techniken in einem zukünftigen Projekt in die Praxis umsetzen , und ich kann es auch kaum erwarten zu sehen, was Sie geschaffen haben indem Sie Ihr Projekt im Skillshare-Projektbereich geteilt haben. Nochmals vielen Dank und ich hoffe, Sie in einer zukünftigen Klasse zu sehen.