Kreative CSS- und JavaScript-Animationen - der komplette Leitfaden mit 150 Projekten!

1. Kreative CSS- und Javascript-Animationen für Fortgeschrittene - 140 Projekte: Suchen Sie nach einem Kurs, der Sie vom Anfänger zum Erstellen schöner, fortgeschrittener CSS- und Javascript-Animationen für Ihre Websites führt vom Anfänger zum Erstellen schöner, , oder haben Sie andere CSS-Kurse besucht, möchten aber dennoch Ihre CSS-Kenntnisse verbessern und sie auf das nächste Level bringen , indem Sie CSS- und Javascript-Animationen beherrschen CSS- und Javascript-Animationen Wenn ja, dann sind Sie bei uns genau richtig. Ich bin es und dies ist der meistverkaufte CSS- und Javascript-Animationskurs. In meinem Kurs wirst du CSS- und Javascript-Animationen, Übergänge und Transformationen und sogar die CSS-Clip-Path-Eigenschaft beherrschen CSS- und Javascript-Animationen, Übergänge und Transformationen und sogar die CSS-Clip-Path-Eigenschaft dabei 140 kreative Animationen und Effekte Schritt für Schritt komplett von Grund auf programmieren und Effekte Schritt für Schritt komplett von Grund auf Und während Sie jedes dieser Beispiele erstellen, lernen Sie neue Ideen kennen und lassen sich inspirieren, um fortgeschrittene Animationen zu erstellen und Sie zu einem besseren, selbstbewussteren Webentwickler zu machen selbstbewussteren Webentwickler Also, was ist in diesem Kurs? Nun, wir werden uns zunächst die CSS-Übergangseigenschaft und ihre verschiedenen Funktionen ansehen und sehen, wie sie Ihren HTML-Elementen Leben einhauchen kann. Dann werden wir zu CSS-Transformationen übergehen, die die Türen zu vielen kreativen Optionen öffnen Verschieben von HTML-Elementen auf der Seite, um sie zu skalieren, drehen und zu neigen. Dort werden wir alle Transformationsfunktionen beherrschen, die wir in Zwei-D- und Drei-D-Umgebungen verwenden können Dann kommen wir zum spaßigen Teil. Wir werden alles, was wir über CSS, Transformationen und Übergänge gelernt haben, nutzen , um einige kreative Beispiele zu erstellen, die Sie inspirieren und Ihnen helfen Gelernte voll auszuschöpfen Wir werden zunächst viele verschiedene Button-Effekte erstellen viele verschiedene Button-Effekte dann Bildeffekte, Menüeffekte, dann Karteneffekte und sogar einige andere coole Transformationen ausprobieren , Beispiele wie Text- und Social-Media-Effekte Dann werden wir mit dem Mastering von CSS, Animationen und Keyframes fortfahren , Animationen und Keyframes Wir werden alles über sie lernen, all ihre unterschiedlichen Eigenschaften, die es einfach machen, kreative, fortschrittliche Webanimationen zu erstellen Im folgenden Abschnitt werden wir mehr als 40 kreative Animationsprojekte mit unterschiedlichen Techniken erstellen mehr als 40 kreative Animationsprojekte . Ich bin mir sicher, dass diese Beispiele Sie in Erstaunen versetzen und Ihre Fantasie anregen werden , indem sie Ihnen zeigen, wie viele unglaubliche Dinge mit den erlernten Fähigkeiten erreicht werden können Danach werden wir etwas über die CSS-Clip-Pfad-Eigenschaft lernen , mit der wir großartig aussehende Effekte erzielen können und die Tür zu noch kreativeren Ideen Wir werden lernen, wie wir damit verschiedene sehr coole Projekte erstellen können. Auf ihrer Reise durch diesen Kurs haben mich viele meiner Schüler gebeten, einen neuen Abschnitt mit einigen Javascript-Effekten hochzuladen . Auf Ihre Anfrage hin können Sie sich jetzt diesen Abschnitt am Ende des Kurses ansehen , dem wir unsere Fähigkeiten auf die nächste Stufe bringen und die Leistungsfähigkeit von Javascript nutzen werden , um einige coole erweiterte Effekte zu erzeugen, die mit CSS allein nicht zu erstellen sind . Um einen Überblick über die Projekte zu bekommen, die wir im Laufe des Kurses erstellen werden, fordere ich Sie dringend auf, sich die erste Lektion jedes Abschnitts anzusehen. Dort habe ich eine Vorschau aller Effekte beigefügt , die wir erstellen werden. Ich denke, Sie können sehen, dass dieser Kurs voller Inhalte ist. Er enthält 18 Stunden herunterladbares Video und alle Programmierressourcen für die Projekte, an denen wir während des Kurses arbeiten werden. Denken Sie daran, wann es zum ersten Mal hochgeladen wurde. Dieser Kurs dauert nur eine halbe Stunde. Also weißt du, ich versuche immer, neue Inhalte mit unterschiedlichen Ideen hinzuzufügen, um dir zu helfen, über die neuen aktuellen CSS- und Javascript-Techniken auf dem Laufenden zu CSS- und Javascript-Techniken um all die coolen Effekte zu erzielen, die du da draußen siehst. Wenn du deine CSS- und Javascript-Fähigkeiten verbessern möchtest, ist dieser Kurs wirklich perfekt für dich. Über 19.000 Studierende haben sich bereits angemeldet und Hunderte von Fünf-Sterne-Bewertungen abgegeben Ich bin mir sicher, dass Ihnen der Kurs genauso viel Spaß machen wird wie ihnen Warte nicht und wundere dich. Nehmen Sie heute an dem Kurs teil und wir sehen uns drinnen. 2. 2 – Was ist CSS-Übergänge: Hallo an alle. Willkommen in dieser Lektion, in der wir über CSS-Übergänge sprechen werden. Also vor allem, was ist die CSS-Übergangseigenschaft? Und was kann es für uns tun? Nun, Übergang als CSS-Eigenschaft, die auf ein bestimmtes Element angewendet wird, um andere Eigenschaften dieses spezifischen Elements über eine bestimmte Dauer reibungslos zu ändern. Oder animiert auf eine schöne Art und Weise, wenn Sie den Mauszeiger über, oder für ein anderes Beispiel, konzentrieren Sie sich auf dieses Element. Schauen wir uns ein Beispiel dafür an, was ich hier in meinem HTML meine. Sie können hier sehen, ich habe einen einfachen Knopf. Und hier in meinem CSS habe ich der Schaltfläche einige Stile hinzugefügt. Sie können sehen, dass ich gerade die Höhe, die Breite und die Schriftgröße geändert habe, um sie größer zu machen. Ändern Sie die Textfarbe in Weiß, entfernen Sie den Rahmen, und fügen Sie dann eine blaue Hintergrundfarbe hinzu. Und Sie können im Browser hier als unsere Schaltfläche sehen. Nun fügen wir eine neue CSS-Deklaration hinzu. Also gehe ich hier und sag Button auf Hover. heißt, wenn ich den Cursor über die Schaltfläche bewege, möchte ich die Hintergrundfarbe in grün ändern. Wenn ich nun mit dem Mauszeiger über meine Schaltfläche gehe, können Sie sehen, dass sich die blaue Hintergrundfarbe zu grün ändert. Und wenn ich meine Maus wegschiebe, kehrt die Hintergrundfarbe zu blau zurück. Aber Sie können bemerkt haben, dass diese Änderung von blau zu grün, Es geschieht so schnell. Sieht aus wie ein Ein- und Ausschalter. Es fühlt sich ziemlich mechanisch an. Ich denke, es wird viel besser aussehen, wenn diese Veränderung reibungsloser geschieht. Und das ist genau das, was CSS Übergang für uns tun kann. So haben wir gesagt, dass der Übergang die Änderung der CSS-Eigenschaften reibungslos über einen bestimmten Zeitraum erfolgt. Um einen Übergang zu definieren, müssen wir mindestens zwei Dinge verwenden. Die erste ist die CSS-Eigenschaft, die sich vom Anfangszustand in den endgültigen Zustand ändert. Die zweite ist die Dauer, was bedeutet, dass die Zeit, die diese Änderung in Anspruch nehmen wird, sinnvoll ist, oder? Um dies zu tun, müssen wir CSS-Eigenschaften deklarieren. Die erste wird als Übergangseigenschaft bezeichnet, die die Eigenschaft ist, auf die Sie den Übergang anwenden möchten oder Änderungen reibungslos vornehmen möchten. In diesem Fall ist die Hintergrundfarbe. Und die zweite ist eine Übergangsdauer, die die Zeitspanne ist, die die Eigenschaft benötigt, um vom Anfangszustand zum letzten zu wechseln. Sagen wir 1 Sekunde. Und jetzt, wenn ich gehe und mit dem Mauszeiger über die Schaltfläche, können Sie sehen, dass die Änderung reibungslos auf eine schöne Art und Weise erfolgt und viel besser ist als bevor der Übergang angewendet wurde. Und wenn ich mich wegziehe, kehrt die Hintergrundfarbe schön zu blau zurück. Nun wird die Übergangsdauer Eigenschaft Connect Set Millisekunden sowie Sekunden. Zum Beispiel kann ich diese 1 Sekunde in, sagen wir, 3000 Millisekunden ändern , was eigentlich drei Sekunden beträgt. Wenn ich dann erneut über die Schaltfläche schwebe, sollte die Kette in einer längeren Dauer auftreten. 3. 3 – -: Hallo an alle. In dieser Lektion werden wir weiter über die Übergangseigenschaft und die anderen Optionen sprechen , mit denen wir umgehen können, wenn wir sie auf unseren HTML-Elementen verwenden. Nun, neben der Übergangseigenschaft und der Übergangsdauer, über die wir in der letzten Lektion gesprochen haben. Und denken Sie daran, dass wir gesagt haben, dass sie für den Übergang notwendig sind, um an den Elementen zu arbeiten. Wir haben auch zwei zusätzliche Eigenschaften, die wir nutzen können, um unseren Übergang weiter zu kontrollieren. Und das sind die Übergangszeitfunktion und die Übergangsverzögerung. Erstens bezieht sich die Übergangszeitfunktion einfach darauf, wie die Änderung in der Eigenschaft auftreten wird. Zum Beispiel, wird die Hintergrundfarbe begann langsam zu Beginn der Übergangsdauer und dann schneller am Ende zu ändern ? Oder wird es sich während des Übergangszeitraums mit der gleichen Geschwindigkeit ändern? Diese Fragen können mit der Übergangszeitfunktion beantwortet werden. Jetzt hat die Übergangszeitfunktion fünf verschiedene Werte, die wir verwenden können. Erstens, Leichtigkeit, die standardmäßig angewendet wird, wenn Sie die Übergangszeitfunktion nicht verwenden, ist es, dass die Kette langsam beginnt, dann schneller in der Mitte geht und dann ein bisschen vor dem Ende verlangsamen wird. Zweite lineare, bei der die Änderung während der Übergangsdauer mit der gleichen Geschwindigkeit vom Anfang bis zum Ende erfolgt. Drittens ist n, in dem die Änderung langsam beginnt und dann vor dem Ende beschleunigt. Vorher. Ease-out, die im Gegensatz zu Leichtigkeit in, beginnt schnell und dann verlangsamt sich am Ende. Und schließlich, einfach in, heraus, in dem die Änderung beginnt langsam, dann beschleunigt in der Mitte, und dann enden langsam. Es ist eine Art Leichtigkeit. Es gibt nicht so viel Unterschied zwischen ihnen. Großartig. Also lasst uns diese in Aktion sehen. Ich habe fünf Übergangstiming-Funktionswerte hier in meinem Browser, und ich habe eine Demo für jeden von ihnen. Nun ist die Eigenschaft, die sich hier ändern wird, die Position des div. Wenn ich also über einen von ihnen schwebe, wird es eine bestimmte Entfernung horizontal verschieben und dann zu seiner ursprünglichen Position zurückkehren, wenn ich den Mauszeiger so wegfahre. Nun, bevor Sie die verschiedenen Werte betrachten, Werfen wir einen Blick auf sie im Code-Editor und sehen, wie wir diese horizontale Bewegung erstellt. Also hier in meinem HTML habe ich ein div mit einer Klasse von Containern. Dann habe ich fünf Kinderdivs, alle mit Klassenbewegung haben, die ein CSS verwendet , um die allgemeinen Stile für alle divs hinzuzufügen. Und jeder von ihnen hat eine spezifische ID, so dass wir die Übergangszeitfunktion entsprechend dieser ID ändern können. So können Sie sehen, dass der erste eine ID der Leichtigkeit hat. Seine Übergangstiming-Funktion wird 0s sein. Die zweite ist linear. Dann lassen Sie sich hinein- und entlasten Sie sich. Und wenn wir zu unserem CSS gehen, haben wir hier die Move-Klasse ausgewählt und einige generische Stile hinzugefügt, um Videos besser aussehen zu lassen. Wie einige Ränder mit Höhe, Polsterung und so weiter. Und hier in der letzten Zeile deklarieren wir die Übergangseigenschaft, die die Translation ist, die dafür verantwortlich ist, die Position der Dibs von links nach rechts über unsere Übergangsdauer von drei Sekunden zu ändern . Wenn wir also hier auf das Ende der CSS-Datei schauen, können Sie sehen, dass wir auf alle divs abzielen. Und wenn wir den Mauszeiger über sie bewegen, werden sie übersetzen, oder mit anderen Worten, ihre Position auf der Seite wird sich ändern. Sie verschieben 900 Pixel auf der X-Achse oder horizontal und 0 vertikal. Dies ist eine Transformationseigenschaft, über die wir später im Kurs erfahren werden. Aber ich möchte, dass Sie wissen, dass dies nur die Position der div 900 Pixel nach rechts ändert . Wenn wir den Mauszeiger darüber bewegen. Darüber hinaus habe ich jedes Div mit seiner eindeutigen ID gezielt und die fünf verschiedenen Werte der Übergangszeitfunktion hinzugefügt. Also hier habe ich Leichtigkeit für die erste hinzugefügt, linear für die zweite, und dann leichtere dich hinein, leichtere dich und leichtere hinein, raus. Also, um Dinge zusammenzufassen, ist das, was wir hier tun, einfach. Wir haben gerade zum Browser gesagt, wenn ich über ein beliebiges div schwebe, möchte ich, dass es 900 Pixel nach rechts bewegt. Und ich möchte, dass diese Veränderung oder diese Bewegung über drei Sekunden reibungslos geschieht. Und ich möchte, dass sich jedes Div anders bewegt. So bewegt sich der erste anders als der zweite, sich anders als der dritte bewegt, und so weiter. Nun, in Ordnung, gehen wir zurück zum Browser. Und wenn ich über 0 s schwebe, was der Standard ist, können Sie sehen, dass es langsam beginnt und dann schneller wird, wenn vor dem Ende zu verlangsamen zurückkehrt. Und wenn ich weg bin, wird es auch langsam zurückkehren, dann schnell und dann langsam. Aber für lineare, wenn ich schwebe, sehen Sie es geht mit der gleichen Rate während der gesamten Dauer Zeit. Es bewegt sich mit der gleichen Geschwindigkeit für alle drei Sekunden. Und leichtere dich hinein. Langsam am Anfang, dann schneller am Ende. Und wenn ich weg bin, kehrt es langsam zurück. Dann wieder schneller am Ende. Erleichtern Sie sich schnell am Anfang, dann langsam am Ende. Und wenn ich weg bin, kehrt es schnell zurück. Und dann wieder langsam am Ende. Erleichtern Sie sich ein und aus, beginnen Sie langsam, bewegt sich dann schneller in der Mitte, dann wieder langsam am Ende. In Ordnung, jetzt, die zweite Eigenschaft, über die wir in dieser Lektion sprechen, heißt Übergangsverzögerung. Und es stellt einfach die Zeit dar, die der Übergang wartet, bevor er beginnt. Es akzeptiert Zeitwerte in Sekunden oder Millisekunden. Nun, hier in unserem HTML, haben wir den Button aus der ersten Lektion. Ich denke, Sie erinnern sich, dass, wenn wir den Mauszeiger über diese Schaltfläche bewegen, die Hintergrundfarbe von blau zu grün wechselt. Jetzt gehen wir zurück zu unserem CSS. Ich gehe direkt hier unter die Übergangs-Dauer Eigenschaft. Und ich füge Übertragungsverzögerung zwei Sekunden hinzu. Und jetzt, wenn ich den Mauszeiger über die Schaltfläche führe, sollte es zwei Sekunden warten, bevor die Änderung der Hintergrundfarben beginnt. Und das ist einfach die Übergangsverzögerungseigenschaft. 4. 4 – verschiedene Arten zum Schreiben der Übergangsseite: Hallo an alle. In dieser Lektion werden wir weiter über die verschiedenen Übergangsoptionen sprechen, die wir haben. In den vorherigen Lektionen haben wir gelernt, dass der Übergang die Änderung in einer bestimmten CSS-Eigenschaft reibungslos über einen bestimmten Zeitwert erfolgt. Aber können wir den Übergang auf mehr als einer Eigenschaft verwenden, was bedeutet, können wir mehr als eine Eigenschaft reibungslos ändern? Nun, die Antwort ist ja. Hier in meinem CSS gehe ich direkt hier und füge Farbe hinzu. Schwarz. Wenn ich also den Mauszeiger über die Schaltfläche stelle, möchte ich, dass die Hintergrundfarbe von Blau zu Grün wechselt und die Textfarbe von Weiß zu Schwarz wechselt. Sehen wir uns dies nun im Browser an. Ich zeige den Mauszeiger über die Schaltfläche und Sie werden sehen, dass die Textfarbe schnell ohne Übergang ändert. Wie können wir also den Übergang darauf anwenden? Es ist so einfach. Zurück zu unserem CSS. Ich gehe hier und füge ein Leerzeichen hinzu. Dann eine weitere Übergangseigenschaft, die natürlich die Farbe ist. Und jetzt, wenn ich zum Browser zurückgehe und mit dem Mauszeiger über die Schaltfläche gehe, können Sie sehen, dass sich die Textfarbe zusammen mit der Hintergrundfarbe reibungslos ändert. Und wir können das wirklich erweitern, was bedeutet. Wir können so viele Eigenschaften ändern, wie wir wollen. Gehen wir zum Beispiel zu unserem CSS. Und ich möchte auch die Breite der Schaltfläche auf, sagen wir, 600 Pixel ändern , wenn ich den Mauszeiger darüber lege. Und ich gehe hier hoch und füge Platz als Breite hinzu, damit es sich reibungslos ändert. Und wenn ich zum Browser gehe und mit dem Mauszeiger über die Schaltfläche gehe, kannst du sehen, dass sich alles gut zusammen ändert. Und für den Fall, dass Sie viele Eigenschaften ändern müssen, sagen wir fünf oder sechs. Und du denkst, es wird schwer sein, sie alle hier zu schreiben. Sie können sie einfach entfernen und das Schlüsselwort all hinzufügen. Auf diese Weise werden alle Eigenschaften in den Übergang einbezogen. Also, lass uns das sehen. Sie können sehen, dass sich nichts ändert. Großartig. Jetzt haben wir alle CSS-Übergänge Eigenschaften gelernt, mit denen wir arbeiten können. Aber es gibt eine Kurzschrift Eigenschaft, die wir verwenden können, um alle von ihnen in einer einzigen Zeile zu mischen, und es wird nur Übergang genannt. Also werde ich diese beiden Zeilen entfernen und ich werde Übergang hinzufügen. Dann ist die Übergangs-Eigenschaft genau hier. Ich übertrage nur den Hintergrund. Dann ein Leerzeichen und die Übergangsdauer von drei Sekunden. Diese reichen aus, um den Übergang zu erreichen. Wenn Sie jedoch die anderen Eigenschaften hinzufügen möchten, fügen Sie ein weiteres Leerzeichen hinzu und fügen Sie die Übergangszeitfunktion hinzu. Nehmen wir an, einfach in einem anderen Raum und die Übergangsverzögerung am Ende, sagen wir nur 1 Sekunde. Und wenn wir das im Browser sehen, können Sie sehen, wenn ich über die Schaltfläche schwebe, wird es 1 Sekunde warten. Starten Sie die Änderung der Hintergrundfarbe über drei Sekunden. Und wieder können wir mehr als eine Eigenschaft wählen. So fügen Sie mehr als eine Eigenschaft hinzu. In dieser kurzen Methode verwenden wir ein Komma, um die verschiedenen Eigenschaften zu trennen. Also gehe ich hier und füge ein Komma hinzu. Dann werde ich die andere Eigenschaft hinzufügen, die ich ändern möchte, was die Farbe ist. Dann ist die Übergangsdauer, sagen wir zwei Sekunden dieses Mal. Und dann die Übergangstiming-Funktion, sagen wir, Leichtigkeit. Und schließlich die Übergangsdauer. Jetzt wollen wir hier etwas Cooles machen. Wir möchten, dass die Änderung der Textfarbe nach der Änderung der Hintergrundfarbe beginnt . Wir sollten also eine Übergangsdauer von vier Sekunden, drei für den Hintergrundübergang selbst und eine für seine Verzögerung hinzufügen drei für den Hintergrundübergang selbst . Also zurück zum Browser. Ich werde den Mauszeiger über die Schaltfläche bewegen und Sie werden sehen, dass sich die Hintergrundfarbe ändert. Und danach beginnt sich die Textfarbe zu ändern. Und natürlich können wir andere Eigenschaften hinzufügen. Also gehe ich zurück zu unserem CSS und gehe hier, entferne diese neue Breite und füge eine neue Eigenschaft hinzu, sagen wir Border-Radius, 50 Prozent. So ändert sich auch der Umrandungsradius. Und dann gehe ich hier hoch und füge dies in den Übergang ein und füge eine Übergangsdauer von vier Sekunden hinzu, dann erleichtere die Übergangszeitfunktion und dann sechs Sekunden für die Übergangsdauer. So wird es beginnen, nachdem die ersten beiden Eigenschaften beendet sind. Wenn ich also zurück zum Browser gehe und mit dem Mauszeiger über die Schaltfläche gehe, können Sie sehen, dass sich der Hintergrund ändert, wenn die Textfarbe und schließlich der Grenzradius. Und natürlich können wir das Schlüsselwort alle verwenden, wenn wir nur alle Eigenschaften zusammen animieren wollen, ich werde all dies entfernen und einfach sagen, oh, dann die Übergangsdauer von drei Sekunden und dann erleichtern. Und schließlich die Übergangsverzögerung von zwei Sekunden. Und wenn wir das im Browser sehen, können Sie sehen, dass sich alle Eigenschaften miteinander ändern. Aber haben Sie bemerkt, dass wir die Übertragungsverzögerung nicht kontrollieren können , wie wir es in der vorherigen Methode konnten, weil alle Eigenschaften jetzt beginnen und enden zusammen. Also, das ist es für diese Lektion, und ich werde Sie in der nächsten sehen. 5. 5 – Welche Eigenschaften können übermäßig verwendet werden.: Hallo an alle. In den vorherigen Lektionen haben wir gelernt, was ein Übergang ist, wie er in allen verfügbaren Optionen und Syntax funktioniert, die wir in einem Übergang verwenden können. Wenn Sie sich erinnern, sagten wir, dass der Übergang Feinde die Änderung der CSS-Eigenschaften über eine bestimmte Dauer. Aber nicht alle CSS-Eigenschaften können mit Übergängen verwendet werden , da die Änderung dieser Eigenschaften nicht schrittweise erfolgt. Es ändert sich von einem Zustand in einen anderen ohne Zwischenwerte. Eigenschaften, die nicht animierbar sind. Unsere mögen Hintergrundbild, weil es sich nicht allmählich von einem Bild zum anderen ändern kann. Auch die Anzeige ist keine animierbare Eigenschaft. Und es gibt viele mehr wie Rahmenstil, Position, Float, Hintergrund, Wiederholung, Schriftfamilie und so weiter. Auf der anderen Seite sind die animierbaren Eigenschaften diejenigen, die durch Zahlen ausgedrückt werden können. Da der Browser Zwischenwerte wie Breite, Höhe, Rahmenbreite,Polsterung, Rand, Zeilenhöhe, Deckkraft berechnen oder interpellieren kann Polsterung, Rand, Zeilenhöhe, . Du Gabby Idee. Wir können auch die Eigenschaften animieren, die durch Farben ausgedrückt werden, wie Farbe und Hintergrundfarbe. Und wenn Sie möchten, dass eine Ressource alle animierbaren Eigenschaften finden, hat die Entwickler dot mozilla.org Website eine Liste aller von ihnen. Sie können also einfach zu Google gehen und eingeben, welche CSS-Eigenschaften überführt werden können. Und dann klicken Sie auf Mozilla-Site. Und es bringt Sie zu dieser Liste, wo Sie alle animierbaren Eigenschaften haben. Damit Sie diese animierbaren Eigenschaften in Aktion sehen können, habe ich diese Seite erstellt, die einige von ihnen enthält. Zum Beispiel, wenn ich den Mauszeiger über dieses div führe, werden wir Opazität so übergehen. So können Sie diese Datei aus den Ressourcen herunterladen und haben diese Eigenschaften, um zu sehen, wie sie während des Übergangs aussehen. 6. 6 – CSS 2D verwandelt die Grundlagen: Hallo an alle und willkommen zu diesem neuen Abschnitt im Kurs, wo wir mehr über 2D-Transformationen lernen werden. Was also unser CSS transformiert und was können sie für uns tun? Nun, im letzten Kapitel haben wir über CSS-Übergänge gelernt, die es uns ermöglichten, mit den CSS-Eigenschaften umzugehen, die auf bestimmte Elemente angewendet wurden und diese Eigenschaften über einen bestimmten Zeitraum reibungslos ändern. In diesem Kapitel werden wir nicht lernen, wie die Eigenschaften zu steuern, die auf die Elemente angewendet werden, aber wir werden die Elemente selbst steuern, wie divs und Bilder und so weiter. Mit anderen Worten, wir lernen, wie Sie die Elementgröße, -form und -position ändern. Und das ist, was die CSS-Transformationen sind unsere gebunden. Die Transformationseigenschaft verfügt über vier Funktionen, die wir verwenden können, um zu steuern, wie unsere Elemente angezeigt werden. Und diese Funktionen sind die Skalierungsfunktion, die es uns ermöglicht, die Größe der Elemente zu ändern, was bedeutet, ihre Höhe oder Breite zu erhöhen oder zu verringern. Die Übersetzungsfunktion, die es uns ermöglicht, das Element zu verschieben und seine Position an einen beliebigen Punkt im Browser horizontal oder vertikal zu ändern . Die Drehfunktion, die es uns ermöglicht, die Elemente in einer 2D-Umgebung um einen beliebigen Grad oder eine beliebige Anzahl von Windungen zu drehen , die wir wollen. Und die Schrägfunktion, die es uns ermöglicht, die Elemente entlang der x-Achse oder der y-Achse zu verzerren. Nun, nachdem wir sehen was CSS-Transformationen für uns tun können und welche Funktionen damit verwendet werden. In der nächsten Lektion beginnen wir, diese Funktionen zu lernen, und wir werden mit der Übersetzungsfunktion beginnen. So sehen wir uns in der nächsten Lektion. 7. 7 – CSS Tranlsate Funktion: Hallo an alle. In dieser Lektion lernen wir, wie man die Position von HTML-Elementen wie divs, Bilder usw. mit der Transform Translate Funktion ändert. Jetzt, jedes Mal, wenn Sie die Transformationseigenschaft verwenden möchten, schreiben Sie sie wie folgt. Transformieren. Dann wird die Transformationsfunktion, die Sie anwenden möchten, übersetzt für diese Lektion und dann Klammern. Und innerhalb von diesen, der Wert für die Funktion angegeben. Lassen Sie uns nun ein wenig über die Übersetzungsfunktion sprechen. Grundsätzlich bewegt die Übersetzungsfunktion Elemente um den Browser entlang der X-Achse und der Y-Achse. Also zum Beispiel, wenn ich so etwas schreibe, transformieren und Pixel, zehn Pixel, wird dies das Element 10 Pixel nach rechts und zehn Pixel nach unten von seiner ursprünglichen Position verschieben . Also lasst uns das versuchen. Sie können hier in meinem HTML sehen, alles, was ich habe, ist ein Bild, das wir alle Funktionen auf und oben ausprobieren und einige Stile hinzufügen, um das Bild gut aussehen zu lassen, wenn wir es sehen. Und wenn wir zum Browser gehen, können Sie sehen, dass das Bild hier sitzt. Also wollen wir die Position des Bildes ändern, was bedeutet, dass wir es horizontal oder vertikal bewegen wollen. Also zuerst wollen wir es horizontal bewegen. Wir können dies leicht tun, indem wir die Transformationseigenschaft übersetzen. Also gehe ich zurück zu unserem Code-Editor und wähle das Bild aus. Und wenn ich darüber schwebe, werde ich Transformation hinzufügen. Und die Funktion, die ich möchte, ist übersetzen, und ich möchte sie horizontal entlang der x-Achse bewegen. Also werde ich sagen, übersetzen x, und dann werde ich den Wert der Entfernung hinzufügen, die das Element bewegen soll, sagen wir 500 Pixel. Und lasst uns hier hinaufgehen und einige Übergänge hinzufügen, damit die Bewegung reibungslos abläuft. Also füge ich Übergang hinzu. Und dann die Eigenschaft wollen wir reibungslos ändern, was natürlich transformiert wird, und dann die Dauer der Animation. Sagen wir zwei Sekunden. Großartig. Was also jetzt passieren sollte, wenn ich den Mauszeiger über das Bild führe, ist, dass es 500 Pixel horizontal entlang der x-Achse nach rechts bewegt. Also zurück zum Browser. Und wenn ich den Mauszeiger über das Bild führe, bewegt es sich natürlich glatt 500 Pixel nach rechts. Jetzt können wir auch negative Werte für die translate Eigenschaft verwenden, und es funktioniert gut, aber das Element bewegt sich nach links, nicht nach rechts. Also zurück zu unserem Code-Editor. Und ich werde hier gehen und minus 500 hinzufügen. Und wenn ich zurückgehe und den Mauszeiger wieder über das Bild schiebe, wird es dieses Mal nach links verschoben. Großartig. Als nächstes möchten wir das Bild vertikal, nicht horizontal verschieben. Leicht genug. Wir werden übersetzen Y anstelle von X verwenden. Also gehe ich zurück zu unserem Code-Editor und ändere dieses x in ein y. Wenn wir also positive Werte verwenden, bewegt sich das Bild nach unten. Aber in diesem Fall verwenden wir negative Werte. Also sollten wir nach oben gehen, zurück zum Browser. Und wenn ich den Mauszeiger über das Bild führe, kann man sehen, dass es 500 Pixel nach oben bewegt. Und gehen wir zurück zu unserem Code-Editor und verwenden positive 500 Pixel. Und natürlich wird es sich nach unten bewegen. Jetzt können wir diese beiden Funktionen in einer Funktion kombinieren, die einfach übersetzen genannt wird. Also zurück zu unserem Code-Editor. Ich werde dieses y entfernen. Jetzt akzeptiert die Übersetzungsfunktion zwei Werte. Der erste Wert ist X, wodurch das Bild entlang der x-Achse verschoben wird. Also werde ich zum Beispiel minus 500 Pixel sagen. Und der zweite Wert ist y, der die Bewegung vertikal entlang der Y-Achse angibt, sagen wir 200 Pixel. Und jetzt, wenn ich den Mauszeiger über das Bild führe, sollte es sich nicht um minus 500 Pixel entlang der X-Achse bewegen, was 500 Pixel nach links und 200 Pixel nach unten gleichzeitig bedeutet. Und genau so bewegt sich das Bild horizontal und vertikal gleichzeitig. Also, um Dinge zu schließen, Translate ist eine der Funktionen, die wir mit der Transformationseigenschaft verwenden können. Und es ermöglicht uns, die Position der HTML-Elemente auf der Seite zu ändern. Es kann Translate X sein, das das Element horizontal nach rechts bewegt, wenn der Wert positiv ist, oder nach links, wenn der Wert negativ ist. Oder es kann Translate Y sein, das die Elemente vertikal nach unten bewegt, wenn es positiv ist , oder nach oben, wenn es negativ ist. Und wir können einfach Translate verwenden, das zwei Werte akzeptiert, x und y, die das Element entlang beiden Achsen gleichzeitig entfernen. 8. 8 – -: Hallo an alle. In dieser Lektion werden wir lernen, wie die Größe von HTML-Elementen mit der Skalierungsfunktion zu ändern. Die Skalierungsfunktion ermöglicht es uns, die Größe der Elemente leicht zu ändern. Aber was meinen wir, wenn wir sagen, die Größe von Elementen zu ändern? Nun, das Ändern der Größe von Elementen bedeutet, ihre Breite oder Höhe oder beide dieser Aspekte zu ändern. Beginnen wir also mit der Breite. Wir können die Größe der Elemente mit leicht skalieren x ändern. Also habe ich das gleiche Bild aus der vorherigen Lektion, und ich werde hier gehen, wenn ich den Mauszeiger über das Bild führe, und ich werde Transformationsskala x hinzufügen. Und die Skalierungsfunktion außer Zahlen, die geben Sie an, wie stark sich die Breite des Elements relativ zu seiner ursprünglichen Breite ändert. Wenn ich zum Beispiel hier hinzugefügt habe, wird dadurch die Bildbreite um das Doppelte der Originalgröße erhöht. Also, wenn es 100 Pixel war, wird es 200 Pixel sein. Und wenn ich die beiden auf 1,5 ändere, werden es 150 Pixel sein. Also lassen Sie uns das sehen. Sie können sehen, wenn ich den Mauszeiger über das Bild führe, seine Breite erhöht sich und wird verdoppelt. Jetzt kann ich auch die Breite verringern. So kann ich zum Code-Editor zurückkehren und zum Beispiel 0.5 verwenden, wodurch die Bildbreite auf die Hälfte des Originals reduziert wird. So wie das hier. Große Nanoskala, die Elementhöhe, können wir Skala y anstelle von x verwenden. Also zurück zu unserem Code-Editor. Ich werde dies in y ändern und das sollte die Höhe verringern, um wie Zelle zu haben. Und natürlich können wir die Höhe erhöhen, indem wir Werte größer als eins verwenden. Mal sehen, wie das aussieht. Also zurück zu unserem Code-Editor. Ich werde dies 0.5 zu 1.5 ändern. Und das sollte die Höhe erhöhen. Genau so. Wie translate kann die Skalierungsfunktion zwei Argumente annehmen, x und y, wobei der x-Wert definiert, wie stark die Elementbreite im Verhältnis zu ihrer ursprünglichen Breite erhöht oder verringert wird . Und der y-Wert definiert, wie stark seine Höhe Verhältnis zu seiner ursprünglichen Höhe zunimmt oder abnimmt. Also zurück zu unserem Code-Editor. Ich gehe hier und entferne dieses y und füge zwei hinzu. So wird die Breite verdoppelt und weitere zwei. So wird auch die Höhe verdoppelt. Und das Bild sollte zweimal größer sein. Wenn ich nun den Mauszeiger über das Bild führe, kann man sehen, dass es größer wird und diesen schönen Zoom in Wirkung hat. Nun, wenn ich zu unserem Code-Editor zurückgehe und diesen zweiten Wert entferne und nur diesen ersten Wert belasse. Dadurch werden die Breite und die Höhe zusammen skaliert. Genau wie wenn wir den zweiten Wert nicht entfernt hätten. Wenn ich also diesen Punkt 2, 5 gemacht habe, sollte dies das Bild auf 25 Prozent seiner ursprünglichen Größe herunterskalieren. Also, um Dinge zusammenzufassen, ist Maßstab eine der Funktionen, die wir mit der Transformationseigenschaft verwenden können. Und es erlaubt uns, die Breite eines HTML-Elements oder seine Höhe oder beides gleichzeitig zu ändern . Es kann x skaliert werden, wodurch das Element mit erhöht wird, wenn der Wert größer als eins ist, oder verringert es, wenn der Wert kleiner als eins war. Oder es kann y skaliert werden, was die Elementhöhe erhöht, wenn es positiv ist, oder es verringert, wenn es negativ ist. Und wir können einfach Maßstab verwenden, der zwei Werte akzeptiert, x und y und wir werden die Elementbreite und -höhe zur gleichen Zeit ändern. 9. 9 – CSS Drehfunktion: Hallo an alle. In dieser Lektion werden wir lernen, wie HTML-Elemente in einer 2D-Umgebung mit der Drehfunktion zu drehen. Die Rotationsfunktion akzeptiert also einen Wert , der den Winkel oder die Anzahl der Grad ist. Sie möchten das Element um drehen, gefolgt von DEG um vier Grad. Also lasst uns versuchen, unser Bild zu drehen. Ich gehe hier und füge Transformieren hinzu, drehen und sagen wir 20 Grad. Also, was das tun wird, ist es wird das Bild um 20 Grad im Uhrzeigersinn drehen. Wenn ich also in den Browser gehe und den Mauszeiger über das Bild führe, kann man sehen, dass es sich um 20 Grad im Uhrzeigersinn dreht. Okay, gehen wir zurück zu unserem Code-Editor und versuchen etwas wie 90 Grad. Sie können sehen, dass das Bild jetzt um 90 Grad gedreht ist. Versuchen wir es 180 Grad. Und jetzt können Sie sehen, dass sich das Bild um 180 Grad dreht und vertikal kippt. Als nächstes werde ich 360 Grad versuchen, wodurch das Bild den ganzen Kreis dreht und dann wieder so zurückkehrt, wie es vorher war. Jetzt können wir auch negative Grade für die Drehfunktion verwenden, die HTML-Elemente gegen den Uhrzeigersinn dreht. Also gehe ich zurück zu meinem Code-Editor und ändere dies in, sagen wir, minus 60 Grad. Und jetzt, wenn ich über die Kante schwebe, dreht er sich um 60 Grad gegen den Uhrzeigersinn. Großartig. Nun akzeptiert die Rotationsfunktion auch Werte in anderen Einheiten. Zum Beispiel können wir Drehungen verwenden, um dem Element mitzuteilen, wie weit es sich drehen soll. Also, wenn ich zu meinem Code-Editor gehe, entfernen Sie dies und fügen Sie eine Runde hinzu. Und jetzt, wenn ich zum Browser gehe und den Mauszeiger über das Bild führe, wird es eine komplette Drehung im Uhrzeigersinn drehen, die gleich 360 Grad ist. Und wir können sogar negative Begriffe verwenden, um das Element gegen den Uhrzeigersinn zu drehen. Lassen Sie uns zum Beispiel minus 0,5 Umdrehungen verwenden. Und jetzt dreht sich das Bild um eine halbe Umdrehung gegen den Uhrzeigersinn. Eine andere Einheit, die wir mit der Drehfunktion verwenden können, sind Farbverläufe. Ein ganzer Kreis ist also 400 Gradienten. Probieren wir die aus. Ich gehe zum Code-Editor und ändere dies in 200 Farbverläufe. Und jetzt, wenn ich den Mauszeiger über das Bild führe, sollte es eine halbe Umdrehung so drehen. In der realen Welt wird die Rotationsfunktion die meiste Zeit mit Grad verwendet, aber ich wollte Sie nur über diese anderen Einheiten informieren. Das ist es also für die Rotationsfunktion. Es ist wirklich einfach. Also werde ich Sie in der nächsten Lektion sehen. 10. 10 – CSS Skew Funktion: Hallo an alle. In dieser Lektion werden wir lernen, wie Elemente horizontal oder vertikal mit der Skew-Funktion verzerrt werden. Die Skew-Funktion ist wie die Übersetzungs- und Skalierungsfunktionen, was bedeutet, dass wir schiefe Handlungen haben, um Elemente horizontal zu verzerren und zu schrägen, warum die Verzerrung sie vertikal? Oder wir können einfach Skew verwenden. Und der erste Wert wird x sein, und der zweite wird y sein. Nun ist die Schrägstellung ähnlich wie in Einheiten zu drehen, wir verwenden Grad, um zu bestimmen, wie viel das Element schief sein sollte. Gut, jetzt sehen wir, wie es in Aktion funktioniert. Ich werde hier gehen und Transform Skew x hinzufügen, sagen wir 30 Grad. Und jetzt, wenn ich zum Browser gehe und mit dem Mauszeiger über das Bild gehe, kannst du sehen, dass es horizontal um 30 Grad verzerrt ist. Und wir können die Schrägrichtung ändern, indem wir negative Werte verwenden. Also lasst uns das versuchen. Ich gehe zurück zu meinem CSS und mache dies minus 30. Und jetzt, wenn ich darüber schwebe, sollte es in die andere Richtung schief sein. Lassen Sie uns nun das Bild vertikal mit der schiefen y-Funktion verzerren. Ich gehe zurück zu unserem Code-Editor und ändere dieses x in y und jetzt, wenn ich den Mauszeiger über das Bild zeige, kann man es vertikal verzerrt sehen. Und um es vertikal in die entgegengesetzte Richtung schief zu machen, können wir zurückgehen und das Minus entfernen, um es positiv zu machen. Und wenn ich wieder darüber schwebe, wird es auf der anderen Seite schief. Nun, wie wir gesagt haben, können wir HTML-Elemente sowohl horizontal als auch vertikal zur gleichen Zeit verzerren , indem wir nur schräg verwenden, was zwei Werte akzeptiert. Die erste ist für ACS und die zweite ist rewire. Also gehe ich zurück zu meinem Code-Editor und mache das einfach schräg. Und dann mach es um 20 Grad horizontal und 40 Grad vertikal schief. Und jetzt, wenn ich darüber schwebe, siehst du, dass es in beide Richtungen schief ist. 11. 11 – CSS transformieren die Ursprungslinie: Hallo an alle. Nachdem Sie alle 2D-Transformationsfunktionen in dieser Lektion abgeschlossen haben, erfahren Sie mehr über eine neue Eigenschaft namens transformieren Ursprung. Nun, Transformationsursprung ist der Punkt, den eine Transformation als Referenz annimmt, wenn sie funktioniert. Mit anderen Worten, der Punkt, um den die Transformation angewendet wird. So zum Beispiel, hier in meinem Browser und ich habe zwei Bilder, Ich habe Transformationsdrehung um 30 Grad zu beiden hinzugefügt. Wenn ich also über sie schwebe, sollten sie sich um den gleichen Grad drehen. Aber der Unterschied ist, dass ich den Transformationsursprung des zweiten Bildes so geändert habe, dass er sich in der oberen linken Ecke befindet, aber für das erste nichts geändert hat. Es hat also nur Transformationsrotieren. Wenn ich nun über das erste Bild schwebe, kann man sehen, dass hier nichts Seltsames passiert. Es dreht sich nur um 30 Grad im Uhrzeigersinn, wie wir es zuvor in der vorherigen Lektion gesehen haben. Aber jetzt werde ich mit dem Mauszeiger über das zweite Bild fahren. Etwas Interessantes passiert hier. Das Bild dreht sich um 30 Grad im Uhrzeigersinn, aber es schwenkt sich in seiner linken oberen Ecke, h. der Transformationsursprung, während das erste Bild von seinem Mittelpunkt aus rotiert, was uns sagt, dass der Mittelpunkt der Standardwert des Transformationsursprungs. Lassen Sie uns nun über die Werte sprechen, die den Ursprung transformieren akzeptiert. Es kann Schlüsselwörter als einen Wert akzeptieren, wie oben, unten, rechts und links. Versuchen wir das erneut in unserem Code-Editor. Und hier habe ich nur ein Bild. Wenn wir also den Mauszeiger über dieses Bild bewegen, möchten wir zum Beispiel Transformieren hinzufügen und es um 45 Grad drehen. Und wir werden hier nach oben gehen und Transformationsursprung oben hinzufügen. Und jetzt, wenn wir in den Browser gehen und den Mauszeiger über das Bild bewegen, können Sie sehen, dass es sich jetzt von der oberen Mitte des Bildes dreht. Okay, Next ist eine Demo für die anderen Schlüsselwörter, die Ursprungsausnahmen transformieren. Also mal sehen, wie sie funktionieren. Zuallererst haben wir eine Registerkarte. Wir haben gesagt, dass es das div um die obere Mitte des Elements drehen wird. Also genau hier. So wie so. Dann haben wir es, richtig. Und in diesem Fall wird sich das div von der Mitte seiner rechten Seite drehen, genau hier, so. Nun, ich möchte, dass Sie das Video pausieren und erraten, wie alle folgenden div, sie werden sich bewegen. Also pausieren Sie es jetzt. Alles klar, so unten natürlich, wird es um den unteren Mittelpunkt drehen, genau hier. So wie das hier. Dann haben wir verlassen, die sich um diesen Punkt drehen wird. Genau so. Dann oben rechts, die sich um die obere rechte Ecke dreht, dann unten rechts, dann unten links und schließlich oben links. Nun kann der Transformationsursprung auch Werte als Prozentwerte akzeptieren. Wir beginnen von der oberen linken Ecke des Elements. Der erste prozentuale Wert ist also X Prozentsatz. Und wenn der X-Prozentsatz 100% ist, bedeutet das, dass wir von der oberen linken Ecke beginnen dann 100% über das Element mit nach rechts bewegen, was bedeutet, dass wir in der rechten Ecke des Elements enden. Und dann zeigt der Y-Prozentsatz an, wie weit wir vertikal relativ zur Höhe des Elements bewegen werden. Also, wenn es 100% ist gut, dann würden wir eine Entfernung nach unten bewegen, die der Höhe des Elements entspricht. So wird unser Transformationsursprung in der unteren rechten Ecke des Elements enden. Nehmen wir nun an, wir wollen den Transformationsursprung des Elements in der Mitte mit der Prozentmethode machen . Also, was wir tun sollten, ist x als 50% und dann y als 50 Prozent als auch. Und es sollte zentriert sein. Okay, lassen Sie uns diese Methode in Aktion versuchen. Ich werde hier gehen und Transformationsursprung hinzufügen, sagen wir 30 Prozent nach rechts und dann 80% nach unten. Und dann, wenn wir zum Browser gehen, werden wir 30% nach rechts bewegen, dann 80% nach unten. So wird der Transformationsursprung irgendwo hier sein. Andere Werte, die den Ursprung annimmt oder Pixel transformieren. Sie können also einfach sagen, ich möchte, dass es 50 Pixel nach rechts und dann 100 Pixel nach unten bewegt. Und das wird unser Transformationsursprungpunkt sein. Also lasst uns das versuchen. Ich gehe hier und füge 300 Pixel hinzu. Das ist also die Hälfte der Breite. Als nächstes fügen Sie 150 Pixel hinzu, was die Hälfte der Höhe hier ist. Nun sollte also der Transformationsursprungpunkt in der Mitte sein. Genau so. Also, das ist es für diese Lektion, alle, und ich sehe dich in der nächsten. 12. 12 – Übersetzung in 3D: Hallo an alle. Willkommen in diesem neuen Abschnitt des Kurses. In diesem Abschnitt erfahren Sie, wie Sie einige der Eigenschaften verwenden , über die wir im vorherigen Abschnitt gesprochen haben. Aber in einer 3D-Umgebung. Nun ist der Hauptunterschied zwischen 2D- und 3D-Umgebungen die z-Achse. In 2D-Umgebungen haben wir die x-Achse, die horizontal ist, und die y-Achse, die vertikal ist. Aber in 3D haben wir auch die z-Achse, die senkrecht zu beiden ist. Nun, um eine 3D-Umgebung auf einer 2D-Ebene zu erstellen, wie der Bildschirm unseres Computers, müssen wir etwas namens Perspektive erstellen. Sie können sich Perspektive als den Abstand zwischen unseren Augen und dem Computerbildschirm vorstellen. Ich denke, du wirst es besser verstehen, wenn wir es in Aktion sehen. Aber ich möchte, dass Sie sich daran erinnern, dass Sie jedes Mal, wenn Sie mit einer 3D-Umgebung arbeiten möchten, zuerst die Perspektive definieren müssen. Also werden wir mit der übersetzten Eigenschaft beginnen. Im vorherigen Abschnitt haben wir gelernt, wie HTML-Elemente horizontal oder vertikal zu übersetzen oder zu verschieben mit den Funktionen „X übersetzen“ und „Y“ zu übersetzen. Und jetzt wollen wir Translate Z verwenden und sehen, was bekommen wird. Also hier in meinem HTML habe ich nur ein Bild, und ich werde hier gehen und transformieren, Z übersetzen, sagen wir 300 Pixel. Wenn ich also den Mauszeiger über das Bild führe, möchte ich, dass es 300 Pixel in z-Richtung bewegt. Aber wir sagten, bevor wir eine der 3D-Transformationseigenschaften verwenden, müssen wir Perspektive erstellen. Und um dies zu tun, verwenden wir eine Eigenschaft namens Prospective und fügen sie dem Container der HTML-Elemente hinzu, die wir transformieren möchten. In unserem Fall ist der Behälter des Bildes der Körper. Also werde ich den Körper anvisieren und Perspektive hinzufügen. Und denken Sie daran, dass wir gesagt haben, dass die Perspektive der Abstand zwischen unseren Augen, den Augen des Betrachters und dem Computerbildschirm ist. Es akzeptiert also Werte in Pixeln. Sagen wir also 100 Pixel. Und jetzt, wenn ich in den Browser gehe und den Mauszeiger über das Bild führe, siehst du, dass hier etwas Interessantes passiert. Das Bild wird irgendwie größer. Die Breite und die Höhe nehmen zu, genau wie das, was passiert ist, wenn wir die Eigenschaft Scale im vorherigen Abschnitt verwenden. Aber das ist eigentlich nicht das, was hier passiert. Was hier wirklich passiert ist, ist, dass sich das Bild auf uns zubewegt. Es kommt also näher an unsere Augen. Und deshalb scheint es größer zu sein, aber seine Breite und Höhe haben sich nicht geändert. So können Sie sich jetzt die z-Achse als die Linie zwischen zwei Punkten vorstellen. Das erste sind unsere Augen, und das zweite ist der Bildschirm. Wenn wir also das Element entlang der z-Achse bewegen, bewegt es sich entlang dieser Linie und es wird entweder näher kommen oder weg von unseren Augen. Zum Beispiel, wenn ich zu meinem Code-Editor zurückgehe und diese 300 Pixel auf minus 300 Pixel ändere. Wenn ich den Mauszeiger über das Bild führe, kann man sehen, dass es kleiner wird, weil es sich tatsächlich von unseren Augen entfernt. Ich gehe wieder zurück und entferne diese Minusklasse. Also, was ist die Perspektive, die wir hier im Körper hinzugefügt haben? Nun, bevor wir darüber reden, ändern wir es tatsächlich auf 500 Pixel und sehen, was wir bekommen. Bevor ich also meinen Browser neu lade, wenn ich den Mauszeiger über das Bild führe, können Sie sehen, dass das Bild mir um 300 Pixel in einer Perspektive von 1, 0, 0, 0, 0, 0. Also werde ich meinen Browser aktualisieren, um zu einer Perspektive von 500 Pixeln zu wechseln. Und dann fahre ich mit dem Mauszeiger über das Bild. Und Sie können in diesem Fall sehen, dass das Bild mit dieser neuen Perspektive viel näher kommt als das erste Mal. Und das liegt daran, dass die neue Perspektive kleiner ist. Der Abstand zwischen unseren Augen und dem Bild beträgt jetzt 500 Pixel. Wenn es sich also 300 Pixel zu uns bewegt, dann wird es 200 Pixel von unseren Augen entfernt enden. Während wir eine Perspektive von einhundert, zehnhundert Pixeln benutzten , endete es 700 Pixel von unseren Augen. Es scheint also kleiner zu sein. Sehen wir uns ein anderes Beispiel an. Also gehe ich zurück zu meinem Code-Editor und ändere diese 300 Pixel in einen beliebigen Wert, der größer ist als die Perspektive, die derzeit 500 Pixel ist. Sagen wir also 800 Pixel. Bevor ich mit dem Mauszeiger über das Bild schwebe, stellen wir uns vor, was passieren wird. Der Abstand zwischen dem Bild und unseren Augen beträgt 500 Pixel. Und wir wollen, dass das Bild 800 Pixel zu uns bewegt. Was also passieren wird, ist, dass sich das Bild auf uns zubewegt, bis es an unseren Augen vorbei ist. Und wir werden es nicht sehen können, weil es hinter uns liegt, oder vielleicht hinter unseren Augäpfeln in unseren Schädeln, was ein wenig beängstigend klingt, aber keine Sorge, es ist sicher. Wenn ich also darüber schwebe, kannst du sehen, dass es hinter unseren Augen verschwindet. Um die Dinge zusammenzufassen, müssen wir jedes Mal, wenn wir eine 3D-Umgebung erstellen möchten , zuerst dem Elementcontainer Perspektive hinzufügen. Und die Perspektive ist der Abstand zwischen dem Betrachter und dem Bildschirm. 13. 13 – Drehen in 3D: Hallo an alle. In dieser Lektion erfahren Sie, wie Sie Elemente mithilfe der Funktion „Drehen transformieren“ in einer 3D-Umgebung drehen können. Also hier in unserem Code haben wir unser Bild und es sitzt hier in unserem Browser. Und hier oben können Sie sehen, dass wir eine Perspektive von 500 Pixeln haben. Denn denken Sie daran, jedes Mal, wenn wir die Transformationseigenschaften verwenden möchten, müssen wir zuerst die Perspektive definieren. Lassen Sie uns nun anfangen, die Rotationsfunktion zu verwenden. Zuallererst haben wir Drehen X, wodurch das Element auf seiner Achsenachse rotiert wird. Dann haben wir y drehen, wodurch es auf seiner Y-Achse rotiert wird. Und schließlich, z, die natürlich macht es auf seiner z-Achse drehen. Also fangen wir mit rotieren Z an. Ich werde direkt hier in den Bildauswahl gehen und ich werde Transformation hinzufügen, Z drehen, sagen wir 120 Grad. Und ich werde zum Browser gehen und neu laden. Nun, bevor wir mit dem Mauszeiger über das Bild, wir drehen Z tun wird, ist es wird das Bild drehen auf seiner z-Achse, die wie eine Linie, die vom Bildschirm zu unseren Augen verläuft. Es sollte also nicht anders aussehen als die Drehfunktion, die wir zuvor verwendet haben , als wir mit 2D-Transformationen zu tun hatten. Also werde ich den Mauszeiger über das Bild bewegen und Sie können sehen, dass es um die z-Achse um 120 Grad gedreht wird. Gut. So drehen Z ist eigentlich ähnlich wie Drehen, was wir vorher gelernt haben. Großartig. Als nächstes werden wir über Drehen Ei sprechen. Ich werde hier gehen und mich ändern, Z drehen, um x zu drehen und ich möchte, dass es um 60 Grad dreht. Und was dies tun wird, ist, es wird es auf seiner x-Achse drehen, die horizontal ist. Also werde ich den Mauszeiger über das Bild bewegen und Sie können sehen, dass es sich in 3D entlang der horizontalen Achse dreht. Wenn ich zum Beispiel zurückgehe und 60 Grad auf 90 Grad ändere, dann gehe zurück und bewege den Mauszeiger über das Bild. Sie können sehen, dass das Bild um 90 Grad gedreht wird, bis es verschwindet. Was hier passiert ist, ist, dass sich das Bild dreht, bis wir nur seinen Rand sehen können. Und da es keine Dicke hat, verschwindet es. Dann haben wir ydrehen also gehe ich zurück und ändere mich, drehe x, drehe y, und ändere die Grade wieder auf 60 zurück. Wenn ich dann den Mauszeiger über das Bild gehe, kann man sehen, dass es sich um seine y-Achse dreht, die mit der Zeit vertikal ist. Und das ist es für diese Lektion, jeder und ich werden Sie in der nächsten sehen. 14. 15 – kreative button: Hallo an alle. In dieser Lektion werden wir lernen, wie man diesen schönen Effekt erzeugt, wenn wir den Mauszeiger über eine Schaltfläche bewegen. Sie können sehen, dass, wenn wir den Mauszeiger darüber bewegen, der gelbe Hintergrund in der unteren linken Ecke des Links rotiert , bis er das Ganze bedeckt. Also lasst uns hier in meinem HTML beginnen, ich werde einfach hier gehen und ein Anker-Tag hinzufügen. Und sag, schweben Sie mich. Dann gehe ich zu meinem CSS und füge einige Stile hinzu. Also zuerst werde ich den Körper anvisieren und Höhe 100 vh hinzufügen. Dann werde ich Anzeige, Flex hinzufügen, Inhalte ausrichten, zentrieren, Elemente zentrieren sowie ausrichten. Was diese drei Codezeilen tun, ist, dass sie ihr den Link horizontal und vertikal mit Flexbox gesendet haben. Dies hat nichts mit CSS-Animation zu tun. Und wenn Sie mehr über Flexbox erfahren möchten, die heutzutage für jeden Webentwickler ein Muss ist, habe ich einen Kurs dazu hier in Udemy. Sie können es überprüfen, wenn Sie interessiert sind. Also fangen wir an, unseren Link zu stylen. Ich werde es ins Visier nehmen. Fügen Sie dann Textdekoration hinzu. Keiner. Farbe. Diese schöne schwarze Farbe. Schriftfamilie, Sans Serif. Schriftgröße 45 Pixel, Rahmen, fünf Pixel, solide und sind schöne schwarze Farbe. Dann füge ich Polsterung hinzu, 40 Pixel und 80 Pixel von links und rechts. Dann werde ich Position relative Grade hinzufügen. Also jetzt, um den schönen gelben Hintergrund zu erstellen, müssen wir das vorher Pseudo-Element verwenden. Und wenn Sie nicht wissen, was Pseudo-Elemente sind, können Sie nur Code vor oder nach HTML-Elementen einfügen. Also werde ich vorher einen Doppelpunkt sagen. Dann werde ich keinen Inhalt hinzufügen, weil wir keinen Text hinzufügen möchten. Und danach werde ich Position absolut hinzufügen, und ich werde links 0, dann Top 0 hinzufügen . Jetzt haben wir unser voriges Pseudo-Element und seine Position befindet sich in der oberen linken Ecke des Links, rechts hier, weil wir links 0 hinzugefügt haben, so dass es 0 Abstand von links bewegt. Oder mit anderen Worten, es bleibt einfach auf der linken Seite des Links. Und es wird auch oben sein, wie wir gesagt haben, oben auf 0 als auch. Also gerade jetzt als zuvor, Pseudo-Element ist nur ein Punkt in der oberen linken Ecke des Links. Wenn wir in unserem Beispiel möchten, dass es sich um einen gelben Hintergrund handelt, der die volle Breite und Höhe des Links einnimmt. So können wir das einfach tun, indem wir Hintergrundfarbe, unsere gelbe Farbe, dann Höhe 100% und Breite 100% hinzufügen. Gut. Jetzt können Sie sehen, dass das vorher Pseudo-Element als Hintergrundfarbe erscheint und die volle Breite und Höhe des Links einnimmt. Genau wie wir es wollten. Aber es gibt ein Problem mit einem gelben Hintergrund, der den Text darunter versteckt. Jetzt können wir die schwebenden Worte nicht sehen. Dies kann leicht behoben werden, indem Sie direkt hier gehen und Z-Index minus1 hinzufügen, so dass der Text wieder vor dem gelben Hintergrund angezeigt wird. Großartig. Wenn wir also jetzt einen Blick auf unsere Demo werfen, können Sie sehen, dass, wenn ich mit dem Mauszeiger über sie mit gelbem Hintergrund im Uhrzeigersinn von seiner unteren linken Ecke dreht , bis es horizontal mit einer Drehung von 0 Grad endet. Und um diesen Effekt zu erzielen, werde ich hier rechts gehen und Transformationsursprung unten links hinzufügen, da die Drehung an diesem Punkt schwenkt, dann Transformieren, Drehen minus 90 Grad, so dass dies die Ausgangsposition sein wird und den gelben Hintergrund. Dann werde ich Übergangstransformation 1 Sekunde hinzufügen. Wenn ich nun den Mauszeiger über den Link führe, wollte ich einige Änderungen am gelben Hintergrund vornehmen. Also werde ich Transformation hinzufügen, um 0 Grad drehen, was bedeutet, dass in seine ursprüngliche horizontale Position zurückgekehrt ist. Und jetzt, wenn ich gehe und mit dem Mauszeiger über den Link, können Sie sehen, dass der Rotationsgrad jetzt 0 ist. Wenn ich weg bin, kehrt es zu minus 90 Grad zurück. Also haben wir nur noch eine Sache zu tun, nämlich den Teil des gelben Hintergrunds außerhalb des Links zu verstecken. Dies kann leicht gemacht werden, indem man auf Link geht und nur Überlauf verborgen sagt. Und jetzt bekommen wir den Effekt, den wir wollten, auf unseren Knopf. Jetzt können wir die gleiche Technik verwenden, um verschiedene Ergebnisse zu erzielen, die auch ziemlich schön aussehen werden. Also lasst uns ein paar von ihnen versuchen. Nehmen wir an, wir möchten, dass sich der gelbe Hintergrund von der unteren rechten Ecke dreht, nicht von links unten. Dies kann getan werden, indem einige der Eigenschaften geändert werden, die wir hinzugefügt haben. Aber zuerst gehen wir zurück zu unserem CSS und entfernen Sie diese Codezeile , so dass wir das gelbe Feld außerhalb des Links sehen können. Damit sich das gelbe Feld von der unteren rechten Ecke dreht, können wir einfach hier gehen und den Transformationsursprung nach rechts unten anstatt unten links ändern . So können Sie jetzt sehen, dass der gelbe Hintergrund von der unteren rechten Ecke um minus 90 Grad gedreht wird. Aber jetzt ändern wir diese Rotation auf 90 Grad statt minus 90 Grad. Und jetzt dreht sich der gelbe Hintergrund um 90 Grad. Gehen wir nun zu unserem CSS und fügen Sie Überlauf wieder versteckt hinzu. Und jetzt, wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass wir den gleichen Effekt haben wie zuvor, aber diesmal ist die Rotation auf der rechten unteren Ecke zentriert, nicht auf der linken unteren Ecke. Nun, ich habe eine kleine Herausforderung für dich. Ich möchte, dass Sie versuchen, den gelben Hintergrund zu verschiedenen Punkten zu drehen. Die erste ist die obere linke Ecke. Die zweite ist die obere rechte Ecke. Sie müssen nur zwei Werte ändern den Transformationsursprung und den Drehwinkel. Probieren Sie das aus und sagen Sie mir, ob Sie es in der Q&A-Abteilung tun konnten. 15. 16 – kreative swipe: Hallo an alle. In dieser Lektion werden wir diesen schönen Swipe Hover-Effekt erstellen. Wenn ich also den Mauszeiger über diesen Link führe, sehen Sie den Hintergrund glatt von links nach rechts und die Farbe ändert sich in Weiß. Und wenn ich weg bin, bläst der Hintergrund wieder nach links. Mal sehen, wie wir das tun können. Hier in meinem HTML füge ich einfach ein Anker-Tag hinzu und sag einfach Hover me. Dann gehe ich zu meinem CSS und füge einige Stile hinzu. Ich werde auf den Link zielen, und ich werde einige Stile hinzufügen, um es schöner aussehen zu lassen. Also werde ich Textdekoration hinzufügen, keine. Dann Farbe. Diese schöne Farbe. Schriftfamilie. Sans Serif. Schriftgröße 40 Pixel, Rahmen, drei Pixel, einfarbig. Und unsere Farbe. Dann füllen Sie 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Position hinzufügen, relativ, und schließlich, Übergang alle 1 Sekunde. Jetzt können Sie sehen, dass unser Link viel schöner aussieht und wir können mit der Arbeit an diesem Wipe-Effekt beginnen. Die Idee hinter diesem Wischeffekt ist, dass wir ein Vor-Pseudo-Element erstellen , das die volle Breite und Höhe des Links einnimmt. Dann werden wir es außerhalb des Links übersetzen. Und wenn wir den Mauszeiger über den Link bewegen, werden wir die Übersetzung entfernen, so dass sie an ihren Platz zurückkehrt, wo wir sie sehen können. Und das wird viel mehr Sinn machen, wenn wir gemeinsam geschaffen haben. Also werde ich hier in meinem CSS gehen und vorher einen Doppelpunkt hinzufügen. Und dann werde ich den Inhalt leer machen. Dann werde ich die Position absolut hinzufügen, und dann links 0 und oben 0. Dann müssen wir dafür sorgen, dass es die volle Breite und Höhe unseres Behälters einnimmt. Also werde ich Höhe 100% hinzufügen, dann Breite 100%. Und ich werde eine Hintergrundfarbe hinzufügen. Unsere Farbe, natürlich. Dann werde ich Z-Index minus1 hinzufügen, und ich werde Ihnen sagen, warum wir dies in einer Sekunde hinzugefügt haben. Großartig. Wenn Sie sich also den Link ansehen, können Sie sehen, dass das vorher Pseudo-Element die gesamte Breite und Höhe der Verbindung einnimmt. Und der Text ist irgendwie verschwunden, weil er die gleiche Farbe wie der Hintergrund hat, also sind wir nicht in der Lage, ihn zu sehen. Jetzt wollen wir diese weiße Bewegung von links erstellen , die leicht mit der Übersetzungsfunktion durchgeführt werden kann, die Sie sich sicher erinnern. Lassen Sie uns die Elemente auf dem Bildschirm bewegen. Also werde ich hier in das vorher Pseudo-Element gehen und ich werde transformieren hinzufügen. Übersetzen Sie X minus 100%. Jetzt bin ich mir sicher, dass du dich daran erinnerst, dass negative Werte, Filmelemente nach links und positive sie nach rechts bewegen. So können Sie jetzt sehen, dass das vorher Pseudo-Element um 100% seiner Breite nach links verschoben wurde. Und Sie können sehen, dass der Text jetzt direkt hier erscheint. Großartig. Wenn ich nun über den Link schwebe, möchte ich, dass zwei Dinge passieren. Ich wollte vor dem Pseudoelement zurück zu seiner Position gehen. Und ich möchte, dass die Farbe in Weiß wechselt. Wenn ich also den Mauszeiger über den Link führe, möchte ich einige Änderungen am vorigen Pseudo-Element vornehmen. Und diese Veränderungen geben es wieder in seine Position. Also werde ich transformieren X 0 hinzufügen, so dass es an seinen ursprünglichen Platz zurückkehrt. Und ich möchte, dass diese Veränderung reibungslos geschieht. Also werde ich hier in das Pseudo-Element gehen und Übergang hinzufügen, oh, 1 Sekunde. Wenn ich jetzt gehe und den Mauszeiger über den Link führe, können Sie sehen, dass sich der Hintergrund reibungslos von links in seine ursprüngliche Position bewegt. Eine Sache bleibt zu tun und das ist, den Hintergrund außerhalb des Links zu verstecken. Und dies kann einfach getan werden, indem Sie zum Anker-Tag gehen und Überlauf versteckt hinzufügen. So jetzt können Sie sehen, dass der Hintergrund außerhalb des Links nicht mehr sichtbar ist. Und wir haben den Effekt, den wir wollen. Schließlich müssen wir auch beim Schweben die Textfarbe in Weiß ändern. Also werde ich zu meinem CSS gehen und wenn ich den Mauszeiger über den Link führe, möchte ich, dass die Farbe in Weiß wechselt. Und das wird auch reibungslos passieren, weil wir hier oben in der Anker-Tag-Deklaration einen Übergang hinzugefügt haben . Wenn ich jetzt den Mauszeiger darüber führe, können Sie sehen, dass sich die Textfarbe zu breit ändert. Nun, was den Z-Index angeht, den ich hier hinzugefügt habe. Ich habe das getan, weil ich das vorherige Pseudo-Element erstellt und ihm die volle Breite und Höhe des Links gegeben habe. Der Text war dahinter verborgen, was bedeutet, dass der Text abgedeckt ist. Also zum Beispiel, wenn ich gehe und entferne es so. Sie dann den Mauszeiger über den Link. Sie können sehen, dass die Tags hinter dem Hintergrund ausgeblendet werden. Also haben wir es hinzugefügt, damit der Text davor erscheint, damit wir ihn sehen können. Großartig. Jetzt, da wir das Konzept hinter dieser weißen Bewegung verstehen, können wir es leicht modifizieren, um unterschiedliche Ergebnisse zu erzielen. Nehmen wir an, wir wollen, dass diese weiße Bewegung von der rechten Seite ist, nicht von der linken Seite. Wir können dies tun, indem wir nur eine Codezeile ändern. Also hier in meinem CSS werde ich das Translate X für den Hintergrund auf 100% anstelle von minus 100% ändern, so dass die Ausgangsposition, bevor ich den Mauszeiger darüber führe, rechts, nicht links ist. Also, wenn ich gehe und den Mauszeiger wieder über den Link, können Sie sehen, die leichte Bewegung ist jetzt von der rechten Seite. Und sagen wir, wir wollen, dass der Swipe von oben nach unten ist. Anstatt translate x zu verwenden, verwenden wir dieses Mal Translate Y. Also werde ich x zu y ändern, und wir wollen es von oben nach unten. Also werden wir minus 100% sagen, weil negative Werte Elemente nach oben bewegen. Und wieder werde ich dieses x hier in y ändern und jetzt können Sie sehen, wenn ich über den Link schwebe, der Hintergrund von oben nach unten wischen. Also jetzt möchte ich, dass du mit diesen Werten herumspielst und mehr Effekte schaffst. Kann sich frei zu teilen, was Sie mit anderen Studenten in der Q und einem Abschnitt kommen. 16. 17 – kreative hover: Hallo an alle. In dieser Lektion werden wir einen schönen Hover-Effekt erstellen. Wenn ich also den Mauszeiger über den Link führe, sollte dieser nette kleine Effekt passieren. In Ordnung, also lasst uns damit beginnen, hier in meinem HTML zu gehen. Wenn Sie einen Link hinzufügen, sagen Sie einfach schweben Sie mich. Dann gehe ich zu meinem CSS und füge einige Stile hinzu. Ich werde den Link anvisieren und Padding hinzufügen, 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Schriftart hinzufügen, Familie, Sans Serif, dann Textdekoration, keine, um die Unterstreichung loszuwerden. Dann färben. Der scharfe 2626. Schriftgröße: 45 Pixel. Buchstabenabstand Zwei Pixel, Rand fünf Pixel, einfarbig. Und wieder, diese Farbe, Position relativ und Übergang 1 Sekunde. So sieht der Link jetzt aus. In Ordnung, also müssen wir das Pseudo-Element vorher verwenden. Und wenn Sie nicht wissen, was das ist, können Sie nur Code vor Ihrem Element einfügen. Wir werden in einer Sekunde sehen, wie das funktioniert. Also werde ich vorher einen Doppelpunkt sagen. Und im Inneren dieses Inhalts, leer. Also bekomme ich keinen Text in diesem Pseudo-Element. Und dann positionieren Sie absolut 0, links, 0, Breite, 100%, Höhe, 100%. Es sollte also die ganze Breite und Höhe eines Links und dann die Hintergrundfarbe, unser Farbübergang nehmen. 1 Sekunde. Jetzt können Sie sehen, dass unser Pseudo-Element oben auf dem Link erscheint und wir können den Link nicht mehr sehen. Großartig. Ich bin sicher, Sie erinnern sich an die drehen x, drehen y-Funktionen, die wir früher im Kurs gelernt haben. Und dass Sie sich daran erinnern, dass durch Drehen x das Element entlang der x-Achse gedreht wird, während durch Drehen y es entlang der Y-Achse gedreht wird. Lassen Sie uns das zusammen überprüfen. Hier habe ich zwei Bilder und ich habe die Drehung x für die erste auf 90 Grad eingestellt , wenn ich darüber schwebe. Mal sehen, was passieren wird, wenn ich über sie schwebe. Sie können sehen, dass das Bild um 90 Grad entlang der x-Achse gedreht ist , so dass wir es jetzt nicht sehen können, weil der Teil davon, der uns jetzt zugewandt ist. Sein Rand. Und ich sagte, die Drehung y für das zweite Bild auf 90 Grad beim Schweben als auch. Wenn ich nun den Mauszeiger darüber führe, kann man sehen, dass das Bild entlang der Y-Achse um 90 Grad gedreht wird , bis es ebenfalls verschwunden ist. In Ordnung, Jetzt, wo wir überprüft haben, was x drehen und drehen, warum tun Sie? Gehen wir zurück zu unserem CSS. Ich werde hier gehen und Drehen x 90 Grad hinzufügen, unser Pseudo-Element, so dass es um 90 Grad gedreht wird und wie im Bildbeispiel verschwinden wird. Großartig. Also, was ich jetzt tun möchte, ist, wenn ich den Mauszeiger über den Link führe, möchte ich die Rotation des vorherigen Pseudo-Elements entfernen , so dass es genau dorthin zurückkehrt, wo es war, bevor ich verschwinde. Also werde ich auf den Link zielen und wenn ich den Mauszeiger darüber führe, wollte ich einige Änderungen am vorherigen Pseudo-Element vornehmen. Ich möchte die Rotation um die X-Achse auf 0 zurücksetzen , damit sie wieder auftaucht und wir sie sehen können. Und weil ich den Übergang hier oben benutze, sollte diese Rotationsänderung reibungslos geschehen. Also, wenn ich jetzt über den Link schwebe, können Sie sehen, dass das vorherige Pseudo-Element zurückkommt und das schön zeigt. Nun müssen wir die Textfarbe ändern, wenn wir den Mauszeiger über den Link zu Weiß bewegen. Also werde ich den Link anvisieren. Und wenn ich darüber schwebe, möchte ich die Farbe in Weiß ändern. Und wenn ich jetzt den Mauszeiger über den Link führe, kannst du sehen, dass nichts passiert. Die Textfarbe wird nicht angezeigt. Und das liegt daran, dass das Pseudo-Element oben auf dem Link erscheint und der Text darunter liegt. Was wir also tun können, ist, dass wir hier in das Pseudo-Element gehen und Z-Index minus eins hinzufügen können , so dass der Text vor dem Pseudo-Element erscheint. Also jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der Text auftaucht und wir haben einen schönen Schwebeeffekt los. Jetzt versuchen wir, und drehen x. Lassen Sie uns weiter gehen und versuchen, drehen Sie y, mischen Sie sie zusammen und sehen, was bekommen wird. Also kopiere ich dieses Pseudo-Element, füge es erneut ein und ändere einfach vorher zu nachher. Okay, jetzt haben wir zwei Pseudo-Elemente. Ich werde einfach die Drehfunktion in y ändern also wird es entlang der Y-Achse drehen, bis wir sie nicht mehr sehen können. Und ich werde diesen Schwebeeffekt kopieren. Fügen Sie es erneut ein und ändern Sie vorher nach X zu Y. Wenn ich den Mauszeiger darüber führe, die Drehung entlang der Y-Achse zurück zu 0. Das Bild zeigt sich gut mit dem vorher Pseudo-Element. Und jetzt, wenn ich gehe und über sie schwebe, können Sie sehen, dass die Vor- und Nachher Pseudo-Elemente zusammen auftauchen, was ihm diesen wirklich schönen Effekt verleiht. Und genau das wollten wir. 17. 18 – kreative button: Hallo an alle. In dieser Lektion werden wir diesen schönen Hover-Effekt erstellen. Wenn ich den Mauszeiger über den Link führe, wird der Text fett und sowohl der Buchstabenabstand als auch die Rahmenstärke zunehmen. Dies ist ein einfacher, aber schön aussehender Effekt. Mal sehen, wie wir es schaffen können. Hier in meinem HTML können Sie sehen, dass ich in diesem Beispiel eine Schriftart von Google Fonts namens Roboto implementiert habe. Also werde ich hier gehen und ein Anker-Tag hinzufügen. Und ich werde einfach Button sagen. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde das Anker-Tag anvisieren und Textdekoration hinzufügen. Keiner. Polsterung, 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Farbe hinzufügen. Diese schöne rote Farbe und Rand, drei Pixel, solide. Und unsere rote Farbe. Dann werde ich Text Transformation hinzufügen. Großbuchstaben, Schriftgröße 40 Pixel. Und die Font-Familie. Roboto. Dann Schriftgewicht 300, die es ein wenig leichter machen wird. Dann Buchstabenabstand minus zwei Pixel, so dass die Buchstaben näher beieinander sind. Und schließlich, Übergang oder 0,5 Sekunden, so dass die Änderung reibungslos erfolgt. Und jetzt können Sie sehen, dass der Link genau wie unsere Demo aussieht. Jetzt müssen wir den Effekt erzeugen, den wir auf Schweben wollen. Also werde ich den Link anvisieren und beim Schweben werde ich das Schriftgewicht auf 900 ändern, also wird es viel mutiger sein. Dann werde ich Buchstabenabstand von zehn Pixeln hinzufügen , so dass die Buchstaben ein wenig weit voneinander entfernt sind. Und dann kopiere ich die Grenze von hier oben und füge sie ein. Und ich werde dies auf sieben Pixel anstelle von drei Pixeln ändern. Und das war's. Wenn ich den Mauszeiger über den Link, können Sie sehen, die Änderung ist schön und glatt, genau wie wir wollen. 18. 19 – kreative button die oben bis unten ist, mit Text: Hallo an alle. In dieser Lektion werden wir diesen schönen Wischeffekt von oben nach unten erstellen. Und wenn Sie bemerken, ist dieser Effekt dem, den wir in der vorherigen Lektion erstellt haben, sehr ähnlich. Der Hauptunterschied besteht darin, dass wir hier Inhalt im Pseudo-Element haben, das das Wort Jahr ist. Und natürlich gibt es einige Unterschiede darin, wie die Schaltflächen aussehen, aber wir werden die gleichen Dateien aus dem vorherigen Beispiel verwenden und einige Änderungen vornehmen, um diesen Effekt zu erzielen. Also hier ist der HTML aus dem vorherigen Beispiel, und wir werden nichts daran ändern. Die Änderungen werden in unserem CSS sein. Also lasst uns zu unserem CSS gehen. Und bevor wir etwas anderes tun, lassen Sie uns einfach ändern, wie der Link aussehen wird. Das erste, was ich tun werde, ist, dass ich dem Körper einen schönen dunkelgrauen Hintergrund hinzufügen werde. Und danach werde ich einige Änderungen am Link vornehmen. Also werde ich die Farbe in Weiß ändern. Die Schriftfamilien, gut. Die Schriftgröße ist in Ordnung. Und hier werde ich auch die Rahmenfarbe in Weiß ändern. Und das ist es für die Verbindung selbst. Jetzt müssen wir es das vorherige Pseudo-Element hinzufügen. In diesem Beispiel müssen wir Inhalte direkt hier hinzufügen. Also werde ich Jahr eingeben und ich werde Farbe weiß hinzufügen. Und ich werde auch die Hintergrundfarbe in diese rote Farbe ändern. Und jetzt, wenn ich den Mauszeiger über den Link zeige, sehen Sie, dass das Wort Jahr hinter dem Linktext erscheint. Dies geschieht, weil der Z-Index hier auf minus eins gesetzt ist. Also werde ich das entfernen. Und jetzt, wenn ich den Mauszeiger über den Link, sehen Sie das Wort yeah, erscheint vor der Schaltfläche. Großartig, also müssen wir jetzt unser Wort im Hintergrund zentrieren. Dies ist sehr einfach mit Flexbox. Also werde ich einfach hier gehen und Displayflex hinzufügen , damit wir alles steuern, was in diesem Pseudo-Element mit Flexbox ist. Und ich werde ausrichten Elemente Mitte hinzufügen, um den Inhalt vertikal zu zentrieren und Ausrichtung Inhalt Center sowie horizontal zu zentrieren. Wenn ich nun den Mauszeiger über die Schaltfläche lege, können Sie sehen, dass das Wort jetzt perfekt innerhalb des Pseudo-Elements zentriert ist. 19. 20 - kreative button: Hallo an alle. In dieser Lektion erstellen wir diesen Effekt, wenn Sie den Mauszeiger über eine Schaltfläche bewegen. Sehen wir uns an, dass ich in unserer langsameren Demo, um zu sehen, was genau vor sich geht, den Mauszeiger über den Link bewegen werde. Und Sie können sehen, dass sich die Hintergrundfarbe in eine rote Farbe ändert. Und es gibt eine dicke weiße Linie, die in einem Winkel von 45 Grad geneigt ist und über die Verbindung verläuft. Gleichzeitig ändert sich die Hintergrundfarbe. Cool, richtig? Mal sehen, wie wir das tun können. Zunächst werde ich zu meinem HTML gehen und ich werde ein Anker-Tag hinzufügen. Und sag einfach, mich zu schweben. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde dem Körper einen dunkelgrauen Hintergrund hinzufügen. Dann werde ich das Anker-Tag anvisieren und Textdekoration hinzufügen. Keiner. Dann Farbe, weiß. Schriftfamilie. Sans Serif. Schriftgröße 40 Pixel. Rahmen, drei Pixel. Massiv weiß Polsterung 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Übergang 0, 0, 3 Sekunden Position relativ hinzufügen . Und als nächstes lassen Sie uns die Hintergrundfarbe auf Rot ändern, wenn Sie den Mauszeiger über den Link bewegen. Also werde ich hier gehen und eine sagen und auf Schweben. Ich werde die Hintergrundfarbe in unsere rote Farbe ändern. Und jetzt, wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass sich die Hintergrundfarbe ändert, um zu lesen. Gut. Jetzt möchten wir eine dicke weiße Linie erstellen, die die Verbindung kreuzt. Und wir werden das vorher Pseudo-Element dafür verwenden. Also werde ich zu meinem CSS gehen und vorher einen Doppelpunkt sagen. Und ich werde den Inhalt leer machen. Dann werde ich die Hintergrundfarbe weiß machen. Dann werde ich oben 0 sagen, links 0 auch. Dann Breite 100%, und Höhe 50 Pixel, dann Position absolut. Und wenn wir dann einen Blick darauf werfen, können Sie sehen, dass es einen weißen Hintergrund hat, der die volle Breite des Links einnimmt und ein Hoch von 50 Pixeln hat. Nun wollen wir es nach links außerhalb des Links verschieben, so dass, wenn ich den Mauszeiger über ihn schiebe, es von links nach rechts bewegt. Also werde ich hier gehen und Transformation hinzufügen, X minus 100% übersetzen. Und jetzt können Sie sehen, dass es außerhalb des Links nach links um eine Entfernung übersetzt wird, die 100% seiner Breite entspricht. Als nächstes möchte ich es um 45 Grad drehen, weil es gedreht ist und ich Demo. Also werde ich hier gehen und eine weitere Transformationsfunktion hinzufügen, die 45 Grad drehen ist. Und jetzt können Sie sehen, dass es gedreht ist. Gut. Jetzt wollen wir es ganz nach rechts über den Link bewegen , wenn wir den Mauszeiger über ihn bewegen. Und das kann getan werden, kein Problem. Also werde ich zu meinem CSS gehen und wir schweben über den Link. Ich möchte einige Änderungen vornehmen, die am vorigen Pseudo-Element geschehen sind. Ich werde transformieren Translate X 100% hinzufügen , so dass es sich um 100% seiner Breite nach rechts bewegt. Drehen Sie dann 45 Grad. So wird es während der Bewegung gedreht bleiben. Und jetzt, wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass sich das Pseudo-Element von links nach rechts über den Link bewegt. Aber wir haben immer noch ein kleines Problem. Und das ist, das Pseudo-Element außerhalb des Links loszuwerden. Wir können das kein Problem beheben, indem wir zum Anker-Tag-Selektor gehen und Überlauf verborgen hinzufügen , so dass alles außerhalb davon ausgeblendet wird. Und jetzt, wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass wir genau den Effekt erzielen, den wir wollen. 20. 22 – kreative Doppelschichten: Hallo an alle. In dieser Lektion werden wir diesen schönen Hover-Effekt erstellen. Wir werden sowohl das Vorher als auch das Nachher Pseudo-Element in diesem Beispiel verwenden. Mal sehen, wie wir das tun können. Nun, zuerst werde ich hier im HTML beginnen, und ich werde ein Anker-Tag hinzufügen. Und sag einfach, schweben Sie mich. Dann müssen wir zu unserem CSS gehen und einige Stile hinzufügen. Also werde ich das Anker-Tag anvisieren. Dann werde ich Text, Dekoration hinzufügen . Keiner. Hintergrundfarbe. Diese schöne dunkelgraue Farbe. Font-Familie. San Serif. Schriftgröße 40 Pixel, Rahmen. Für Pixel, feste und dunkelgraue Farbe. Dann werde ich Padding hinzufügen, 40 Pixel von oben und unten und 80 Pixel von links und rechts. Und schließlich werde ich Position relativ hinzufügen. Gut. Beginnen wir nun mit der Arbeit an den Vorher- und Nachher-Pseudo-Elementen. Ich werde die vorher Pseudo-Elemente für unseren Link erstellen. Und ich werde sagen, Inhalt. Dann schweben die Wörter mich, dann positionieren absolut, oben, 0, links, 0, Höhe, 100%, Breite, 100% ebenfalls. Dann Hintergrundfarbe. Diese schöne gelbe Farbe. Dann färben Sie unsere dunkelgraue Farbe. Und jetzt müssen wir den Inhalt darin zentrieren. Und wir werden das mit Flexbox tun. Also werde ich Display Flex hinzufügen und dann Content Center ausrichten, um es horizontal zu zentrieren. Richten Sie die Elemente dann auch zentriert aus, um vertikal zum Inhalt aufzusteigen. Und schließlich werde ich gehen und Übergang oder 0,5 Sekunden grau hinzufügen . Also jetzt haben wir das vorherige Pseudo-Element mit diesem gelben Hintergrund oben auf unserem Link gesetzt. Lassen Sie uns nun an dem nachher-Pseudo-Element arbeiten. Ich werde das alles kopieren. Fügen Sie es erneut ein. Und ich werde mich vor zu nachher ändern. Und jetzt sitzt das nach 0 Element oben auf dem vorher. Ok? Ich werde einfach hier in das After-Pseudo-Element gehen und ich werde transformieren übersetzen hinzufügen. Und ich möchte es um minus 100% horizontal übersetzen. So wird es nach links bewegen. Und ich werde es um 100% vertikal übersetzen. So wird es sich nach unten bewegen. So sollte es jetzt 100% seiner Breite nach links und 100% seiner Höhe nach unten bewegen. Genau wie wir hier sehen. Gitter. Jetzt haben wir die Pseudo-Elemente vor oben auf dem Link sitzen. Und das After-Pseudo-Element befindet sich in seiner neuen Position. Lassen Sie uns weiter schweben. Ich möchte vor einem Pseudo-Element in die obere rechte Ecke außerhalb des Links bewegen. Und ich möchte, dass das After-Pseudo-Element seinen Platz einnimmt. Das ist einfach zu tun. Also werde ich gleich hierher gehen. Und wenn ich den Mauszeiger über den Link zeige, möchte ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde transformieren hinzufügen übersetzen. Ich wollte nach rechts ziehen. Also werde ich 100% seiner Breite nach rechts hinzufügen. Und ich will, dass es nach oben geht. Also werde ich minus 100% seiner Höhe nach oben hinzufügen. Und genau so, wenn ich den Mauszeiger über den Link zeige, können Sie sehen, dass das Pseudo-Element vor dieser neuen Position bewegt. Jetzt wollen wir das After-Pseudo-Element an seinen Platz nehmen lassen. Dies wird sehr einfach zu tun sein. Ich werde das einfach kopieren und vor zu nachher wechseln. Dann werde ich sowohl das Translate X als auch das Translate y 0 machen , so dass es in seine ursprüngliche Position zurückkehrt. Und jetzt, wenn ich den Mauszeiger über den Link zeige, können Sie sehen, dass das vorher Pseudo-Element seinen Platz für das After-Pseudo-Element verlässt. Nun, wenn Sie bemerken, können Sie sehen, dass wir immer noch die blaue Farbe des Links hinter dem Pseudo-Element vor haben. Und es erscheint, wenn wir schweben. Damit wir das loswerden können. Kein Problem, indem Sie einfach zurück zu den Links, die Vorlesung und Hinzufügen Farbe transparent, so dass es verschwinden. Und ich werde Überlauf versteckt hinzufügen, so dass die Elemente nicht außerhalb des Links erscheinen. Und jetzt, wenn wir den Mauszeiger über den Link bewegen, können Sie sehen, dass alles genau so aussieht, wie wir es gehofft haben. 21. 21 - kreative Textskalierung: Hallo an alle. Willkommen zu dieser Lektion des Kurses. In dieser Lektion werden wir diesen schönen Hover-Effekt erstellen und wir werden das vorher Pseudo-Element verwenden, um es zu erstellen. Mal sehen, wie wir das tun können. Ich werde hier in meinem HTML beginnen, indem ich einen Link hinzufüge. Und ich werde sagen, schweben Sie mich. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde den Link anvisieren. Dann werde ich Text, Dekoration hinzufügen. Keiner. Farbe. Diese schöne dunkelgraue Farbe. Schriftfamilie. Sans Serif. Schriftgröße 40 Pixel, Rahmen, drei Pixel, einfarbig. Und unsere dunkelgraue Farbe. Dann füge ich Polsterung hinzu, 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Übergang oder 0,5 Sekunden hinzufügen. Und schließlich, Position relativ. Und jetzt sieht unser Link viel besser aus. Gut. Jetzt werden wir das vorher Pseudo-Element verwenden, um unseren Effekt zu erzeugen. Also werde ich hier gehen und vorher einen Doppelpunkt hinzufügen. Und ich werde Inhalte hinzufügen. Schweben Sie mich. Dann absolut positionieren, oben, 0, links 0, dann Höhe, 100%, Breite, 100% ebenfalls. So nimmt es die volle Breite und Höhe der Verbindung ein. Dann werde ich Hintergrundfarbe hinzufügen, unsere dunkelgraue Farbe. Und schließlich, Farbe weiß. Und jetzt können Sie sehen, dass das vorher Pseudo-Element auf dem Link mit seiner dunkelgrauen Hintergrundfarbe gesetzt ist . Also jetzt wollen wir den Inhalt innerhalb des vorher Pseudo-Elements zentrieren, und wir werden Flexbox verwenden, um dies zu tun. Also werde ich hier gehen und Anzeige hinzufügen. Flex, dann den Inhalt ausrichten und Elemente zentrieren. Toll, als nächstes werden wir einige Arbeit an unserem Einfluss machen. Die Idee dahinter ist, dass wir diese dunkelgraue Hintergrundskala bis zu etwa fünfmal so groß machen werden. So wird es sehr riesig sein. Und wir werden seine Deckkraft 0 so machen, dass es transparent ist. Und wenn wir den Mauszeiger über den Link bewegen, werden wir ihn wieder auf eins skalieren lassen, und die Deckkraft ändert sich ebenfalls auf 1, so dass sie sichtbar ist. Lasst uns das machen. Ich werde genau hier in das vorher Pseudo-Element gehen, und ich werde fünfmal Transformationsskala hinzufügen. Und Sie können sehen, dass es auf das Fünffache seiner Größe skaliert ist und es ist riesig. Ich möchte, dass es außerhalb des Links versteckt wird. Also werde ich direkt hier in den Linkselektor gehen. Und ich werde Überlauf versteckt hinzufügen. Und jetzt können Sie die Teile des vorher Pseudo-Elements außerhalb des Links oder ausgeblendet sehen. Awesome, lasst uns weitermachen. Jetzt. Wir müssen sie vor dem Pseudoelement transparent machen. Also werde ich hier gehen und Opazität 0 hinzufügen. Und jetzt können Sie sehen, dass es versteckt ist. Dann werde ich Übergang hinzufügen, alle Nullen, fünf Sekunden. Jetzt schwebe ich. Wir wollen die Skala des Pseudoelements wieder eins machen. Und wir wollen es auch sichtbar machen, indem wir mir Deckkraft eins machen. Also lasst uns das machen. Ich werde einen Doppelpunkt hinzufügen, schweben, Doppelpunkt vorher. Und in ihm werde ich Transformation hinzufügen, eins skalieren, dann Deckkraft eins. Und jetzt, wenn ich gehe und mit dem Mauszeiger über den Link, können Sie sehen, dass das Pseudo-Element vor erscheint und auf seine ursprüngliche Größe skaliert, was uns den Effekt gibt, den wir wollten. 22. 22 – kreative Umriss: Hallo an alle. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen großartig aussehenden Button Hover-Effekt erstellen. So können Sie sehen, wenn ich den Mauszeiger über die Schaltfläche führe, füllt ein roter Hintergrund die Schaltfläche von oben nach unten aus. Also lasst uns herausfinden, wie wir das tun können. Zuerst werde ich hier in meinem HTML Rang gehen und eine Schaltfläche hinzufügen und ihm eine Klasse von btn geben. Und ich werde einfach Button sagen. Dann gehe ich zu meinem CSS, um dieser Schaltfläche einige Stile hinzuzufügen. Ich werde beginnen, indem ich die Schaltfläche mit der hinzugefügten Klasse anvisiere. Und ich werde fortfahren, indem ich einen Rahmen hinzufüge, zwei Pixel, solide. Und jetzt benutzen wir die Farbe Tomate. Dann werde ich den Hintergrund entfernen, indem ich Hintergrund hinzufüge. Keiner. Dann werden wir Farbe hinzufügen. Tomate wieder für den Text. Dann füllen Sie 20 Pixel von oben und unten und 40 Pixel von links und rechts. Dann müssen wir die Schriftgröße ein wenig erhöhen. Also werde ich Schriftgröße 25 Pixel hinzufügen. Dann transformieren Text Großbuchstaben Cursorzeiger um den Cursor in eine Hand zu konvertieren würde über die Schaltfläche schweben. Dann Übergang oder 0,5 Sekunden, weil wir die Farbe des Textes ändern, wenn wir den Mauszeiger über die Schaltfläche bewegen. Und das muss reibungslos geschehen. Jetzt, richtig? Jetzt haben wir unseren Knopf hier sitzen und es sieht schon toll aus. Lassen Sie uns also an dem Schwebeeffekt arbeiten. Wir werden das vor Pseudo-Element verwenden, um den roten Hintergrund zu erstellen. Also werde ich hier gehen und ich werde BTN Doppelpunkt vorher sagen. Dann werde ich Inhalt leer hinzufügen, weil wir keinen Text oder so etwas wollen. Dann absolut positionieren, oben, 0, links, 0, Breite, 100%, Höhe, 100%. Und wir werden Hintergrund hinzufügen, Tomate. In Ordnung, hier können Sie sehen, dass der rote Hintergrund oben auf dem Knopf sitzt die volle Breite und Höhe des Knopfes einnimmt. Und es versteckt den Text darunter. Also lassen Sie uns das beheben, indem wir direkt hier in den roten Hintergrund gehen und Z-Index minus eins hinzufügen. Jetzt sitzt die Taste oben auf dem roten Hintergrund, aber wir können sie jetzt nicht sehen, weil sie die gleiche Farbe wie der Hintergrund hat. Also, wenn wir hier in der Tastenauswahl gehen und die Farbe in Weiß ändern, zum Beispiel. Sie können sehen, dass der Text jetzt angezeigt wird. Alles klar, lass es uns wieder auf Tomate setzen. Nun, lassen Sie uns weiter auf dem roten Hintergrund arbeiten. Wenn wir zu unserer Demo gehen und einen kurzen Blick werfen, können Sie sehen, dass ich schwebe. Der rote Hintergrund erhält einen Randradius von der unteren linken und unteren rechten Ecke. Gehen wir zurück und fügen Sie das unserem Button hinzu. Ich werde genau hier in das vorher Pseudo-Element gehen. Und ich werde Randradius 0, 050% und 50 Prozent hinzufügen . Also 0 von der oberen linken und oberen rechten Ecke, weil wir keine Kurven auf diesen wollen. Und 50 Prozent von unten links und unten rechts. Und hier können Sie sehen, dass der rote Hintergrund nun diese Kurven an der Unterseite hat. Cool. Lassen Sie uns nun an dem Schwebeeffekt arbeiten. Was wir tun werden, ist, dass wir die Höhe des roten Hintergrunds auf 0 setzen. dann über die Schaltfläche schweben, werden wir seine Höhe erhöhen, so dass sie die Schaltfläche ausfüllt und bedeckt. Also lasst uns darum kümmern. Ich werde genau hier in den roten Hintergrund gehen, und ich werde die Höhe 0% anstelle von 100% machen. So jetzt können Sie sehen, dass der rote Hintergrund nicht mehr sichtbar ist. Dann gehen wir hier und sagen BTN auf Hover Dickdarm vor. Und wir werden die Höhe zu 100% wieder machen. Dann, um diese Höhenänderung reibungslos zu machen, werde ich hier nach oben gehen und den Übergang 0, 0, 0,5 Sekunden hinzufügen . Gut. Also, wenn ich gehe und den Mauszeiger über die Schaltfläche, können Sie sehen, dass die rote Hintergrundhöhe wieder 100% wird. Aber natürlich, wegen des Randradius, den wir hinzugefügt haben, es deckt nicht die ganze Taste. Also müssen wir seine Höhe erhöhen und es mehr als 100% beim Schweben machen. Also lasst uns hier gehen und das 100% in, sagen wir mal 190%. Und jetzt, wenn ich gehe und den Mauszeiger wieder über die Schaltfläche, können Sie sehen, dass der rote Hintergrund die Schaltfläche bedeckt. Aber weil seine Höhe jetzt 100% der Schaltflächen Seite ist, ist es überfüllt. Wir können uns darum kümmern. Kein Problem, indem Sie direkt hier in der Tastenauswahl eingehen und Überlauf versteckt hinzufügen, um ein Überlaufen von der Schaltfläche zu verhindern. Awesome, Jetzt sieht es genau so aus, wie wir wollen. Aber wir haben noch eine Sache, die darin besteht, dass die Textfarbe in Weiß wechselt, wenn Sie den Mauszeiger über die Schaltfläche bewegen. Also werde ich hier gehen und btn hinzufügen. Und auf Schweben. Ich werde Farbe hinzufügen, weiß. Ausgezeichnet. Jetzt können Sie sehen, dass wir den gleichen Effekt haben, den wir wollen, und es sieht gut aus. Nun, da wir das Konzept oder die Idee hinter all dem gelernt haben, können wir diesen Effekt manipulieren und ihn aus einer anderen Richtung, zum Beispiel von unten nach oben. Also alles, was wir tun müssen, ist ändern Sie Tab rechts hier nach unten, so dass es nach oben wachsen oder füllen Sie aus der unteren Karte für Registerkarte. Und in diesem Fall müssen wir auch den Randradius ändern und die Kurven auf die obere Rate und die oberen linken Ecken setzen. Also sagen wir hier 50 Prozent und 50 Prozent statt 00. Und das ist alles, was wir tun müssen. Jetzt geschieht der Effekt von oben nach unten. Genau so. 23. 23 - kreative Knopfeffekt: Hallo an alle. In dieser Lektion werden wir diesen Button Hover-Effekt erstellen. Wenn ich also den Mauszeiger über die Schaltfläche fahre, können Sie sehen, dass wir diesen Effekt haben, bei dem zuerst ein grüner Hintergrund den Knopf bedeckt und dann ein roter bedeckt sie alle. Also lasst uns das herausfinden und es schaffen. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge und einfach Button sag. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde den Link anvisieren. Fügen Sie Polsterung hinzu, 20 Pixel von oben und unten und 40 Pixel von links und rechts. Dann werde ich Textdekoration hinzufügen. Keiner. Text-Transformation. Großbuchstaben, Hintergrundfarbe, eine gelbe Farbe, dann Farbe Weiß. Und wir wollen, dass die Schriftgröße etwas größer ist. Also werde ich Schriftgröße 20 Pixel hinzufügen. Wir wollen auch einige Abstände zwischen den Buchstaben. Also werde ich Buchstabenabstände zu Pixeln hinzufügen. Und schließlich, Position relativ. Jetzt sieht unser Button viel besser aus. Als nächstes möchten wir den grünen Hintergrund erstellen , der die Schaltfläche bedeckt, wenn wir den Mauszeiger darüber bewegen. Also werde ich hier gehen und ein Vor-Pseudo-Element für unser Anker-Tag erstellen. Und im Inneren werde ich Inhalte hinzufügen. Taste, Position, absolut, oben, 0, links 0. Und weil es die gleiche Breite und Höhe wie der Knopf hat, werden wir Breite 100% und Höhe 100% hinzufügen. Dann werden wir Hintergrundfarbe hinzufügen. Diese grüne Farbe. Da gehen wir. Der grüne Hintergrund sitzt jetzt direkt über unserem Knopf. Als nächstes müssen wir diesen Text horizontal und vertikal innerhalb der Schaltfläche zentrieren. Und wir werden das mit Flexbox tun. Also werde ich hier gehen und Anzeige hinzufügen. Flex Richten Sie dann das Inhaltscenter so aus, dass es horizontal zentriert wird. Und richten Sie Elemente zentrieren Sie sich auch, um sie vertikal zu zentrieren. In Ordnung, um den gewünschten Effekt zu erzielen, verwenden wir die Rotationsfunktion, die es uns ermöglicht, den grünen Hintergrund auf seiner x-Achse zu drehen. Lassen Sie uns also überprüfen, was die rotierende x-Funktion für uns tun kann. Ich werde hier gehen und Transformieren hinzufügen. Drehen Sie X 60 Grad. So können Sie sehen, dass der grüne Hintergrund nun entlang seiner horizontalen Achse um 60 Grad gedreht wird. Und es macht das von seinem Mittelpunkt aus. Denken Sie daran, dass der Transformationsursprung standardmäßig Mittelpunkt ist, d. h. jede Transformationsaktion, die Sie für das Element ausführen, nimmt den Mittelpunkt als Referenz an. Aber in dieser Situation wollen wir das ändern. Wir möchten, dass sich der grüne Hintergrund auf seinem oberen Mittelpunkt dreht. Also werde ich hier gehen und transformieren Ursprung oben hinzufügen. Und jetzt können Sie sehen, dass es den oberen Mittelpunkt als Referenz beim Drehen nimmt. Gut. wir nun überprüft haben, wie die Funktion „Drehen x“ funktioniert, werde ich den grünen Hintergrund um 270 Grad drehen, nicht um 60 Grad. Also werde ich das 60 auf 270 ändern. Jetzt können Sie sehen, dass es nicht mehr sichtbar ist, da es jetzt gedreht wurde und hinter dem Knopf sitzt. Jetzt schwebe ich über den Link. Ich werde es so machen, dass das Drehen wieder auf 0 zurückgesetzt wird, so dass es die Schaltfläche bedeckt. Also werde ich gleich hierher gehen. Und wenn ich über das Anker-Tag schwebe, werde ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde Transformieren, Drehen X 0 hinzufügen. Dann wollen wir, dass dies reibungslos geschieht. Also werde ich hier rauf gehen und Übergang hinzufügen, alle 0,5 Sekunden. Und jetzt, wenn ich gehe und den Mauszeiger über die Schaltfläche, können Sie sehen, dass sich der grüne Hintergrund dreht und die Schaltfläche so bedeckt, wie wir wollen. Cool. Jetzt, nachdem wir den grünen Hintergrund erstellt haben, wollten wir, ist es Zeit, den roten zu erstellen. Das wird ziemlich einfach sein. Wir kopieren nur das gesamte vorher Pseudo-Element. Fügen Sie es erneut ein. Und wir werden nur die Hintergrundfarbe in Rot ändern. Und wir wollen, dass es nach dem grünen rotiert. So werden wir Übergangsverzögerung 0,25 Sekunden hinzufügen. Dann gehe ich hier runter. Und ich werde das kopieren und vorher zu nachher ändern. Wenn wir den Mauszeiger über die Schaltfläche bewegen, wird auch der rote Hintergrund angezeigt. Also, wenn ich gehe und den Mauszeiger über die Schaltfläche, können Sie sehen, dass der grüne Hintergrund erscheint. Und danach macht der rote zwei, was uns den Effekt gibt, den wir wollen. Und wir können diesen Effekt leicht ändern, wenn wir wollen. Nehmen wir zum Beispiel an, ich möchte, dass der rote Hintergrund sich auf seinem unteren Mittelpunkt dreht, nicht auf dem oberen. Was wir tun können, ist, dass wir einfach gehen und den Transformationsursprung hier auf dem roten Hintergrund zu unten anstelle von Tab ändern können . Und wie Sie sehen können, lässt es sich dadurch an der unteren Kante drehen, was uns einen anderen Effekt verleiht. 24. 25 – kreative Ebenen: Hallo an alle. Willkommen zu dieser neuen Lektion im Kurs, wo wir diesen schönen Schwebeeffekt über diesen Button erstellen werden. Wenn wir also einen Blick auf den Hintergrund werfen, der hier in den Rang verschwindet, können Sie sehen, dass vier Dinge gleichzeitig vor sich gehen, er bewegt sich nach rechts, während er sich auf seiner y-Achse dreht, seine Deckkraft nimmt ab und seine Größe wird kleiner alle zur gleichen Zeit. Inzwischen hat der Hintergrund, der hereinkommt, einen umgekehrten Effekt. Die Deckkraft steigt in. Es wird auch größer und dreht sich nach rechts, um die ersten Hintergründe Platz einzunehmen. Nun, das mag verwirrend klingen, aber ich verspreche dir, du wirst es einfach finden, sobald wir anfangen, es zu erschaffen. Also lasst uns das wirklich machen. Ich werde hier in meinem HTML gehen und ich werde ein Anker-Tag hinzufügen und einfach Button sagen. Dann werde ich zu meinem CSS gehen, um das zu stylen. Ich werde den Link anvisieren. Dann füge ich Polsterung hinzu, 20 Pixel von oben und unten und 40 Pixel von links und rechts. Dann werde ich Text Transformation hinzufügen. Großbuchstaben. Textdekoration Keiner. Buchstabenabstand Für Pixel. Farbe. Diese gelbe Farbe. Bordüre. Drei Pixel, solide. Und unsere gelbe Farbe. Die Schriftgröße: 30 Pixel. Und schließlich, Position. Relativ. Gut. Jetzt können Sie sehen, dass wir unseren Knopf haben und es sieht ziemlich gut aus. Als nächstes müssen wir den Hintergrund erstellen, nach rechts verschwindet und derjenige, der seinen Platz einnimmt. Wir werden mit den einen Vorteilen beginnen und wir werden es mit dem vorher Pseudo-Element erstellen. Also werde ich gleich hierher gehen und vorher einen Doppelpunkt sagen. Und darin werde ich Content-Schaltfläche hinzufügen, weil wir die Wort-Schaltfläche haben wollten , dann Position absolut, oben 0, links 0. Und weil es die gleiche Breite und Höhe wie der ursprüngliche Knopf benötigt, werde ich Breite 100% und Höhe 100% hinzufügen. Dann werde ich eine Hintergrundfarbe hinzufügen. Diese dunkelgraue Farbe, dann färben Sie unsere gelbe Farbe. Ehrfürchtig. Jetzt können Sie sehen, dass wir den dunkelgrauen Hintergrund haben und es ist oben auf der Schaltfläche eingestellt, die die volle Breite und Höhe einnimmt. Aber Sie können sehen, dass die Wort-Schaltfläche nicht horizontal und vertikal zentriert ist. Also lasst uns darum kümmern. Wir werden es mit Flexbox zentrieren. Also werde ich hier gehen und Display-Flex hinzufügen, dann das Inhaltscenter ausrichten, um es horizontal zu zentrieren. Und richten Sie Elemente zentrieren sowie vertikal zentrieren, Natürlich. Alles klar, da gehen wir. Als nächstes müssen wir an dem Hover-Effekt arbeiten. Wenn Sie sich erinnern, sollte sich dieser Hintergrund nach rechts bewegen, um die Y-Achse drehen, kleiner werden und gleichzeitig transparent sein. Also lasst uns das machen. Ich werde hier gehen und sagen, ein Doppelpunkt schweben. Ich möchte einige Änderungen vornehmen, die am vorigen Pseudo-Element geschehen sind. Ich werde links 100% hinzufügen. Und um diese Positionsänderung reibungslos zu machen, werde ich hier in das vorher Pseudo-Element hinauf gehen und ich werde Übergang hinzufügen , alle 0,5 Sekunden. Wenn wir jetzt gehen und den Mauszeiger über die Schaltfläche bewegen, sollte sich der dunkelgraue Hintergrund so nach rechts bewegen. Und um es kleiner zu werden und auf seiner Y-Achse zu drehen, werde ich hier gehen und Transformationsskala 0 hinzufügen, um es kleiner zu machen, bis es verschwindet. Und drehen Sie y um 360 Grad, um es auf seiner Y-Achse zu drehen. Also jetzt, wenn ich zum Browser gehe und mit dem Mauszeiger über die Schaltfläche, können Sie sehen, dass es sich in verschwindet, während Sie nach rechts bewegen, was uns diesen schönen Effekt gibt. Und damit seine Deckkraft abnimmt, können wir hier gehen und Opazität 0 hinzufügen. Und da gehen wir. Hier ist der genaue Effekt, den wir auf dem ersten Hintergrund wollen. Als nächstes werden wir an dem zweiten Hintergrund arbeiten, der von links nach rechts kommt. Wir werden in diesem Fall das After-Pseudo-Element verwenden. Also werde ich all das kopieren, einfügen und vorher zu nachher wechseln. Dann brauchen wir seine ursprüngliche Position auf der linken Seite zu sein. Also werden wir links ändern, genau hier auf minus 100%. Jetzt können Sie sehen, dass es auf der linken Seite unseres Knopfes sitzt. Also wollen wir es unsichtbar machen und wir werden es so machen, dass, wenn wir den Mauszeiger darüber bewegen, es sichtbar und nach rechts bewegt und drehen wird. Also im Grunde werden wir umkehren, was wir auf dem ersten gemacht haben. Also, um das zu tun, werde ich hier gehen und Transformation hinzufügen, 0 skalieren und y 0 Grad drehen. Wir werden auch Opazität 0 hinzufügen. Und jetzt, wenn wir über den Link schweben, werden wir einige Änderungen am After-Pseudo-Element hinzufügen. Wir fügen links 0 hinzu, um es oben auf unserem Link zu positionieren. Und wir werden Transformation hinzufügen, eins skalieren und drehen. Warum? 360 Grad, um es größer zu werden und gleichzeitig zu drehen. Wir werden auch Opazität eins hinzufügen, um es zeigen zu lassen und haben diese schöne Fade in Wirkung. Lassen Sie uns jetzt gehen und bewegen Sie den Mauszeiger über die Schaltfläche und Sie können sehen dass der erste Hintergrund nach rechts bewegt und der zweite seinen Platz einnimmt. Aber wir wollen den Text unsichtbar machen. Wir möchten nicht, dass die Wort-Schaltfläche auf der Schaltfläche selbst angezeigt wird. Also gehe ich zurück zum Link-Selektor und ich werde die Farbe in transparent anstelle dieser Farbe ändern. Und jetzt können Sie sehen, die Farbe ist unsichtbar mehr. Und wir haben genau die Wirkung, die wir wollen. 25. 26 – kreative 3 Kreise bis background: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen schönen kleinen Button Hover-Effekt erstellen. Wenn ich den Mauszeiger über den Link führe, kommen drei Kreise rein, um den Link zu vertuschen. Dann erscheint ein Hintergrund hinter ihnen und deckt den gesamten Link ab und vervollständigt den gesamten Effekt. Mal sehen, wie wir das tun können. Ich werde hier in meinem HTML beginnen, indem ich einen Link hinzufüge. Und darin werde ich eine Spanne hinzufügen und sie leer lassen. Wir werden sehen, warum wir diesen Bandleiter in der Lektion brauchen. Dann werde ich einfach sagen, schweben Sie mich. Sofort. Ich werde zu meinem CSS gehen. Ich werde den Link zielen und Breite hinzufügen 220 Pixel, Höhe 80 Pixel. Okay, jetzt werde ich Farbe hinzufügen. Diese gelbe Farbe. Hintergrundfarbe, transparent, da wir keine Hintergrundfarbe wollen. Schriftgröße, 26 Pixel, Textdekoration. Keine, um die Unterstreichungen zu entfernen. Text-Transformation. Großbuchstaben, um alle Buchstaben Großbuchstaben zu machen. Um dann den Text horizontal und vertikal zu zentrieren, fügen wir Textausrichtung, Mittelpunkt und Zeilenhöhe hinzu. 80 Pixel. Cool. Jetzt schließlich werde ich Übergang hinzufügen. Alle fünf Sekunden. Und Position. Relativ. Ehrfürchtig. Lassen Sie uns nun daran arbeiten, die Kreise zu erstellen, die von links und rechts eintreten. Wenn wir den Mauszeiger über den Link bewegen, werden wir die Vorher- und Nachher-Pseudo-Elemente verwenden, um sie zu machen. Also werde ich hier gehen und ich werde vorher einen Doppelpunkt sagen, dann Komma und einen Doppelpunkt danach. Und darin werde ich Inhalte hinzufügen. Leere Saiten. Position, absolut. Top, 50 Prozent. Breite, 20 Pixel, Höhe, 20 Pixel ebenfalls. Hintergrundfarbe, unsere gelbe Farbe. Und um sie Kreise zu machen, werde ich Grenzradius hinzufügen, 50 Prozent. Okay, jetzt können Sie sehen, dass wir die beiden Kreise haben. Das links ist das Before Pseudo-Element und das auf der rechten Seite ist das After-Pseudo-Element. Und weil wir sagten, sie sind Top-Eigentum zu 50 Prozent, ihre obere Kante liegt bei 50 Prozent von der Spitze der Verbindung. Aber wir wollen, dass ihr Mittelpunkt 50 Prozent vom oberen Rand der Verbindung entfernt ist, nicht von den oberen Kanten. Was wir also tun können, ist, dass wir sie um die Hälfte ihrer Höhe nach oben übersetzen können. Dies wird sie ein wenig nach oben verschieben und sie richtig sintern. Also werde ich zu meinem CSS zurückkehren und innerhalb der Vor- und Nachher Pseudo-Elemente werde ich transformieren, Y übersetzen, um sie nach oben zu verschieben, werde ich minus 50 Prozent hinzufügen. Und schließlich werde ich einen Übergang hinzufügen, alle 0,3 Sekunden. So können Sie jetzt sehen, dass die Vor- und Nachher Kreise perfekt vertikal innerhalb der Verbindung zentriert sind. Aber Sie können auch sehen, dass sie so gut aussehen , dass vor dem Pseudo-Element den Buchstaben H bedeckt und das Nach-Element fast den Buchstaben E berührt. Und das liegt daran, dass jede horizontale Position für sie angeben. Also sitzen sie einfach vor und nach dem Text des Links. Lassen Sie uns also eine horizontale Position für sie festlegen. Ich werde das vorher Pseudo-Element allein anvisieren. Und ich werde links 0 hinzufügen. Dies wird auf der linken Seite des Links positioniert, nicht im Text innerhalb des Links. So wie so. Dann werde ich den Nachmittag anvisieren und auch schreiben 0 hinzufügen. Und dies wird den Nach-Kreis diesmal rechts von der Länge positionieren. Also gut, wenn du dich daran erinnerst, als wir über die Verbindung schwebten, gab es drei Kreise, nicht zu schlimm. Eigentlich gibt es vier, aber zwei von ihnen sitzen übereinander und erscheinen als ein Kreis. Wir werden sehen, wie das geht. Um die anderen beiden Kreise zu machen, werden wir die Box Shadow Eigenschaft verwenden, die es uns ermöglicht, einen Schatten zu HTML-Elementen hinzuzufügen. Lassen Sie uns also sehen, wie wir Kreise erstellen können, die identisch sind mit denen, die wir bereits mit der Box Shadow Eigenschaft haben. Zuerst werde ich mit dem vorher Pseudo-Element beginnen. Ich werde hier gehen und Kastenschatten hinzufügen. Und der Box-Shadow akzeptiert vier Werte. Der erste Wert ist der horizontale Abstand zwischen dem Element und dem hinzuzufügenden Schatten. Wenn wir also 10 Pixel hinzufügen, wird der Schatten 10 Pixel vom Element nach rechts sein. Ich möchte, dass der Schatten 100 Pixel vom vorherigen Pseudo-Element nach links ist. Also werde ich als nächstes minus 100 Pixel hinzufügen, der zweite Wert der box-shadow Eigenschaft ist der vertikale Abstand zwischen dem Element und dem Schatten. Und wir wollen, dass das Element und der Schatten auf der gleichen Ebene liegen. So werden wir den vertikalen Abstand auf 0 setzen. Der dritte Wert der Eigenschaft „box shadow“ ist, wie unscharf der Schatten sein wird. Aber wir wollen eigentlich nicht, dass unsere verschwommen ist. Wir möchten, dass es so scharf ist wie das vorher Pseudo-Element, also werden wir es auch auf 0 setzen. Und schließlich ist der letzte Wert der box-shadow Eigenschaft die Farbe des Schattens. Lassen Sie es uns vorerst auf grün setzen. Wenn ich nun gehe und die Seite neu lade, können Sie sehen, dass ein neuer grüner Kreis auf der linken Seite des vorherigen Pseudo-Elements erschienen ist. Und der horizontale Abstand zwischen ihnen beträgt 100 Pixel, während der vertikale Abstand 0 ist. So sitzen sie gleichermaßen miteinander. Und Sie können sehen, dass es scharf ist, weil wir den Unschärfewert dafür auf 0 setzen. Alles klar, ich werde dasselbe für das After-Pseudo-Element tun, aber dieses Mal werde ich den Schatten auf der rechten Seite sitzen lassen. Also werde ich diese Box kopieren. Shadow Eigenschaft. Fügen Sie es innerhalb des After-Pseudo-Elements ein und ketten Sie minus1 100 Pixel auf 100 Pixel. So wird es auf der rechten Seite sein, nicht auf der linken Seite. Und ich werde auch die Farbe in Blau ändern. Cool. Jetzt haben wir vier Kreise. Die beiden auf der linken Seite befinden sich vor dem Pseudo-Element und seinem Schatten, während die beiden auf der rechten Seite das After-Pseudo-Element und sein Schatten sind. Lassen Sie uns nun an dem Hover-Effekt arbeiten. Ich gehe hier und sag einen Doppelpunkt, Schweben Dickdarm vorher. Ich werde links 50% hinzufügen. Dadurch wird das vorher Pseudo-Element um 50% der Längenbreite nach rechts verschoben und sein Schatten wird sich natürlich mit ihm bewegen. Wenn ich nun den Mauszeiger über den Link führe, können Sie sehen, dass sich das Pseudo-Element mit seinem Schatten bewegt. Aber wenn Sie schweben, wollen wir nicht, dass dieser Schatten den gleichen Abstand von 100 Pixel von der linken Seite beibehält . Wir wollen, dass es nach rechts geht, sagen wir 30 Pixel. Wir können das wirklich leicht umgehen, indem wir direkt hier gehen und Boxschatten, 30 Pixel statt minus 100, dann 0, 0 und grün hinzufügen 30 Pixel statt minus 100, . Wenn ich nun den Mauszeiger über den Link bewege, können Sie sehen, dass sich der grüne Schatten nun um 30 Pixel nach rechts vom Kreis der Pseudoelemente bewegt können Sie sehen, dass sich der grüne Schatten nun um 30 Pixel nach rechts vom Kreis der Pseudoelemente bewegt. Alles klar, lassen Sie uns dasselbe für das After-Pseudo-Element tun. Ich werde diesen gesamten Codeblock kopieren, ihn einfügen und vorher zu nachher wechseln. Dann werde ich von links nach rechts wechseln. Es bewegt sich also um 50% der Verbindungsbreiten zusammen mit seinem blauen Schatten nach links. Aber dann wollen wir, dass sich der Schatten um 30 Pixel auf die linke Seite bewegt. Also werden wir hier 30 Pixel auf minus 30 Pixel und schließlich grün zu blau ändern . Und jetzt, wenn ich den Mauszeiger über den Link zeige, kann man sehen, dass sich der Nach-Kreis nach links bewegt und sein blauer Schatten bewegt sich auch, bis er einen Punkt links vom Element um 30 Pixel erreicht. Ehrfürchtig. Wir haben fast die Wirkung, die du willst. Aber eins ist noch übrig. Wir möchten, dass die Vorher- und Nachher-Pseudo-Elemente in der gleichen Position enden , so dass sie übereinander angezeigt werden und als ein Kreis erscheinen, so dass wir nur drei Kreise haben. Sehen Sie, als ich sagte, links zu 50 Prozent hier, bedeutet das, dass das vor Pseudo-Element bewegt sich bis seine linke Kante genau bei 50 Prozent ist. Aber das wollen wir nicht. Wir wollen, dass es genau auf die 50 Prozent der Verbindungsbreiten zentriert ist. Was wir also tun können, ist, dass wir es um die Hälfte seiner Breite nach links übersetzen können. Also werde ich hier gehen und transformieren hinzufügen, x minus 50% übersetzen. Und weil wir hier translate y gesetzt haben, auf minus 50% ist gut, müssen wir dem Browser sagen, dass wir wollen, dass es minus 50% bleiben. Also werde ich wieder nach unten gehen und Y minus 50% übersetzen hinzufügen Dann werde ich dasselbe für das After-Pseudo-Element tun. Ich werde es um die Hälfte seiner Breite nach rechts verschieben , so dass es an der gleichen Position wie die Vorher ist. Also werde ich Transformationsübersetzung X 50 Prozent hinzufügen, was es um 50% seiner Breite nach rechts verschieben und y minus 50% übersetzen wird. Jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass die Vorher und Nachher Pseudo-Elemente jetzt übereinander sitzen und zu einem Kreis geworden sind . Nun gehen wir und ändern die Farbe der Schattenkreise auch gelb. Okay, jetzt werden wir auf dem gelben Hintergrund arbeiten. Ich werde die Spanne verwenden, die wir in unserem Link hinzugefügt haben, um es zu erstellen. Also werde ich die Spanne an Position absolut, oben, 0, links, 0, Breite, 100%,Höhe, 100% als auch anvisieren 0, links, 0, Breite, 100%, . Und Hintergrundfarbe. Unsere gelbe Farbe. Und Randradius, acht Pixel. So können Sie jetzt sehen, dass der gelbe Hintergrund oben auf dem Link sitzt und es vertuscht. Also lasst uns weitermachen. Ich werde hierher zurückgehen und Transformation, Maßstab 0, Übergang 0,3 Sekunden hinzufügen Maßstab 0, . Dann gehe ich hier runter. Und wenn ich über den Link schwebe, werde ich einige Änderungen in der Spanne vornehmen. Ich werde Transformationsmaßstab eins hinzufügen, damit es wieder größer wird. Und dann Übergangsverzögerung 0,4 Sekunden. So wird es warten, bis die Kreise hereinkommen. Wenn ich jetzt gehe und mit dem Mauszeiger über den Link gehe, kannst du sehen, dass der gelbe Hintergrund größer wird, nachdem die Kreise sich bewegt haben. Lassen Sie uns nun die Linkfarbe beim Schweben ändern. Ich werde hierher zurückgehen und ein auf Schweben sagen. Und ich werde Farbe hinzufügen. Diese dunkelgraue Farbe und Übergangsverzögerung, 0,4 Sekunden als auch. So, jetzt können Sie sehen, wenn ich schwebe, passiert nichts, weil der gelbe Hintergrund den Text verdeckt. Was wir also tun können, ist, dass wir hier in den Span-Selektor gehen und Z-Index minus1 hinzufügen können , um den Text vor dem Hintergrund erscheinen zu lassen. Und wir werden das auch für die Vorher- und Nachher-Pseudo-Elemente tun. Wenn wir den Mauszeiger zeigen, können Sie sehen, dass der Text jetzt vor dem gelben Hintergrund erscheint. Und schließlich wird eine Sache mit dem linken Auge direkt hier innerhalb des Vorher- und Nachher-Pseudo-Elemente-Selektors gehen. Und ich werde Opazität 0 hinzufügen. Wenn ich dann über den Link schwebe, werde ich ihre Deckkraft wieder zu einem bringen. Jetzt sind sie verschwunden. Aber wenn ich gehe und mit dem Mauszeiger über den Link gehe, erscheinen sie wieder. Dann erscheint der gelbe Hintergrund hinter ihnen und gibt uns genau den Effekt, den wir wollen. 26. 27 – kreative hover: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen schön aussehenden Button Hover-Effekt erstellen. Wenn Sie also einen Blick auf die Schaltfläche werfen und sehen, dass es hier zwei Hintergründe gibt, den blauen und den roten. Der blaue wird etwas nach oben links verschoben, während der rote in Richtung der unteren Rate verschoben wird. Und wenn Sie den Mauszeiger über die Verknüpfung bewegen, können Sie sowohl eine gedrehte in einer 3D-Perspektive auf der X-Achse sehen. Also lassen Sie uns das zusammen schaffen. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Und ich werde nur sagen, Button Hover Effekt. Dann gehe ich zu meinem CSS. Und ich werde das Anker-Tag anvisieren und Breite hinzufügen. 300 Pixel. Höhe: 60 Pixel. Textdekoration Keiner. Text-Transformation. Großbuchstaben, Hintergrund. Transparent, weil wir die Vorher- und Nachher-Pseudo-Elemente verwenden , um unsere Hintergründe zu erstellen. Dann, um den Text innerhalb des Links horizontal und vertikal zu zentrieren, werde ich sagen, Text ausrichten, Mitte und Zeilenhöhe. 60 Pixel. Noch mehr dazu werde ich Schriftgewicht, Fett, Buchstabenabstand zu Pixeln hinzufügen Fett, Buchstabenabstand zu , dann Position, relativ. Und schließlich Übergang oder 0,2 Sekunden. Cool. Also haben wir jetzt fertig mit der Gestaltung unserer Schaltfläche. Lassen Sie uns daran arbeiten, die beiden Hintergründe zu erstellen. Ich gehe gleich hierher und sag vorher einen Doppelpunkt. Und ich werde Inhalte hinzufügen. Leere Saiten. Position absolut, oben, 0, links 0. Und wir wollen, dass der Hintergrund die gleiche Breite und Höhe wie die Verbindung hat. Also werde ich Breite hinzufügen, 100%. Höhe Dann Hintergrundfarbe. Diese schöne hellblaue Farbe. So können Sie jetzt sehen, dass der blaue Hintergrund die ganze Breite und Höhe der Verbindung einnimmt und sie verdeckt. Gehen wir also zurück und machen den Text des Links sichtbar. Ich werde das tun, indem ich hier gehe und Z-Index minus 1 hinzufüge. In Ordnung, wenn Sie sich erinnern, wurde der blaue Hintergrund ein wenig in die linke obere Ecke unseres Links verschoben. Lasst uns das machen. Ich werde hier gehen und den Spitzenwert auf minus drei Pixel anstelle von 0 ändern, so dass er ein wenig nach oben verschoben wird. Und ich werde auch links auf minus drei Pixel ändern. So wird es nach links verschoben. Cool. Lassen Sie uns nun den roten Hintergrund erstellen. Ich werde das alles kopieren. Fügen Sie es erneut ein und wechseln Sie vorher zu nachher. Dann wollen wir, dass es nach unten und nach rechts verschoben wird. Also anstelle von links minus drei Pixel ändere ich es in drei Pixel und oberste 23 Pixel. Dann werde ich natürlich die Hintergrundfarbe auf diese hellrote Farbe ändern . Und jetzt können Sie sehen, dass der rote Hintergrund oben auf dem blauen sitzt und ihn bedeckt. Aber wir wollen, dass sie ineinander gemischt werden. Wir können das leicht tun, indem wir zum Vorher-Selektor zurückkehren und Mix, Mischmodus, Multiplikation hinzufügen . Und wir werden dasselbe für das After-Pseudo-Element tun. Und lassen Sie uns tatsächlich die Farbe des Links auf Weiß anstelle dieser hässlichen blauen Farbe ändern. Jetzt können Sie sehen, dass die beiden Hintergründe miteinander vermischt sind und viel schöner aussehen. Und jetzt müssen wir an dem Schwebeeffekt arbeiten. Fahren Sie mit dem Mauszeiger über den Link. Wir möchten, dass sich die beiden Hintergründe in einer 3D-Umgebung auf der X-Achse drehen. Also, um das zu tun, werde ich hier gehen und sagen, ein Doppelpunkt schweben. Früher einen Doppelpunkt. Und zuerst verschieben wir den blauen Hintergrund um sechs Pixel nach oben und ändern seinen linken Wert auf 0. Also werde ich oben minus sechs Pixel links 0 hinzufügen. Dann werde ich Transformation hinzufügen. Und weil wir möchten, dass die Rotation in einer 3D-Umgebung stattfindet, werde ich Perspektive 10000 hinzufügen und dann x 75 Grad drehen. Und um die Bewegung reibungslos zu machen, werde ich innerhalb des vorher Pseudo-Elementselektors gehen und ich werde den Übergang 0, 0,2 Sekunden hinzufügen . Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Link zeige, sehen Sie, dass sich der blaue Hintergrund in einer 3D-Umgebung auf der X-Achse dreht, aber das ist nicht der Effekt, den wir wollen. Es dreht sich um seinen Mittelpunkt, so dass es die Tags verdeckt, aber wir möchten, dass es sich um den oberen Mittelpunkt dreht. Also werde ich zum vorher Pseudo-Element-Selektor zurückkehren und ich werde Transformationsursprung oben hinzufügen. Wenn ich jetzt zurückgehe und schwebe, kann man sehen, dass der blaue Hintergrund auf der X-Achse so dreht, wie wir es wollen. Nun, lasst uns dasselbe für den roten Hintergrund tun. Ich kopiere das, füge es ein und ändere es vorher zu nachher. Dann oben auf sechs Pixel statt minus 6 und drehen Sie x auf minus 75 Grad, weil wir wollen, dass es in die andere Richtung drehen. Und damit die Bewegung reibungslos ablaufen kann, werde ich in das After-Pseudo-Element gehen und Übergang hinzufügen, alle Nullen. Und schließlich, um den Hintergrund auf seinem unteren Mittelpunkt drehen zu lassen, werde ich den Transformationsursprung unten hinzufügen. Und jetzt, wenn ich auf den Link gehe und schwebe, können Sie sehen, dass sich die beiden Hintergründe auf der X-Achse drehen, was uns den Effekt gibt, den wir wollen. Nun, eine Sache bleibt übrig, über die Verbindung zu schweben. Wir wollen seine Farbe ändern, damit wir sie sehen können. Ich werde zu meinem CSS zurückkehren und sagen, einen Doppelpunkt schweben Farbe, diese dunkelgraue Farbe. Und jetzt können Sie sehen, dass wir endlich genau den Effekt bekommen, den wir haben. Und das ist sehr nett. 27. 28 – kreative splitted: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen Schaltflächen-Hover-Effekt erstellen. Wenn ich mit dem Mauszeiger über die Schaltfläche führe, kommen diese vier Teile mit gelbem Hintergrund herein und decken den Knopf ab. Zur gleichen Zeit, gibt uns diesen schönen Effekt. Wir werden die Vorher und Nachher Pseudo-Elemente verwenden, um diese vier Teile zu erstellen , und wir werden für jedes Teil eine andere Position hinzufügen. Wenn wir dann den Mauszeiger über den Link bewegen, bewegen sich die vier Teile zusammen, um den Link abzudecken und uns den schönen Effekt zu geben. Wir werden auch ein wenig herumspielen und Dinge in unserem Code ändern , um einige coole Effekte mit der gleichen Idee zu erhalten. Also fangen wir an, das zu tun. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Dann werde ich in ihm eine Spanne hinzufügen. Und sag einfach, schweben Sie mich. Wir haben eine Spanne hier innerhalb des Anker-Tags hinzugefügt, weil wir vier Teile des gelben Hintergrunds erstellen möchten , die die Schaltfläche verdecken. Also werden wir zwei von ihnen mit dem Vorher und Nachher Pseudo-Element des Anker-Tags selbst erstellen . Und die anderen beiden werden mit den Vorher- und Nachher-Pseudo-Elementen der Spanne erstellt , die wir gerade hinzugefügt haben. Okay, gehen wir zu unserem CSS, um den Effekt zu erstellen, den wir wollen. Ich werde damit beginnen, das Anker-Tag selbst auszurichten, damit es so aussieht, wie wir es wollen. Und ich werde Textdekoration hinzufügen. Keiner. Text-Transformation. Großbuchstaben Schriftgröße: 25 Pixel. Farbe. Diese schöne gelbe Farbe. Buchstabenabstand von drei Pixeln, um einige Leerzeichen zwischen den Buchstaben zu erhalten. Dann werden 25 Pixel von oben und unten und50 Pixel von links und rechts aufgefüllt, dann drei Pixel umrandet 50 Pixel von links und rechts aufgefüllt, , solide. Und unsere gelbe Farbe. So können Sie sehen, dass unsere Schaltfläche viel schöner aussieht. Lasst uns weitermachen. Ich gehe zurück in den Link und füge den Übergang 0, 0, 0,5 Sekunden hinzu. Und schließlich, Position relativ. Okay, jetzt werden wir an den vier Teilen des gelben Hintergrunds arbeiten , die hereinkommen und den Link vertuschen. Wenn wir den Mauszeiger darüber bewegen, werden wir die ersten beiden mit den Vorher- und Nachher-Pseudo-Elementen des Anker-Tags selbst erstellen . Also werde ich gleich hierher gehen und vorher einen Doppelpunkt sagen. Dann werde ich Komma hinzufügen. Und sag danach einen Doppelpunkt. Und ich werde Inhalte hinzufügen. Leere Strings, Position, absolute Breite, 25 Prozent. Die Breite jedes Teils beträgt also 25 Prozent des Anker-Tags. Und das macht Sinn, denn wenn alle vier Teile kombiniert werden, werden sie 100% der Länge Breite betragen und sie werden es vollständig verdecken. Dann werden wir Höhe hinzufügen, 100%. Hintergrundfarbe, unsere gelbe Farbe. Und um den Text oben auf dem Hintergrund erscheinen zu lassen, fügen wir den Z-Index negativ ein. Und schließlich werden wir Übergang 0, 0,5 Sekunden hinzufügen. Jetzt können Sie sehen, dass wir die beiden Teile haben, aber wir werden ihre Position jetzt ändern und ihnen die Ausgangsposition geben , die sie haben sollten, bevor sie schweben. Also lasst uns das machen. Ich werde dieses Mal nur das vorher Pseudo-Element anvisieren. Also werde ich vorher einen Doppelpunkt hinzufügen. Und innerhalb davon werde ich Top 0 hinzufügen und negative 25 Prozent links. Jetzt können Sie sehen, dass das Pseudo-Element vor links von unserem Link verschoben wurde, und dies ist die Position, in der wir es ursprünglich haben wollen. Lassen Sie uns auch die Position des After-Pseudo-Elements ändern. Wir gehen zurück zu unserem CSS und zielgerichtet durch Hinzufügen eines Doppelpunkts nach. Und wir werden sagen, Top-negativ 100% und links 25 Prozent. Jetzt können Sie sehen, dass das After-Pseudo-Element oben auf der Schaltfläche sitzt , weil wir es um 100% der Tastenhöhe nach oben verschoben haben. Und jetzt sitzt er auch bei 25 Prozent der Tastenbreite von links. Wenn wir nun den Mauszeiger über den Link bewegen, möchten wir, dass sie sich von ihrer Position zu einer Position bewegen, die sie dazu bringt, die Hälfte unserer Schaltfläche abzudecken, bis wir die anderen beiden Teile erstellen. Also werde ich hierher gehen und sagen, wenn ich über den Link schwebe, möchte ich einige Änderungen vornehmen, die mit dem Pseudo-Element vor geschehen sind. Ich werde Tab 0 und links 0 hinzufügen. So können Sie jetzt sehen, wenn wir den Mauszeiger über den Link dort bevor das Pseudo-Element bewegt, um das erste Viertel der Schaltfläche abzudecken. Weil wir gesagt, links auf 0 und oben ist bereits 0. Okay, lassen Sie uns am zweiten Teil arbeiten. Ich werde zurückgehen und sagen, wenn wir den Mauszeiger über den Link bewegen, ich möchte einige Änderungen vornehmen, die nach dem Pseudo-Element geschehen, ich werde auf 0 anstelle von negativem 100% ändern, so dass es nach unten bewegt, bis es die Schaltfläche bedeckt. Und verlassen Sie, wie es ist, 25 Prozent. Wenn ich nun gehe und mit dem Mauszeiger über die Schaltfläche gehe, kannst du sehen, dass der zweite Teil nach unten bewegt das nächste Viertel neben dem ersten Teil verdeckt. Und zusammen decken sie die Hälfte des Knopfes ab. In Ordnung, jetzt wollen wir die verbleibenden zwei Teile erstellen, und wir werden sie auch mit den Vor- und Nachher-Pseudo-Elementen erstellen. Aber dieses Mal werden sie die Vorher- und Nachher-Pseudo-Elemente der Spanne sein, die wir innerhalb des Anker-Tags hinzugefügt haben. Also werde ich zu meinem CSS gehen und hier gehen. Fügen Sie ein neues Komma hinzu und fügen Sie span Doppelpunkt vor einem anderen Komma und span Doppelpunkt nach. Wir haben sie hier hinzugefügt, weil sie die gleiche Breite und Höhe haben wie die anderen beiden Teile. Wir nur, was sich ändern wird, ist die Position. Wenn ich jetzt gehe und neu lade, können Sie sehen, dass wir die beiden Teile haben, aber lasst uns ihre Position ändern. Ich werde zu meinem CSS zurückkehren und vorher einen Span Doppelpunkt sagen. Und ich werde Top 100% hinzufügen. So wird es unter dem Knopf sitzen und 25 Prozent schreiben. So wird es bei 25 Prozent der Tastenbreite von rechts sitzen. So können Sie sehen, dass der dritte Teil in der Position sitzt, die wir wollen. Und wenn wir den Mauszeiger über den Link bewegen, möchten wir seine Position ändern, damit er den dritten Teil der Schaltfläche verdeckt. Also werde ich zu meinem CSS zurückkehren und vorher einen Doppelpunkt für schwebende Spannweite sagen . Und ich werde Top 0 hinzufügen, um es nach oben zu bewegen und 25 Prozent zu schreiben, wie es ist. Also, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der dritte Teil nach oben bewegt und den dritten Teil der Schaltfläche bedeckt. Cool. Jetzt lasst uns am vierten Teil arbeiten. Ich werde hier in meinem CSS gehen und danach einen Span Doppelpunkt hinzufügen. Und ich werde Top 0 hinzufügen und negative 25 Prozent schreiben. So wird dieser vierte Teil zunächst auf der rechten Seite der Schaltfläche verkauft werden, so. Alles klar, lassen Sie uns an dem Schwebeeffekt arbeiten. Ich gehe gleich hierher und sage einen Deckendarm-Doppelpunkt nach. Und ich werde Top 0 hinzufügen und auch 0 schreiben. Wenn ich nun den Mauszeiger über den Link gehe, können Sie sehen, dass sich die vier Teile von ihren Ausgangspositionen zu ihren neuen Positionen bewegen und die Schaltfläche zusammen vertuschen. Aber wir müssen jetzt die Farbe des Textes beim Schweben ändern. Also gehe ich zurück zu meinem CSS und sage a auf Schweben. Ich möchte, dass die Farbe zu dieser dunkelgrauen Farbe wechselt. Und auch, um die Teile außerhalb der Schaltfläche zu verstecken. Ich werde hier in den Anker-Tag-Selektor gehen. Und ich werde Überlauf versteckt hinzufügen. Jetzt können Sie sehen, wenn wir den Mauszeiger über die Schaltfläche bewegen, die vier Teile kommen rein und vertuschen sie vollständig, und die Textfarbe ändert sich zu grau, was uns den Effekt gibt, den wir wollen. Lassen Sie uns nun einen weiteren coolen Effekt mit kleinen Änderungen in unserem Code erstellen. Zuerst werde ich hier wieder in den Anker-Tag-Selektor gehen und den für jetzt versteckten Überlauf entfernen , damit wir sehen können, was wir tun. Dann werde ich zum ersten Teil der vier Teile gehen, der das vorher Pseudo-Element des Anker-Tags ist. Und ich werde die Top-Eigenschaft auf 100% anstelle von 0 und die linke auf 0 anstelle von negativen 25 Prozent ändern . So jetzt können Sie hier sehen, dass es eine neue Position unter dem Knopf hat. Dann werde ich zum vierten Teil gehen, dargestellt durch das nachfolgende Pseudo-Element der Spanne. Und ich werde auf negative 100% anstelle von 0 und rechts auf 0 anstelle von negativen 25 Prozent ändern . Und hier hat es eine neue Position über dem Knopf. Dann werde ich wieder in den Anker-Tag-Selektor gehen und Überlauf versteckt hinzufügen. Und jetzt, wenn ich den Mauszeiger über den Link, können Sie sehen, dass wir einen etwas anderen Effekt haben, als wir vorher hatten. Und es sieht auch Panzer aus. Ich möchte auch etwas hinzufügen. Ich denke, es wird schön sein, wenn wir den vier Teilen einige Übergangsverzögerungen hinzufügen , damit sie nacheinander erscheinen. Also wollen wir, dass der erste Teil sofort erscheint. Ich werde hier gehen und Übergangsverzögerung 0,1 Sekunden hinzufügen. Dann zum dritten Teil werde ich Übergangsverzögerung 0,2 Sekunden hinzufügen. Und zwei, der vierte Teil, werde ich Übergangsverzögerung 0,3 Sekunden hinzufügen. Und schließlich, lasst uns hier nach oben gehen und die Übergangsdauer auf 0,2 Sekunden ändern , damit es ein wenig schneller wird. Jetzt können Sie sehen, wenn ich gehe und den Mauszeiger über den Link, die vier Teile erscheinen nacheinander geben uns diesen wirklich coolen Effekt. 28. 29 – kreative border: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs CSS-Animationen, Übergänge und Transformationen. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, unsere Schaltfläche hat für lange Grenzen um sie herum. Sie haben nicht die gleiche Höhe oder Breite wie die Schaltfläche. Stattdessen haben die Ränder links und rechts größere Höhen und die Ränder oben und unten haben größere Breiten. Wir werden lernen, wie man das macht. Eine andere Sache ist die Ränder oben und links haben eine rote Farbe, während die Ränder auf der Unterseite und Schreiben eine gelbe Farbe haben, wie Sie sehen können. Und wenn wir den Mauszeiger über die Schaltfläche bewegen, können Sie sehen, wie die Grenzen austauschen. Der obere rote Rand bewegt sich nach unten und der untere gelbe Rand bewegt sich nach oben und nimmt seinen Platz ein. Während sich der rote linke Rand nach rechts bewegt. Und der gelbe rechte Rand bewegt sich nach links. Also wechseln sie nur die Positionen. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Zunächst werde ich zu meinem HTML gehen und ein Anker-Tag hinzufügen. Und sag einfach, schweben Sie mich. Dann werde ich zu meinem CSS gehen, um es zu stylen. Ich werde das Anker-Tag anvisieren, und ich werde beginnen, indem ich Textdekoration hinzufüge, keine, um die Unterstreichungen zu entfernen. Dann werde ich Text Transformation Großbuchstaben hinzufügen, um alle Buchstaben Großbuchstaben zu machen. Dann Schriftgröße, 22 Pixel, um den Text ein wenig größer zu machen, so dass wir es sehen können. Und Schriftfamilie. Verdana Buchstabenabstand, drei Pixel, um einen gewissen Abstand zwischen den Buchstaben zu haben. Okay, Jetzt werde ich Höhe hinzufügen, 80 Pixel, Breite 200 Pixel. Und um den Text horizontal und vertikal zu zentrieren, werden wir Zeilenhöhe hinzufügen, 60 Pixel, um ihn vertikal zu zentrieren. Und Text wird zentriert ausgerichtet, um es horizontal zu zentrieren. Und lasst uns die Textfarbe ändern. Wir werden hier gehen und Farbe hinzufügen, diese schöne gelbe Farbe. Dann schließlich werde ich Position relativ hinzufügen. Cool. Nun, um zu sehen, was wir tun, Lassen Sie uns eine temporäre Grenze zu unserer Schaltfläche hinzufügen. Ich werde hier gehen und Grenze hinzufügen. Zwei Pixel, einfarbig blau. Okay, jetzt wollen wir an den langen Grenzen arbeiten , die wir in unserer Demo gesehen haben, und herausfinden, wie wir sie erstellen können. Wir werden Schritt für Schritt zusammenarbeiten, um zu verstehen, wie sie entstehen. die linken und rechten Ränder zu erstellen, verwende ich zuerst das vorher Pseudo-Element. Ich gehe einfach hier und sag vorher einen Doppelpunkt. Und ich werde Inhalte hinzufügen. Leere Zeichenfolge, Position, absolute Höhe, 60 Pixel, Breite, 200 Pixel, oben 0 und links 0. Beachten Sie, dass diese die gleiche Breite und Höhe wie unsere Verbindung haben. So hat das vorher Pseudo-Element bis jetzt genau die gleiche Größe wie der Link und es sitzt oben drauf. Okay, Wir haben gesagt, dass wir die vorher Pseudo-Elemente verwenden werden , um die linken und rechten Grenzen zu erstellen. Also werde ich Rand hinzufügen, links, zwei Pixel, solide, rot. Und Grenze rechts. Zwei Pixel durchgefärbt. Unsere gelbe Farbe. Jetzt können Sie sehen, dass wir einen neuen linken roten Rand und dann einen neuen rechten gelben Rand haben. Und wir können sie kaum sehen, weil sie oben auf dem ursprünglichen blauen Rand sitzen , der den Knopf umgibt. Und das liegt daran, dass das vorher Pseudo-Element die gleiche Höhe und Breite wie die Schaltfläche hat. Also, um diese beiden neuen Ränder länger zu machen, Lassen Sie uns die Höhe des vorher Pseudo-Elements ändern. Ändern wir es zum Beispiel in 90 Pixel. Und jetzt können Sie sehen, dass die linken und rechten Ränder jetzt länger sind und sich über die Tastenhöhe hinaus erstrecken , weil sie das Pseudo-Element vor umgeben, das eine Höhe von 90 Pixeln hat, während die Schaltfläche eine Höhe von nur 60 Pixeln hat. So gibt es 30 Pixel länger als die Tastenhöhe. Ok? Aber jetzt wollen wir diese beiden Grenzen nach oben verschieben. Wir wollen nicht, dass sie unten länger sind, sondern auch oben mit gleichen Leerzeichen. Wir können das leicht machen, kein Problem, indem wir direkt hier gehen und oben auf negative 15 Pixel ändern. Dadurch wird das vorherige Pseudo-Element um 15 Pixel nach oben verschoben. Und auch die Grenzen werden verschoben. Okay, jetzt lassen Sie uns die oberen und unteren Ränder erstellen. Wir werden das After-Pseudo-Element verwenden, um sie zu erstellen. Also werde ich danach einen Doppelpunkt sagen. Und ich werde Inhalte hinzufügen. Auch leer. Position. Absolute, Höhe, 60 Pixel, die gleiche wie die Taste. Und Breite. 230 Pixel, diesmal, nicht 200 Pixel wie der Link, da der obere und untere Rand der nachher-Pseudo-Elemente um 15 Pixel auf der linken Seite und 15 Pixel auf der rechten Seite länger als die Breite der Schaltfläche sein wird . Dann werden wir zu 0 hinzufügen und 0 für jetzt links. Dann umranden oben. Zwei Pixel, einfarbig rot und Rand unten. Zwei Pixel, einfarbig gelb. So, jetzt können Sie sehen, wir haben die oberen und unteren Rand und sie sind länger als die Breite der Schaltfläche um 30 Pixel. Jetzt wollen wir die Grenzen wieder nach links verschieben. Also werde ich hier gehen und links auf negative 15 Pixel anstelle von 0 ändern. Ehrfürchtig. Jetzt brauchen wir den blauen Rand nicht mehr, also gehe ich gleich hierher und entferne ihn. Cool. Jetzt müssen wir an dem Hover-Effekt arbeiten. Denken Sie daran, wenn wir den Mauszeiger über den Link bewegen, wollen wir, dass die Grenzen ihre Plätze ändern. Die obere rote ist unten und die linke rote auf der rechten Seite. Dies kann wirklich leicht gemacht werden. Ich werde nur hier in meinem CSS gehen und eine hinzufügen.Und wenn ich darüber schwebe, werde ich einige Änderungen am vorherigen Pseudo-Element vornehmen, das den linken und rechten Rand darstellt. Ich füge Transformieren, Drehen Y hinzu. Dadurch werden sie vor dem Pseudoelement um 180 Grad auf der Y-Achse gedreht, was bedeutet, dass es auf der Y-Achse kippt. Und eine geordnete, dass diese Änderung reibungslos geschieht, werde ich hier innerhalb des vorher Pseudo-Elements hinauf gehen und ich werde Übergang oder 1 Sekunde hinzufügen. Wenn ich jetzt gehe und den Mauszeiger über den Link führe, können Sie sehen, dass sich das Pseudoelement um 180 Grad dreht, wodurch die Grenzen ihre Position genau so austauschen, wie wir wollen. Cool. Nun, machen wir das für die oberen und unteren Ränder. Ich kopiere diesen Codeblock, füge ihn erneut ein und ändere vorher zu nachher. Und drehen Sie y, um x zu drehen. Dann gehen Sie hier nach oben in das After-Pseudo-Element und fügen Sie Übergang hinzu. Oh, 1 Sekunde. Und los geht's. Die oberen und unteren Ränder ändern auch ihre Plätze, was uns diesen wirklich schönen Effekt gibt. Und wir können es noch schöner machen, indem wir zum Beispiel einige Verzögerungen hinzufügen , um nach Pseudo-Element zu sein. Also, wenn ich hier gehe und Übertragungsverzögerung 0,2 Sekunden hinzufügen, können Sie die obere und untere Grenze Gewicht 0,2 Sekunden sehen und dann beginnen, sich zu bewegen. Wir können auch einen weiteren netten Effekt bekommen. Wir können die oberen und unteren Ränder nur nach links und rechts bewegen , wenn sie fertig sind. Also werde ich hier in das vorher Pseudo-Element gehen und die Übergangsdauer auf nur 0,4 Sekunden anstelle von 1 Sekunde ändern . Und ich werde dasselbe für das After-Pseudo-Element tun. Und auch werden wir die Übergangsverzögerung auf 0,40 Sekunden anstelle von 0,2 ändern. Dadurchwerden sich die oberen und unteren Ränder erst bewegen, werden sich die oberen und unteren Ränder erst bewegen nachdem sich die linken und rechten bewegt haben, was uns diesen coolen neuen Effekt verleiht. 29. 30 – kreative button: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren coolen Button Hover-Effekt erstellen. Sie können sehen, dass diese Schaltfläche diese Rahmen in der oberen linken Ecke und in der unteren rechten Ecke hat . Und wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass die Breite und Höhe der Ränder zunimmt. Und sie geben uns diesen schönen Effekt. Also lasst uns anfangen, das zu schaffen. Ich werde hier im HTML beginnen und ich werde eine Schaltfläche hinzufügen und sagen Absenden. Dann gehe ich zu meinem CSS und ziele auf diese Schaltfläche. Fügen Sie dann Rahmen hinzu, keiner. Polsterung, 12 Pixel von oben und unten und 40 Pixel von links und rechts. Dann werde ich Hintergrundfarbe hinzufügen. Diese schöne orange Farbe. Dann färben Sie weiß. Und Font-Familie Banklinie. In Ordnung, ich werde auch Schriftgröße hinzufügen. 22 Pixel. Transformieren, Großbuchstaben, Cursor, Zeiger und schließlich Position relativ. Jetzt lassen Sie uns die Grenzen erstellen. Wir werden die Ränder erstellen, die in der oberen linken Ecke sitzen, zuerst mit dem vorher Pseudo-Element. Dann werden wir diejenigen erstellen, die sich in der unteren rechten Ecke befinden. Also werde ich das vorher Pseudo-Element des Buttons anvisieren. Und ich werde Inhalte hinzufügen. Leere Saiten. Positionieren Sie dann absolute Breite 24 Pixel. Höhe 24 Pixel ebenfalls. Dann oben 0, links 0. Und lassen Sie uns einen temporären roten Hintergrund hinzufügen. So jetzt können Sie sehen, dass das vorher Pseudo-Element dieser rote Hintergrund ist , der in der oberen linken Ecke der Schaltfläche sitzt. Weil wir beide seine oberen und linken Eigenschaften auf 0 gesagt haben. Und es hat eine Breite und eine Höhe von 24 Pixel. Aber wenn Sie sich erinnern, waren unsere Grenzen außerhalb des Knopfes. Sie wurden ein wenig nach links verschoben und nach oben sitzen wir nicht perfekt in der oberen linken Ecke. Also gehen wir zurück und machen das. Ich werde die linke Eigenschaft hier von 0 auf negative fünf ändern, so dass das vorher Pseudo-Element um fünf Pixel nach links verschoben wird. Dann werde ich auch dasselbe für die Top-Eigenschaft tun , so dass sie auch um negative fünf Pixel nach oben verschoben wird. Und jetzt können Sie sehen, dass der rote Hintergrund um fünf Pixel verschoben wird und außerhalb der Schaltfläche geht. In Ordnung, jetzt fügen wir den oberen und linken Rand hinzu. Ich gehe hierher zurück und füge Grenze hinzu. Zwei Pixel durchgehend. Unsere orangefarbene Farbe. Und Grenze links. Zwei Pixel durchgehend. Auch die orangefarbene Farbe. Und jetzt können Sie sehen, dass wir die Grenzen hinzugefügt haben. Als Nächstes. Wir wollen diese Grenzen animieren. Wir wollen sie wachsen lassen, wie wir es in unserem Beispiel gesehen haben. Dies wird einfach zu tun sein. Wir werden nur die Breite und Höhe des vorher Pseudo-Elements erhöhen und die Grenzen werden damit zunehmen. Also werde ich hierher gehen und wenn wir den Mauszeiger über die Schaltfläche bewegen, möchte ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde seine Höhe 100% und seine Breite 100% als auch machen. Und damit diese Änderung hier oben innerhalb des vorher Pseudo-Elements reibungslos geschieht und Übergang oder 0 bis fünf Sekunden hinzufügt. In Ordnung, jetzt, wenn ich gehe und den Mauszeiger über die Schaltfläche, können Sie sehen, dass das Pseudo-Element vor größer wird, es wird die gleiche Breite und Höhe wie die Schaltfläche und die Grenzen werden größer damit. Das einzige, was noch zu tun ist, ist, diesen roten Hintergrund zu entfernen. Also werde ich hierher zurückgehen und das tun. Und wenn ich wieder über die Schaltfläche schwebe, können Sie sehen, dass die Grenzen größer werden und sie geben uns diesen schönen Effekt. Und es ist der gleiche Effekt, den wir wollten. In Ordnung, lassen Sie uns schnell die Grenzen schaffen. In der unteren rechten Ecke werden wir das achter-Pseudo-Element verwenden, um diese zu erstellen. Ich werde das vorher Pseudo-Element kopieren. Fügen Sie es erneut ein, ändern Sie vorher in nachher. Dann werde ich nur einige Änderungen vornehmen. Ich werde von oben nach unten und von links nach rechts wechseln. Ich werde auch Grenze oben zwei Rand unten ändern. Und die Grenze von links bis rechts. Und jetzt können Sie sehen, dass wir diese beiden Grenzen hier in der rechten unteren Ecke sitzen. Gehen wir zurück und animieren sie auch. Ich werde einfach hier gehen und ein Komma hinzufügen und dann auch das After-Pseudo-Element anvisieren. Und jetzt, wenn ich zurückgehe und mit dem Mauszeiger über den Button fahre, kannst du sehen, dass die Ränder in der unteren rechten Ecke ebenfalls größer werden. Und jetzt haben wir genau den gleichen Effekt, den wir wollen. 30. 31 – kreative Knopfeffekt: Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren Button Hover-Effekt erstellen. So können Sie sehen, wenn ich über diese Schaltfläche schwebe, dieser coole Effekt passiert, wo wir einen schwarzen Hintergrund haben , der einblendet und sich ein wenig nach rechts dreht. Außerdem wird der erste Buchstabe B beim Drehen größer und gibt uns diesen coolen kleinen Effekt. Also lasst uns das schaffen. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Dann werde ich darin eine Spanne hinzufügen. Und innerhalb der Spanne werde ich nur den Buchstaben b hinzufügen, damit wir ihn separat animieren können. Dann, außerhalb der Spanne, werde ich den Rest der Welt hinzufügen. Dann werde ich zu meinem CSS gehen und das Anker-Tag anvisieren. Fügen Sie dann Textdekoration hinzu. Keiner. Breite, 160 Pixel, Höhe, 60 Pixel. Farbe, schwarz, Rand zwei Pixel. Solide. Schwarz. Um dann den Text horizontal und vertikal zu zentrieren, werde ich Text ausrichten, zentrieren und Zeilenhöhe, 60 Pixel hinzufügen . Wenn Schriftgröße 25 Pixel, Position relativ. Und schließlich Übergang oder 0,2 Sekunden. In Ordnung, jetzt lassen Sie uns den schwarzen Hintergrund erstellen, der einblendet und sich dreht. Wenn wir den Mauszeiger über den Link bewegen, werden wir das vorher Pseudo-Element verwenden, um das zu erstellen. Also werde ich es ausrichten und Inhalte hinzufügen. Leere Saiten. Position, absolut, oben, 0, links 0 als auch. Dann Breite 100%. Und Höhe 100%. Hintergrundfarbe, schwarz. Und damit der Text darüber erscheint, fügen wir Z-Index hinzu, negativ. Und jetzt können Sie sehen, dass wir einen schwarzen Hintergrund haben , der die gleiche Breite und Höhe wie die Verbindung hat, und es sitzt darüber. Wenn Sie sich also erinnern, sollte es unsichtbar sein, wenn wir den Mauszeiger über den Link bewegen, sollte er ein- und rotieren. Also lasst uns das machen. Ich gehe zurück und füge Deckkraft 0, dann Übergang oder 0,8 Sekunden hinzu. Dann werde ich einen Doppelpunkt hinzufügen, den Doppelpunkt vor der Deckkraft schweben. Wieder eins und transformieren. Drehen Sie 15 Grad. Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der schwarze Hintergrund beim Drehen verblasst und uns den Effekt gibt, den wir wollen. Aber lassen Sie uns die Farbe des Textes ändern, wenn Sie auf Weiß schweben, so dass wir es sehen können. Ich werde einen Doppelpunkt Hover hinzufügen. Dann werde ich die Farbe in Weiß ändern. Und jetzt können Sie sehen, dass sich die Farbe des Textes in Weiß ändert, wenn ich den Mauszeiger über den Link zeige. In Ordnung, lassen Sie uns daran arbeiten, den ersten Buchstaben zu animieren. Du erinnerst dich, dass wir es in eine Spanne eingeschlossen haben. Also lasst uns es anvisieren und Farbe hinzufügen. Transparent. Dann relativ positionieren. Und jetzt können Sie sehen, dass der erste Buchstabe unsichtbar ist , weil wir seine Farbe auf transparent setzen. Als nächstes werden wir das vor Pseudo-Element dieser Spanne anvisieren. Fügen Sie Inhalt, den Buchstaben B , so dass er über dem Buchstaben erscheint, dessen Farbe wir auf transparent gesetzt. Positionieren Sie dann absolute Farbe, Schwarz und Übergang oder 0,2 Sekunden. Und jetzt können Sie sehen, dass der erste Buchstabe wieder erscheint. Alles klar, lassen Sie uns an dem Hover-Effekt arbeiten. Wenn Sie mit dem Mauszeiger über den Link fahren. Ich möchte einige Änderungen am vorherigen Pseudo-Element der Spanne vornehmen. Zuerst möchte ich seine Farbe weiß machen. Dann möchte ich seine Größe vergrößern. Also werde ich Schriftgröße hinzufügen, 18 Pixel. Und schließlich möchte ich es drehen. Also werde ich Transformieren hinzufügen, 360 Grad drehen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Knopf schiebe, der erste Buchstabe wird größer, während er gleichzeitig rotiert, aber er verdeckt die anderen Buchstaben. Also müssen wir es etwas bewegen, damit es nicht die anderen Buchstaben dahinter verbirgt. Ich gehe zurück und füge negative Übersetzung 65 Prozent auf der X-Achse hinzu, um sie wieder nach links zu verschieben, und negative 10% auf der Y-Achse, um sie ein wenig nach oben zu verschieben. Und jetzt, wenn ich gehe und mit dem Mauszeiger über den Knopf, können Sie sehen, dass der erste Buchstabe jetzt in einer neuen Position sitzt und die anderen Buchstaben nicht mehr versteckt. Und das war's, Jungs. Das ist der Effekt, den wir wollten. 31. 32 – kreative Grenzen und Knopfdruck: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über die Schaltfläche führe, diese vier Ränder kommen rein und machen diesen coolen Effekt. So kommt das Leitungswasser von links nach rechts hinein. Die Quintessenz kommt von rechts nach links. Der linke Rand kommt von unten nach oben. Und die rechte Grenze kommt von der Torte unten. Und all dies geschieht zur gleichen Zeit gibt uns diesen coolen Effekt. Also fangen wir an, es zu erstellen. Ich werde hier in meinem HTML gehen und eine Schaltfläche hinzufügen. Dann werde ich in ihm sagen, Knopf. Dann werde ich auch eine Spanne innerhalb der Schaltfläche hinzufügen. Dann gehe ich zu meinem CSS, wähle die Schaltfläche aus und füge Hintergrundfarbe hinzu. Rot für jetzt. Bordüre. Keiner. Position. Relativ. Breite, 400 Pixel, Höhe, 120 Pixel. Dann transformieren Sie Text Großbuchstaben. Und um den Text innerhalb der Schaltfläche vertikal und horizontal zu zentrieren, werde ich Zeilenhöhe hinzufügen, 120 Pixel. Und Text richten Sie die Mitte aus. Dann werde ich Farbe, Weiß, Schriftgröße, 45 Pixel hinzufügen . Und schließlich, Buchstabenabstand, 15 Pixel. In Ordnung, lassen Sie uns die Grenze erstellen, die von links nach rechts kommt. Wir werden das vorher Pseudo-Element verwenden, um das zu erstellen. Also werde ich es ausrichten und Inhalte hinzufügen. Leere Saiten. Position absolut, oben, 0, links 0 als auch. Für den Moment. Dann Breite, 100% der Breite und Höhe der Schaltfläche, nur vier Pixel. Dann schließlich, Hintergrundfarbe. - Weiß Und jetzt können Sie sehen, dass wir diese Linie hier oben haben, und sie nimmt die volle Breite des Knopfes ein. Also gehen wir zurück und bewegen es nach links. Neben dem Knopf. Ich werde hier gehen und links auf negativ 100% anstelle von 0 ändern. Und jetzt ist die Linie nach links verschoben. Alles klar, ich gehe wieder hierher und füge den Übergang 0, 0, 5 Sekunden hinzu. Wenn Sie dann den Mauszeiger über die Schaltfläche bewegen, möchten wir, dass der Rahmen in seine ursprüngliche Position zurückkehrt. Also werde ich sagen, Button Doppelpunkt schweben. Ich werde einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde links zurück auf 0 setzen. Und jetzt, wenn ich den Mauszeiger über die Schaltfläche, können Sie sehen, dass die obere Zeile zurückgeht, um sie direkt über der Schaltfläche positioniert ist. In Ordnung, lassen Sie uns die Linie unten erstellen. Ich gehe zurück zum Code-Editor und kopiere das vorher Pseudo-Element. Fügen Sie es dann erneut ein und wechseln Sie vorher zu nachher. Wechseln Sie dann von oben nach unten, so dass es am unteren Rand der Schaltfläche sitzt. Dann werde ich auch von links nach rechts wechseln. So wird es diesmal nach rechts verschoben, nicht nach links. Und jetzt können Sie sehen, dass die zweite Zeile unten sitzt, Ende ist nach rechts verschoben. Also schwebe ich über den Knopf. Wir wollen es in seine ursprüngliche Position zurückversetzen. Ich werde zu meinem CSS zurückkehren und das tun. Ich kopiere diesen Code, füge ihn erneut ein und ändere vorher zu nachher. Und wechseln Sie auch von links nach rechts. So dass die Position der zweiten Zeile 0 auf der rechten Seite ist. Und das bringt es zurück an seinen ursprünglichen Ort. Und wenn Sie mit dem Mauszeiger über die Schaltfläche fahren, können Sie wie erwartet sehen, die Linie unten bewegt sich von rechts nach links geht zurück in ihre Position. Unsere Rechte, nachdem wir die oberen und unteren Linien erstellt haben, werden wir die auf der linken und der rechten Seite erstellen. Wir werden die Vorher- und Nachher-Pseudo-Elemente der Spanne verwenden , die wir innerhalb der Schaltfläche erstellt haben. Also werde ich einfach das vorher Pseudo-Element der Schaltfläche kopieren. Wieder. Fügen Sie es ein, Change button to span, um das vor Pseudo-Element der Spanne zu zielen, nicht die Schaltfläche. Dann werde ich die Breite auf vier Pixel anstelle von 100% und die Höhe auf 100% anstelle von vier Pixeln ändern , so dass es die gleiche Höhe wie die Schaltfläche und eine Breite von vier Pixeln hat. Dies wird die Zeile auf der rechten Seite sein. Also werde ich das in negativ 100% anstelle von 0 ändern , weil es über der Schaltfläche sitzt und links nach rechts wechselt und es 0, nicht negativ 100% macht. Und jetzt können Sie sehen, dass die Linie auf der rechten Seite über der Schaltfläche sitzt, weil wir gesagt haben , es ist Top-Eigenschaft zu negativ 100% und es ist richtige Eigenschaft auf 0. Beim Schweben wollten wir auch wieder in seine ursprüngliche Position zurückkehren. Also werde ich zurückgehen. Und wenn ich über die Schaltfläche schwebe, möchte ich einige Änderungen am vorherigen Pseudo-Element der Spanne vornehmen. Ich werde seine Top-Eigenschaft wieder auf 0 setzen. Und jetzt, wenn Sie den Mauszeiger über die Schaltfläche bewegen, können Sie sehen, dass sich die Linie auf der rechten Seite von oben nach unten bewegt, zurück in ihre Position. Lassen Sie uns nun schnell die letzte Zeile auf der linken Seite erstellen. Ich werde den gesamten Code für den richtigen Teil kopieren. Fügen Sie es erneut ein, zielen Sie auf die After-Pseudo-Elemente, diesmal, wenn Sie von oben nach unten und von rechts nach links ändern. Und ich werde auch vorher nach hier und von oben nach unten wechseln. Und jetzt, wenn ich zurückgehe und neu lade, sehen Sie, dass wir auch eine Linie auf der linken Seite haben. Und wenn Sie den Mauszeiger über die Schaltfläche bewegen, bewegen sich alle vier Linien zurück zu ihren Positionen. Gehen wir zurück und entfernen Sie diesen roten Hintergrund. Lassen Sie uns auch Überlauf versteckt hinzufügen, so dass die Linien außerhalb der Schaltfläche ausgeblendet werden. Und jetzt, wenn ich zurück auf die Schaltfläche gehe und über sie schwebe, können Sie sehen, dass wir diesen schönen Effekt haben, bei dem alle Linien gleichzeitig hereinkommen. 32. 33 – kreative wavy: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt mit CSS-Animationen erstellen. Sie können sehen, wenn Sie den Mauszeiger über den Knopf bewegen, dieser schöne Welleneffekt passiert , der wie eine Welle hereinkommt und sich bewegt, bis sie den Knopf bedeckt. Dies ist ein sehr interessanter Effekt. Also lasst uns gehen und es erschaffen. Ich werde in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Dann werde ich im Inneren sagen, Knopf. Dann werde ich auch ein div hinzufügen und ihm eine Klassenwelle geben. Dann werde ich zu meinem CSS gehen und das Anker-Tag anvisieren. Und ich werde Textdekoration hinzufügen. Keiner. Padding, 15 Pixel von oben und unten und 30 Pixel von links und rechts. Dann werde ich Farbe hinzufügen. Diese hellblaue Farbe. Und Schriftgröße, 18 Pixel. Dann Buchstabenabstand, Rahmen, zwei Pixel, einfarbig, hellblau. Text-Transformation, Großbuchstaben Und schließlich, Position, relativ. Und jetzt können Sie sehen, dass der Knopf cool aussieht. Nun, wie werden wir diesen wellenförmigen Effekt erzeugen? Lass es uns einfach Schritt für Schritt machen. Ich werde das div mit der Klasse der Welle anvisieren. Und darin werde ich die Position absolut hinzufügen, damit wir sie relativ zum Knopf positionieren können. Ich werde auch seine Breite auf 100% und seine Höhe auf 100% setzen . Dann werde ich links hinzufügen, 0, Top 100%. Dann Hintergrundfarbe, rot für jetzt. Und jetzt können Sie sehen, dass wir einen roten Hintergrund haben, der die gleiche Breite und Höhe hat wie unser Knopf darunter sitzt, weil wir gesagt haben, dass es Top-Eigenschaft zu 100% ist. In Ordnung, lasst uns weiter arbeiten. Wir werden diese kleine Welle mit dem vorher Pseudo-Element von R wave div erstellen. Also werde ich es ins Visier nehmen. Und darin werde ich Inhalte hinzufügen. Leere Saiten. Position absolut, oben, 0, links 0 als auch. Dann Breite 100% Und Höhe nur 22 Pixel. Und wir werden wissen, warum in einer Sekunde. Und schließlich werde ich Hintergrund-URL Welle Punkt PNG hinzufügen. Das ist also das kleine Bild, das wir für den Welleneffekt verwenden werden. Und diese Bildhöhe beträgt 22 Pixel. Deshalb setzen wir die Höhe des vorher Pseudo-Elements auf 22 Pixel, so dass es in das Bild passen kann. Und wir wollen es nach oben verschieben, damit es über dem roten Hintergrund sitzt. So können wir das tun, indem wir zurückgehen und seine Top-Eigenschaft auf negative 22 Pixel anstelle von 0 ändern . Und jetzt können Sie sehen, dass das Hintergrundbild nach oben verschoben wird und über dem roten Hintergrund sitzt. Aber jetzt verdeckt es einen kleinen Teil des Knopfes von unten. Und das wollen wir nicht. Wir möchten, dass der oberste Punkt des Bildes direkt unter der Schaltfläche liegt. So können wir das tun, indem wir sowohl das Bild den roten Hintergrund um 22 Pixel nach unten verschieben, was die Höhe des Bildes ist. Um das zu tun, werde ich zum Wellendiv zurückkehren. Und anstelle von 100% hier oben möchte ich es um 100% plus 22 Pixel verschieben. So können wir die Count-Eigenschaft verwenden, um dies zu tun. Ich werde 100% plus 22 Pixel hinzufügen. Und jetzt können Sie sowohl den roten Hintergrund als auch das Bild sehen , das gerade um weitere 22 Pixel nach unten verschoben wurde. Und beachten Sie, dass das Bild mit dem roten Hintergrund verschoben wurde , weil es ein Vor-Pseudo-Element davon ist, also ist es daran befestigt. In Ordnung, lassen Sie uns dieses Bild animieren und diesen welligen Effekt erzeugen. Ich werde eine neue Animation erstellen. Nennen Sie es wellig. Und drinnen bei 0%. Ich werde Hintergrundposition x 0 hinzufügen. Dann bei 100%, werde ich Hintergrundposition x 118 Pixel hinzufügen . Und diese 118 Pixel ist die Breite des Bildes. Die Position des Bildes ändert sich also von 0 auf seine volle Breite, und es wird uns den Effekt geben, den wir wollen. Jetzt gehe ich hier hoch und füge diese Animation hinzu. Also werde ich Animation wellenförmig 0,5 Sekunden hinzufügen , linear und unendlich. Ich werde auch die rote Hintergrundfarbe in die hellblaue Farbe unseres Bildes ändern. Und jetzt können Sie sehen, dass sich das Bild oben auf dem hellblauen Hintergrund bewegt. Und es gibt uns diesen wirklich coolen Effekt. Und es sieht so aus, als wäre es nur ein Teil des blauen Hintergrunds, weil sie die gleiche Farbe haben. Um unseren Effekt zu beenden, müssen wir diesen blauen Hintergrund nach oben verschieben und den Button ausfüllen, wenn Sie darüber schweben. Also lasst uns weitermachen und das tun. Ich werde sagen, wenn ich über das Anker-Tag schwebe, werde ich einige Änderungen an dem div mit der Klasse der Welle vornehmen, die das hellblaue div ist. Ich werde Top 0 hinzufügen, also geht es zurück nach oben und deckt die Schaltfläche ab. Und damit das reibungslos geschieht, werde ich hier in das Wellendiv gehen und Übergang hinzufügen. Oder 1 Sekunde. Ich werde auch hier innerhalb des Anker-Tags hinaufgehen und Überlauf hinzufügen. Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der blaue Hintergrund nach oben bewegt, bis er den Knopf vollständig bedeckt und das Bild animiert ist und uns diesen wirklich coolen Welleneffekt gibt. Wir haben eine Sache, die ist die Änderung der Farbe des Textes innerhalb der Schaltfläche, wenn Sie schweben, so dass wir es sehen können. Das werde ich schnell machen. Wenn ich also über den Link schwebe, werde ich die Farbe auf Weiß ändern. Um diese Änderung reibungslos zu machen, gehen wir hier hoch und fügen Übergang 0, 0, fünf Sekunden hinzu. Und auch werde ich in das Wellendiv gehen und Z-Index negativ hinzufügen , so dass der Text davor erscheint. Und jetzt, wenn ich zurückgehe und mit dem Mauszeiger über die Schaltfläche gehe, können Sie sehen, wie sich die Textfarbe in Weiß ändert, während der Welleneffekt geschieht. Und das ist es für diese Lektion, alle, und ich sehe dich in der nächsten. 33. 34 – kreative cuts: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, wir haben diesen Knopf und es hat diesen Schnitt in den oberen und unteren Rand. Und wenn ich den Mauszeiger darüber führe, passiert dieser Effekt dort, wo ein schwarzer Hintergrund erscheint und wächst, der den Knopf verdeckt. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Und ich werde Button sagen. Dann werde ich unten eine Spanne hinzufügen. Dann gehe ich zu meinem CSS und wähle den Link aus. Und ich werde Textdekoration hinzufügen. Keiner. Breite, 160 Pixel, Höhe, 60 Pixel, Farbe Schwarz. Dann, um den Text horizontal und vertikal zu setzen, werde ich Zeilenhöhe, 60 Pixel hinzufügen. Dann Text ausrichten, zentrieren. Dann werde ich Text Transformation hinzufügen. Großschreibung. Schriftgröße, 25 Pixel, Position, relativ. Und schließlich, Übergang, alle 0,2 Sekunden. Und jetzt können Sie sehen, dass wir unseren Link in der Mitte unserer Seite sitzen. In Ordnung, lasst uns weitermachen. Ich werde die Spanne innerhalb der Verbindung anvisieren. Und ich werde Position, absolute Breite, 100%, Höhe, 100% auch hinzufügen absolute Breite, . Dann oben 0, links 0. Dann werde ich Hintergrundfarbe, Rot und Rand hinzufügen. Zwei Pixel, einfarbig schwarz. Und jetzt können Sie sehen, dass wir einen roten Hintergrund haben , der die gleiche Breite und Höhe wie die Schaltfläche hat. Und es ist abgerundet mit einem schwarzen Rand von zwei Pixeln. Wir wollen nur die Grenzen. Wir wollen diesen roten Hintergrund nicht. Also werde ich zurückgehen und die Farbe des Hintergrunds von rot zu transparent ändern. Okay, jetzt wollen wir die Stecklinge erstellen, die am oberen und unteren Rand existieren. Wir werden das vor Pseudo-Element der Spanne verwenden, um das zu erstellen. Also werde ich es ins Visier nehmen. Fügen Sie dann Inhalte hinzu. Leere Saiten, Position, absolute Breite, nur 8%, Höhe, 500 Prozent. Dann Hintergrundfarbe, rot für jetzt. Und jetzt können Sie sehen, dass wir diesen roten Hintergrund haben, der eine Breite von 8% der Spannweite und eine Höhe von 500 Prozent hat . Und es sitzt genau hier. Also gehen wir zurück und zentriert innerhalb des Knopfes. Ich werde oben 50% hinzufügen, links. 50 Prozent. Dann transformieren Sie sich. Übersetzen, negative 50 Prozent und negative 50 Prozent. Und jetzt können Sie sehen, dass der rote Hintergrund jetzt innerhalb der Schaltfläche zentriert ist, aber Sie können nicht sehen, dass er den Text innerhalb der Schaltfläche verdeckt. Ich möchte den Text davor erscheinen lassen. Also werde ich zurück in den Span-Selektor gehen und Z-Index negative hinzufügen. Ich werde auch hier innerhalb des vorher Pseudo-Elements gehen und ich werde negative 60 Grad drehen hinzufügen . Und jetzt sehen Sie, dass der Text jetzt vor dem roten Hintergrund erscheint, der jetzt um 60 Grad gegen den Uhrzeigersinn gedreht wird. Na gut, jetzt arbeiten wir an dem Schwebeeffekt. Wenn ich den Mauszeiger über den Link führe, möchte ich, dass dieser rote Hintergrund eine Breite von 100% anstelle von 8% hat. So wird es den Link vollständig vertuschen. Also werde ich hierher zurückgehen. Und wenn ich über den Link schwebe, werde ich das vor dem Pseudo-Element der Spanne anvisieren. Und ich werde seine Breite auf 100% setzen. Ich werde auch seine Hintergrundfarbe auf Schwarz anstelle von Rot setzen. Dann, damit diese Änderung reibungslos geschieht, werde ich hier innerhalb des vorher Pseudo-Elements hinauf gehen und einen Übergang oder 0,2 Sekunden hinzufügen. Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass die Breite des roten Hintergrunds breiter wird, bis er den Link bedeckt und die Farbe auch in Schwarz wechselt. Deshalb sind wir nicht in der Lage, den Text mehr zu sehen. Also werde ich zu meinem CSS zurückkehren und wenn ich über den Link schwebe, werde ich seine Farbe zu weiß ändern, damit wir es sehen können. Und jetzt, wenn ich den Mauszeiger über die Schaltfläche, können Sie sehen, dass wir in der Lage sind, es zu sehen, weil die Farbe jetzt weiß ist. In Ordnung. Jetzt schwebe ich. Ich möchte den roten Hintergrund auch drehen lassen, nicht nur seine Breite vergrößert, ich wollte zum Beispiel um 60 Grad drehen. Also gehe ich hierher und kopiere diese Codezeile und füge sie auf den Hover-Effekt ein und ändere einfach negative 60 Grad auf 60 Grad. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Link gehe, dreht sich der rote Hintergrund um 60 Grad, während seine Breite zunimmt. Alles klar, das einzige, was noch übrig ist, die Farbe des roten Hintergrunds zu ändern und ihn weiß zu machen wie der Körper, damit wir diese zwei Stecklinge haben. Also werde ich zurückgehen und diese rote Farbe in Weiß ändern. Ich werde auch hier im Link-Selektor hinauf gehen. Und ich werde Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass wir diese Stecklinge am oberen und unteren Rand haben , weil die Farbe des Hintergrunds jetzt weiß ist, wie die Körperfarbe, nicht rot. Und wenn ich gehe und den Mauszeiger über die Schaltfläche, können Sie sehen, dass dieser Effekt passiert, wenn der weiße Hintergrund zu schwarz wechselt und seine Breite erhöht, während sich von negativen 60 Grad auf positive 60 dreht, was uns den Effekt gibt, den wir wollen. 34. 35 – kreative Knopfeffekt: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, wir haben diese beiden Teile sind rot Teil auf der linken Seite und der blaue Teil auf der rechten Seite. Und die beiden Teile sind entlang der X-Achse schief. Und Sie können auch sehen, dass der rote Teil ein wenig nach oben verschoben wird, während der blaue Teil nach unten verschoben wird. Und wenn wir den Mauszeiger über die Schaltfläche bewegen, geschieht dieser Effekt. Sie können sehen, wie die beiden Teile ihre Position ändern. Der blaue Teil bewegt sich nach links und der rote Teil bewegt sich auf die rechte Seite. Und der verzerrte Grad von beiden wird wieder 0. Also lassen Sie uns diesen Effekt erzeugen. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge und Button sag. Dann werde ich zu meinem CSS gehen und das Anker-Tag anvisieren und Texttransformation hinzufügen. Großbuchstaben, Text, Dekoration. Keiner. Schriftgewicht, 700, Position, relativ. Dann Buchstabenabstand, sieben Pixel. Padding, 18 Pixel von oben und unten und 30 Pixel von links und rechts. Dann werde ich Hintergrund, transparent, Schriftgröße, 28 Pixel hinzufügen . Und schließlich, Farbe weiß. Jetzt können Sie sehen, dass der Link so aussieht, wie wir wollen, und er hat einen transparenten Hintergrund, weil wir die Vorher und Nachher Pseudo-Elemente verwenden , um die roten und blauen Hintergründe zu erstellen. Also gehen wir zurück und machen das. Ich werde das vor Pseudo-Element des Anker-Tags anvisieren und Inhalte hinzufügen. Leere Saiten. Position, absolut, dann Höhe. 100%, da es die gleiche Höhe wie das Anker-Tag hat, die Breite 50 Prozent, da es die Hälfte der Verbindungsbreite hat. Dann werde ich links negativ 1 Prozent hinzufügen. Dann oberste negative fünf Pixel. Dies wird also der rote Teil sein, der auf der linken Seite sitzt und ein wenig nach oben verschoben wird. Dann schließlich werde ich Hintergrundfarbe hinzufügen, diese rote Kurve. Und jetzt können Sie sehen, dass der rote Teil hier sitzt und 50% der Verbindungsbreiten einnimmt. Gehen wir zurück. Und um den roten Hintergrund zu verzerren, werde ich Transform Skew 30 Grad hinzufügen. Ich werde auch einen Z-Index negativen hinzufügen , so dass der Text vor dem roten Teil angezeigt wird. Dann schließlich werde ich Übergang oder 0,3 Sekunden hinzufügen. Und dieser kubische Bezier-Wert. Und jetzt können Sie sehen, dass der rote Teil schief ist und der Text davor erscheint. In Ordnung, gehen wir zurück und arbeiten an dem Schwebeeffekt. Wenn Sie den Mauszeiger über den Link bewegen, möchten wir, dass sich der rote Hintergrund auf die rechte Seite bewegt und zu einem Schräggrad von 0 zurückkehrt. Also werde ich hierher gehen und sagen, wenn ich über das Anker-Tag schwebe, werde ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich füge Transformations-Skew wieder auf 0 Grad hinzu, dann links 50 Prozent. So wird es auf die rechte Seite zu bewegen. Und schließlich Top 0. Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der rote Teil bewegt sich, um die rechte Seite zu bedecken, und es ist schief Grad wird 0. Alles klar, gehen wir zurück und arbeiten an dem blauen Teil. Ich gehe hierher und kopiere diesen Code, füge ihn erneut ein und ändere vorher zu nachher. Dann werde ich Top 25 Pixel ändern, so dass es fünf Pixel nach unten verschoben werden. Ich werde auch links wechseln, 251%, also wird es auf der rechten Seite sitzen, nicht auf der linken Seite. Ich werde auch die Hintergrundfarbe in diese blaue Farbe ändern. Und jetzt können Sie sehen, dass der blaue Teil auf der rechten Seite sitzt. Lassen Sie uns an dem Schwebeeffekt arbeiten. Ich werde hierher zurückgehen und mich davor zu nachher umziehen. Und ich werde einfach links auf 0 anstelle von 50 Prozent ändern , so dass der blaue Hintergrund sich bewegt, um die linke Seite zu bedecken. Und jetzt können Sie Jungs sehen, wenn ich gehe und den Mauszeiger über den Link, bewegt sich der blaue Teil, um die linke Seite zusammen mit dem roten Hintergrund zu vertuschen. Und das ist der exakte Effekt, den wir wollen , der wirklich cool aussieht. 35. 36 - kreative pulsing: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über die Schaltfläche führe, dieser Effekt passiert, wenn wir einen weißen Hintergrund haben, der größer wird, gut verblasst. Und der Link selbst bewegt sich ein wenig nach oben und ein Box-Schatten erscheint darunter. Und wenn Sie auf den Link klicken, bewegt er sich ein wenig nach unten und der Schattenwert ändert sich. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier gehen und ein Anker-Tag hinzufügen. Und ich werde sagen, schweben Sie mich. Und ich werde zu meinem CSS gehen, um das Anker-Tag zu zielen und Position hinzuzufügen. Absolute. Textdekoration Keiner. Text-Transformation. Großbuchstaben. Padding, 25 Pixel von oben und unten und 50 Pixel von links und rechts. Hintergrundfarbe. Weiße Farbe. Diese graue Farbe. Dann Border-Radius, 100 Pixel. Schriftgröße 24 Pixel. Und schließlich übergegangen oder 0,2 Sekunden. Und jetzt können Sie sehen, dass der Link genau so aussieht, wie wir wollen. Gehen wir zurück und arbeiten an dem Schwebeeffekt. Wir werden den weißen Hintergrund erstellen, der mit dem vorher Pseudo-Element größer wird. Also werde ich hier gehen und das vor Pseudo-Element des Anker-Tags auswählen. Und ich werde Inhalte, leere Strings, Position absolut, Top 0 und links 0 hinzufügen Position absolut, . Dann wollen wir, dass es die volle Breite und Höhe der Verbindung einnimmt. Also werde ich Breite 100% und Höhe 100% hinzufügen. Und dann werde ich Hintergrundfarbe, Weiß und Border-Radius 100 Pixel hinzufügen . Dann schließlich Übergang 0, 0. Und jetzt können Sie sehen, dass wir einen weißen Hintergrund haben der vor dem Link sitzt und ihn vertuscht. Und deshalb ist der Text nicht sichtbar. Also lasst uns hier zurück gehen und Z-Index negativ 1 hinzufügen. Und jetzt können Sie sehen, dass der Text wieder sichtbar ist. Ordnung? Ich werde sagen, wenn ich über das Anker-Tag schwebe, werde ich das vorher Pseudo-Element auswählen. Und wir wollen, dass der weiße Hintergrund größer wird. Also werde ich Transformationsskala x 1.4 hinzufügen und skalieren, warum 1.6. Dann werde ich unterhalb der Deckkraft 0 hinzufügen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Link führe, dieser Effekt passiert mit dem weißen Hintergrund wird größer, während seine Deckkraft abnimmt, was uns diesen coolen Effekt gibt. In Ordnung, ich schwebe. Wir wollen auch verlinken, um ein wenig nach oben zu bewegen und etwas Schatten darunter zu haben. Also werde ich hier zurück gehen und sagen, wenn ich über das Anker-Tag schwebe, werde ich transformieren hinzufügen, y negative 3 Pixel übersetzen. So bewegt sich der Link drei Pixel nach oben und Box-Schatten, 0 entlang der x-Achse, dann 10 Pixel entlang der y-Achse, dann ein Unschärfewert von 20 Pixeln. Und schließlich wird die Farbe des Schattens RGBA, 0.2000 sein. Und jetzt können Sie sehen, wenn ich zurückgehe und den Mauszeiger über den Link bewegte, er bewegt sich ein wenig nach oben und wir haben einen Schatten, der darunter erscheint. Wir haben nur noch übrig, wenn wir auf den Link klicken, wollten wir ein wenig nach unten bewegen und der Box-Schatten kleiner sein. Also werde ich hierher zurückgehen und einen Doppelpunkt sagen, der aktiv ist. Das heißt, wenn Sie auf den Link klicken, dann innerhalb, dass ich transformieren hinzufügen, übersetzen Y negativ ein Pixel. Und ich werde die Kastenschatteneigenschaft kopieren. Fügen Sie es erneut ein und ändern Sie 10 Pixel in fünf Pixel, 20 Pixel auf 10 Pixel. Und jetzt, wenn ich gehe und auf den Link klicke, können Sie sehen, dass er sich ein wenig nach unten bewegt und der Box-Schatten nimmt ab, was uns den genauen Effekt gibt, den wir wollen. 36. 37 – Diagonale diagonal mit Grenzen: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über den Link fahre, dieser coole Effekt passiert. Wir werden diesen Effekt mit der border-Eigenschaft erstellen und Sie werden sehen, wie. So. Gehen wir zu unserer HTML-Datei fügen Sie dann ein Anker-Tag hinzu. Dann in diesem Anker-Tag werden wir Button sagen. Dann werde ich zu meinem CSS gehen und das Anker-Tag anvisieren. Fügen Sie dann Textdekoration hinzu. Keiner. Position, relativ. Zwei 150 Pixel und Höhe 80 Pixel. Dann, um den Text innerhalb des Links zu zentrieren, werden wir Text ausrichten, zentrieren und Zeilenhöhe, 80 Pixel hinzufügen . Dann werde ich Farbe hinzufügen. Diese schöne lila Farbe und Grenze. Für Pixel. Solide Unsere violette Farbe. Dann, um die Schriftgröße größer zu machen, füge ich Schriftgröße 24 Pixel hinzu. Dann Buchstabenabstand, drei Pixel, um einige Abstände zwischen den Buchstaben zu erhalten. Dann Text transformieren, Großbuchstaben und schließlich Übergang oder 0,5 Sekunden. So jetzt können Sie sehen, dass der Link genau so aussieht, wie wir wollen. In Ordnung, lassen Sie uns an unserem Hover-Effekt arbeiten. Wird dies mit den Vorher- und Nachher-Pseudo-Elementen erstellen. Aber fangen wir zuerst mit dem vorher Pseudoelement an und verstehen, wie der Effekt passiert. Dann werden wir das After-Pseudo-Element verwenden, um es zu erstellen. Also werde ich das vorher Pseudo-Element des Anker-Tags anvisieren. Und ich werde Inhalt leere Strings hinzufügen, Position absolut 0, links 0, unten 0 und auch 0 schreiben. Dann werde ich eine temporäre grüne Hintergrundfarbe hinzufügen. So, jetzt können Sie sehen, haben wir diesen grünen Hintergrund, der den Link vollständig abdeckt, weil wir die oben, links, unten und rechts Eigenschaften auf 0 sagten . Alles klar, gehen wir zurück und entfernen diesen grünen Hintergrund. Und anstelle von Hintergründen werden wir oberste 40 Pixel umranden , vorerst rot. Wie Sie sehen können, haben wir jetzt diesen roten Rand, der eine Breite von 40 Pixeln hat. Und wir haben 40 Pixel speziell gewählt, weil die Höhe des Links 80 Pixel beträgt. Der Rahmen deckt nun die Hälfte der Verbindungshöhe ab, wie Sie sehen können. Okay, ich gehe zurück und füge den unteren Rand hinzu, 40 Pixel, solide, grün. Und jetzt, wie Sie sehen können, haben wir einen grünen unteren Rand, der eine Breite von 40 Pixeln hat und die untere Hälfte des Links verdeckt. Alles klar, Endlich gehe ich zurück und füge Grenze hinzu, richtig? 40 Pixel, einfarbig gelb Und jetzt können Sie sehen, dass wir diesen rechten gelben Rand haben , der auch eine Breite von 40 Pixeln hat. Und ich denke, das ist so ziemlich die Flagge Südafrikas oder so. Alles klar, was ist, wenn ich hierher zurückgehe und die richtige Randfarbe in transparent anstelle von gelb ändere . Sie können jetzt sehen, dass dieser rechte Rand transparent ist und der Link dahinter zeigt. In Ordnung, ich gehe wieder zurück und füge den Übergang oder 0,5 Sekunden hinzu. Dann, um den Text hinter dem Hintergrund sichtbar zu machen, werde ich Z-Index negative hinzufügen. Dann werde ich schließlich Transform Translate x negativ 100% hinzufügen. Und jetzt können Sie sehen, dass das vorher Pseudo-Element jetzt nach links verschoben wird und die Ränder damit verschoben werden. Weil wir gesagt haben, sie sind Übersetzen Funktion auf negative 100. Wenn Sie den Mauszeiger über den Link bewegen,möchten wir das Pseudo-Element vor in seine ursprüngliche Position zurückkehren, um den Link zu vertuschen möchten wir das Pseudo-Element vor in seine ursprüngliche Position zurückkehren . Also werde ich hierher gehen und ich werde sagen, wenn wir den Mauszeiger über das Anker-Tag bewegen, möchte ich einige Änderungen am Pseudo-Element vornehmen. Ich werde Transformation hinzufügen, X wieder auf 0% übersetzen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Link zeige, bevor das Pseudo-Element in seine ursprüngliche Position zurückkehrt. Okay, die einzige Sache bleibt, die Farbe der Grenzen zu unserer violetten Farbe zu ändern. Ich gehe hierher und ändere die Farbe des oberen Rahmens in Violett. Und ich werde dasselbe auch für die untere Grenze tun. Ehrfürchtig. Lassen Sie uns nun das After-Pseudo-Element erstellen, um unseren Effekt zu vervollständigen, ich werde hier gehen und das vorher Pseudo-Element kopieren, es erneut einfügen und vorher nach ändern. Dann ändere ich die Grenze nach links, so dass der transparente Teil auf der linken Seite sitzt, nicht auf der rechten Seite. Dann werde ich auch den Wert der Übersetzungsfunktion auf 100% anstelle von negativem 100% ändern , so dass sich das After Pseudo-Element nach rechts bewegt, nicht nach links. Ich werde auch den Schwebeeffekt kopieren. Fügen Sie es ein und ändern Sie vor zu nachher. Und jetzt können Sie sehen, dass sich das achter-Pseudo-Element auf der rechten Seite des Links befindet und es hat den transparenten Teil auf der linken Seite. Wenn Sie über den Link schweben, kommen die beiden Teile herein, um den Link zu vertuschen uns diesen coolen Effekt zu geben. Lassen Sie uns schließlich die Farbe des Link-Textes in Weiß ändern. Wenn wir den Mauszeiger darüber bewegen. Ich werde sagen, wenn ich über den Anker-Tag schwebe, werde ich die Farbe in Weiß ändern. Ich werde auch hier innerhalb des Links hinauf gehen und Überlauf versteckt hinzufügen , um die beiden Teile außerhalb des Anker-Tags versteckt zu machen. Und jetzt können Sie sehen, wenn ich zurückgehe und über den Link schwebe, die beiden Pseudo-Elemente kommen zusammen, um das Anker-Tag zu vertuschen und sie geben uns unseren wirklich coolen Effekt. 37. 39 – kreative image 1: Hallo an alle. In dieser neuen Lektion im Kurs werden wir diesen cool-aussehenden Fade-In-Hover-Effekt für dieses Bild erstellen. Wenn ich also den Mauszeiger über das Bild führe, kann man sehen, dass es vergrößert und ein wenig nach rechts gedreht wird. Und die Beschriftung wird mit einer halbtransparenten schwarzen Hintergrundeüberschrift und einem Absatz eingeblendet . Mal sehen, wie wir das tun können. Ich werde zu meinem HTML gehen und innerhalb des Körpers, ich werde ein div hinzufügen und ihm eine Klasse von Containern geben. Dieses div wird sowohl das Bild als auch die Beschriftung enthalten, was bedeutet, dass es der äußere Container für sie sein wird. Dann werde ich zuerst unser Bild hinzufügen. Also werde ich sagen, Bildquelle, und wir werden unser Bild hinzufügen. Großartig. Jetzt müssen wir unsere Beschriftung hinzufügen. Ich werde unter das Bild gehen und ein div mit einer Klasse von Beschriftung hinzufügen. Und dann im Inneren werden wir ein H1 hinzufügen und wir werden einfach erstaunliche Bildunterschrift sagen. Dann werde ich ein Absatz-Tag hinzufügen. Und drinnen werde ich nur sagen, dass du hier alles schreiben kannst, was du willst. Nun, wenn wir dies im Browser sehen, können Sie sehen, dass dies nicht so gut aussieht. Wir müssen einige Stile hinzufügen, um es besser aussehen zu lassen. Also zurück zu unserem CSS. Sie können sehen, dass ich dem Körper bereits einige Stile hinzugefügt habe, um alles in ihm vertikal und horizontal mit Flexbox zu zentrieren. Außerdem habe ich diese Leto Schriftfamilie hinzugefügt, die ich auch von Google-Fonts erhalten habe. Beginnen wir nun, indem wir das div mit der Klasse des Containers ausrichten. Ich werde Breite, 500 Pixel, Höhe 500 Pixel als auch hinzufügen . Position relativ. Und jetzt können Sie sehen, dass das Bild tatsächlich zu groß für den Container ist. Wir können das beheben, indem wir einfach zu unserem CSS zurückkehren und das Bild ausrichten und 100% Breite hinzufügen. So ändert es die Größe, um die volle Breite seines Containers aufzunehmen. Und Sie können sehen, dass es jetzt besser aussieht. Und wir haben eine Beschriftung, die darunter sitzt. Lasst uns weitermachen. Ich werde das div mit der Klasse der Beschriftung anvisieren, die das H1 und den Absatz enthält. Dann werde ich Position absolut, oben 0, links 0, dann Höhe 100% hinzufügen oben 0, links 0, , um die volle Höhe des Containers aufzunehmen. Und Breite 100%, um die volle Breite des Behälters als auch aufzunehmen. Und jetzt können Sie sehen, dass die Beschriftung oben auf unserem Bild sitzt und seine volle Breite und Höhe nimmt. Also zum Beispiel, wenn ich hier gehe und Hintergrundfarbe hinzufügen, schwarz für die Beschriftung. Sie können sehen, dass es die volle Breite und Höhe einnimmt. Gut. Gehen wir zurück und entfernen Sie diesen schwarzen Hintergrund und arbeiten weiter. Jetzt müssen wir an den Inhalt innerhalb der Beschriftung senden, was das H1 und den Absatz bedeutet. Wir werden das mit Flexbox tun. Also werde ich hier gehen und Anzeige, Flex, dann Flexrichtungsspalte hinzufügen , so dass H1 und der Absatz übereinander stapeln. Dann werde ich Rechtfertigung Content-Center hinzufügen. Richten Sie Elemente auch zentriert aus, so dass der Inhalt vertikal und horizontal innerhalb der Beschriftung zentriert wird. Und dann werde ich gehen und Farbe weiß hinzufügen. Fügen wir nun dem H1 und dem Absatz einige Stile hinzu. Ich werde das H1 innerhalb der Beschriftung anvisieren. Und ich werde Texttransformation, Großbuchstaben und den Rand 0 hinzufügen , so dass es viel schöner und enger aussieht. Dann werde ich den Absatz innerhalb der Beschriftung anvisieren und Schriftgröße 18 Pixel hinzufügen. Dann transformieren Sie Text. Großschreibung. Großartig. Jetzt haben wir alles genau so, wie wir wollen, und wir müssen uns auf den Fade-In-Hover-Effekt konzentrieren. Wenn wir also einen Blick auf unsere Demo werfen, können Sie sehen, dass die Beschriftung unsichtbar ist und wenn Sie darüber schweben, die Erfassungsphase mit einem leeren Hintergrund, der etwas Transparenz hat. Also lasst uns das wirklich machen. Zuallererst müssen wir die Beschriftung unsichtbar machen. Also werde ich hier in den Beschriftungs-Selektor gehen und ich werde Deckkraft 0 hinzufügen. Und jetzt können Sie sehen, die H1 und der Absatz sind nicht mehr sichtbar. Und ich möchte, dass sie wieder sichtbar sind, wenn ich über das div schwebe. Also werde ich gleich hierher gehen. Und wenn ich den Mauszeiger über den Container führe, möchte ich einige Änderungen an der Beschriftung div vornehmen und wollte die Deckkraft wieder eins machen. Und um die Veränderung reibungslos zu sehen, werde ich hier in der Beschriftung hinauf gehen und Übergang hinzufügen. Alle Nullen. Fünf Sekunden. Gut. Jetzt, wenn ich gehe und den Mauszeiger über das div führe, können Sie sehen, dass die Erfassung schön einblendet. Und jetzt wollen wir auch den Hintergrund hinzufügen. Also werde ich in das div mit der Klasse der Beschriftung gehen und Hintergrund-RGB, 0, 0, 0, 0, 0 hinzufügen . Dies wird also eine schwarze Farbe mit einer Deckkraft von 0 sein, was bedeutet, dass es transparent ist. Ich kopiere das und gehe hier runter, füge es wieder ein. Und ich werde die Deckkraft auf 0,5 ändern, damit sie nicht mehr sichtbar ist. Und jetzt, wenn ich zurückgehe und den Mauszeiger über das div führe, können Sie sehen, dass der Hintergrund mit der Beschriftung verblasst. Gut. Jetzt möchten wir das Bild vergrößern und drehen, wenn Sie schweben. Also werde ich hier runtergehen und das kopieren. Ich möchte diesmal Änderungen am Bild vornehmen. Also werde ich Transformationsskala um 1.3 hinzufügen. So wird das Bild 1,3 Mal nach oben skaliert, was uns den Zoom in Kraft gibt. Dann füge ich Rotation um 15 Grad hinzu. Jetzt, wenn ich zurückgehe und den Mauszeiger über das div zeige, können Sie sehen, dass das Bild nach oben skaliert und rotiert, aber es ist überlaufen, außerhalb des Containers. Und wir können das leicht beheben, indem wir zum Container zurückkehren und Überlauf verborgen hinzufügen , so dass das Bild innerhalb der Grenzen des Containers bleibt. Probieren wir es jetzt aus. Ehrfürchtig. Jetzt haben wir das Fade in Wirkung mit dem Zoomen und Drehen. Und es sieht toll aus. 38. 40 – kreative image 2: Hallo an alle. In dieser Lektion werden wir diesen interessanten Swipe-Hover-Effekt erstellen. Wenn ich also den Mauszeiger über das Bild führe, wird die Beschriftung von links nach rechts mit einem halbtransparenten schwarzen Hintergrund gewebt. Und das Bild wird vergrößert und gedreht, genau wie in der vorherigen Lektion. Mal sehen, wie wir das tun können. Wir werden weiterhin mit dem gleichen Bild und der gleichen Beschriftung arbeiten , die wir in der vorherigen Lektion erstellt haben. Für diese und einige zukünftige Lektionen, wir nur ändern wird in der Wirkung selbst sein. Also hier in meinem CSS habe ich die gleichen Stile, die wir zuvor hinzugefügt haben, aber ich habe gerade die Stile entfernt, die für den Hover-Effekt verantwortlich sind. Sie können also sagen, dass dies die Anfangsstile für die nächsten Lektionen sein wird, und wir werden sie eingeben, um einen anderen Effekt und jede Lektion zu erzeugen. Wenn wir also im Browser einen Blick darauf werfen, können Sie sehen, dass wir alles an Ort und Stelle haben. Das Bild nimmt die gesamte Containerbreite in der Beschriftung ein, die darüber sitzt. Gut. Jetzt fangen wir an zu arbeiten. Ich werde hier in den Beschriftungswähler gehen und ich werde die Hintergrundfarbe R, G, B a 0.500 hinzufügen , so dass es eine halbtransparente Hintergrundfarbe annehmen wird. Wenn wir nun einen Blick auf unsere Demo werfen, können Sie sehen, dass die Beschriftung von der linken Seite des Containers wieder in den Container übersetzt wird . Die Ausgangsposition befindet sich also auf der linken Seite des Behälters. Also werde ich zu meinem CSS zurückkehren und innerhalb des Untertitel-div werde ich transformieren X minus 100 hinzufügen , so dass es sich um 100% seiner Breite nach links bewegt. Dann werde ich hier runtergehen. Und wenn ich den Mauszeiger über den Container führe, möchte ich einige Änderungen an der Beschriftung vornehmen. Ich möchte, dass es wieder in seine ursprüngliche Position zurückkehrt. Also werde ich transformieren hinzufügen, X 0 übersetzen. Und jetzt, wenn ich zurückgehe und den Mauszeiger über den Container schiebe, können Sie die Beschriftungen von links nach rechts glatt weiß sehen. Nun, eine Sache bleibt übrig, indem das Bild vergrößert und gedreht wird. haben wir tatsächlich in der vorherigen Lektion gemacht. Also lasst uns das Gleiche hier machen. Hier in meinem CSS. Wenn wir den Mauszeiger über den Container bewegen, möchte ich einige Änderungen am Bild vornehmen. Ich werde Transformationsskala um 1,3 hinzufügen und ich werde diesmal um minus 15 Grad drehen. Wenn ich also den Mauszeiger über den Container gehe, können Sie sehen, dass der Wischeffekt mit dem Vergrößern und der Rotation des Bildes zur gleichen Zeit geschieht . Jetzt, da wir das Konzept hinter diesem Wischeffekt verstehen, können wir das Wischen leicht von rechts nach links oder von oben nach unten machen. Nehmen wir an, wir wollen es von oben nach unten streichen. Die Ausgangsposition sollte sich oben auf dem Bild befinden. Also werden wir das einfach ändern. Also werde ich zu meinem CSS gehen und zu der Beschriftung div gehen und dies ändern, x in y übersetzen und ich werde hier runter gehen und dieses x auch in y ändern. Und indem Sie dies tun, wird die Beschriftung über dem Bild sitzen und wir werden vertikal bewegen, um das Bild zu bedecken, wenn ich den Mauszeiger über den Container führe. Also möchte ich, dass Sie versuchen, die Beschriftung von rechts nach links und dann von unten nach oben zu streichen. Und Sie können mir sagen, ob Sie in der Lage sind, es in der Q und einem Abschnitt zu tun. 39. 41 – kreative image 3: Hallo an alle. In dieser Lektion werden wir diesen Wischeffekt erzeugen. Wenn ich also über das div schwebe, können Sie sehen, dass sich das Bild von seiner Position nach rechts bewegt und die Beschriftung von links hereinkommt, um seinen Platz einzunehmen. Dies ist sehr ähnlich wie in der vorherigen Lektion, aber es gibt einige Unterschiede. Erstens ist die Hintergrundfarbe hier ein einfarbiges Schwarz. Es ist nicht mehr halbtransparent. Und das Bildverhalten ist anders. Ich denke, Sie erinnern sich in der vorherigen Lektion an das Bild mit Vergrößern und Drehen. Aber in dieser Lektion übersetzt das Bild tatsächlich in, irgendwie gibt seinen Platz der Beschriftung. Mal sehen, wie wir das tun können. Hier. Ich habe meine Start-CSS-Datei und hier ist, was wir davon bekommen. Also zuerst gehe ich zur Beschriftung hier und füge die Hintergrundfarbe schwarz hinzu. Dann, um es seine Ausgangsposition auf der linken Seite des div einzunehmen, werden wir Transformation Translate X minus 100% hinzufügen, so dass es sich nach links bewegt. Gut. So können Sie jetzt sehen, dass die Beschriftung nach links verschoben wird und sich nicht mehr über dem Bild befindet. Jetzt wollten wir in seine Position zurückkehren. Wenn wir über das div schweben, gehe ich hier runter. Und wenn wir den Mauszeiger über den Container bewegen, werde ich transformieren X 0 hinzufügen, so dass es zu seiner Position zurückkehrt. Und ich möchte, dass sich das Bild nach rechts bewegt den Platz für die Beschriftung offen lässt. Also werde ich hier gehen und transformieren hinzufügen, X 100% dieses Mal übersetzen. Und jetzt, wenn ich gehe und über das div schwebe, können Sie sehen, dass sich das Bild nach rechts bewegt seinen Platz für eine Beschriftung zurücklässt, die von links kommt. Und genau so wollen wir, dass es aussieht. Wir können dies auch von oben nach unten erreichen. Alles, was wir ändern müssen, ist all das Translate X in unserem Code, um y zu übersetzen. Also gehe ich zurück zu meinem CSS und tue das. Und jetzt können Sie sehen, dass es von oben nach unten passiert. Ich möchte, dass Sie versuchen, es von rechts nach links und von unten nach oben zu erreichen. Und lassen Sie es mich im Bereich Fragen und Antworten wissen, ob Sie es tun können. 40. 42 – kreative image: Hallo an alle. In dieser Lektion werden wir lernen, wie Sie diesen Bild-Hover-Effekt erstellen. Wenn Sie es sich also ansehen, können Sie sehen, dass sich die Beschriftung von unten bewegt und nicht die volle Höhe des div einnimmt, es nimmt nur die volle Breite ein. Sie können auch sehen, dass sich das Bild um den Abstand nach oben bewegt , den die Beschriftung nach oben bewegt. Mal sehen, wie wir das tun können. Also hier in meinem Mitherausgeber, habe ich die Startdateien für alle unsere Bildeffekte. Und hier ist, wie es im Browser aussieht. Beginnen wir also mit der Arbeit an diesem spezifischen Beispiel. Zuallererst werde ich hier in der Beschriftung gehen, und ich werde Hintergrundfarbe hinzufügen. Schwarz. Denken Sie daran, dass die Beschriftung nicht die volle Höhe einnimmt. Also gehe ich hier hoch und ändere die Höhe auf nur 30 Prozent der Behälterhöhe. Jetzt können Sie sehen, dass die Beschriftung nur 30 Prozent der Höhe des div belegt. Aber es gibt ein Problem. Die Karte erscheint oben im div und wir möchten, dass sie unten erscheint. Kein großes Problem. Wir können es leicht beheben, indem wir direkt hier gehen und von oben nach unten wechseln. Jetzt können Sie sehen, dass sich die Beschriftung am unteren Rand des div befindet. Gut. Jetzt wollen wir, dass es nach unten bewegt, so dass es zu seiner Position zurückkehrt, wenn ich über das div schwebe. Also werde ich auf die Beschriftung gehen und transformieren hinzufügen, y 100% übersetzen. Was bewegt sich also um 100% seiner Höhe nach unten, die tatsächlich 30% der Behälterhöhe beträgt. Jetzt können Sie sehen, dass es nicht mehr sichtbar ist, da es sich hinter dem div bewegt. Wenn wir nun den Mauszeiger über das div bewegen, möchten wir, dass es an seinen ursprünglichen Platz zurückkehrt. Also werde ich hier gehen und transformieren hinzufügen, Y 0 übersetzen. Und jetzt geht es zurück. Wir wollen das Bild auch um den gleichen Abstand nach oben verschieben. Also werde ich hier gehen und transformieren hinzufügen, y minus 30 übersetzen, so dass es sich nach oben bewegt einen Raum für die Beschriftung lässt. Und jetzt können Sie sehen, dass sich das Bild nach oben bewegt, was uns diesen schönen Effekt gibt. 41. 43 – kreative image 5: Hallo an alle. Willkommen zu dieser neuen Lektion des Kurses. In dieser Lektion werden wir lernen, wie man diesen interessanten Bild-Hover-Effekt erstellt. Wenn ich also den Mauszeiger über das Bild fange, sehen Sie, dass ein halbtransparenter Hintergrund von unten erscheint und sich nach oben bewegt und die Beschriftung darüber erscheint. Aber wenn wir genau beobachten, können wir den Fang sehen und erscheint ein wenig später als der Hintergrund. Und wenn wir den Mauszeiger weg bewegen, verschwindet die Beschriftung zuerst vor dem blauen Hintergrund. Daher werden wir einige Übergangsverzögerungen verwenden, um dies zu tun. In Ordnung, also wie üblich, lassen Sie uns damit beginnen, das Markup unseres HTML zu schreiben. Ich werde hier anfangen, indem ich ein div hinzufüge und ihm eine Klasse von Feige gebe. Dann werde ich ein Bild-Tag hinzufügen, und wir werden unser Bild hinzufügen. Dann müssen wir die Beschriftung hinzufügen. Also unterhalb des Bildes werde ich ein anderes div hinzufügen und ihm eine Klasse von Beschriftung geben. Und innerhalb dieses div werde ich ein H3 hinzufügen, sagen erstaunliche Beschriftung. Und darunter werde ich H5 hinzufügen und sagen, dass Sie hier alles schreiben können. Also, wenn wir dies im Browser sehen, können Sie sehen, dass dies hässlich aussieht. Also gehen wir zu unserem CSS und machen es ein wenig schöner aussehen. Zuerst werde ich das div mit der Klasse von Abb. Und ich werde Breite 500 Pixel hinzufügen. Dann Farbe, Weiß, Schriftfamilie, Eisenbahn, Grenzradius 10 Pixel. Relativ positioniert. Richtig, lassen Sie es uns in Bewegung halten. Ich werde das Bild in der Abb div anvisieren. Und ich werde seine Breite auf 100% setzen. Es wird also die volle Breite seines übergeordneten div aufnehmen, das 500 Pixel beträgt. Im Moment sieht es viel besser aus. Wir haben unser Bild und die Beschriftung sitzt darunter. Putsch. Arbeiten wir nun an dem halbtransparenten Hintergrund , der von unten hineingleitet, um das Bild zu bedecken. Wir werden es mit dem before Pseudo-Element erstellen. Also werde ich zu meinem CSS und sicheren vagen Doppelpunkt gehen, bevor. Und ich werde Inhalt hinzufügen, leere Position, absolut, oben, 0, links 0. Und wir wollen, dass es die volle Breite und Höhe der Feige aufnimmt. Also werden wir sagen Breite 100% und Höhe 100% als auch. Dann Hintergrundfarbe, diese grünliche Farbe. Und weil es halbtransparent ist, werden wir Opazität 0,5 hinzufügen. Da gehen wir. Sie können sehen, dass der Hintergrund nun die gesamte Breite und Höhe der Feige einnimmt , so dass er sogar die Beschriftung bedeckt. Arbeiten wir nun an der Beschriftung und zentrieren Sie sie horizontal und vertikal innerhalb der Abb. Also werde ich zu meinem CSS zurückkehren und das div mit der Klasse der Beschriftung in der Abb. Dann werde ich Position, Absolute, Top, 0, Breite 100% und Höhe 100% hinzufügen . Als nächstes werden wir mit Flexbox an die H3 und H5 senden. So werden wir Display flex, dann Flexrichtung Spalte hinzufügen , um die H3 und H5 untereinander sitzen zu lassen. Sie sehen, dass es standardmäßig auf Zeile gesetzt ist, wodurch sie nebeneinander in einer Zeile angezeigt werden. Aber wir wollen, dass sie in einer Kolumne sind. Dann, um sie zu zentrieren, werden wir eine Zeile Items Center hinzufügen. Und schließlich, rechtfertigen Content-Center als auch. Und jetzt können Sie sehen, dass die Beschriftung horizontal und vertikal im Fig div zentriert ist . Aber der Inhalt innerhalb der Beschriftung, die die H3 und H5 genau hier ist. Und sie sehen gut aus. Also lasst uns sie anvisieren und sie besser aussehen lassen. Ich werde zu meinem CSS gehen und Abb H3 Komma hinzufügen, und dann Abb H5. Und ich werde Rand 0, dann Buchstabenabstand hinzufügen . Ein Pixel. Darunter werde ich das H3 individuell anvisieren. Dann werde ich Texttransformation, Großbuchstaben und Schriftgewicht 400 hinzufügen . Dann brauchen wir ein wenig Abstand darunter. So werden wir Rand unten hinzufügen, nur fünf Pixel. Und darunter werde ich diesmal die H5 anvisieren. Und wir wollen ein wenig Hintergrund hinzufügen. Also werde ich Hintergrundfarbe hinzufügen, diese bräunliche Farbe. Und ich werde auch einen Abstand von drei Pixeln von oben und unten und fünf Pixeln von links und rechts hinzufügen . Ehrfürchtig. So sieht die Feige so aus. Sie können sehen, dass der halbtransparente Hintergrund bedeckt ist und die Beschriftung da genau dort in der Mitte. Jetzt müssen wir an dem Schwebeeffekt arbeiten. Wenn wir also einen kurzen Blick auf unsere Demo werfen, können Sie sehen, dass sich der Hintergrund von unten nach oben bewegt. Und das können wir tun. Kein Problem. Ich werde einfach zu meinem CSS zurückkehren und in das vorher Pseudo-Element gehen. Und wir wollen den Hintergrund unterhalb der Feige positionieren, so dass, wenn wir schweben, er in seine ursprüngliche Position zurückkehrt. Also werde ich transformieren, übersetzen und warum? 100%? Jetzt können Sie sehen, dass es um 100% seiner Höhe nach unten verschoben wird. Und weil seine Höhe gleich 100% der Feigenhöhe ist, bewegte es einen Abstand, der der Feigenhöhe entspricht. So ist es jetzt direkt unter der Feige positioniert. Na gut, als nächstes machen wir es unsichtbar. Außerhalb der Feige. Ich werde zu den Feigen Kurfürsten gehen, und ich werde Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass es nicht mehr sichtbar ist. Jetzt schwebe ich über die Feige. Wir möchten, dass der Hintergrund wieder in seine ursprüngliche Position gleitet. Also lasst uns das erledigen. In meinem CSS werde ich hier gehen. Und wenn ich über die Feige schwebe, möchte ich einige Änderungen am Hintergrund vornehmen, der das vorher Pseudo-Element ist. Ich möchte es in seine ursprüngliche Position zurückkehren lassen. Also werde ich transformieren hinzufügen, Y 0 übersetzen. Und natürlich wollen wir, dass das reibungslos geschieht. Also werde ich hier in den vorherigen Pseudoelement-Selektor hinauf gehen, und ich werde alle 0,25 Sekunden Übergang hinzufügen , damit die Aufwärtsbewegung reibungslos erfolgt. Und jetzt, wenn ich gehe und den Mauszeiger über die Feige, können Sie sehen, dass sich der Hintergrund von unten nach oben bewegt, um die Feige zu bedecken. Und wenn ich weg bin, kehrt es zurück und sitzt wieder unter der Figur. Aber wenn wir uns unsere Demo nochmal ansehen, können Sie sehen, dass ich schwebe. Der Hintergrund bewegt sich sofort, um die Abb zu bedecken. Aber wenn das Schweben in wartet eine sehr kurze Zeit, bis die Beschriftung verschwindet und danach verschwindet es auch. Siehst du das? In Ordnung. Wir können das mit der Übergangsverzögerungsfunktion tun. Also zurück zu unserem CSS. Ich werde wieder in das vorher Pseudo-Element gehen, und ich werde Übergangsverzögerung hinzufügen, nur 0,25 Sekunden. Und jetzt, wenn ich gehe und den Mauszeiger über die Feige, können Sie die Hintergrundgewichte für eine sehr kurze Zeit sehen, 0,25 Sekunden, um genau zu sein, dann erscheint. Und wenn schwebend weg in Gewicht 0,25 Sekunden dann verschwindet. Aber wir wollen, dass es nur wartet, bevor er verschwindet. Wir wollen nicht, dass es wartet, wenn wir über die Feige schweben. Mit anderen Worten, wir wollen, dass es sofort erscheint, aber warten Sie die 0,25 Sekunden, bevor Sie verschwinden. Also, was wir tun sollten, ist, dass wir genau hierher gehen sollten. Und ich bin über die Feige schweben, wir werden Übergangsverzögerung 0 Sekunden für unseren Hintergrund hinzufügen. Also, jetzt, was hier passieren wird, ist, wenn ich den Mauszeiger über die Feige, der Hintergrund beginnt sich sofort zu bewegen, weil ich sagte, die Übergangsverzögerung auf 0 genau hier. Wenn ich weg bin, wird es warten und 0,25 Sekunden und dann wird es verschwinden. Werfen wir einen Blick. Cool. Jetzt müssen wir an der Beschriftung arbeiten. Wenn wir einen letzten Blick auf unsere Demo werfen, können Sie sehen, dass, wenn wir den Mauszeiger bewegen, die Beschriftung wartet, bis der Hintergrund die Feige bedeckt und dann erscheint sie. Daher werden wir Übergangsverzögerung verwenden, um es 0,25 Sekunden warten zu lassen, bevor es erscheint. Sie können auch sehen, dass es von oben um einen Abstand von etwa 20 Pixel oder so eingeblendet wird. Und schließlich, wenn wir wegschweben, verschwindet es sofort. Jetzt. In Ordnung, also gehen wir zu unserem CSS und gehen Sie zum Beschriftungs-Selektor. Dann fügen Sie Transformation hinzu, übersetzen y minus 20 Pixel, so dass es um 20 Pixel nach oben bewegt. Dann wollen wir, dass es transparent ist. So werden wir Opazität 0 hinzufügen und schließlich unsere 0,25 Sekunden übergehen. Also gut, wenn ich über die Feige schwebte, wollte ich einige Änderungen an der Beschriftung vornehmen. Ich möchte, dass die Beschriftung wieder verblasst. Also werde ich Deckkraft eins hinzufügen, und ich möchte, dass es in seine Position zurückkehrt. Also werde ich transformieren Y 0 hinzufügen. Und ich wollte warten, bevor es erscheint. Es sollte erscheinen, nachdem der Hintergrund angezeigt wird. Also werde ich ihm Übergangsverzögerung 0,3 Sekunden geben. Und jetzt, wenn ich gehe und den Mauszeiger über die Feige, können Sie sehen, dass die Beschriftung schön von oben nach unten verblasst. 42. 44 – kreative image 6: Hallo an alle. In dieser Lektion erstellen wir diesen schönen Zoom, wenn Sie den Mauszeiger über ein Bild bewegen. Sie können sehen, dass es heranzzoomt und sich ein wenig dreht. Und das können wir mit der Skalierungsfunktion und der Drehfunktion tun. Also zuerst werde ich hier in meinem HTML gehen und ein div hinzufügen. Und darin werde ich mein Bild hinzufügen. Sie können sehen, dass die Bildgröße so groß ist, dass sie den gesamten Bildschirm einnimmt. Also lasst uns zu unserem CSS gehen. Ich werde das div anvisieren, das das Bild enthält. Dann werde ich seine Breite auf 300 Pixel und seine Höhe auf 400 Pixel einstellen. Dann werde ich Rand hinzufügen, 50 Pixel, einfarbig weiß. Dann werde ich das Bild ausrichten und seine Breite auf 100 einstellen, so dass es 100% seines Containers erhält , der 300 Pixel ist, dann setze ich seine Höhe auch auf 100%. Ja, jetzt sieht es viel schöner aus. Dann werde ich Übergangstransformation 1 Sekunde hinzufügen. Und als nächstes, wenn ich den Mauszeiger über das Bild führe, wollte ich größer werden und ein wenig im Uhrzeigersinn drehen, wie in unserer Demo. Also werde ich sagen, Bild auf Hover Transformationsskala, Sagen wir 1.2. So werden die Breite und Höhe um dieses Verhältnis zunehmen. Dann füge ich ein Leerzeichen hinzu und füge rotieren nur neun Grad hinzu. Jetzt, wenn ich gehe und mit dem Mauszeiger über das Bild gehe, können Sie sehen, dass es größer wird und aus dem Container-Div herausgeht, keine Sorge, wir können das leicht beheben, indem wir direkt hier in den Container gehen und Überlauf hinzufügen , so dass das Bild nicht mehr aus dem Container zu gehen. Und jetzt, wenn ich gehe und den Mauszeiger über das Bild, können Sie sehen, dass wir den schönen Zoom in Rotationseffekten bekommen. Wir haben es gewollt. 43. 45 – kreative image: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Bild-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über das Bild zeige, dieser Effekt passiert, wo wir einen grauen Hintergrund haben, der von der rechten unteren Ecke kommt , bis er das Bild bedeckt. Dann erscheint dieser Text. Wir haben eine Überschrift, die von der oberen rechten Seite kommt, einen Absatz, der von der unteren linken Seite kommt, und einen Link, der von unten kommt. Wir werden lernen, wie man all dies schafft. Beginnen wir also zunächst mit dem Erstellen des Layouts dieses Beispiels. Ich werde in meinem HTML beginnen und ich werde ein div hinzufügen, ihm eine Klasse von Containern geben. Dann werde ich darin ein Bild hinzufügen. Das wird also unser Bild sein. Dann unterhalb werde ich ein anderes div hinzufügen, ihm eine Klasse von Beschriftung geben. Dies wäre also das div, das alle anderen Elemente enthält. Und darin werde ich ein h2 hinzufügen und sagen, Bild schweben. Dann werde ich unten einen Absatz hinzufügen und etwas Demo-Text hinzufügen. Dann werde ich schließlich ein Anker-Tag hinzufügen und sagen Read more. In Ordnung, lassen Sie uns zu unserem CSS gehen, um diese Elemente so aussehen zu lassen, wie wir wollen. Ich werde das div mit der Klasse des Containers ansprechen, der alle Elemente darin hat. Und ich werde Breite hinzufügen, 450 Pixel, Höhe 300 Pixel. Dann relativ positionieren. Dann werde ich das Bild ausrichten und Breite 100% hinzufügen. Und jetzt können Sie sehen, dass der Container jetzt eine Breite von 450 Pixeln und eine Höhe von 300 Pixeln hat , und das Bild ist darin enthalten. In Ordnung, lasst uns weiter arbeiten. Wir werden den Overlay-Hintergrund mit dem vor Pseudo-Element des Containers erstellen. Also werde ich das anvisieren und Inhalte hinzufügen. Leere Saiten. Position absolut, oben, 0, links 0, Breite 101%, 100%. Hintergrundfarbe. Diese graue Farbe. Deckkraft, 0,8. Und schließlich Übergang oder 0,25 Sekunden. Und jetzt können Sie sehen, dass der graue Hintergrund jetzt die gleiche Breite und Höhe hat wie der Container und vertuscht ihn. Aber wenn Sie sich erinnern, erscheint dieser graue Hintergrund erst dann, wenn wir den Mauszeiger über das Bild bewegen und es von der rechten unteren Ecke angezeigt wird. Und es wurde auch um 45 Grad gedreht. Also lasst uns seine Position ändern und drehen. Ich gehe hierher zurück und füge Transformation hinzu. Übersetzen Sie 550 Pixel auf der X-Achse und 300 Pixel auf der Y-Achse. So jetzt können Sie sehen, dass der graue Hintergrund in dieser neuen Position sitzt. In Ordnung, Lassen Sie uns es auch um 45 Grad drehen. Ich gehe zurück und füge Rotation 45 Grad hinzu. Jetzt ist es gedreht. Und schließlich, wenn wir schweben, wollen wir, dass es über das Bild bewegt und es vollständig verdeckt. Also werde ich hierher zurückgehen und ich schwebe über das div mit der Klasse des Containers. Ich werde Änderungen vornehmen, die mit dem vorher Pseudo-Element geschehen sind, das der graue Hintergrund ist. Ich werde transformieren, übersetzen, negative 50 Pixel auf der x-Achse und negative 150 Pixel auf der Y-Achse hinzufügen . Dann wollen wir es rotieren. Also werde ich auch drehen 45 Grad hinzufügen. Und jetzt, wenn ich zurückgehe und den Mauszeiger über das Container-Div zeige, können Sie sehen, dass sich der graue Hintergrund zum Bild bewegt, aber er verdeckt es nicht vollständig. Es deckt nur einen kleinen Teil davon ab. Also müssen wir seine Breite und seine Höhe erhöhen, so dass es es vollständig bedeckt. Also werde ich zurückgehen und die Breite auf 120% und die Höhe auf 205% ändern. Und jetzt ist der graue Hintergrund viel größer. Und wenn ich den Mauszeiger über das Bild zeige, kann man sehen, dass der graue Hintergrund hereinkommt und es vollständig verdeckt, was uns den Effekt gibt, den wir wollen. Okay, jetzt lasst uns an der Beschriftung arbeiten und sie stylen. Ich werde das div mit der Klasse der Beschriftung anvisieren. Dann werde ich Position, absolut, oben, 0, links 0 als auch hinzufügen . Dann Breite 100%, und Höhe 100% als auch. Dann werde ich eine rote temporäre Hintergrundfarbe hinzufügen. Und jetzt können Sie sehen, dass die Beschriftung oben auf dem Container div sitzt, weil wir gesagt haben, dass es die Positionseigenschaft absolut ist. Es ist also relativ zu dem Container div positioniert, das eine relative Positionseigenschaft hat. Und es hat auch die gleiche Breite und Höhe wie das Container-div, weil wir seine Breite und Höhe auf 100% setzen. In Ordnung. Jetzt wollen wir die Erfassung des Layouts unserer Demo geben. Wir wollen das H2 oben, dann den Absatz in der Mitte und den Link unten. Und alle von ihnen zentriert zu sein und haben einen angemessenen Abstand zwischen ihnen. Wir können das mit Flexbox tun. Also lasst uns hier gehen und Display flex hinzufügen. Dann, um die Elemente vertikal übereinander auszurichten, werden wir Flexrichtungsspalte hinzufügen. Dann, um sie zu trennen, fügen wir rechtfertigen Inhalt Raum um. Dann verwandeln Farbe, Weiß und Text Großbuchstaben. So können Sie jetzt sehen, dass die Elemente in der Catherine Deneuve übereinander sitzen und etwas Raum zwischen ihnen haben. Lasst uns weitermachen. Ich werde das H2 anvisieren. Dann, um es zu zentrieren, werde ich Text ausrichten, zentrieren. Dann Schriftgröße, 17 Pixel, Padding, 20 Pixel, Rand oben 20 Pixel. Und schließlich, Hintergrundfarbe, RGB, 0.8000. Und jetzt können Sie sehen, dass das H2 in dieser Position an der Spitze des Container-div sitzt. Ordnung? Wenn Sie sich erinnern, wenn Sie den Mauszeiger über das Bild bewegen, würde sich das H2 von der rechten oberen Ecke bewegen und zu dieser Position kommentieren. Also gehen wir zurück und machen das. Ich werde hier gehen und transformieren hinzufügen, 200 Pixel auf der x-Achse übersetzen. So bewegt es sich auf 100 Pixel nach rechts und negative 200 Pixel auf der Y-Achse. Es bewegt sich also 200 Pixel nach oben. Dann werde ich Übergang 0, 0, 0,25 Sekunden hinzufügen. Wenn Sie dann über das Container-div schweben, möchten wir, dass sich das H2 wieder in seine ursprüngliche Position bewegt. Also werde ich sagen, Container schweben H2. Und ich werde transformieren hinzufügen, 0 und 0 übersetzen. Und jetzt können Sie sehen, dass das H2-Element oben auf dem Container div in seiner oberen rechten Ecke sitzt . Und wenn wir den Mauszeiger über den Container bewegen, kehrt er in seine ursprüngliche Position zurück. In Ordnung, lassen Sie uns an dem Absatz arbeiten, den ich anvisiere. Fügen Sie dann Schriftgröße 16 Pixel, Breite, 80% der Containerbreite hinzu. Und um es in der Mitte auszurichten, werde ich. Self ausrichten, zentrieren, dann Text ausrichten, zentrieren, um den Text zentrieren. Und schließlich Übergang 0, 0. Und jetzt können Sie sehen, dass der Text innerhalb des Container-div zentriert ist und 80 Prozent seiner Breite einnimmt. Und in unserer Wirkung kommt der Text von der linken unteren Ecke. Also gehen wir zurück und machen das. Ich gehe zurück und füge Transformation hinzu, übersetze negative 200 Pixel auf der x-Achse. Es wird also um 200 Pixel und 200 Pixel auf der Y-Achse nach links verschoben. So wird es 200 Pixel nach unten verschoben werden. Dann gehe ich hier runter. Und wenn ich über den Container schwebe, werde ich einige Änderungen an dem Absatz vornehmen. Ich werde transformieren hinzufügen, 00 übersetzen. Und jetzt sitzt der Absatz auf der linken unteren Seite. Und wenn wir den Mauszeiger über den Container bewegen, geht er zurück in seine ursprüngliche Position. Alles klar, jetzt bleibt der Knopf oder der Link. Also lass es uns wählen. Ich werde es ins Visier nehmen. Dann fügen Sie Text, Dekoration hinzu. Keiner. Hintergrundfarbe, schwarze Farbe. Weiß. Breite 100 Pixel. Dann Polsterung, 15 Pixel. Rand, unten 20 Pixel. Dann wieder, um es horizontal zu zentrieren, werde ich ausrichten selbst hinzufügen, zentrieren. Dann schließlich Übergang oder 0,25 Sekunden. Und jetzt können Sie sehen, dass der Knopf genau so aussieht, wie wir wollen, und er sitzt auf dem Boden. In Ordnung. Wir wissen, dass die Schaltfläche von unten kommt, wenn Sie über den Container div schweben. Also lasst es uns unten positionieren. Ich werde hier zurück gehen und transformieren hinzufügen, y 100 Pixel übersetzen. Wenn ich dann über den Container schwebe, werde ich einige Änderungen an dem Link vornehmen. Ich werde transformieren hinzufügen, Y 0 erneut übersetzen, so dass es zu seiner Position zurückkehrt. Und jetzt, wenn ich zurückgehe, können Sie sehen, dass die Taste 100 Pixel unter dem Container div sitzt. Und wenn ich den Mauszeiger darüber führe, kehrt der Knopf in seine ursprüngliche Position zurück. Jetzt haben wir noch eins, und das ist, all diese Elemente zu verbergen. So erscheinen sie nur, wenn sie schweben. Ich werde zurück in das Container-Div gehen und ich werde Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, wie sie alle verschwinden. Und wenn Sie über unser Container-Div schweben, erscheinen sie wieder und unsere Wirkung geschieht. Aber Sie können sehen, wenn Sie schweben, alle erscheinen sofort. Zur gleichen Zeit. Es wäre schön, wenn wir einige Übergangsverzögerungen haben. Daher möchten wir, dass der Overlay-Hintergrund sofort ohne Verzögerung angezeigt wird. Danach wollen wir, dass das H2 erscheint. Dann der Absatz und schließlich der Link am unteren Rand. Also gehen wir zurück und fügen das hinzu. Ich werde hier gehen und Übergangsverzögerung 0,3 Sekunden hinzufügen. Das heißt, wenn ich über den Container schwebe, warten wir 0,3 Sekunden. So wird es erscheinen, nachdem der Hintergrund vollständig sichtbar ist. Dann werde ich hierher gehen und diesmal Übergangsverzögerung 0,4 Sekunden hinzufügen , so dass der Absatz etwas nach dem H2 erscheint. Dann endlich hier und fügen Sie Übergangsverzögerung 0,5 Sekunden hinzu. Der Link wird also nach 0,5 Sekunden des Mauszeigs über das Container-div angezeigt. Und jetzt, wenn ich zurückgehe und mit dem Mauszeiger über das Bild gehe, können Sie sehen, dass der Hintergrund sofort erscheint. Und danach erscheinen alle drei Elemente nacheinander mit einem sehr leichten Zeitunterschied. Und wenn sie wegschweben, verschwinden sie alle sofort zur gleichen Zeit. Sie warten nicht, da die Übergangsverzögerungseigenschaft angewendet wird, wenn nur der Mauszeiger angezeigt wird. Also passiert die Verzögerung, wenn wir schweben, und es passiert nicht, wenn wir weg schweben. Deshalb verschwinden alle Elemente sofort. Und damit haben wir diesen Effekt beendet, und in den nächsten Lektionen werden wir weitere Effekte wie diese in diesem Beispiel sehen. So sehen wir uns in der nächsten Lektion. 44. 46 – kreative image 8: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir ein anderes Bild erstellen, Hover-Effekt. Sie können sehen, wenn ich den Mauszeiger über das Bild schiebe, dieser Effekt passiert, wenn der Overlay-Hintergrund von rechts zu einer Position kommt und Sie sehen können, dass er gedreht wurde, während es ein Weg war. Dann, wenn es zurückkommt, wird es Rotationsgrad 0. Es ist also nicht mehr gedreht. Dann haben wir die Verbindung von oben zu dieser Position kommen. Dann kommt der Absatz von rechts zu seiner Position und auch gedreht, während es ein Weg war. Dann kommt der H2 schließlich von oben in seine Position. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Sie können sehen, dass wir unsere Stile aus der vorherigen Lektion haben. Also ist alles an seinem Platz und wir werden nur die Stile hinzufügen, die für unsere Wirkung verantwortlich sind. Beginnen wir also mit dem Overlay-Hintergrund. Ich werde das vorherige Pseudo-Element des Containers anvisieren. Und ich werde transformieren hinzufügen, 650 Pixel übersetzen. So wird es 650 Pixel nach rechts entlang der x-Achse übersetzt werden, dann negativ 100 Pixel. So wird es 100 Pixel nach oben verschoben werden. Auf der Y-Achse. Ich werde auch um 180 Grad drehen. So wird es um 180 Grad gedreht, wenn es weg ist. Und schließlich werde ich Übergang 0, 0 hinzufügen. Dann darunter. Und wenn ich über das Container-div schwebe, werde ich einige Änderungen vornehmen, die mit ihnen vor dem Pseudo-Element passiert sind. Ich werde transformieren hinzufügen, 0 und 0 übersetzen. Es kehrt also wieder in seine ursprüngliche Position zurück und dreht dann 0 Grad. Es wird also wieder auf 0 gedreht, was uns den Effekt gibt, den wir wollen. Und jetzt können Sie sehen, dass der Hintergrund in dieser Position sitzt, 650 Pixel nach rechts und 100 Pixel nach oben. Und es wird auch um 180 Grad gedreht. Und wenn ich den Mauszeiger über das Bild führe, können Sie sehen, dass der Hintergrund in seine ursprüngliche Position zurückkehrt , während er sich auf 0 Grad dreht, was uns diesen schönen Effekt gibt. Alles klar, lassen Sie uns an der H2 arbeiten. Ich werde es zielen und transformieren hinzufügen, y negative 150 Pixel übersetzen. So wird die h2 um 150 Pixel nach oben verschoben. Dann werde ich Übergang alle 0,2 Sekunden hinzufügen. Wenn ich dann über das Container-div schwebe, werde ich das H2 anvisieren. Und fügen Sie Transformation Y 0 Pixel zu übersetzen, so dass es an seine Position zurückkehrt. Ich werde auch Übergangsverzögerung 0,5 Sekunden hinzufügen , so dass sie angezeigt wird, nachdem der Hintergrund erscheint. Und jetzt können Sie sehen, dass die H2 oben auf dem Bild sitzt. Und wenn ich den Mauszeiger über das Bild führe, wiegt es 0,5 Sekunden und bewegt sich dann wieder in seine Position. Und beachten Sie, dass, wenn ich weg schwebe, es sofort wieder nach oben bewegt. Es weckt nicht 0,5 Sekunden, wenn Sie weg schweben weil wir die Übergangsverzögerung nur beim Schweben hinzugefügt haben. In Ordnung, gehen wir zum Absatz. Es wurde nach rechts verschoben und gedreht. Also werde ich es ins Visier nehmen. Fügen Sie dann Transformieren hinzu, übersetzen Sie X 300 Pixel und drehen Sie dann um 90 Grad. Dann werde ich Übergang oder 0,2 Sekunden hinzufügen. Wenn ich dann den Mauszeiger über das Container-div führe, werde ich den Absatz anvisieren. Dann füge ich Transformation hinzu, übersetze X wieder auf 0 zurück und drehe auch auf 0 zurück. Dann darunter werde ich Übergangsverzögerung 0,4 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Absatz um 300 Pixel nach rechts verschoben wurde und um 90 Grad gedreht wird. Und wenn Sie mit dem Mauszeiger über das Bild fahren, wiegt es 0,4 Sekunden. Dann dreht es sich zurück auf 0 Grad, während er sich zurück in seine ursprüngliche Position bewegt. Und wenn ich weg bin, kehrt es sofort zurück zur Rate und dreht sich. Lassen Sie uns schließlich an dem Link arbeiten. Ich gehe zurück und zielstrebig. Dann werde ich transformieren hinzufügen, übersetzen y negative 300 Pixel. So wird es um 300 Pixel nach oben verschoben, dann Übergang 0, 0, 0,2 Sekunden. Und wieder, wenn ich über das Container-Div schwebe, werde ich das Anker-Tag anvisieren und transformieren, Y 0 Pixel übersetzen, so dass es zu seiner Position zurückkehrt. Dann werde ich Übergangsverzögerung 0,3 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Link oben auf dem Bild sitzt. Und wenn ich darüber schwebe, wiegt der Link 0,3 Sekunden und bewegt sich dann in seine ursprüngliche Position. Jetzt werde ich zurück gehen und das Container-Divanvisieren das Container-Div und Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass alle Elemente unsichtbar sind. Und wenn wir den Mauszeiger über das Bild bewegen, erscheinen sie wieder. Und der Effekt, den wir wollen, passiert perfekt. 45. 47 – kreative image 9: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir mit Bild-Hover-Effekte fortfahren und wir werden diesen schönen Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über das Bild halte, es auf 0 skaliert, bis es verschwindet. Und die Hintergrundfähigkeiten steigen beim Drehen auf und alle Elemente verblassen schön. Also lassen Sie uns diesen Effekt erzeugen. Sie können sehen, wir haben alle Stile aus den vorherigen Lektionen, die für die Lokalisierung der Elemente in ihren Positionen wie so verantwortlich sind . In Ordnung, wir werden die Stile für diese Lektion direkt hier hinzufügen. Und wir werden das div mit der Klasse des Containers anvisieren. Dann werde ich Hintergrundfarbe hinzufügen. Diese graue Farbe. Dann Rand 10 Pixel, solide und weiß. Wenn ich zurückgehe und das Bild innerhalb des Container-div anvisiere. Und ich werde Übergang 0, 0, 5 Sekunden hinzufügen. Dann darunter. Und wenn ich den Mauszeiger über den Container fahre, werde ich das Bild ausrichten und den Transformationsmaßstab 0 hinzufügen. Und jetzt, wenn ich den Mauszeiger über das Bild zeige, können Sie sehen, dass es auf 0 skaliert und verschwindet. Und wenn es wegschwebt, kommt es zurück auf seine ursprüngliche Größe. Alles klar, lassen Sie uns weitermachen. Ich werde das vorher Pseudo-Element des Containers anvisieren, das ist dieser graue Hintergrund. Und ich werde diese Hintergrundfarbe in diese grüne Farbe ändern. Wir sahen, dass es sich beim Drehen ausdehnt. Fügen Sie also Transformation hinzu, skalieren Sie 0 , drehen Sie negative 180 Grad und schließlich Übergang 0, 0, 5 Sekunden. Dann werde ich sagen, wenn ich über den Container schwebe, werde ich einige Änderungen am vorherigen Pseudo-Element vornehmen. Ich werde Transformation hinzufügen, eins skalieren und 0 Grad drehen, so dass es von 0 auf eins skaliert wird, während sie von 180 Grad auf 0 Grad zurückgedreht wird, was uns den Effekt gibt, den wir wollen. Und jetzt, wenn ich gehe und mit dem Mauszeiger über das Bild, können Sie sehen, während das Bild nach unten skaliert wird, der grüne Hintergrund skaliert und rotiert, was uns diesen schönen Effekt gibt. Aber es wäre besser, wenn der grüne Hintergrund erst nach oben skaliert wird , nachdem das Bild auf 0 verkleinert wurde. Daher werden wir dem grünen Hintergrund einige Übergangsverzögerungen hinzufügen. Wenn Sie darüber schweben. Ich werde hierher zurückgehen und Übergangsverzögerung 0,5 Sekunden hinzufügen. Und wir haben diesen Wert speziell hinzugefügt, weil die Übergangsdauer des Bildes 0,5 Sekunden beträgt, was bedeutet, dass das Bild auf 0,50 Sekunden skaliert wird. Der grüne Hintergrund erscheint also, nachdem das Bild vollständig verschwindet. Und jetzt, wenn ich den Mauszeiger über den Container fahre, können Sie sehen, dass das Bild zuerst auf 0 skaliert wird, dann wird der grüne Hintergrund beim Drehen nach oben skaliert. Danach. Wir müssen nun auch den Text einblenden lassen. Also werde ich zurückgehen und das H2-Element anvisieren. Dann werde ich Deckkraft 0 und Übergang oder 0,5 Sekunden hinzufügen . Wenn ich dann über den Container schwebe, werde ich das H2 anvisieren und erneut Opazität hinzufügen. So wird es schön verblassen. Und ich möchte dasselbe auch für die anderen beiden Elemente tun. Also werde ich hier neben dem h2-Element gehen und den Absatz sowie den Link hinzufügen. Und ich werde dasselbe für den Schwebeeffekt tun. Und jetzt können Sie sehen, dass die drei Elemente jetzt ausgeblendet sind, weil ihre Deckkraft 0 ist. Und wenn ich mit dem Mauszeiger über das Bild fahre, erscheinen sie wieder. Aber wie Sie sehen können, erscheinen sie sofort. Wir möchten, dass sie erst angezeigt werden, nachdem der grüne Hintergrund erscheint. Wir werden ihnen also einige Übergangsverzögerungen hinzufügen. Also werde ich zurückgehen und unter Schwebeeffekt, ich werde Übergangsverzögerung 1 Sekunde hinzufügen. Wenn Sie den Mauszeiger über das Bild halten, warten diese Elemente 1 Sekunde, dann erscheinen sie. Und ich wählte 1 Sekunde, weil das Bild 0,5 Sekunden dauert, dann dauert der grüne Hintergrund weitere 0,5 Sekunden. Also nehmen beide zusammen 1 Sekunde in Anspruch, bevor sie erscheinen. Deshalb habe ich 1 Sekunde als Übergangsverzögerungswert für unsere drei Elemente verwendet. Und jetzt, wenn ich über das Container-Div schwebe, können Sie sehen, dass das Bild zuerst nach unten skaliert wird, dann wird der grüne Hintergrund beim Drehen nach oben skaliert. Und schließlich verblassen die drei Elemente schön. Aber wenn Sie wegschweben, können Sie sehen, dass alle Elemente sofort verschwinden, ganz. Besser, wenn der grüne Hintergrund und die drei Elemente zuerst verschwinden, dann kommt das Bild hinein und erscheint wieder. Wenn wir also wegfahren, wollen wir das Bild warten lassen, bis der grüne Hintergrund und die drei Elemente vollständig verschwinden. Danach sollte das Bild wieder nach oben skaliert werden. Um dies zu tun, werden wir hier in die Bildauswahl gehen und Übergangsverzögerung 0,5 Sekunden hinzufügen . Und jetzt, wenn ich gehe und den Mauszeiger über das Container-Div, dann schweben Sie weg. Sie können den grünen Hintergrund sehen, und die drei Elemente verschwinden zuerst. Dann wird das Bild wieder skaliert. Das Bild wartet also nur 0,5 Sekunden und skaliert dann, aber es gibt ein Problem. Das Bild wiegt auch 0,5 Sekunden, wenn der Mauszeiger über den Container fährt. Aber wir wollen, dass es sofort erscheint. Wir wollen also, dass es nur 0,5 Sekunden wartet, wenn man vom Container weg schwebt, nicht einer, der darüber schwebt. Wir können das tun, indem wir hier zurück gehen und Übertragungsverzögerung 0 hinzufügen. Das bedeutet, wenn wir den Mauszeiger über das Container-div bewegen, wird die Übertragungsverzögerung des Bildes 0 sein. So wird es sofort erscheinen, weil wir Übergangsverzögerung 0.5 hier oben zum Bild hinzugefügt haben. Es wird nur funktionieren, wenn wir wegfahren, und das ist genau das, was wir wollen. Wenn ich also über das Container-Div gehe, skaliert das Bild sofort nach unten, dann wird der grüne Hintergrund beim Drehen nach oben skaliert. Und schließlich verblassen die drei Elemente. Und wenn Sie weg schweben, verschwinden der grüne Hintergrund und die Elemente sofort und das Bild erscheint danach, was uns den Effekt gibt, den wir wollen. Ich hoffe, Sie sind jetzt vertraut mit der Übergangsverzögerungseigenschaft und wie sie in verschiedenen Situationen verwendet wird. Egal, ob Sie möchten, dass Ihr Elementgewicht nur schwebt oder nur auf dem Schweben entfernt wird, oder in beiden Fällen. Wenn Sie es also nur beim Schweben anwenden möchten, können Sie dies leicht tun, indem Sie es in den schwebenden Codeblock hinzufügen. Und wenn Sie es nur anwenden möchten, wenn Sie den Mauszeiger wegfahren, können Sie es im Elementcode anwenden. Dann können Sie im Hovering-Code ihn auf 0 setzen. Es wird also 0 sein, wenn nur schwebt. Es wird also nur 0 sein, wenn Sie schweben, und wenn Sie wegfahren, wird es den Wert haben, den Sie es im Elementcode anwenden. Und schließlich, wenn Sie es in beiden Fällen anwenden möchten, wenn Sie schweben und wegfahren, fügen Sie es einfach im Elementcode hinzu. 46. 48 – kreative image 10: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren Bild-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über das Bild halte, der grüne Hintergrund verblasst n und der H2 und der Absatz verblasst ebenfalls. Sie können sehen, dass sie größer waren als beim Schweben. Wir werden kleiner und kehren zu ihrer ursprünglichen Größe zurück und der Link bewegt sich von unten in seine Position. Das wird also ein netter Effekt sein. Mal sehen, wie wir es schaffen können. Hier können Sie sehen, dass wir unsere Stile aus den vorherigen Lektionen haben und wir werden nur die Stile hinzufügen, die für unsere Wirkung verantwortlich sind. Also zuerst werden wir das Hintergrundverblassen erstellen. In der Tat werde ich das vorherige Pseudo-Element des Containers anvisieren. Und ich werde Opazität 0 hinzufügen, dann Übergang oder 0,3 Sekunden, dann darunter. Und wenn ich über das Container-Div schwebe, werde ich das vorherige Pseudo-Element anvisieren. Fügen Sie dann Deckkraft hinzu. Wieder eins. Und jetzt können Sie sehen, dass der grüne Hintergrund verschwunden ist. Und wenn ich mit dem Mauszeiger über das Bild gehe, verblasst es schön. Alles klar, lassen Sie uns sowohl an der H2 als auch am Absatz arbeiten. Wir werden sie beide anvisieren. Dann werde ich Transformationsskala 10 hinzufügen, so dass es 10 Mal größer sein wird. Dann werde ich unterhalb der Deckkraft 0 hinzufügen. Dann endlich der Übergang. Alle drei Sekunden. Dann unten, wenn ich über das Container-div schwebe, werde ich das H2-Tag anvisieren, und ich werde dasselbe für den Absatz tun. Dann werde ich Deckkraft eins hinzufügen dann Skalierung wieder eins transformieren. Und jetzt können Sie sehen, die H2 und der Absatz sind jetzt versteckt. Und wenn Sie den Mauszeiger über das Bild bewegen, erscheinen sie wieder. Sie können sehen, dass sie kleiner werden, bis sie auf die ursprüngliche Größe zurückkehren. Schließlich wollen wir an dem Link arbeiten. Wir möchten, dass es von unten nach oben bewegt wird, wenn wir den Mauszeiger über das Bild bewegen. Also werde ich hierher zurückgehen und den Link anvisieren. Dann werde ich transformieren hinzufügen, y übersetzen, 150 Pixel. So wird der Link um 150 Pixel nach unten verschoben. Dann werde ich Übergang oder 0,3 Sekunden hinzufügen. Und darunter, wenn ich über das Container-Div schwebe, werde ich das Anker-Tag anvisieren und transformieren. Übersetzen Sie Y 0 erneut, so dass es an seinen ursprünglichen Platz zurückkehrt. Und jetzt, wenn ich zurückgehe, können Sie sehen, dass der Link auch verschwindet. Es sitzt tatsächlich hinter dem Bild, aber es erscheint nicht, weil wir die Überlaufeigenschaft als im Container div versteckt eingestellt hatten . Und wenn ich über das Bild schwebe, können Sie sehen, dass der Link von unten nach oben kommt, was uns diesen schönen Effekt gibt. Und alle Elemente haben jetzt den Schwebeeffekt, den wir wollen. Aber lassen Sie uns unseren Elementen etwas Verzögerung hinzufügen, wenn Sie schweben , so dass sie leicht nach dem grünen Hintergrund erscheinen. Ich werde eine 0,2 Verzögerung für jeden von ihnen hinzufügen. Also werde ich hierher gehen und Übergangsverzögerung hinzufügen, 0,2 Sekunden. Dann unten hier werde ich auch Übergangsverzögerung 0,2 Sekunden hinzufügen. Und jetzt, wenn ich gehe und mit dem Mauszeiger über das Container-Div gehe, können Sie sehen, dass die Elemente leicht nach dem grünen Hintergrund erscheinen. Und wenn sie wegschweben, verschwinden sie alle sofort zusammen. Die Verzögerung gilt in diesem Fall nicht, da wir sie nur für den Schwebevorgang festlegen. 47. 49 – kreative image 11: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren Bild-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über das Bild schiebe, es wird beim Drehen auf 0 skaliert und seine Deckkraft nimmt ebenfalls auf 0 ab. Dann verblasst ein grüner Hintergrund. Dann bewegen sich die drei Elemente nacheinander von oben in ihre ursprüngliche Position . Der Link wird zuerst angezeigt, dann der Absatz und dann die Überschrift. Wir werden die Übergangsverzögerung Eigenschaft verwenden, um den grünen Hintergrund erscheinen, nachdem das Bild verschwindet. Wir werden es auch verwenden, um unsere Elemente nacheinander erscheinen zu lassen. Mal sehen, wie wir das schaffen können. Sie können sehen, dass wir die Stile aus den vorherigen Lektionen haben. Also haben wir unsere Elemente in ihren Positionen sitzen. Lassen Sie uns nun zurückgehen und die Stile für diese Lektion erstellen. Zuallererst werde ich das div mit der Klasse des Containers anvisieren. Und ich werde Hintergrundfarbe hinzufügen. Diese dunkelgraue Farbe, so dass es angezeigt wird, wenn das Bild nach unten skaliert und Rahmen 10 Pixel, einfarbig weiß. Jetzt können Sie sehen, dass wir diesen weißen Rand um den Container div haben, und wir haben auch einen grauen Hintergrund. Alles klar, ich gehe zurück und ziele das Bild im Container an. Und ich werde Übergang 0, 0, fünf Sekunden hinzufügen. Dann unterhalb, wenn ich über den Container schwebe, werde ich das Bild anvisieren. Und wir wollen das Bild beim Drehen nach unten skalieren. Also werde ich transformieren hinzufügen, 720 Grad drehen und dann 0 skalieren. Wir wollen auch, dass es verblasst, während der Effekt geschieht. Also werde ich Deckkraft 0 hinzufügen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Container gehe, das Bild beim Drehen nach unten skaliert und seine Deckkraft nimmt ab, bis es verschwindet. In Ordnung, lassen Sie uns auf dem grünen Hintergrund arbeiten. Ich werde das vorherige Pseudo-Element des Containers anvisieren. Und ich werde eine Hintergrundfarbe hinzufügen. Diese grüne Farbe, dann Deckkraft 0 und Übergang 0, 0. Dann darunter. Und wenn ich über den Container schwebe, werde ich Änderungen am vorherigen Pseudo-Element vornehmen. Ich werde es Opazität machen. Wieder eins. Also wird es diesen schönen Verblasseffekt haben, und ich möchte, dass das passiert, nachdem das Bild verschwindet. Also, während wir Übertragungsverzögerung 0,5 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Overlay-Hintergrund gerade verschwunden ist, weil wir seine Deckkraft auf 0 setzen. Und wenn der Mauszeiger über den Container fährt, erscheint er wieder über dem grauen Hintergrund des Containers, nachdem das Bild vollständig verschwindet. In Ordnung, gehen wir zurück und schaffen den Effekt unserer drei Elemente. Ich werde mit dem Link beginnen. Ich werde es ins Visier nehmen. Und wir wollen, dass es von oben in seine ursprüngliche Position bewegt. Also werde ich transformieren hinzufügen, y negative 300 Pixel übersetzen, dann Übergang oder 0,2 Sekunden. Und darunter wird über den Container schweben. Ich werde das Anker-Tag anvisieren und transformieren. Übersetzen Sie Y 0 erneut, so dass es an seine ursprüngliche Position zurückkehrt. Ich werde auch Übergangsverzögerung 0,5 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Link oben auf dem Container sitzt. Und wenn ich den Mauszeiger über den Container halte, wiegt der Link 0,5 Sekunden und geht dann zurück in seine Position. Lassen Sie uns schnell den gleichen Effekt mit einem Absatz und der Überschrift machen. Ich gehe zurück und kopiere diesen Code. Dann fügen Sie es zweimal erneut ein. Dann werde ich den Absatz anvisieren. Diesmal. Ich werde auch den Absatz hier im Schwebeeffekt ansprechen. Und ich werde nur die Übergangsverzögerung auf 0,7 Sekunden ändern. So wird es leicht nach dem Link erscheinen. Dann werde ich diesmal die Überschrift anvisieren und die Übergangsverzögerung auf 0,9 Sekunden ändern. So wird es nach dem Absatz erscheinen. Dann gehe ich hier in das Container-Div und füge einen Überlauf hinzu , der versteckt ist, so dass die Elemente außerhalb des Containers versteckt werden. Und jetzt können Sie sehen, dass alles außerhalb des Container-div versteckt ist. Und wenn ich darüber schwebe, erscheinen die drei Elemente nacheinander. Also, was wir gemacht haben, ist einfach. Wir haben das Bild gerade beim Drehen nach unten skaliert. Dann haben wir den grünen Hintergrund verblassen lassen. Und schließlich ließen wir unsere Elemente nacheinander erscheinen. Und das gibt uns die Wirkung, die wir wollen. 48. 51 – kreative Schnittflächen: Hallo an alle. In dieser Lektion werden wir diesen Menü-Hover-Effekt erstellen. Wenn ich den Mauszeiger über einen Link im Menü führe, können Sie sehen, dass zwei Linien skaliert werden. Die Oberseite, wenn wir von links und unten einen Schnurrbart von rechts skalieren. Die Idee hinter diesem Effekt ist einfach. Wir werden nur die vorher Pseudo-Elemente verwenden, um die obere Zeile zu erstellen, die die volle Breite des Links sein wird. Dann werden wir Skala x 0 für sie hinzufügen, so dass es verschwinden wird. Wenn wir den Mauszeiger über den Link bewegen, werden wir es so machen, dass die Skala x eins ist. So erscheint es wieder. Aber wir werden den Transformationsursprung links machen. So wird es von links nach rechts wachsen. Cool, aber lasst uns zuerst unser Menü im Stil bauen, ich werde zu meinem HTML gehen und ein UL LI und ein Anker-Tag darin hinzufügen. Und ich werde sagen, nach Hause. Dann kopiere ich das und füge es wieder viele Male ein. Und ich werde den Text ändern. Jetzt können Sie unser Menü sehen und es ist horizontal und vertikal innerhalb des Körpers zentriert, dank einiger Flexbox-Stile, die dem Körper direkt hier hinzugefügt werden. Gut. Lassen Sie uns nun an der Speisekarte selbst arbeiten. Ich werde die UL anvisieren, dann Padding 0 und Marge 0 hinzufügen und dann flex anzeigen, damit das Listenelement nebeneinander sitzt. Und schließlich, Flex Wrap. Umbruch, sodass die Listenelemente in die nächste Zeile fallen, wenn sie keinen verfügbaren Speicherplatz haben. Dann werde ich die Listenelemente in der ungeordneten Liste anvisieren. Und ich werde List-Stil keine hinzufügen , um das Aufzählungszeichen, das neben den Listenelementen angezeigt wird, loszuwerden. Dann werde ich die Links anvisieren. Und ich werde Textdekoration hinzufügen, keine, um die Unterstreichungen zu entfernen. Dann färben Sie diese schöne dunkelgraue Farbe und Schriftgröße. 22 Pixel. Zeigen Sie dann Blockauffüllung, zehn Pixel von oben und unten und 15 Pixel von links und rechts an. Dann schließlich, Position relativ. Und sieh dir das an. Erstaunlich. Jetzt sieht unser Menü genau so aus, wie wir wollen und wir sind bereit, an dem Hover-Effekt zu arbeiten. Also werde ich hier gehen und einen Doppelpunkt hinzufügen. Vorher. Dann werde ich Inhalt hinzufügen, leere Zeichenfolge, dann Position absolut, oben, 0, links, 0, Breite, 100%. Höhe Nur zwei Pixel. Hintergrundfarbe. Unsere schöne dunkelgraue Farbe. Jetzt können Sie sehen, dass die Linie oben erscheint und die volle Breite hat. Und es ist eine kleine Höhe von zwei Pixeln. Lasst uns weiter arbeiten. Ich werde hier gehen und Transformationsskala x 0 hinzufügen, so dass seine Breite 0 sein wird. Und ich werde Übergang 0, 0, 5 Sekunden hinzufügen. Wenn wir dann den Mauszeiger über den Link bewegen, möchte ich, dass die Zeile wieder angezeigt wird. Also werde ich hier gehen und einen Doppelpunkt hinzufügen, den Doppelpunkt davor schweben. Und ich werde Transformationsskala x wieder hinzufügen. Und jetzt, wenn ich den Mauszeiger über einen beliebigen Link führe, können Sie sehen, dass die Linie wieder wächst. Aber es wächst von seinem Mittelpunkt aus, da der Transformationspunkt standardmäßig auf Mitte gesetzt ist. Aber wir wollen, dass es skaliert oder von seiner linken Seite wächst. Also werde ich zurück zu dem gehen, bevor ein Pseudo-Element Transformationsursprung links hinzufügen. Und jetzt, wenn ich wieder über einen Link schwebe, können Sie sehen, dass die Linie jetzt von ihrem linken Endpunkt aus wächst, was uns den genauen Effekt gibt, den wir wollen. Schließlich müssen wir das Endergebnis schaffen, na ja, keine Sorge, es wird sehr einfach sein. Was ich tun werde, ist, dass ich das gesamte vor Pseudo-Element kopiere, es erneut einfüge und ich werde nur einige Änderungen vornehmen. Also zuerst werde ich das Wort vorher zu nachher ändern. Dann werde ich das oben nach unten ändern. So wird die Zeile am unteren Rand des Links sein. Dann werde ich den Transformationsursprung ändern, um zu schreiben , so dass er von seiner rechten Seite, nicht von der linken Seite wachsen wird. Und natürlich werde ich hier gehen und in den Hover-Effekt einbezogen. Wenn ich also den Mauszeiger über den Link führe, sollte das After-Pseudo-Element ebenfalls wachsen. Und das war's. Wenn ich gehe und mit dem Mauszeiger über einen Link, können Sie sehen, dass der Effekt genau das ist, was wir wollten. 49. 52 – kreativer Hintergrund und borders: Hallo an alle. Willkommen zu dieser neuen Lektion in dem Kurs, in dem wir diesen Hover-Effekt erstellen werden , wenn der Mauszeiger über Menüelemente Links sind. So können Sie sehen, dass wir einen Hintergrund haben, der zusammen mit diesen beiden Rändern von der oberen rechten und unteren linken Ecke verblasst . Hab es. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML gehen und ich werde ein UL LI darin und ein Anker-Tag innerhalb des LI hinzufügen . Und ich werde sagen, nach Hause. Dann kopiere ich das, füge es viermal ein. Und ich werde über Portfoliodienste und Kontakt sagen. Dann gehen wir zu unserem CSS, um einige Stile hinzuzufügen. Zuerst werde ich die UL anvisieren, Rand 0, Padding 0 hinzufügen und flex anzeigen, um alle Listenelemente nebeneinander anzuzeigen. Und schließlich, um die Kugeln loszuwerden, werden wir List-Style-Typ hinzufügen. Keiner. In Ordnung, lassen Sie es uns in Bewegung halten. Ich werde das Anker-Tag anvisieren und ich werde seine Farbe auf diese dunkelgraue Farbe setzen. Dann wollen wir die Schriftgröße etwas größer machen. Also werde ich Schriftgröße 20 Pixel hinzufügen. Dann Textdekoration. Keine, um die Unterstreichungen zu entfernen. Text-Transformation. Großbuchstaben, um alle Buchstaben Großbuchstaben zu machen. Padding, fünf Pixel von oben und unten und zehn Pixel von links und rechts. Und wir wollen einige Leerzeichen zwischen den Links hinzufügen. So werden wir Rand 0 Pixel von oben und unten und zehn Pixel von links und rechts hinzufügen . Okay, jetzt werden wir Position, Relativ und Übergang hinzufügen. 0, 0, 5 Sekunden. Gut. Jetzt sitzen unsere Links Seite an Seite mit einigen Zwischenräumen und sie sehen schön aus. Als nächstes arbeiten wir an dem Hover-Effekt. Wir werden die Ränder erstellen, die in der oberen rechten Ecke und in der unteren linken Ecke mit den Vor- und Nachher-Pseudo-Elementen angezeigt werden. Also werde ich gleich hierher gehen und vorher einen Doppelpunkt sagen. Dann werde ich im Inneren Inhalte hinzufügen. Leere Saiten, Position absolut. Und das wird der Rand sein, der in der unteren linken Ecke erscheint. Also sagen wir unten 0 und links 0. Dann werden wir dies vor Pseudoelement oder Quadrat machen und Grenzen hinzufügen. Also werde ich Breite hinzufügen, 12 Pixel, Höhe 12 Pixel. Dann, um zu sehen, was wir jetzt haben, lassen Sie uns eine temporäre Hintergrundfarbe hinzufügen. Also werde ich Hintergrundfarbe hinzufügen, zum Beispiel blau. Hier können Sie sehen, dass die vorher Pseudo-Elemente rechts hier in der unteren linken Ecke sitzt, und es hat eine Breite und Höhe von 12 Pixeln und eine blaue Hintergrundfarbe. Jetzt wollen wir einen Rahmen hinzufügen, um nur die linke Seite und die untere Seite. Also lasst uns das machen. Ich werde zum vorigen Pseudo-Element zurückkehren, und ich werde Rand hinzufügen, drei Pixel fest. Und ich werde diese schöne rote Farbe hinzufügen. Nun, diese Codezeile, die wir gerade hinzugefügt haben, wird einen Rahmen um alle Seiten des blauen Hintergrunds setzen . Wenn wir einen Blick werfen, können Sie sehen, dass wir jetzt einen roten Rand um den blauen Hintergrund hier haben, aber wir wollen nur, dass die Grenze um die untere und linke Seite ist. Um dies zu tun, können wir die Rahmenbreite Eigenschaft verwenden. Also werde ich genau hier innerhalb des vorher Pseudo-Elements zurückgehen, und ich werde Randbreite hinzufügen. Und die border width Eigenschaft akzeptiert vier Werte. Der erste Wert gibt die obere Seite an, dann die rechte Seite, die untere Seite danach, dann schließlich die linke Seite. Also oben, rechts, unten, links. Und weil wir nur Ränder auf der linken und unteren Seite wollen, fügen wir 0 für die obere Seite, dann 0 für die rechte, dann drei Pixel und drei Pixel für die untere und linke Seite hinzu. Und da ist es. Jetzt können Sie sehen, dass wir die Grenze haben, die wir wollen, was bedeutet, dass wir diesen blauen Hintergrund nicht mehr brauchen. Also werde ich hier gehen und es entfernen. Jetzt. Im Moment wollen wir die Grenze in der oberen rechten Ecke erstellen. Das wird wirklich einfach sein. Wir kopieren dies einfach vor dem Pseudo-Element, fügen es ein und ändern vor zu nachher. Dann werden wir anstelle von unten und links oben und rechts hinzufügen. Und wir wissen, dass wir eine Grenze an der oberen und rechten Ecke wollen. Also werden wir diese Rahmenbreite hier fixieren und es drei Pixel machen. Drei Pixel, 00, statt 003 Pixel, drei Pixel. Da gehen wir. Jetzt haben wir die beiden Ränder, und sie sind in der oberen rechten Ecke, in der unteren linken Ecke. Als nächstes möchten wir an dem Hover-Effekt arbeiten. Also wollen wir die Grenzen ein wenig nach innen verschieben und dann die Deckkraft auf 0 setzen, um sie unsichtbar zu machen. Und wenn wir schweben, werden wir sie wieder nach außen verschieben , und wir werden die Deckkraft wieder eins machen. All das wird Sinn ergeben, wenn wir es tun. Also lasst uns dazu kommen. Ich werde genau hier in das vorher Pseudo-Element gehen, das hier die untere rechte Ecke ist. Und ich werde links und unten auf 12 Pixel anstelle von 0 ändern. So können Sie jetzt sehen, dass dies die Grenze nach innen in Richtung der Verbindung selbst schiebt. Und ich werde Opazität 0 hinzufügen, um dies unsichtbar zu machen. Richtig? Jetzt schwebe ich über die Verbindung. Wir wollen die Grenze wieder nach außen bewegen und für uns auftauchen lassen. Also werde ich sagen, ein und ich bin über den Link schweben. Ich möchte einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde Opazität hinzufügen, eins. Dann unten. Wir wollen, dass es nach außen geht. Sagen wir also minus acht Pixel und links minus acht Pixel. Jetzt wollen wir, dass diese Veränderung reibungslos geschieht. Also werden wir hier in das vorher Pseudo-Element gehen, und wir werden Übergang alle Nullen hinzufügen. Also, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass die untere linke Ecke in Bewegungen nach außen erscheint, was uns den Effekt gibt, den wir angestrebt haben. Jetzt. Alles klar, machen wir das schnell für die rechte obere Ecke. Ich werde hier gehen und oben und rechts auf 12 Pixel und 12 Pixel anstelle von 00 ändern. Dann werde ich Opazität 0 hinzufügen dann unsere 0,3 Sekunden übergehen. Und danach werden wir das kopieren. Fügen Sie es erneut ein, wechseln Sie vor zu nachher, unten nach oben, von links nach rechts. Und jetzt, wenn ich gehe und über den Link schwebe, sieht man, dass sich die Grenzen nach außen bewegen, was uns diesen schönen Effekt gibt. Nun, eine Sache bleibt übrig, die den Hintergrund des Links ändert, wenn wir schweben. Lass uns das schnell machen. Ich werde hier gehen und sagen, ich schwebe. Ich werde Hintergrundfarbe hinzufügen, die gleiche rote Farbe wie der Rahmen und Farbe Weiß, um die Textfarbe weiß zu machen, natürlich. Und jetzt, wenn ich über einen Link gehe, kannst du sehen, dass wir den Effekt haben, den wir wollen, was, wie immer, sehr nett ist. 50. 53 – kreative splitted: Hallo an alle. Willkommen zu dieser neuen Lektion in dem Kurs, wo wir diese schöne Menü Hover-Effekt erstellen werden. So können Sie sehen, dass, wenn wir schweben, wir haben diese wirklich schöne Aktion im Gange. Der Hintergrund teilt sich in vier Teile und sie bewegen sich nacheinander von oben nachunten nacheinander von oben nach geben uns dieses Ergebnis. Um diesen Effekt zu erzeugen, erstellen wir zuerst die vier Teile des Hintergrunds skalieren sie dann mit der Skala y-Funktion von oben nach unten. Und schließlich verwenden Sie die Eigenschaft Übergangsverzögerung, um die Verzögerung für jeden von ihnen zu machen und sie nacheinander erscheinen zu lassen. Also lasst uns dazu kommen. Ich beginne direkt hier in meinem HTML, indem ich ein UL LI Anker-Tag hinzufüge. Und ich werde sagen, nach Hause. Dann, um die vier Teile zu erstellen, werden wir Spannweiten verwenden. Also werde ich vier Spannweiten innerhalb des Anker-Tags hinzufügen. Und jede Spanne wird ein Teil des grauen Hintergrunds sein, der erscheint, wenn wir schweben. Dann kopiere ich das gesamte LI, füge es viermal ein. Und ich werde den Text jedes Mal ändern. Also werde ich über Dienstleistungen, Team und Kontakt sagen. Also hier haben wir unsere URL, aber lassen Sie es uns besser aussehen. Ich gehe zu meinem CSS-Ziel, der URL. Und ich werde Rand 0 hinzufügen, Polsterung 0. Und um das Listenelement nebeneinander sitzen zu lassen, fügen wir der URL Displayflex hinzu. Dann wollen wir die Kugeln loswerden. Also werden wir List-Style-Typ hinzufügen, keine. Okay, jetzt lasst uns die Links selbst stylen. Ich werde die Anker-Tags anvisieren, und ich werde Anzeigeblock hinzufügen, damit wir ihnen Breite und Höhe hinzufügen können. Und das werde ich als Nächstes tun. Also werde ich mit 120 Pixel, Höhe, 40 Pixel hinzufügen. Dann, um den Text vertikal und horizontal zu zentrieren, werden wir Zeilenhöhe, 40 Pixel und Text ausrichten hinzufügen . Mitte. Cool. Jetzt werden wir Farbe Rot für jetzt hinzufügen. Dann Text transformieren Großbuchstaben. Und um die Unterstreichungen zu entfernen, werden wir Textdekoration hinzufügen. Keiner. Dann relativ positionieren. Und schließlich Übergang oder 0,5 Sekunden. In Ordnung, jetzt haben wir unsere Link-Setup Seite an Seite und sehen nett aus. Als nächstes werden wir an den Spannweiten arbeiten, um den Hintergrund zu erstellen. Also werde ich die Spannweiten innerhalb der Anker-Tags anvisieren. Und ich werde Position hinzufügen, absolut. Und weil wir vier Spannweiten haben, werden wir die Breite für jeden von ihnen auf 25 Prozent setzen. Dann werden wir die linke Eigenschaft verwenden, um ihre Positionierung zu steuern. Also werde ich Breite hinzufügen, 25 Prozent, dann Höhe, natürlich 100%, weil sie die volle Höhe einnehmen. Dann Hintergrundfarbe, diese dunkelgraue Farbe. Und wir wollen nicht, dass sie den Text auf dem Link vertuschen. Also werden wir Z-Index minus1 hinzufügen, dann links 00. Und was dies tun wird, ist, dass die vier Spannweiten 25 Prozent der Verbindungsbreite von links einnehmen. Also alle von ihnen werden übereinander gestapelt. Wir werden sie individuell anvisieren, um die Position jedes einzelnen zu ändern. Also, wenn ich gehe und die Seite neu lade, können Sie für den ersten Link sehen, zum Beispiel gibt es einen dunkelgrauen Hintergrund, der 25 Prozent der Verbindung mit und das sind tatsächlich die Wald-Spannweiten, aber sie sitzen alle auf übereinander. In Ordnung. Lassen Sie uns ihre Positionen ändern, um die gesamte Breite der Verbindung abzudecken. Wir werden jede Spanne individuell anvisieren. Ich werde gleich hier gehen und span n-ten Kind sagen. Und ich werde links 25 Prozent hinzufügen. Es beginnt also bei 25 Prozent der Linkbreite von links. Jetzt können Sie sehen, dass es jetzt nach links verschoben ist und wir decken 50 Prozent der Verbindung ab, nicht 25 Prozent mehr. Also kopiere ich das, füge es zweimal wieder ein. Und ich werde die dritte Spanne anvisieren. Ändern Sie links auf 50%. Dann die vierte Spanne und ändern Sie links auf 75 Prozent. So jetzt können Sie sehen, dass die vier Spannweiten nebeneinander liegen. Jeder von ihnen hat 25 Prozent der Verbindungsbreiten. Und zusammen sind sie 100% und decken den Link ab. Im Moment müssen wir an dem Hover-Effekt arbeiten. Ich werde hier in den allgemeinen Spannen Selektor gehen und ich werde Transformationsskala y 0 hinzufügen , so dass die Spannweiten verschwinden. Dann unten werde ich sagen, wenn wir den Mauszeiger über die Links bewegen, werden wir einige Änderungen an den Spannweiten vornehmen. Wir werden Transformationsskala y hinzufügen, eins, um sie wieder auf ihre ursprüngliche Größe zurückzusetzen. Und um den Effekt reibungslos zu machen, werden wir hier nach oben gehen und einen Übergang oder 0,5 Sekunden hinzufügen . Jetzt, richtig? Wenn ich nun mit dem Mauszeiger über die Links gehe, können Sie sehen, dass die Spannweiten bis zu ihrer ursprünglichen Position skaliert werden. Aber das geschieht vom Mittelpunkt aus. Und wir wollen, dass es von oben in der Mitte passiert. So werden wir zum Span-Selektor gehen und wir werden Transformationsursprung Registerkarte hinzufügen. Und jetzt, wenn wir wieder schweben, skalieren sie von oben, nicht mehr von der Mitte. Aber im Moment werden alle Spannweiten gleichzeitig skaliert. Es sieht so aus, als wäre es alles ein dunkler Hintergrund, nicht vier separate. Wir möchten, dass sie eine nach dem anderen skalieren, und wir können damit kein Problem mit der Übergangsverzögerungseigenschaft umgehen. Also werde ich hier in der zweiten Spanne gehen. Und ich werde Übertragungsverzögerung Nullpunkt 15 Sekunden hinzufügen. Dann werde ich innerhalb der dritten Übergangsverzögerung 0,3 Sekunden hinzufügen. Dann füge ich für die vierte Übergangsverzögerung Nullpunkt für fünf Sekunden hinzu. Und jetzt, wenn ich mit dem Mauszeiger über den Link gehe, können Sie sehen, dass sie nacheinander skalieren uns unserem vollendeten Effekt näher bringen. Nun, eine Sache bleibt übrig, die ist, diese rote Farbe auf dem Linktext zu ändern. Also gehe ich zum Anker-Tag-Selektor, ändere diese rote Farbe in dunkelgrau. Und darunter werde ich sagen, dass, wenn wir den Mauszeiger über den Link bewegen, die Farbe in Weiß ändert. Also da hast du es, ein wirklich schöner Schwebeeffekt. Und das Coolste daran ist, dass Sie es ganz einfach so steuern können, wie Sie wollen. Sie können beispielsweise mehr als vier Spannen hinzufügen, um die Breite zu ändern. Und Sie können sogar die Farbe jeder Spanne ändern. Also lasst uns einfach ein wenig herumspielen und einige Werte ändern und sehen, was wir bekommen können. Anstatt die Breite 25 Prozent und die Höhe 100% zu machen, Lassen Sie uns das umkehren. Ich ändere die Breite auf 100% und die Höhe auf 25 Prozent. Und jetzt hat jede Spanne die volle Breite und eine Höhe von 25 Prozent der Verbindungshöhe. In diesem Fall wollen wir, dass sie untereinander sitzen. Also werden wir hier gehen und diese Linken nach oben ändern. Und genau so haben wir jetzt einen völlig anderen Effekt, wo die Spannweite untereinander liegt die volle Breite und 25 Prozent der Höhe einnimmt. Lassen Sie uns auch gehen und ändern Skala y zu skalieren x und sehen, was wir bekommen. Nun werden die Spannweiten entlang der x-Achse skaliert, nicht der Y-Achse. Also, wenn ich gehe und schwebe, können Sie sehen, dass es uns einen völlig anderen Effekt gibt, der immer noch wirklich gut aussieht. Und vielleicht können wir den Transformationsursprung nach links anstelle von Tab ändern , so dass die Spannweiten von links und nicht von oben nach oben skaliert werden. Und genau so durch die Verwendung von CSS-Transformationen können wir durch die Verwendung von CSS-Transformationeneine Vielzahl von Effekten mit sehr kleinen Änderungen in unserem Code erhalten. 51. 54 – kreative 2 bottom: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. So können Sie sehen, wenn ich über das Menü schwebe, diese beiden Unterstreichungen erscheinen schön und geben uns diesen Effekt. So erscheint das Blau unterstrichen von links und bewegt sich nach rechts, während das rosa von rechts erscheint und sich nach links bewegt. Dies ist ein einfacher, aber netter Effekt. Also lassen Sie es uns zusammen erstellen. Ich werde hier in meinem HTML beginnen, indem ich eine UL hinzufüge. Dann werde ich in ihm ein L hinzufügen, dann Anker-Tag darin. Und ich werde das kopieren und viermal einfügen. Dann werde ich sagen, zu Hause über Dienstleistungen, Portfolio-Kontakt. Okay, jetzt werde ich zu meinem CSS gehen, um dieses Menü zu stylen. Ich werde die UL anvisieren und Polsterung 0 hinzufügen. Zeigen Sie dann Flex an, um das Listenelement nebeneinander zu sitzen. Dann werde ich die LI innerhalb der URL anvisieren, und ich werde List-Style-Typ hinzufügen, keine, um die Aufzählungszeichen zu entfernen, die neben den Listenelementen angezeigt werden. Dann füge ich Padding hinzu, 10 Pixel von oben und unten und 20 Pixel von links und rechts. Cool. Lassen Sie uns nun die Anker-Tags selbst ausrichten und Textdekoration hinzufügen. Keine, um die Unterstreichungen zu entfernen. Dann transformieren Sie Text. Großbuchstaben. Schriftgröße 20 Pixel. Farbe. Diese dunkelgraue Farbe. Und schließlich, Position. Relativ. Ehrfürchtig. So jetzt können Sie sehen, dass unsere Speisekarte genau so aussieht, wie wir wollen. Lassen Sie uns nun an den Unterstreichungen arbeiten, die erscheinen und sich bewegen. Wenn wir den Mauszeiger über einen Menüpunkt bewegen, werden wir die Vorher- und Nachher-Pseudo-Elemente verwenden, um diese unterstrichen zu erstellen. Beginnen wir mit dem Erstellen des ersten mit V vor dem Pseudo-Element. Ich werde hier in mein CSS gehen und ich werde UL LI vorher einen Doppelpunkt sagen. Und ich werde Inhalte hinzufügen. Leere Zeichenfolge, Breite, sagen wir, 15 Pixel für jetzt. Und Höhe, fünf Pixel. Hintergrundfarbe. Diese schöne blaue Farbe. Position. Absolute. Oben, 120% links 0. So jetzt können Sie sehen, dass wir unsere blaue Linie mit der Breite von 15 Pixeln und einer Höhe von 50 Pixeln haben. Und es sitzt unter unseren Links, weil wir sagten, es ist Top-Eigenschaft auf 120%. Okay, jetzt fügen wir die andere rosa Linie hinzu. Ich werde einfach das vorher Pseudo-Element kopieren. Fügen Sie es erneut ein und wechseln Sie vorher zu nachher. Und ich werde die Hintergrundfarbe in diese rosa Farbe ändern. Und statt links, werde ich es ändern, um zu bewerten. Und genau so haben wir jetzt die rosa auf der rechten Seite unserer Links. Cool. Lassen Sie uns nun an dem Hover-Effekt arbeiten. Wenn Sie den Mauszeiger über einen dieser Links bewegen, möchten wir, dass die blaue Unterstreichung wächst, bis sie 50% der Verknüpfungsbreiten erreicht und gleichzeitig nach rechts verschoben wird . Und wir wollen auch, dass die rosa auf 50 Prozent der Verbindungsbreiten wächst und sich nach links bewegt. Also lasst uns das machen. Zuallererst werde ich hier innerhalb des vorher Pseudo-Elements hinaufgehen und die Breite auf 0 anstelle von 15 Pixeln ändern , damit es verschwindet. Dann werde ich dasselbe für die rosa Linie tun. Dann werde ich hier runtergehen und sagen, UL LI, ein Doppelpunkt, Schwebepunkt vorher. Und ich werde Breite hinzufügen 50 Prozent und transformieren X 100%. Und damit dieser Effekt reibungslos geschieht, werde ich hier innerhalb des vorher Pseudoelements hinauf gehen und ich werde Übergang oder 0,5 Sekunden hinzufügen . Wenn ich nun den Mauszeiger über eine beliebige Verknüpfung gehe, können Sie sehen, dass sich die blaue Linie von links nach rechts bewegt und ihre Breite zu 50 Prozent der Verknüpfungsbreiten zur gleichen Zeit wird. Cool. Nun, machen wir dasselbe für die rosa Linie. Ich werde diesen Codeblock kopieren. Fügen Sie es erneut ein, wechseln Sie vor zu „Nachher“, um die rosa Linie zu markieren. Und ändern Sie einfach die Funktion „X übersetzen“ auf „negativ statt „100%“, weil wir nach links und nicht nach rechts bewegen wollten. Und schließlich werde ich hier in das After-Pseudo-Element gehen und Übergang 0, 0, fünf Sekunden hinzufügen . Und jetzt, wenn ich gehe und den Mauszeiger über einen beliebigen Link, können Sie sehen, dass sich die blaue Linie nach links bewegt und die rosa nach rechts bewegt, was uns diesen coolen Effekt gibt. 52. 55 – kreative -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Wie Sie sehen können, wenn ich den Mauszeiger über einen Link in unserem Menü führe, wird er größer und hat einen orangefarbenen Hintergrund. Aber die coole Sache ist, dass die anderen Links verschwommen werden. Der Link, auf dem wir schweben, kommt also in den Fokus und die anderen Links werden verschwommen. In Ordnung, lassen Sie uns diesen Effekt erzeugen. Ich werde hier in meinem HTML gehen und eine URL hinzufügen. Dann werde ich darin ein LI hinzufügen, dann ein Anker-Tag. Und im Inneren werde ich sagen, zu Hause. Dann werde ich das noch einmal viermal kopieren. Und sagen Sie über Dienstleistungen, Portfolio und Kontakt. So hier können Sie alle Listenelemente sehen, die dort sind. In Ordnung, ich werde zu meinem CSS gehen und die UL anvisieren. Dann werde ich Marge 0 hinzufügen, Padding 0 als auch. Um dann die Elemente nebeneinander anzuzeigen, werde ich Displayflex hinzufügen. Dann werde ich die Listenelemente innerhalb der UL ausrichten und List-Stil keine hinzufügen. Rand, 0 Pixel von oben und unten und 20 Pixel von links und rechts. Dann werde ich den Übergang 0,5 Sekunden hinzufügen. Alles klar, jetzt werde ich die Anker-Tags innerhalb der Listenelemente anvisieren und Anzeigeblock hinzufügen , damit wir seine Größe kontrollieren und vergrößern können. Dann danach werde ich Position hinzufügen. Relativ. Textdekoration Keiner. Polsterung. Fünf Pixel. Schriftgröße, 22 Pixel, Farbe weiß. Dann Text transformieren, Großbuchstaben. Und schließlich Übergang 0, 0, 0,3 Sekunden. Wie Sie sehen können, sieht das Menü jetzt genau so aus, wie wir es wollen. Alles klar, lassen Sie uns an dem Schwebeeffekt arbeiten. Wir wollen, dass die Links größer werden und einen orangefarbenen Hintergrund haben, wenn wir den Mauszeiger über sie bewegen. Also werde ich hier gehen und sagen, wenn wir über den Link schweben, werde ich Transformationsskala 1.5 hinzufügen , so dass es um das 1,5-fache seiner ursprünglichen Größe größer wird. Und jetzt können Sie sehen, wenn ich über einen Link schwebe, wird es größer. Alles klar, Gehen wir zurück, um den orangefarbenen Hintergrund zu erstellen. Wir werden es mit dem before Pseudo-Element erstellen. Also werde ich vorher einen Doppelpunkt sagen. Und darin werde ich Inhalte hinzufügen. Leere Strings, Position absolut, oben, 0, links 0 als auch. Dann wollen wir, dass es die volle Größe des Anker-Tags aufnimmt. Also fügen wir auch eine Breite, 100% und eine Höhe von 100% hinzu. Dann fügen wir Hintergrundfarbe hinzu, unsere orange Farbe. Dann schließlich, Übergang Nullpunkt drei Sekunden. Und jetzt können Sie sehen, dass wir diesen orangefarbenen Hintergrund haben und alle Links vertuschen, aber wir wollen nur, wenn wir den Mauszeiger über die Links bewegen. Also werde ich hierher zurückgehen und Transformationsskala 0 hinzufügen. Dann unten, werde ich sagen, wenn wir den Mauszeiger über den Link, Unsere machen einige Änderungen passiert mit dem vorher Pseudo-Element. Ich werde Transformation hinzufügen. Wieder auf eins skalieren. So jetzt können Sie sehen, dass der orange Hintergrund jetzt ausgeblendet ist. Und wenn wir darüber schweben, wird es wieder größer. Das Problem ist, den Text zu vertuschen. Gehen wir also zurück hierher in den orangefarbenen Hintergrund und fügen Z-Index negative hinzu. So jetzt können Sie sehen, dass der Text vor dem orangefarbenen Hintergrund erscheint. Jetzt haben wir nur noch eine Sache, und das ist, die anderen Links zu verwischen, wenn wir den Mauszeiger über einen Link bewegen. Also gehen wir zurück und machen das. Ich werde hier zurück gehen und Filter Unschärfe hinzufügen, fünf Pixel. Das bedeutet also nur, dass, wenn wir den Mauszeiger über den Brunnen bewegen, wir diesen Weichzeichnungsfilter auf die Anker-Tags anwenden werden. Wir wollen auch, dass die Links ein wenig transparent sind. Also werde ich Deckkraft 0,2 hinzufügen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Links führe, alle verschwommen und sie werden halbtransparent, weil wir die Deckkraft auf 0,2 setzen. Aber wir wollen, dass dies mit den Links passiert, die nicht über schwebten. Wir wollen also, dass der Link, über den wir den Mauszeiger bewegen, deutlich erscheint. Also werde ich hierher zurückgehen und Opazität eins hinzufügen, so dass es wieder sichtbar wird , wenn Filter Unschärfe 0. Das bedeutet also, dass die Länge, über die wir den Mauszeiger bewegen, eine Deckkraft von eins haben und der Weichzeichnungsfilter 0 ist, was bedeutet, dass er wieder deutlich sichtbar ist. Und jetzt, wenn ich zurückgehe und den Mauszeiger über einen beliebigen Link zeige, kann man sehen, dass er größer wird und einen orangefarbenen Hintergrund hat , während die anderen Links verschwommen werden. Und das ist der exakte Effekt, den wir suchen. 53. 56 – kreative menu mit der effect: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über die Menüpunkte führe, der Link bewegt sich nach oben und ein weiterer Link kommt von unten und nimmt seinen Platz ein. Dann wächst ein grüner Hintergrund von links nach rechts. Wenn Sie dann weg schweben, schrumpft der grüne Hintergrund von rechts nach links. Und das zog es verschwindet. Der Link bewegt sich nach unten und der andere kommt von oben hinein. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Ich werde hier in meinem HTML beginnen, indem ich eine UL hinzufüge. Dann werde ich darin eine LLI hinzufügen, dann ein Anker-Tag darin. Und innerhalb des Anker-Tags, werde ich eine Spanne hinzufügen und sagen zu Hause. Wenn ich eine weitere Spannweite hinzufügen und sagen zu Hause als auch. Das erste Band ist also diejenige, die wir nach oben bewegen und die zweite Spanne wird sich von unten bewegen, um ihren Platz einzunehmen. In Ordnung. Ich kopiere es, füge es viermal ein. Und wie Sie sehen können, habe ich gerade den Text geändert. So haben wir über Dienstleistungen, Portfolio und Kontakt. In Ordnung, gehen wir zu unserem CSS und beginnen mit dem Styling unserer Speisekarte. Ich werde die UL ins Visier nehmen. Dann fügen Sie Display, Flex hinzu. Dann möchten wir, dass alle Listenelemente übereinander sitzen. Also werde ich Flex-Richtungsspalte hinzufügen. Richten Sie dann das Inhaltscenter aus, und richten Sie Elemente Center ebenfalls aus. In Ordnung, ich werde die Listenelemente innerhalb der UL ausrichten. Dann werde ich Position, Relativ, List-Stil, keine und Rand, fünf Pixel hinzufügen . Jetzt werde ich das Anker-Tag innerhalb der Listenelemente anvisieren. Fügen Sie dann Position, relativ hinzu. Anzeige, Block, Höhe, 40 Pixel Textdekoration Keiner. Beim Polsterung. Fünf Pixel von oben und unten und zehn Pixel von links und rechts. Wenn ich Schriftgewicht von 300, Buchstabenabstand zu Pixeln hinzufügen . Und schließlich, Überlauf. Versteckt. In Ordnung, lassen Sie uns an den Spannweiten innerhalb der Anker-Tags arbeiten. Ich werde sie anvisieren, wenn Position, relative Breite hinzufügen. 100% Höhe 100% So nehmen sie die volle Breite und Höhe des Anker-Tags ein. Um dann die zweite Spanne an den unteren Rand der ersten Spanne zu bringen, fügen wir Displayflex hinzu. Also, was dies tun wird, ist, dass die zweite Spanne nebeneinander mit der ersten sitzt , wenn es ein Leerzeichen gibt. Aber da wir die Breite unserer Spannweiten 2 100% festgelegt haben, hat die zweite Spanne keinen Platz, um neben der ersten zu sitzen. So wird es sich nach unten bewegen und darunter sitzen. Dann werde ich ausrichten Elemente Center hinzufügen und Content-Center begründen. Wie Sie sehen können, sind die zweiten Spannweiten verschoben und sitzen unter den ersten, weil sie nicht genug Platz haben und wir können sie nicht sehen, weil wir sagten, Überlauf in der Anker-Tag hier versteckt. Wenn wir das entfernen, können Sie sehen, dass die zweiten Spannweiten jetzt unter den ersten erscheinen. Alles klar, ich werde einen Überlauf wieder verborgen hinzufügen , damit die zweiten Spannweiten wieder verschwinden. Lassen Sie uns die Spannweiten weiter stylen. Ich werde hier gehen und Übergang 0,5 Sekunden hinzufügen. Dann Farbe Weiß, Schriftgröße 20 Pixel. Und schließlich, Text transformieren. Großschreibung. Jetzt sehen die Spannweiten viel besser aus. Wenn Sie nun den Mauszeiger über das Anker-Tag bewegen, möchten wir, dass sich die erste Spanne von ihrer Position nach oben und die zweite Spanne von unten bewegt und ihren Platz einnimmt. Also werde ich sagen, wenn ich über das Anker-Tag schwebe, möchte ich einige Änderungen an der ersten Spanne vornehmen. Also werde ich sagen, span n-ten Kind eins. Und ich werde Transformation hinzufügen, Y negativ 100% übersetzen. Also, wenn ich jetzt gehe und den Mauszeiger über die erste Band, können Sie sehen, dass es nach oben bewegt und verschwindet. Jetzt wollen wir, dass sich die zweite Spanne von unten bewegt und ihren Platz einnimmt. Also gehen wir zurück und machen das. Ich werde diesen Codeblock kopieren und die zweite Spanne anstelle der ersten anvisieren. Und ich werde nichts ändern. Also, wenn ich gehe und schwebe, jetzt können Sie sehen, wenn die erste Spanne nach oben bewegt, die zweite Spanne kommt von unten und nimmt seinen Platz ein. Und das ist der exakte Effekt, den wir wollen. In Ordnung, lassen Sie uns auf dem grünen Hintergrund arbeiten. Ich gehe hierher und sage vorher einen Doppelpunkt. Und dann werde ich Inhalte hinzufügen. Leere Saiten, Position, absolut. Oben 0, links 0. Und wir wollten die volle Breite und Höhe des Anker-Tags aufnehmen. So werden wir Breite, 100%, Höhe, 100% als auch hinzufügen . Dann Hintergrundfarbe, unsere grüne Farbe. Und jetzt können Sie sehen, dass wir einen grünen Hintergrund haben , der die gleiche Breite und Höhe wie das Anker-Tag hat. Alles klar, wir wollen, dass der grüne Hintergrund nur erscheint, wenn der Mauszeiger über den Anker-Tag fährt. Also werde ich hierher zurückgehen und Transformationsskala x 0 hinzufügen. Und wir wollten von links nach rechts wachsen. Also fügen wir Transformationsursprung links hinzu. Dann schließlich Übergang 0,5 Sekunden. Und wenn wir über den Link schweben, wollten wir wieder wachsen und erscheinen. Also werde ich sagen, wenn ich über den Link schwebe, werde ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde Transformationsskala x wieder hinzufügen. Und jetzt können Sie sehen, dass der grüne Hintergrund unsichtbar ist. Und wenn Sie den Mauszeiger über die Verknüpfung bewegen, wächst sie wieder von links nach rechts, weil wir die Eigenschaft „Transformationsursprung“ auf links setzen. Und wenn er weg schwebt, schrumpft er auch von seiner linken Seite, aber wir wollten von seiner rechten Seite schrumpfen. Was wir also tun können, ist, dass wir hierher zurückgehen und Transformationsursprung hinzufügen können, richtig? Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Link führe, der grüne Hintergrund wächst von links nach rechts. Und wenn es wegschwebt, schrumpft es in seine rechte Seite. Okay, jetzt müssen wir einige Übergangsverzögerungen hinzufügen, um den grünen Hintergrund zu mischen, warten Sie, bis die erste Band nach oben bewegt. Also werde ich hierher gehen und Übergangsverzögerung 0,5 Sekunden hinzufügen. Und jetzt, wenn ich zurückgehe und den Mauszeiger über den Link führe, kannst du sehen, dass sich der Link zuerst bewegt. Danach erscheint der grüne Hintergrund, der uns den Effekt gibt, den wir wollen. Das Problem ist, wenn wir wegfahren, wollen wir, dass der grüne Hintergrund zuerst schrumpft. Danach wollen wir, dass die Spannweite Bewegung stattfindet. Wir möchten also eine Übergangsverzögerung auf die Spanne anwenden, wenn wir wegfahren. Also werde ich zurück hierher in den Span-Selektor gehen und Übergangsverzögerung 0,5 Sekunden hinzufügen. Dies wird jedoch dazu führen, dass sich die Spannweite auch beim Schweben verzögert. Um das zu verhindern und das Anker-Tag sofort beim Schweben erscheinen zu lassen, können wir hier gehen und Übergangsverzögerung 0 sagen. Dann werde ich das auch hier in der zweiten Spanne tun. Also, was dies tun wird, ist, dass die beiden Spannweiten sofort animiert werden, wenn Sie schweben. Und es wird keine Verzögerungen haben. Aber wenn Sie weg schweben, wird es 0,5 Sekunden warten, da wir die Übergangsverzögerung hier auf 0,5 Sekunden eingestellt haben. Wenn Sie also schweben, animieren sie sofort. Wenn wir wegschweben, werden wir warten. Und jetzt, wenn ich mit dem Mauszeiger über die Links gehe, bewegen sich die Spannweiten sofort und der grüne Hintergrund erscheint. Und wenn Sie wegschweben, schrumpft der grüne Hintergrund, dann passiert die Spannenbewegung danach. Und das ist der exakte Effekt, den wir wollen. 54. 57 – 2 Grenzen und ein background: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir ein anderes Bild erstellen, Hover-Effekt. Sie können sehen, wenn ich den Mauszeiger über das Bild schiebe, dieser Effekt passiert, wenn der Overlay-Hintergrund von rechts zu einer Position kommt und Sie sehen können, dass er gedreht wurde, während es ein Weg war. Dann, wenn es zurückkommt, wird es Rotationsgrad 0. Es ist also nicht mehr gedreht. Dann haben wir die Verbindung von oben zu dieser Position kommen. Dann kommt der Absatz von rechts zu seiner Position und auch gedreht, während es ein Weg war. Dann kommt der H2 schließlich von oben in seine Position. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Sie können sehen, dass wir unsere Stile aus der vorherigen Lektion haben. Also ist alles an seinem Platz und wir werden nur die Stile hinzufügen, die für unsere Wirkung verantwortlich sind. Beginnen wir also mit dem Overlay-Hintergrund. Ich werde das vorherige Pseudo-Element des Containers anvisieren. Und ich werde transformieren hinzufügen, 650 Pixel übersetzen. So wird es 650 Pixel nach rechts entlang der x-Achse übersetzt werden, dann negativ 100 Pixel. So wird es 100 Pixel nach oben verschoben werden. Auf der Y-Achse. Ich werde auch um 180 Grad drehen. So wird es um 180 Grad gedreht, wenn es weg ist. Und schließlich werde ich Übergang 0, 0 hinzufügen. Dann darunter. Und wenn ich über das Container-div schwebe, werde ich einige Änderungen vornehmen, die mit ihnen vor dem Pseudo-Element passiert sind. Ich werde transformieren hinzufügen, 0 und 0 übersetzen. Es kehrt also wieder in seine ursprüngliche Position zurück und dreht dann 0 Grad. Es wird also wieder auf 0 gedreht, was uns den Effekt gibt, den wir wollen. Und jetzt können Sie sehen, dass der Hintergrund in dieser Position sitzt, 650 Pixel nach rechts und 100 Pixel nach oben. Und es wird auch um 180 Grad gedreht. Und wenn ich den Mauszeiger über das Bild führe, können Sie sehen, dass der Hintergrund in seine ursprüngliche Position zurückkehrt , während er sich auf 0 Grad dreht, was uns diesen schönen Effekt gibt. Alles klar, lassen Sie uns an der H2 arbeiten. Ich werde es zielen und transformieren hinzufügen, y negative 150 Pixel übersetzen. So wird die h2 um 150 Pixel nach oben verschoben. Dann werde ich Übergang alle 0,2 Sekunden hinzufügen. Wenn ich dann über das Container-div schwebe, werde ich das H2 anvisieren. Und fügen Sie Transformation Y 0 Pixel zu übersetzen, so dass es an seine Position zurückkehrt. Ich werde auch Übergangsverzögerung 0,5 Sekunden hinzufügen , so dass sie angezeigt wird, nachdem der Hintergrund erscheint. Und jetzt können Sie sehen, dass die H2 oben auf dem Bild sitzt. Und wenn ich den Mauszeiger über das Bild führe, wiegt es 0,5 Sekunden und bewegt sich dann wieder in seine Position. Und beachten Sie, dass, wenn ich weg schwebe, es sofort wieder nach oben bewegt. Es weckt nicht 0,5 Sekunden, wenn Sie weg schweben weil wir die Übergangsverzögerung nur beim Schweben hinzugefügt haben. In Ordnung, gehen wir zum Absatz. Es wurde nach rechts verschoben und gedreht. Also werde ich es ins Visier nehmen. Fügen Sie dann Transformieren hinzu, übersetzen Sie X 300 Pixel und drehen Sie dann um 90 Grad. Dann werde ich Übergang oder 0,2 Sekunden hinzufügen. Wenn ich dann den Mauszeiger über das Container-div führe, werde ich den Absatz anvisieren. Dann füge ich Transformation hinzu, übersetze X wieder auf 0 zurück und drehe auch auf 0 zurück. Dann darunter werde ich Übergangsverzögerung 0,4 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Absatz um 300 Pixel nach rechts verschoben wurde und um 90 Grad gedreht wird. Und wenn Sie mit dem Mauszeiger über das Bild fahren, wiegt es 0,4 Sekunden. Dann dreht es sich zurück auf 0 Grad, während er sich zurück in seine ursprüngliche Position bewegt. Und wenn ich weg bin, kehrt es sofort zurück zur Rate und dreht sich. Lassen Sie uns schließlich an dem Link arbeiten. Ich gehe zurück und zielstrebig. Dann werde ich transformieren hinzufügen, übersetzen y negative 300 Pixel. So wird es um 300 Pixel nach oben verschoben, dann Übergang 0, 0, 0,2 Sekunden. Und wieder, wenn ich über das Container-Div schwebe, werde ich das Anker-Tag anvisieren und transformieren, Y 0 Pixel übersetzen, so dass es zu seiner Position zurückkehrt. Dann werde ich Übergangsverzögerung 0,3 Sekunden hinzufügen. Und jetzt können Sie sehen, dass der Link oben auf dem Bild sitzt. Und wenn ich darüber schwebe, wiegt der Link 0,3 Sekunden und bewegt sich dann in seine ursprüngliche Position. Jetzt werde ich zurück gehen und das Container-Divanvisieren das Container-Div und Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass alle Elemente unsichtbar sind. Und wenn wir den Mauszeiger über das Bild bewegen, erscheinen sie wieder. Und der Effekt, den wir wollen, passiert perfekt. 55. 58 – border: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Sie können sehen, wenn wir den Mauszeiger über einen Link in diesem Menü bewegen, dieser coole Effekt passiert, wo wir diese vier kleinen gelben Ränder haben, die auftauchen. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich eine UL hinzufüge. Dann in diesem, ein LI, dann ein Anker-Tag. Und ich werde sagen, nach Hause. Dann werde ich zwei Spannen innerhalb des Anker-Tags neben dem Text hinzufügen. So werden wir diese Spannweiten Grad der vier Grenze um die Links verwenden, und wir werden sehen, wie. Dann kopiere ich diesen Listeneintrag, füge ihn viermal wieder ein. Und ich werde über Dienstleistungen sagen. Kontakt. Hier sind die Menüpunkte. Gehen wir zu unserem CSS und stylen sie. Ich werde die UL ins Visier nehmen. Wann füge ich Polsterung 0 hinzu. Dann, um das Listenelement nebeneinander sitzen zu lassen, werde ich Displayflex hinzufügen. Dann werde ich die Listenelemente ausrichten und List-Stil keine hinzufügen. Dann werden 10 Pixel von oben und unten und 40 Pixel von links und rechts aufgefüllt. Dann werde ich das Anker-Tag anvisieren und Textdekoration hinzufügen. Keiner. Wenn Text transformiert wird. Großbuchstaben. Schriftgröße 24 Pixel, wobei in Farbe, Weiß, Position, relativ. Und schließlich, Padding, fünf Pixel. Und jetzt können Sie sehen, dass das Menü so viel besser aussieht. Nun möchte ich, dass die Farbe der Links in Gelb wechselt, wenn sie über sie schweben. Also werde ich sagen, wo schwebt über den Link. Ich werde die Farbe in diese gelbe Farbe ändern. Alles klar, lassen Sie uns weitermachen. Lassen Sie uns die vier kleinen Ränder erstellen, die die Links umgeben. Wir werden das mit den Vorher- und Nachher-Pseudo-Elementen der beiden Spannweiten tun, die wir innerhalb des Links hinzugefügt haben. Also werde ich sagen, Spanne. Erstes Kind, Dickdarm vorher. Also dieser Selektor hier zielt darauf ab, dass vor dem Pseudo-Element der ersten Spanne. Und in diesem werde ich Inhalt hinzufügen, leere Strings, Position absolut. Und das wird die Grenze sein, die in der oberen linken Ecke sitzt. Also werden wir Top 0 und links 0 als auch hinzufügen. Dann Breite acht Pixel und Höhe acht Pixel. Dann werde ich Hintergrundfarbe hinzufügen. Transparent, da der Hintergrund nicht angezeigt werden soll. Wir wollen nur die Grenzen. Wir fügen jetzt Rand, zwei Pixel, solide gelb. Und Grenze links. Zwei Pixel solide. Auch unsere gelbe Farbe. Und schließlich werde ich Übergang 0,2 Sekunden hinzufügen. Jetzt können Sie sehen, dass wir diese beiden kleinen Ränder in der oberen linken Ecke haben, und sie sind die linken und oberen Ränder. In Ordnung, lassen Sie uns die Ränder oben rechts erstellen. Also gehe ich zurück und kopiere diesen Codeblock, füge ihn erneut ein und ändere vorher zu nachher. Also werden wir das After-Pseudo-Element der ersten Spanne anvisieren. Wenn ich drinnen bin, ändere ich mich von links nach rechts, um es auf der rechten Seite zu positionieren. Dann werde ich auch die Grenze hier links auf Grenzsatz ändern. So können Sie sehen, dass wir jetzt diese Grenzen oben rechts haben. In Ordnung, lassen Sie uns den Rahmen erstellen, der sich in der unteren linken Ecke befindet. Ich füge sie vor dem Pseudo-Elementcode wieder ein. Dann werde ich das vorher Pseudo-Element des letzten Kindes anvisieren, nicht das erste. Dann werde ich von oben nach unten wechseln weil wir wollen, dass diese Ränder in der unteren linken Ecke erscheinen. Dann ändere ich auch die Grenze zu Rand unten. Und wie Sie sehen können, haben wir die Grenze in der unteren linken Ecke. Lassen Sie uns den letzten Rand erstellen, der sich in der unteren rechten Ecke befindet. Ich werde diesen Code kopieren. Fügen Sie es dann erneut ein und zielen Sie auf das letzte Kind des After-Pseudo-Elements ab. Wechseln Sie dann von links nach rechts. Und ändern Sie auch die Grenze von links in die Grenze rechts. Und jetzt, wie Sie sehen können, haben wir die letzte Grenze, die in der unteren rechten Ecke sitzt. Ok? Schließlich wollen wir unseren Hover-Effekt erzeugen. Wenn Sie mit dem Mauszeiger über die Links fahren. Wir wollen, dass die Grenzen ihre Position ändern, um uns die Wirkung zu geben, die wir wollen. Also lasst uns das machen. Ich werde sagen, wenn ich über den Link schwebe, werde ich das vor Pseudo-Element der ersten Spanne anvisieren. Und wenn Sie sich erinnern, das ist die Grenze, die in der oberen linken Ecke sitzt. Wenn ich drinnen bin, werde ich oben auf negative 10 Pixel und links auf negative 10 Pixel als auch ändern . Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass sich der Rahmen in der oberen linken Ecke bewegt und seine Position in diese neue Position ändert. In Ordnung, Lasst uns auch dasselbe für die anderen Grenzen machen. Ich gehe zurück zu meinem CSS und kopiere diesen Code. Und wieder und Ziel die After-Pseudo-Elemente dieses Mal. Und wenn Sie sich erinnern, das ist die Grenze, die in der oberen rechten Ecke sitzt, dann werde ich von links nach rechts wechseln. Wenn ich den Code wieder einfügen werde. Und Ziel D vor einem Pseudo-Element des letzten Kindes mit der Zeit, dann von oben nach unten ändern. Das ist also die Grenze, die in der unteren linken Ecke sitzt. Und ich werde den Code noch einmal einfügen und die After-Pseudo-Elemente des letzten Kindes anvisieren. Und ich werde von oben nach unten und von links nach rechts wechseln. Und jetzt, wenn ich mit dem Mauszeiger über eine beliebige Verbindung gehe, können Sie sehen, dass die vier Grenzen ihre Position ändern und uns den Effekt geben, den wir wollen. Wir haben nur noch die Grenzen unsichtbar zu machen. Dann lass sie nur erscheinen, wenn wir schweben. Also gehen wir zurück und machen das. Ich werde die Deckkraft für alle Grenzen auf 0 setzen. Und wenn ich schwebe, werde ich die Deckkraft wieder auf eins setzen. Und jetzt können Sie sehen, dass die Grenzen unsichtbar sind. Und wenn sie über irgendeinen Link schweben, erscheinen sie wieder und bewegen sich von ihrer Position in diese neue Position, was uns unseren coolen Effekt verleiht. 56. 59 – kreative Schnittkante: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über einen Link im Menü führe, dieser Effekt passiert, wo wir die oberen und linken Ränder um 360 Grad drehen und sie gleichzeitig schrumpfen, bis sie kleiner werden. Der gleiche Effekt geschieht auch bei den rechten und unteren Rändern. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich eine UL hinzufüge. Dann werde ich darin ein LI hinzufügen, dann ein Anker-Tag darin. Und ich werde sagen, nach Hause. Dann kopiere ich die URL, füge sie viermal wieder und sage über Dienste, Team und Kontakte. Wenn ich zu meinem CSS-Ziel gehe, der UL, und ich werde Marge 0 hinzufügen, Padding 0 als auch. Dann, um den Link nebeneinander sitzen zu lassen, werde ich Displayflex hinzufügen. Okay, jetzt werde ich das LI innerhalb der UL anvisieren und List-Stil keine hinzufügen. Dann werde ich das Anker-Tag anvisieren und Position relativ hinzufügen. Dann zeigen Sie Block, Padding, 15 Pixel von oben und unten und 30 Pixel von links und rechts an. Dann werde ich Rand hinzufügen, 0 von oben und unten und 15 Pixel von links und rechts. Dann werde ich Textdekoration hinzufügen. Keiner. Text-Transformation, Großbuchstaben. Und schließlich, Farbe, diese gelbe Farbe. In Ordnung, Sie können sehen, dass die Links jetzt viel besser aussehen. Gehen wir zurück und schaffen die Grenzen. Wir werden an den Grenzen beginnen, die auf der oberen und linken Seite der Links sitzen. Und wir werden das vorher Pseudo-Element verwenden, um dies zu tun. Ich werde hier gehen und das vorige Pseudo-Element des Links auswählen. Dann füge ich Inhalte hinzu. Saiten. Position absolut, oben 0, links 0 als auch. Wenn Breite 100%, und Höhe 100% als auch. Fügen wir die Ränder hinzu. Ich werde Rand oben zwei Pixel hinzufügen. Solide Diese gelbe Farbe. Wenn der Rand links, zwei Pixel, auch durchgehend gelb. Dann werde ich den Übergang 0,5 Sekunden hinzufügen. Und schließlich Box Dimensionierung Rahmen Box. Und wie Sie sehen können, haben wir jetzt die Grenzen auf der oberen und linken Seite. Alles klar, fangen wir an, unseren Effekt zu erzeugen. Ich werde hierher zurückgehen und ich werde sagen, wenn ich über das Anker-Tag schwebe, werde ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde seine Breite auf 15 Pixel und seine Höhe auch auf 15 Pixel einstellen, so dass das vorher Pseudo-Element schrumpfen wird und die Grenzen damit schrumpfen. Also, wenn ich jetzt gehe und den Mauszeiger über die Links, können Sie sehen, dass die Grenze schrumpfen und kleiner werden bis sie eine Breite und eine Höhe von nur 15 Pixel haben. Lassen Sie uns nun die Ränder drehen, während wir sie auch verkleinern. Ich werde hier auf den Schwebeeffekt gehen und Transformieren hinzufügen, 360 Grad drehen. Dann möchte ich, dass es sich entlang der linken Seite dreht. Also werde ich hier innerhalb des vorher Pseudo-Elements hinaufgehen und Transformationsursprungs links hinzufügen. Und jetzt können Sie sehen, wenn ich über die Links schwebe, drehen wir, während wir schrumpfen uns diesen coolen Effekt geben. In Ordnung, lassen Sie uns die rechten und unteren Ränder erstellen. Ich werde das achter-Pseudo-Element verwenden, um sie zu erstellen. Also kopiere ich einfach das vorher Pseudo-Element, füge es ein und ändere vorher zu nachher. Ich werde auch von oben nach unten und von links nach rechts wechseln. Ich werde auch Grenze oben zwei Grenze unten und Grenze links zu Grenze Rate ändern. Dann wollen wir es entlang der rechten Seite drehen. Also werde ich die Transformationsursprungseigenschaft nach rechts anstelle von links ändern. So jetzt können Sie sehen, dass wir die rechten und unteren Ränder erstellt haben mit dem nachher Pseudo-Element. Lassen Sie uns den Schwebeeffekt erzeugen. Ich werde zurückgehen und den schwebenden Effekt auf das vorher Pseudo-Element kopieren. Fügen Sie es ein und ändern Sie vor zu nachher. Und jetzt, wenn ich zurückgehe und den Mauszeiger über die Links führe, sehen Sie, dass die rechten und unteren Ränder auch schrumpfen, während sich um die rechte Seite dreht. Und jetzt haben wir den genauen Effekt. Wir wollen. 57. 60 – kreative farbenreiche colorful: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Sie können sehen, wir hatten diese Links und ihre Farbe ist transparent und wir haben einen Textstrich um sie herum. Und wenn ich den Mauszeiger über einen Link führe, passiert dieser Effekt dort, wo wir drei Schichten der Links haben. Die ursprüngliche weiße Ebene, deren Farbe sich in Weiß ändert, und eine rote Ebene darüber, dann eine hellblaue Ebene über beiden. Das ist ein wirklich cooler Effekt. Also fangen wir an, es zu erstellen. Ich werde hier in meinem HTML gehen, eine UL hinzufügen. Dann füge ich ein LI hinzu, dann ein Anker-Tag und sag nach Hause. Dann werde ich Datentext hinzufügen, auch zu Hause. Dann kopiere ich diesen Listeneintrag, füge ihn viermal wieder und sage über Dienste, Team und Kontakt. Dann werde ich zu meinem CSS gehen, die UL zielen und Marge 0 hinzufügen, ebenfalls 0 auffüllen. Dann werde ich die Listenelemente innerhalb der UL ausrichten und List-Stil keine hinzufügen. Dann werde ich die Links anvisieren und positionsrelativen Anzeigeblock hinzufügen . Und wir wollen nur einen Strich um ihn herum, also fügen wir Farbe hinzu, transparent. Und dann werden wir Webkit hinzufügen. Textzeichnung, ein Pixel weiß. Ich werde Schriftgröße hinzufügen, 80 Pixel, Schriftgewicht, 900. Und schließlich, Textdekoration, keine. Und jetzt können Sie sehen, dass die Links genau so aussehen, wie wir wollen. Sie haben eine transparente Farbe und einen weißen Strich um sie herum. In Ordnung, lassen Sie uns die rote Ebene erstellen, die sich über dem Link befindet. Und wir werden es mit dem vorher Pseudo-Element erstellen. Also werde ich hierher gehen und darauf zielen und Inhalte hinzufügen. EIN TTR. Datentext, um den Text innerhalb des Datentext-Attributs jeder Verknüpfung zu erfassen. Dann werde ich Position, absolut, dann oben 0, links 0 und Übergang 0,5 Sekunden hinzufügen absolut, dann oben 0, links 0 . In Ordnung? Wenn Sie den Mauszeiger über den Link bewegen, möchten wir, dass das vorherige Pseudo-Element erscheint und den roten Hintergrund nimmt. Also werde ich sagen, wenn ich über das Anker-Tag schwebe, werde ich das vorherige Pseudo-Element auswählen und Farbe hinzufügen. Diese rote Farbe. Dann Z Index eins, dann Webkit-Text strichte ein Pixel schwarz. So werden wir einen schwarzen Strich um den roten Hintergrund haben. Dann schließlich werde ich transformieren hinzufügen, 10 Pixel entlang der x-Achse nach rechts und negative 10 Pixel entlang der y-Achse nach oben übersetzen . Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Links führe, dieser rote Hintergrund erscheint und bewegt sich um zehn Pixel nach oben rechts, was uns diesen schönen Effekt gibt. In Ordnung, lassen Sie uns an der hellblauen Schicht arbeiten. Wir werden es mit dem After-Pseudo-Element erstellen. Also werde ich hier gehen und einen Doppelpunkt nach, neben dem vorher Pseudo-Element hinzufügen . Dann werde ich den Schwebeeffekt kopieren. Fügen Sie es erneut ein, und wählen Sie das nachher-Pseudo-Element anstelle des vorher. Und ich werde die Farbe in diese hellblaue Farbe ändern. Dann werde ich den Z-Index in zwei anstelle von eins ändern. Dann werde ich die Transformationseigenschaft auf 20 Pixel und negative 20 Pixel ändern. So wird es mehr nach oben und rechts verschoben. Jetzt sehen Sie, wenn ich den Mauszeiger über die Links führe, erscheint die hellblaue Ebene und bewegt sich in die obere rechte Ecke der roten Ebene, was uns diesen coolen Effekt gibt. Das einzige, was jetzt noch übrig ist, ist, die erste Ebenenfarbe in Weiß zu ändern , anstatt beim Schweben transparent zu sein. Also werde ich zurückgehen und sagen, wenn wir über den Link schweben, werde ich Farbe weiß hinzufügen. Dann Webkit-Textstrich, ein Pixel, schwarz. Dann schließlich Übergang 0,5 Sekunden. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Links führe, die erste Ebene hat jetzt eine weiße Farbe und einen schwarzen Textstrich. Und das ist der exakte Effekt, den wir wollen. 58. 62 – background: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion erstellen wir einen weiteren Kartenhover-Effekt. Sie können sehen, wir haben diese Karte, die einen weißen Hintergrund mit einigen Kastenschatten um sie herum ist, trennt sie vom weißen Körper Hintergrund. Und es enthält einige Inhalte. Und wir haben auch diese dünne rosa Linie, die auf dem Boden sitzt. Und wenn Sie mit dem Mauszeiger über die Karte fahren, wird die rosa Linie größer und verdeckt die Karte und die Textfarbe wird gleichzeitig weiß. Also lasst uns anfangen, das zu schaffen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann in ihm ein anderes mit einer Klasse von Inhalten. Und darin werde ich ein H2 hinzufügen und Design sagen. Dann werde ich unten einen Absatz hinzufügen und einige Lorem Ipsum Text hinzufügen. Dann endlich ein Anker-Tag. Und sagen Read more. In Ordnung, gehen wir zu unserem CSS und wählen Sie die Karte div. Ich werde Position, relative Breite, 320 Pixel hinzufügen . Dann schwenken, 40 Pixel. Hintergrundfarbe, weiß. Dann schließlich Box-Shadow, 010 Pixel, 30 Pixel. Und schließlich RGBA, 0, 0, 0, 0,1. Jetzt können Sie sehen, dass wir diesen weißen Hintergrund haben, der diesen Kastenschatten um ihn herum hat. In Ordnung, lassen Sie uns auf dem rosa Hintergrund arbeiten, der unten auf der Karte sitzt. Wir werden es mit dem before Pseudo-Element erstellen. Also werde ich es ausrichten und Inhalte hinzufügen. Leere Saiten. Position absolut, links, 0, unten. Und wir wollen es nur fünf Pixel oberhalb der untersten Linie der Karte positionieren. Also werde ich calc negativ 100% plus fünf Pixel hinzufügen. Und dann wollten wir die volle Größe des Autos aufnehmen. So werden wir Breite, 100%, Höhe, 100% als auch hinzufügen . Dann Hintergrundfarbe, diese rosa Farbe, dann Z-Index eins, und schließlich Übergang, 0,5 Sekunden. In Ordnung, Sie können sehen, dass der rosa Hintergrund unten sitzt. Lassen Sie uns hier in der Karte div gehen und Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass der rosa Hintergrund unten positioniert ist und nur fünf Pixel davon sichtbar sind. Wenn Sie nun über die Karte schweben, möchten wir, dass sich der rosa Hintergrund nach oben bewegt und die weiße Karte vertuscht. Also werde ich hierher zurückgehen und sagen, wenn ich über die Karte schwebe. Ich werde das vor Pseudo-Element auswählen, das der rosa Hintergrund ist. Und ich werde unten 0 hinzufügen. Und jetzt, wenn ich zurückgehe und über die Karte schwebe, bewegt sich der rosa Hintergrund hinein, sitzt genau über der Karte. Alles klar, Lassen Sie uns weiter arbeiten und wir gehen zurück und zielen auf den Inhalt div. Dann werde ich Position, Relativ, Text transformieren, Großbuchstaben, Farbe hinzufügen . Diese graue Farbe. Um dann den Inhalt vor dem rosa Hintergrund erscheinen zu lassen, werde ich Z-Index 2 hinzufügen. Und schließlich werde ich den Übergang 0,5 Sekunden hinzufügen. Und jetzt hat der Inhalt diese graue Farbe. Und wenn wir schwebten, erscheint der Inhalt vor dem rosa Hintergrund. In Ordnung, gehen wir zurück und wählen das H2 aus. Fügen Sie dann Rand unten zehn Pixel und Rand oben 0 hinzu. Dann Schriftgröße 30 Pixel. Dann werde ich den Absatz anvisieren und Schriftgröße 18 Pixel hinzufügen. Dann schließlich werde ich das Anker-Tag anvisieren und Rand oben 10 Pixel hinzufügen. Wenn Schriftgröße 14 Pixel, Inline-Block-Textdekoration anzeigen. Keiner. Farbe. Diese graue Farbe. Polsterung Sechs Pixel von oben und unten und zehn Pixel von links und rechts. Dann Schriftgewicht, 600, Hintergrundfarbe, weiß. Und schließlich, Box Schatten 0, zwei Pixel, 20 Pixel, RGBA, 0, 0, 0, 0, 0,05. Und jetzt können Sie sehen, dass der Link viel besser aussieht. Wenn wir den Mauszeiger über die Karte bewegen, soll die Textfarbe des Inhalts in Weiß geändert werden. Also werde ich hierher gehen und ich werde sagen, wenn ich über den Anker-Tag schwebe, werde ich die Farbe des Textes in Weiß ändern. Und jetzt, wenn ich zurückgehe und schwebe, können Sie sehen, dass sich die Textfarbe in Weiß ändert, was uns den genauen Effekt gibt, den wir wollen. 59. 63 – kreative erweiterbare Karteneffekt: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese schöne Karte Hover-Effekt erstellen. Sie können sehen, wir haben dieses Bild, das auf einem weißen Hintergrund sitzt. Und wenn wir den Mauszeiger darüber bewegen, dehnt sich die Karte vertikal aus und das Bild bewegt sich nach oben. Dann kommt dieser Text von oben und bewegt sich in seine Position. Das ist ein wirklich cooler Effekt. Lassen Sie uns sehen, wie wir es schaffen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Karte gebe. Dann werde ich ein anderes div hinzufügen und ihm eine Klasse von Image-Box geben. Also offensichtlich wird dies das div sein, das unser Bild enthält. Dann werden wir unser Bild hinzufügen. Dann unter dem Bildfeld div, werden wir eine weitere mit einer Klasse von Inhalt hinzufügen , um den Text hinzuzufügen, der erscheint, wenn in diesem div schwebt. Dann werde ich ein H2 hinzufügen und sagen Karte Hover. Dann endlich ein Absatz mit etwas Dummy Lorem Ipsum Text. In Ordnung, gehen wir zu unserem CSS, um das zu stylen. Wir werden den weißen Hintergrund erstellen, der hinter dem Bild mit dem Kartendiv sitzt. Also werde ich das ins Visier nehmen. Und ich werde Position relativ hinzufügen. Dann Breite, 300 Pixel, Höhe 260 Pixel. Dann werde ich Border-Radius, 10 Pixel hinzufügen. Damit der weiße Hintergrund vor dem weißen Körper sichtbar ist, fügen wir Box-Schatten, 0 Pixel, fünf Pixel, 20 Pixel hinzu. Dann RGB a, 0, 0, 0, 0, 0.5. Und schließlich werde ich den Übergang 0,3 Sekunden hinzufügen. Alles klar, wie Sie sehen können, wird der weiße Hintergrund nicht angezeigt, weil das Bild es verdeckt, aber es ist da. Also, wenn ich zurückgehe und seine Breite zum Beispiel auf 800 Pixel ändere , können Sie sehen, dass es jetzt sichtbar ist. Ordnung? Ich gehe zurück und setze die Breite wieder auf 300 Pixel. Dann werde ich Padding hinzufügen, 20 Pixel von oben und unten und 40 Pixel von links und rechts. Und Sie können sehen, dass der weiße Hintergrund jetzt aufgrund der Polsterung, die wir hinzugefügt haben, sichtbar ist. In Ordnung, lassen Sie uns das div mit der Klasse der Bildbox anvisieren, um das Bild zu stylen. Ich werde Position, relative Breite, 100%,Höhe, 100% sowie 100% hinzufügen relative Breite, 100%, . Dann werde ich das Bild selbst anvisieren und Breite hinzufügen, 100% seiner Containerbreite und Randradius, 10 Pixel. Wie Sie sehen können, wird das Bild jetzt nach unten skaliert. 60. 64 – kreative Captain: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Kartenhover-Effekt erstellen. Wie Sie sehen können, haben wir diese Karte mit einem Captain Marvel Bild in der Mitte. Und wenn Sie den Mauszeiger über die Karte bewegen, geschieht dieser Effekt dort, wo das Bild größer wird und sich nach rechts bewegt. Gleichzeitig erscheint dieser Text auf der linken Seite und bewegt sich von der Mitte, um auf der linken Seite zu positionieren. Und wie Sie sehen können, enthält es eine Überschrift, einen Absatz und einen Link. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Karte gebe. Dann werde ich ein weiteres div mit der Klasse des Inhalts hinzufügen. Und darin werden wir den Inhalt hinzufügen. Ich werde damit beginnen, ein H2 hinzuzufügen und Captain Marvel zu sagen. Dann werde ich unten einen Absatz hinzufügen und etwas Dummy-Text hinzufügen. Dann endlich ein Anker-Tag. Und sagen, lesen Sie mehr. Das ist es für den Inhalt, ich werde unter das Inhaltsdiv gehen und ein Bild hinzufügen. Dann werde ich unser Bild hinzufügen. Wie Sie sehen können, haben wir den Inhalt oben und unser Bild sitzt unten. In Ordnung, gehen wir zu unserem CSS und zielen auf das Kartendiv. Dann werde ich Position, relative Breite, 500 Pixel und Höhe 300 Pixel hinzufügen . Dann werde ich Display Flex hinzufügen , um den Inhalt und das Bild nebeneinander sitzen zu lassen. Dann wollen wir ihnen senkrecht schicken. Also gehe ich zurück und füge Align-Elemente hinzu. Mitte. Ich werde auch einen linearen Hintergrundverlauf hinzufügen. Und ich werde diesen Gradientenwert hinzufügen. Dann schließlich werde ich Randradius 20 Pixel hinzufügen. Und jetzt können Sie sehen, dass das Kartendiv jetzt diesen Farbverlauf Hintergrund und einen Randradius um die Ecken hat . In Ordnung, lassen Sie uns an unserem Bild arbeiten und es in der Karte zentrieren. Ich werde es anvisieren und Position absolute unten 0 hinzufügen. Und um es zu zentrieren, werde ich links 50% hinzufügen. Dann transformieren, X negativ 50 Prozent übersetzen. Dann wollen wir seine Höhe ein wenig verringern. Also werde ich Höhe 400 Pixel hinzufügen. Und schließlich, Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass das Bild im Cardiff zentriert ist und seine Höhe kleiner ist. Alles klar, lassen Sie uns an dem Schwebeeffekt arbeiten. Wenn Sie mit dem Mauszeiger über die Karte fahren, möchten wir, dass das Bild etwas größer wird und sich dann nach rechts bewegt. Also werde ich hierher gehen und sagen, wenn wir über die Karte schweben. Ich werde einige Änderungen an dem Bild passieren. Ich werde seine Höhe auf 450 Pixel anstelle von 400 Pixeln setzen. Ich werde auch links hinzufügen 80 Prozent, um es nach links zu verschieben. Und jetzt, wenn ich zurück gehe und den Mauszeiger über die Karte, können Sie sehen, dass das Bild größer wird und bewegt sich auf der rechten Seite zu sitzen und die linke Seite wird leer, weil hier werden wir den Inhalt zu positionieren. Gehen wir also zurück zu unserem CSS und zielen auf das Content-div. Dann werden wir Position relativ 40% der Kartenbreite hinzufügen. Dann links, 20 Prozent. Farbe, weiß. Text transformieren, Groß- und Kleinschreibung. Und schließlich, Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass der Inhalt 20% der Kartenbreite von links sitzt, also wollen wir es verstecken. Und wenn wir über die Karte schweben, wollen wir, dass sie wieder erscheint und auf der linken Seite sitzt. Also werde ich zurück in das Inhaltsdiv gehen und Opazität 0 hinzufügen. Dann unten, werde ich sagen, wenn ich über die Karte schwebe, Ich werde den Inhalt auswählen und links 5% anstelle von 20% hinzufügen. Und Opazität wieder eins. Und jetzt können Sie sehen, dass der Text ausgeblendet ist. Und wenn Sie den Mauszeiger über die Karte bewegen, erscheint der Text wieder und bewegt sich, um auf der linken Seite zu sitzen. Wir müssen nur noch die Elemente innerhalb des Inhalts stylen. so werde ich das H2 anvisieren und Marge 0 hinzufügen, ebenfalls 0 auffüllen. Dann werde ich den Absatz anvisieren und Randunterseite 20 Pixel hinzufügen. Dann schließlich werde ich das Anker-Tag anvisieren und Position hinzufügen. Relativ. Anzeige. Farbe des Inline-Blocks. Diese dunkelgraue Farbe. Dann Padding, fünf Pixel von oben und unten und zehn Pixel von links und rechts. Dann Hintergrund, weiß, Textdekoration, keine. Und schließlich, Border-Radius 10 Pixel. So jetzt können Sie sehen, dass die Inhaltselemente und der Link viel besser aussehen. Und wir haben jetzt diesen schönen Karteneffekt abgeschlossen. Es war eine einfache, aber coole. Also werde ich Sie in der nächsten Lektion sehen. 61. 65 – kreative Karteneffekt: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion erstellen wir einen weiteren Kartenhover-Effekt. Sie können sehen, wir hatten diesen dunkelblauen Hintergrund mit der Nummer 88 drauf. Und wenn Sie darüber schweben, schrumpft der blaue Hintergrund und wandelt sich in einen kleinen Kreis mit einem blauen Rand um ihn herum. Und die Zahl 88 wird kleiner und ihre Farbe ändert sich zu dunkelblau. Außerdem wird dieser Text hier angezeigt, und wir haben eine Überschrift, einen Absatz und einen Link. In Ordnung, lassen Sie uns diesen Effekt erzeugen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich ein anderes div mit einer Klasse von Gesicht und Gesicht eins hinzufügen. Dies wird also das div sein, das die Überschrift und den Absatz und den Link enthält. Ordnung, in ihm werde ich ein H2 hinzufügen und Dienste sagen. Dann werde ich unten einen Absatz hinzufügen und etwas Dummy-Text hinzufügen. Und schließlich ein Anker-Tag. Und sagen, lesen Sie mehr. Dann unterhalb dieses div werde ich ein weiteres div mit der Klasse von Phase und Phase zwei hinzufügen. Dies wird also das div sein, das einen dunkelblauen Hintergrund hat. Und darin werde ich ein H2 hinzufügen und die Zahl 88. Okay, dann werde ich zu unserem CSS gehen und das div mit der Klasse der Karte anvisieren. Und fügen Sie Position, relative Breite, 300 Pixel, 400 Pixel, dann Hintergrund, weiß. Und schließlich Übergang, 0,5 Sekunden. In Ordnung, jetzt haben wir einen weißen Hintergrund, der im Browser zentriert ist. Wenn wir über diese Karte schweben, wollten wir etwas Kastenschatten haben. Also werde ich sagen, wenn ich mit der Klasse der Karte über das div schwebe, werde ich box-shadow, 030 Pixel, 50 Pixel und RGBA hinzufügen . 0, 0, 0, 0 Punkt auf. Und jetzt, wenn ich über die Karte schwebe, haben wir diesen schönen Kastenschatten unter der Karte. Alles klar, lassen Sie uns weitermachen. Ich werde das div mit der Klasse des Gesichts anvisieren. Und diese Klasse wird sowohl auf die erste als auch auf die zweite Phase angewendet. Es ist also eine gemeinsame Klasse. Dann werde ich Position absolut, oben 0, links 0 als auch hinzufügen . Dann wollten wir die volle Größe des Kartendivs aufnehmen. So werden wir Breite 100% und Höhe 100% als auch hinzufügen. Ich werde Display flex hinzufügen. Begründen Sie dann den Inhalt. Zentrieren, um den Text horizontal zu zentrieren und Elemente zentrieren, um ihn vertikal zu zentrieren. Und wie Sie sehen können, ist der Text nun horizontal und vertikal zentriert. Okay, lasst uns an der ersten Phase arbeiten, die unseren Inhalt hat. Ich werde das div mit der Klasse von Phase eins anvisieren, und ich werde Padding, 20 Pixel hinzufügen. Dann richten Sie den Text zentriert aus, um die Texthintergrundfarbe Weiß zu zentrieren. Und schließlich, Farbe, diese dunkelblaue Farbe. Dann werde ich das H2 in diesem div anvisieren. Und ich werde Rand oben 80 Pixel hinzufügen. Es wird also genug Platz über dem H2 geben, damit die Zahl 88 drinnen sitzen kann. Lassen Sie uns auch das Anker-Tag stylen. Ich werde es ins Visier nehmen. Und fügen Sie Anzeige, Inline-Block. Dann Rand oben 20 Pixel, um einige Abstände zwischen ihm und dem Absatz zu erhalten. Dann füllen Sie fünf Pixel von oben und unten und zehn Pixel von links und rechts. Dann Textdekoration. Keiner. Farbe. Diese dunkelblaue. Und schließlich, Grenze. Zwei Pixel, solide. Unsere dunkelblaue Farbe. Var1-Text-Transformation Groß- und Kleinschreibung, Schriftstärke, fett. Und schließlich Übergang 0,3 Sekunden. Und wie Sie sehen können, sieht der Anker-Tag viel besser aus. Alles klar, lasst uns die zweite Phase stylen. Jetzt werde ich es anvisieren und Hintergrundfarbe hinzufügen. Unsere dunkelblaue Farbe, dann Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass wir diesen dunkelblauen Hintergrund haben, der oben auf dem ersten sitzt. Lassen Sie uns auch das H2 darin verkaufen. Ich werde es anvisieren und Schriftgröße hinzufügen, 120 Pixel, Farbe weiß. Und schließlich Übergang 0,5 Sekunden. Okay, lassen Sie uns an dem Schwebeeffekt arbeiten. Jetzt. Wir schweben über die Karte. Wir wollen, dass dieser blaue Hintergrund nach unten skaliert und zu einem Kreis wird. Also werde ich sagen, wenn ich über die Karte schwebe, werde ich die zweite Phase auswählen und enge 80 Pixel hinzufügen. Breite 80 Pixel, dann Randradius, 50 Prozent, um es zu einem Kreis zu machen. Und wie Sie sehen können, wenn wir schweben, wird der Hintergrund kleiner, tritt in einen Kreis ein. Lassen Sie es uns richtig positionieren. Ich gehe wieder zurück und füge die oberen 40 Pixel hinzu. Links. 50 Pixel. Dann transformieren, X negativ 50% übersetzen, um es horizontal zu zentrieren. Dann werde ich Hintergrundfarbe hinzufügen, transparent. Und schließlich, Grenze, zwei Pixel, solide, unsere dunkelblaue Farbe. Und jetzt, wenn ich den Mauszeiger über die Karte führe, können Sie sehen, dass der Kreis jetzt richtig oben auf dem Inhalt div positioniert ist. Nun, lasst uns jetzt das H2. Beim Schweben werde ich sagen, wenn wir über das Kartendiv schweben, werde ich das H2 auswählen, das sich in der zweiten Phase befindet. Und ich werde seine Farbe in unsere dunkelblaue Farbe ändern. Und ich werde Schriftgröße 32 Pixel hinzufügen. Und jetzt, wenn ich zurückgehe und schwebe, können Sie sehen, dass die Überschriftenfarbe blau wird und ihre Größe kleiner wird, was uns den Effekt gibt, den wir wollen. Schließlich wollen wir nur den Linkhintergrund ändern, wenn wir den Mauszeiger darüber bewegen. Also werde ich hierher gehen und sagen, wenn ich über den Anker-Tag schwebe, werde ich die Hintergrundfarbe in dunkelblau ändern. Und ich werde die Farbe in Weiß ändern. Und jetzt, wenn ich den Mauszeiger über den Link gehe, können Sie sehen, dass sich die Hintergrundfarbe in Blau ändert, und die Textfarbe ändert sich in Weiß. Und das war's, alle. Wir haben jetzt den Karteneffekt erstellt. Wir wollen. 62. 66 – kreative face hover: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese schöne Karte Hover-Effekt erstellen. Sie können sehen, dass wir diesen dunkelgrauen Hintergrund haben, der einige Kastenschatten um ihn herum hat. Und es hat auch ein Bild und das Wort Design unter dem Bild. Und wenn wir den Mauszeiger darüber bewegen, bewegt es sich nach oben und seine Farbe ändert sich zu dieser rosa Farbe. Und ein weiterer weißer Hintergrund, der einen Absatz und einen Link enthält , bewegt sich nach unten und sitzt hinter diesem rosa Hintergrund. In Ordnung, lasst uns anfangen, diesen Karteneffekt zu kreieren. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich ein weiteres div mit einer Klasse von Phase eins hinzufügen. Dies wird also das Kartengesicht sein, das das Bild und das Wort Design enthält. Also in ihm werde ich ein anderes div mit einer Klasse von Image-Box hinzufügen. Und darin werde ich ein Bild-Tag hinzufügen und unser Bild hinzufügen. Dann füge ich ein h3 hinzu und füge das Wort Design hinzu. Dann werde ich unten ein weiteres div mit der Klasse von Phase 2 hinzufügen. Und darin werde ich ein div mit einer Klasse von Inhalten hinzufügen. Dann ein Absatz innerhalb dieses div mit etwas Lorem Ipsum Text. Dann endlich ein Anker-Tag darunter. Und ich werde sagen, lesen Sie mehr. Jetzt werde ich zu meinem CSS gehen und das Kartendiv anvisieren. Dann werde ich Position, Relativ, Cursor, Zeiger und Breite 300 Pixel hinzufügen . So jetzt können Sie sehen, dass die Karte div eine Breite von 300 Pixeln hat und es in der Mitte des Browsers sitzt. Alles klar, gehen wir zurück und zielen das div mit der Klasse von Gesicht eins, die das Bild und das h3 enthält. Dann werde ich Position, relative Breite, 300 Pixel, 200 Pixel hinzufügen . Hintergrundfarbe, schwarz für jetzt. Dann gehe ich zurück und füge Display Flex, Flex-Richtungsspalte hinzu, um das Bild und das H3 übereinander sitzen zu lassen. Dann, um sie horizontal und vertikal innerhalb des Gesichts ein div zu zentrieren , werde ich justify Content Center hinzufügen und Elemente zentrieren. Dann werde ich schließlich den Übergang 0,5 Sekunden hinzufügen. Alles klar, jetzt wollen wir das zweite div mit der Klasse von Phase 2 anvisieren. Dann werde ich Position hinzufügen. Relative Breite, 300 Pixel, Höhe, 200 Pixel. Hintergrundfarbe, weiß. Dann auch Flex, Flex-Richtung, Spalte anzeigen. Begründen Sie Inhalte, zentrieren. Richten Sie Elemente auch in der Mitte aus. Dann box-size, border-box und schließlich padding 20 Pixel. Jetzt, wie Sie sehen können, haben wir diesen weißen Hintergrund, der den Absatz und den Link enthält, und er sitzt hinter dem schwarzen. In Ordnung, Lassen Sie uns auch einige Kastenschatten zu diesem weißen Hintergrund hinzufügen. Ich werde hier gehen und Box-Schatten hinzufügen, 020 Pixel, 50 Pixel, RGB, 0.8000. Dann schließlich werde ich Übergang 0,5 Sekunden hinzufügen. Und wie Sie sehen können, hat der weiße Hintergrund jetzt diesen Schatten um ihn herum. Na gut, jetzt arbeiten wir an den schwebenden Effekten. Wir wollen, dass die beiden Phasen übereinander sitzen. Und wenn wir schweben, wollen wir, dass sich die erste Phase nach oben und die zweite Phase nach unten bewegt. Also, um das zu tun, werde ich hier in das div mit der Klasse von Phase 1 gehen und transformieren, y 100 Pixel übersetzen. Dann unten werde ich sagen, wenn ich über das Kartendiv schwebe, werde ich das Gesicht ein div auswählen. Dann werde ich den schwarzen Hintergrund zu dieser rosa Farbe ändern. Ich werde auch transformieren hinzufügen, y wieder zu 0 übersetzen. Und jetzt können Sie sehen, dass der schwarze Hintergrund um 100 Pixel nach unten verschoben hat. Und wenn wir den Mauszeiger über die Karte bewegen, geht sie zurück zu ihrer Position oben und ihre Farbe ändert sich zu dieser rosa Farbe. Lassen Sie uns dasselbe für das zweite div tun. Unten werde ich in das div mit der Klasse von Phase 2 gehen, und ich werde transformieren hinzufügen, Y negative 100 Pixel übersetzen, dann darunter. Und wenn ich über die Karte schwebe, wähle ich das Gesicht zu div aus. Und fügen Sie Transformation hinzu. Übersetzen Sie Y 0 erneut. Und jetzt können Sie sehen, dass der weiße Hintergrund nach oben verschoben wird und der schwarze verdeckt. Und wenn Sie den Mauszeiger über die Karte bewegen, geschieht dieser Effekt, wenn sich der weiße Hintergrund nach unten bewegt und der rosa Hintergrund nach oben bewegt, was uns den genauen Effekt gibt, den wir wollen. Aber wir wollen, dass der rosa Hintergrund vor dem weißen erscheint, nicht das Gegenteil. Also kann ich hier zurück in das Gesicht ein div gehen und Z-Index 1 hinzufügen. Lassen Sie uns auch die Hintergrundfarbe von Schwarz zu dieser dunkelgrauen Farbe ändern. Und wie Sie sehen können, hat das Gesicht ein div diese graue Farbe und es sitzt vor dem Weiß tat, und wenn Sie den Mauszeiger über die Karte, sind Effekte immer noch richtig funktioniert. Okay, jetzt lasst uns daran arbeiten, unsere Karte zu stylen. Ich werde das div mit der Klasse der Bildbox ansprechen, die unser Bild enthält. Und ich werde Opazität 0,2 und Übergang 0,5 Sekunden hinzufügen. Dann werde ich unten sagen, wenn ich über die Karte schwebe, werde ich das Bildfeld div auswählen und erneut Opazität hinzufügen. Und wie Sie sehen können, sind das Bild und das H3 jetzt ein bisschen transparent. Und wenn sie über die Karte schweben, werden sie wieder vollständig sichtbar. Gehen wir zurück und zielen Sie auf das Bild im Gesicht, ein div. Dann werde ich Breite 100 Pixel hinzufügen. Dann werde ich auch das Ziel H3, das ist das Wort Design, und fügen Rand zehn Pixel 00. Dann werde ich Polsterung hinzufügen, 0, Farbe, Weiß, Text, ausrichten, zentrieren. Und schließlich, Schriftgröße, 25 Pixel. So können Sie jetzt sehen, das Bild und die H3 sehen viel besser. Als nächstes arbeiten wir an dem Absatz und dem Anker-Tag innerhalb der zweiten Phase div, ich werde zuerst den Absatz anvisieren. Dann werde ich Rand 0 hinzufügen, Polsterung 0. Nun, dann werde ich das Anker-Tag anvisieren und Rand 15 Pixel 00 hinzufügen. Dann werde ich Anzeige, Inline-Block, dann Textdekoration hinzufügen. Keine, Schriftgewicht, 900 Farbe. Diese graue Farbe. Dann füllen Sie fünf Pixel. Und schließlich Grenze. Ein Pixel, einfarbig, auch diese graue Farbe. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Karte führe, sehen der Absatz und der Anker-Tag viel besser aus. Lassen Sie uns nur eine letzte Sache tun und das ist, die Hintergrundfarbe des Links zu ändern, wenn Sie darüber schweben. Ich werde hier gehen und sagen, wenn ich über den Anker-Tag schwebe, werde ich Hintergrundfarbe, unsere graue Farbe, dann Farbe weiß hinzufügen . Und jetzt, wenn ich mit dem Mauszeiger über den Link gehe, können Sie sehen, wie sich die Hintergrundfarbe ändert und seine Farbe auch in Weiß ändert. Das war's, alle. Wir haben jetzt diesen coolen Karteneffekt beendet, und ich denke, es sieht toll aus. 63. 67 – kreative hover: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion erstellen wir diesen mehrschichtigen Kartenhover-Effekt. Sie können sehen, wenn ich den Mauszeiger über die Karte, dieser Effekt passiert, wo weiße Schichten der Karte um einen bestimmten Grad gedreht werden, geben uns diesen Effekt. Außerdem gibt es unten ein Leerzeichen, das angezeigt wird, und es enthält diesen Text. In Ordnung, fangen wir an, diesen Effekt zu erzeugen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich ein weiteres div mit der Klasse der Bildbox hinzufügen. Dies wird also das div sein, das das Bild enthält. Dann werde ich unten ein weiteres div mit einer Klasse von Details hinzufügen. Und darin werde ich ein H2 hinzufügen und John Doe sagen. Und dann werde ich ein Zeilenumbruch-Tag hinzufügen. Und ich werde eine Spanne hinzufügen und einfach Gründer sagen. Dann werde ich zu meinem CSS gehen und das Auto div anvisieren. Dann werde ich Position, relative Breite, 320 Pixel, Höhe, 350 Pixel hinzufügen . Hintergrund, weiß, Rahmenradius, vier Pixel. Dann Box-Schatten, 02 Pixel. Zehn Pixel, RGBA, 0, 0, 0, 0, 0,2. Und jetzt können Sie sehen, dass wir diesen weißen Hintergrund haben, der in der Mitte des Browsers sitzt. In Ordnung, lassen Sie uns die zwei weißen Schichten erstellen, die unter unserer Karte sitzen. Wir werden sie mit den Vorher und Nachher Pseudo-Elementen erstellen. Also werde ich V vor dem Pseudo-Element der Karte div auswählen. Ich werde auch den Nachmittag auswählen. Und ich werde Inhalte hinzufügen. Leere Saiten. Position, absolut, oben, 0, links, 0, Breite, 100%, Höhe, 100% ebenfalls. Wenn Randradius. Für Pixel, Hintergrundfarbe, rot für jetzt. Dann schließlich Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass wir diesen roten Hintergrund haben, der oben auf der Karte sitzt. Gehen wir zurück und ändern Sie die Hintergrundfarbe in Weiß. Wieder. Ich werde auch Z-Index minus1 hinzufügen. Damit der weiße Hintergrund hinter der Karte sitzt. In Ordnung, jetzt, wenn wir über der Karte schweben, wollen wir, dass sich die Vor- und Nachher-Pseudo-Elemente drehen, damit wir unseren Effekt erzielen können. Also werde ich hierher gehen und sagen, wenn ich über die Karte schwebe, werde ich einige Änderungen an dem vorher Pseudo-Element vornehmen. Ich werde Transformation hinzufügen, 20 Grad drehen. Ich werde auch Box-Schatten, 02 Pixel, 20 Pixel, RGB, 0, 0, 0, 0, 0 Punkt 2. Lassen Sie uns dasselbe für das After-Pseudo-Element tun. Ich werde das kopieren, es erneut einfügen und vorher zu nachher wechseln. Dann ändere ich einfach den Rotationsgrad auf zehn Grad statt 20. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Karte führe, dieser Effekt passiert, wenn wir zwei weiße Hintergründe haben, die sich um verschiedene Winkel drehen, was uns diesen mehrschichtigen Karteneffekt gibt. Alles klar, lassen Sie uns an der Bildbox div arbeiten, die unser Bild enthalten sollte. Ich werde es zielen und Position absolut hinzufügen, oben 10 Pixel, links, 10 Pixel, unten zehn Pixel, richtig? Zehn Pixel auch. Also wird dieses div zehn Pixel Raum um ihn herum haben. Dann werde ich Hintergrundfarbe hinzufügen. Diese dunkelgraue Farbe. Dann schließlich Übergang 0,5 Sekunden. Also hier haben wir einen dunklen Hintergrund, der von V Card div umgeben ist. Wenn wir dann über die Karte schweben, möchten wir, dass dieser dunkelgraue Hintergrund ein wenig nach oben verschoben wird. Also werde ich hier gehen und sagen, wenn ich über die Karte schwebe, werde ich die Bildbox div auswählen. Und ich werde unten auf 80 Pixel anstelle von 10 Pixeln ändern. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Karte führe, schrumpft der dunkelgraue Hintergrund ein wenig von unten und hinterlässt dieses Leerzeichen. Und hier werden wir unsere Inhalte positionieren. Also werde ich hierher zurückgehen und das div mit der Klasse der Details anvisieren. Dann werde ich Position hinzufügen, absolut, links, 10 Pixel, richtig? Zehn Pixel, unten, zehn Pixel ebenfalls. Dann werde ich Höhe hinzufügen, nur 60 Pixel. Und schließlich, Text zentriert ausrichten. Und jetzt können Sie sehen, dass wir unsere Details auf dem Boden sitzen. In Ordnung, lasst uns weiter arbeiten und wir gehen hierher und zielen auf das H2 ab. Dann werde ich Marge 0 hinzufügen, Padding 0 als auch. Dann Schriftgewicht, 600. Schriftgröße: 20 Pixel. Farbe. Diese graue Farbe. Dann schließlich, Text transformieren Großbuchstaben. Und jetzt können Sie sehen, die H2 hat diese graue Farbe und sitzt genau an der Position, die wir wollen. Lasst uns weitermachen. Ich werde die Spanne in diesem H2 anvisieren, die das Wort Gründer ist. Dann werde ich Schriftgewicht hinzufügen, 500. Schriftgröße, 16 Pixel. Dann färben Sie diese rote Farbe. Und jetzt sehen die Details genau so aus, wie wir es wollen. Und wenn Sie den Mauszeiger über die Karte bewegen, schrumpft der graue Hintergrund und die Details erscheinen. Lassen Sie uns einfach die Details hinter dem grauen Hintergrund verstecken. Ich werde zurück hierher in die Bildbox div gehen. Und ich werde auch Z-Index hinzufügen. Und jetzt können Sie sehen, dass die Details ausgeblendet sind. Und wenn Sie mit dem Mauszeiger über die Karte fahren, erscheinen sie wieder unter dem dunkelgrauen Hintergrund, wie wir wollen. Cool. Jetzt gehen wir zurück und fügen Sie unser Bild hinzu. Ich werde zu meinem HTML gehen und ich werde in die Bildbox div gehen und Bild hinzufügen. Dann werde ich unser Bild hinzufügen. Dann gehe ich zu meinem CSS und wähle das Bild aus und füge Position hinzu. Absolute, oben, 0, links, 0, Breite, 100%, Höhe, 100%. Dann schließlich, Objekt passen, Abdeckung. Und jetzt können Sie sehen, dass unser Bild jetzt im div erscheint. Und wenn der Mauszeiger über die Ecke des Bildes schwebt, schrumpft DIV nach unten und die Details der Karte erscheinen, um uns den genauen Effekt zu geben, den wir wollen. 64. 68 – kreative Skalierung: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese schöne Karte Hover-Effekt erstellen. Sie können sehen, wir hatten dieses Bild und dieser Text an der Unterseite sagt Beitrag Titel. Und wenn wir den Mauszeiger über die Karte bewegen, passiert dieser Effekt, wo sich der Titel erweitert und die volle Größe der Karte nimmt In diesem Absatz und Link erscheinen unterhalb des Titels, das Bild verschwindet auch. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich ein anderes div hinzufügen, ihm eine Klasse von Image-Box geben. Dies wird also unser Bild enthalten, aber wir werden das später hinzufügen. Dann werde ich unten unseren Inhalt hinzufügen. Ich werde ein div hinzufügen, ihm eine Klasse von Inhalten geben. Dann füge ich ein h3 hinzu und sag Post Titel, dann ein Absatz-Tag und dann etwas Lorem Ipsum Dummy Text. Und schließlich ein Anker-Tag. Und sagen Read more. Als nächstes werde ich zu meinem CSS wechseln und das div mit der Klasse der Karte anvisieren. Und füge Position hinzu. Relative Breite, 300 Pixel, Höhe 400 Pixel. Dann werde ich eine Hintergrundfarbe hinzufügen. Und schließlich, Feld Schatten, 0 Pixel entlang der x-Achse, dann 30 Pixel entlang der y-Achse, so dass wir einige Schatten unter unserer Karte, wenn ein Unschärfewert von 30 Pixel als auch, dann wird die Farbe des Schattens RGBA, 0.5000. Und jetzt können Sie sehen, dass wir diese Karte mit einem schwarzen Hintergrund haben und einige Texte darunter Schatten haben. Alles klar, lasst uns daran arbeiten, den Inhalt so zu gestalten, dass er so aussieht, wie wir es wollen. Ich werde hierher gehen und das div mit der Klasse des Inhalts anvisieren. Dann werde ich Position Absolute hinzufügen, um es relativ zu dem Auto zu positionieren, dann wollen wir es am unteren Rand der Karte positionieren. Also werden wir unten 0 Pixel hinzufügen. Dann Breite, 80% der Kartenbreite und Höhe, nur 80 Pixel. Dann werde ich Hintergrundfarbe hinzufügen, weiß. So, jetzt können Sie sehen, wir haben diesen weißen Hintergrund, der unsere Überschrift und unseren Absatz enthält, und es sitzt in der unteren Ecke der Karte. In Ordnung, Zentrieren wir diesen weißen Hintergrund horizontal. Da es eine Breite von 80 Prozent der Kartenbreite hat, bedeutet dies, dass der verbleibende Platz hier 20% der Kartenbreite beträgt. Und wenn wir den Inhalt um 10% der Kartenbreite nach rechts verschieben, bleibt links 10 Prozent Platz und rechts 10 Prozent Platz übrig. Und das wird an den Inhalt gesendet. Also lasst uns das machen. Ich werde hier gehen und links 10 Prozent hinzufügen , um das Content-Div um 10 Prozent nach rechts zu verschieben. Wie Sie sehen können, ist es jetzt zentriert. Alles klar, gehen wir zurück und arbeiten weiter. Ich werde Text ausrichten Mitte hinzufügen, um den Text innerhalb des Content-div zu zentrieren. Dann schließlich, Übergang 0,5 Sekunden. In Ordnung, um zu sehen, was wir tun, Lassen Sie uns einfach die Höhe des Inhalts div 100% anstelle von 80 Pixeln machen. Okay, lassen Sie uns die Elemente innerhalb des Content-div stylen. Jetzt werde ich das H3 anvisieren und Schriftgröße hinzufügen, 30 Pixel. Text-Transformation. Großbuchstaben, der Rand, 25 Pixel. Alles klar, lassen Sie uns den Absatz formatieren, den ich gezielt habe, und fügen Sie Breite hinzu. 80% der Inhaltsbreite, wenn der Rand zehn Pixel von oben und unten und von links und rechts horizontal zentriert wird. Dann Schriftgröße 18 Pixel. Und schließlich, Übergang, 0,5 Sekunden. Cool. Nun wollen wir das Anker-Tag Ziel und fügen Text, Dekoration. Keine, Hintergrundfarbe, schwarz, Farbe weiß. Dann Padding, 10 Pixel von oben und unten und 15 Pixel von links und rechts. Zeigen Sie dann den Inline-Blockrand an, die oberen 10 Pixel. Wenn schließlich Übergang, 0,5 Sekunden. Ordnung, Sie können sehen, dass es nicht genug Platz gibt, aber das liegt daran, dass wir die Breite des Inhalts auf nur 80% der Kartenschulden einstellen. Aber wenn wir es auf 100% setzen, wird unser Content-Div viel besser aussehen. Also werde ich zurück hierher in das Content-Div gehen, und ich werde die Höhe wieder auf 80 Pixel setzen. Und ich werde auch einen Überlauf hinzufügen, der versteckt ist, um den Text außerhalb der 80 Pixel unseres Content-Div zu verstecken. Cool. Jetzt möchten wir das Content-Div erweitern und die volle Breite und Höhe des Kartendivs aufnehmen , wenn wir den Mauszeiger über die Karte bewegen. Also werde ich hierher gehen und sagen, wenn wir über die Karte schweben. Ich werde einige Änderungen am Inhalt div vornehmen. Ich werde seine Höhe auf 100% und seine Breite auch auf 100% einstellen. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Karte führe, wird der weiße Hintergrund größer und nimmt die volle Größe der aktuellen tut. Aber Sie können auch sehen, dass es nach links verschoben ist. Und das liegt daran, dass wir seine linke Eigenschaft auf 10 Prozent setzen , um sie horizontal zu zentrieren, wenn Sie sich erinnern. So können wir das leicht beheben, indem wir links 0% anstelle von 10% hinzufügen. Und jetzt können Sie sehen, dass der weiße Hintergrund perfekt in das Kartendiv passt und es vollständig verdeckt. In Ordnung, lassen Sie uns diesem Effekt einen letzten Schliff hinzufügen. Wir möchten, dass der Absatz und das Anker-Tag sichtbar sind und nur dann angezeigt werden , wenn wir den Mauszeiger über die Karte bewegen. Also werde ich sowohl in den Absatz als auch in einen Link gehen und die Deckkraft auf 0 setzen. Dann werde ich hier gehen und sagen, wenn ich über die Karte schwebe, werde ich den Absatz auswählen. Ich werde auch das Anker-Tag mit diesem auswählen. Und ich werde Opazität eins hinzufügen, dann Übergangsverzögerung 0,5 Sekunden, so dass es eine Weile dauern wird, bevor es erscheint. Und jetzt, wenn ich gehe und mit dem Mauszeiger über die Karte, können Sie sehen, dass der Absatz und das Anker-Tag erscheinen, nachdem der weiße Hintergrund vollständig auftaucht, was uns diesen coolen Effekt gibt. In Ordnung, lassen Sie uns weitermachen und das Bild dieser Karte hinzufügen. Ich gehe zurück zu meinem HTML. Und hier im div mit der Klasse der Bildbox werde ich unser Bild hinzufügen. Dann werde ich zu meinem CSS zurückkehren und das div mit der Klasse der Bildbox anvisieren. Dann werde ich Position, absolut, oben 0, links 0 als auch hinzufügen . Dann Breite, 100%, Höhe 100%. Und schließlich, Übergang 0,5 Sekunden. Okay, sagen wir das Bild. Ich werde es anvisieren und Breite, 100%, Höhe, 100% sowie hinzufügen . Dann Objekt passen, abdecken. Und schließlich, Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass das Bild die volle Größe seines Behälters einnimmt und genau so aussieht, wie wir es wollen. In Ordnung, schließlich, wenn wir den Mauszeiger über die Karte zeigen, wollen wir, dass das Bild transparent wird. Also werde ich hier gehen und sagen, wenn ich mit der Klasse der Karte über das div schwebe, werde ich das Bild auswählen und Opazität 0 hinzufügen. Das war's also, alle. Sie können sehen, wenn wir den Mauszeiger über die Karte bewegen, das Bild allmählich transparent. Und jetzt haben wir diesen cool aussehenden Karteneffekt beendet. 65. 69 – smoky mit -: Hallo an alle. In dieser Lektion werden wir diesen kreativen rauchigen Ausblendeffekt für den Text erstellen. Also werden wir hier in unserem HTML beginnen, und ich werde eine UL hinzufügen. Dann LI. Und ich werde jeden Brief in einen Verbündeten stecken. Also werde ich S hier hinzufügen. Dann kopiere ich das und füge es wieder viele Male ein. Und dann werde ich alle Buchstaben Grade hinzufügen. Also lassen Sie uns jetzt einige Stile hinzufügen. Ich gehe zu meinem CSS und füge dem Körper eine dunkelgraue Hintergrundfarbe hinzu. Dann werde ich die UL ins Visier nehmen. Und ich werde Marge 0 hinzufügen, Polsterung 0 ebenfalls. Dann werde ich Displayflex hinzufügen , so dass alle Buchstaben nebeneinander angezeigt werden, wie so. Jetzt werden wir auf die Listenelemente zielen, die die Buchstaben enthalten. Und ich werde List-Stil keine hinzufügen, um diese Kugeln loszuwerden. Dann werde ich Farbe, Weiß, dann Schriftgröße, 100 Pixel, Schriftgewicht, Fett, Buchstabenabstand, zehn Pixel hinzufügen. Und schließlich, Übergang zu Sekunden. Und jetzt sieht das Wort besser aus. Wenn wir uns eine Demo ansehen, und wenn Sie sich die Bewegung der Buchstaben genau ansehen, können Sie sehen, dass sie sich nach oben bewegen und gleichzeitig drehen. So werden wir die Übersetzungsfunktion verwenden, um die Buchstaben nach oben zu bewegen und die Drehfunktion, um sie offensichtlich drehen zu lassen. Gehen wir also zu unserem CSS und wenn ich den Mauszeiger über die UL führe, möchte ich dem Verbündeten einige Änderungen vornehmen. Die erste Änderung ist, dass ich Transformation hinzufügen möchte, um 45 Grad drehen. Dann ein Leerzeichen. Ich möchte auch, dass die Buchstaben vertikal auf der Y-Achse um minus 200 Pixel übersetzt werden, so dass sie sich nach oben bewegen. Wenn ich nun den Mauszeiger über die UL führe, können Sie sehen, wie sich die Buchstaben nach oben bewegen und gleichzeitig drehen. Nun möchte ich auch, dass die Deckkraft der Buchstaben 0 ist. Also werde ich hier gehen und Opazität 0 hinzufügen. Und jetzt, wenn sie wieder schweben, die Buchstaben darin transparent. Nun, um diesen rauchigen oder verschwommenen Effekt zu machen, können wir eine CSS-Eigenschaft namens filter verwenden. Also werde ich direkt hier in die Listenelemente gehen und Filter hinzufügen Unschärfe 20 Pixel. Dies ist also eine CSS-Eigenschaft, die die Texte verschwommen macht und ihm diesen schönen rauchigen Effekt verleiht. Und je höher du hier hinzufügst, desto verschwommener wird es bekommen. Wenn ich jetzt über unser Wort schwebe, können Sie sehen, dass wir genau den Effekt erzielen, den wir wollten. Jetzt ist noch eine Sache übrig. Wir wollen nicht, dass dieser Effekt bei allen Buchstaben gleichzeitig geschieht. Wir wollen, dass der erste Buchstabe zuerst verschwindet, dann der zweite, dann der dritte und so weiter. Wir können dies leicht mit der Übergangsverzögerungseigenschaft tun, die das Auftreten des Übergangs verzögert. Also, was ich tun werde, ist, dass ich hier gehe und LI sagen werde, Doppelpunkt. Bindestrich untergeordnetes Element, offene Klammern, 1, schließende Klammer. Dies zielt auf das erste Kind der Listenelemente ab, das ist der Buchstabe S. Als nächstes werde ich dies kopieren und viermal einfügen. Und ich werde die Nummer jedes Mal ändern. Also zwei für den zweiten Brief, drei für den dritten, für den vierten, fünf für den fünften. Dann gehe ich hier zum ersten Buchstaben und füge Übergangsverzögerung 0 hinzu , weil wir wollen, dass es sofort verschwindet. Dann kopieren wir das und machen es 0,4 Sekunden für den zweiten Buchstaben als 0,8 Sekunden für den dritten, 1,2 Sekunden für den 4.6., eine Sekunde für die fünfte. Und jetzt, wenn ich gehe und über das Wort schwebe, sollten die Buchstaben nacheinander verschwinden. So wie so. 66. 70 – Texteffekt auf Hover füllen: Hallo an alle. In dieser Lektion werden wir diesen Textfüllungseffekt erstellen. Wenn Sie mit dem Mauszeiger über dieses Wort fahren, können Sie sehen, dass diese schöne Füllung in Wirkung geschieht. Also lasst uns das wirklich machen. Ich werde hier in meinem HTML beginnen, indem ich ein H1 hinzufüge. Und wir werden nur Text sagen. Dann werden wir zu unserem CSS gehen, um einige Stile hinzuzufügen. Wir werden das H1 anvisieren. Dann fügen Sie Rand, 0, Padding, 0, Schriftfamilie hinzu. Daniel. Schriftgröße: 120 Pixel. Farbe. Diese hellgraue Farbe. Text transformieren Großbuchstaben, um alle Buchstaben Großbuchstaben zu machen. Und schließlich, Position relativ. Hier können Sie sehen, dass es größer ist und alle Buchstaben sind groß. Ordnung, jetzt lassen Sie uns den dunkleren Text erstellen , der hereinkommt, wenn wir den Mauszeiger über diesen hellgrauen Text bewegen, wir werden das vorher Pseudo-Element verwenden. Also werde ich gleich hier gehen und vorher einen Doppelpunkt hinzufügen. Und ich werde Inhalte hinzufügen. Texte. Position, absolut, oben, 0, links, 0, Farbe. Wir wollen, dass es dunkler wird. Also werden wir diese dunkelgraue Farbe verwenden. Richtig? Hier können Sie sehen, dass wir den dunklen Text oben auf den hellen Texten sitzen und ihn vertuschen. Dies liegt daran, dass wir links und oben rechts hier auf 0 gesagt haben. Wenn ich beispielsweise Tab 100% anstelle von 0 geändert habe, können Sie sehen, dass es jetzt unter dem hellen Text sitzt. In Ordnung, ändern wir es wieder auf 0. Nun wollen wir die Füllung und Wirkung auf diesen dunkleren Text passieren, wenn wir den Mauszeiger bewegen. Also werden wir die width Eigenschaft übergehen, was bedeutet, dass wir die Breite des dunklen Textes 0 machen. Und dann, wenn wir schweben, werden wir es wieder 100% machen. Und wir werden die Aktion glätten, indem wir die Übergangseigenschaft verwenden. Hab es. Lasst uns dran kommen. Ich werde genau hier in das vorher Pseudo-Element gehen und Breite 0 hinzufügen , Überlauf versteckt. Und schließlich der Übergang. Alle 0,5 Sekunden. Dann, wenn ich über das H1 schwebe, werde ich einige Änderungen vornehmen, die mit dem Pseudo-Element vor geschehen sind. Ich werde die Breite wieder auf 100 ändern. So wird es mit seiner vollen Breite erscheinen, was uns den Fülleffekt gibt, für den wir gehen. Und da gehen wir hin. So können Sie sehr schnell und einfach einen schönen Text ausfüllen. 67. 71 – media Hovereffekt mit hover: Hallo an alle. In dieser Lektion werden wir diesen schönen Hover-Effekt für die Social-Media-Icons erstellen. Wenn ich also den Mauszeiger über ein beliebiges Symbol führe, können Sie sehen, dass ein grüner Hintergrund eintritt, die Symbolfarbe ändert sich und es wird größer. Mal sehen, wie wir das tun können. Richtig? Also hier in meinem HTML, können Sie sehen, ich habe einen Link zur Font Awesome Icons Bibliothek, die uns Zugriff auf alle Font Awesome Icons geben wird. Ich werde damit beginnen, ein div hinzuzufügen und ihm eine Klasse von Containern zu geben. Dann werde ich in ihm einen Link hinzufügen und eine Klasse von Symbol gegeben. Dann werde ich i für Font, Awesome Icons hinzufügen. Und ich werde ihm eine Klasse von f, a, b, f a Facebook geben. In dieser Klasse werden wir nur das Facebook-Symbol anzeigen. Dann kopiere ich diesen Link, füge ihn viermal ein. Und ich werde die anderen Symbole hinzufügen, die wir wollen, wie Twitter, Google, YouTube und Instagram. Hier können Sie sehen, dass unsere Symbole alle in einer Reihe sitzen und sie sehen ziemlich hässlich aus. Gehen wir also zu unserem CSS und lassen Sie sie ein wenig besser aussehen. Ich beginne mit dem Targeting auf den Container. Und ich werde Display Flex hinzufügen. Dann werde ich die Links mit der Klasse des Symbols anvisieren. Fügen Sie Breite 90 Pixel, dann Höhe 90 Pixel sowie. Dann werde ich eine Hintergrundfarbe hinzufügen. Diese weiße Farbe, Rand, zehn Pixel, Rahmenradius, 30 Prozent. Und schließlich, Farbe ist eine schöne grüne Farbe. Lass es uns in Bewegung halten. Ich werde genau hier in den Container gehen und Text ausrichten Mitte hinzufügen , um das Symbol zu zentrieren, so. Dann gehe ich zum Symbol und füge Kastenschatten hinzu und füge einige Kastenschatten hinzu. Dann relativ positionieren. Richtig? Jetzt müssen wir an den Symbolen in unserem Link arbeiten. Also werde ich sagen, Symbol, Ich, um die Symbole zu zielen. Dann werde ich die Zeilenhöhe, 90 Pixel hinzufügen , so dass das Symbol vertikal zentriert wird. Dann Schriftgröße 25 Pixel, und Übergang oder 0,2 Sekunden. Gut. Jetzt sehen unsere Icons genau so aus, wie wir es wollen. Fahren wir mit dem nächsten Schritt fort. Wenn ich den Mauszeiger über einen Link führe, möchte ich die Farben des Symbols ändern, damit sie dem Hintergrund entsprechen. Und ich möchte, dass die Ikone ein wenig größer wird. Also lasst uns das machen. Ich werde sagen, Symbol auf Hover. Ich werde einige Änderungen am Font Awesome Symbol vornehmen. Ich werde transformieren, Maßstab 1.3 hinzufügen, so wird es größer und färben diese weiße Farbe, genau wie die Hintergrundfarbe. Also, wenn ich jetzt gehe und den Mauszeiger über ein beliebiges Symbol, können Sie sehen, dass die Farbe die gleiche wie der Hintergrund wird, weshalb wir es nicht mehr sehen können. Aber fahren wir mit dem nächsten Schritt fort. Wir müssen den bewegten grünen Hintergrund erstellen, der angezeigt wird, wenn wir den Mauszeiger über die Symbole bewegen. Also lasst uns das schaffen. Ich werde hier gehen und Symbol Doppelpunkt hinzufügen, bevor. Und ich werde Inhalt, leere Position, absolut, Breite, 120 Prozent und Höhe 120% hinzufügen , Breite, 120 Prozent . Dann Hintergrundfarbe oder grüne Farbe. Dann werde ich links minus 110 Prozent und Top 90 Prozent hinzufügen. Jetzt können Sie sehen, dass wir unseren grünen Hintergrund haben und es sitzt in dieser Position wegen der oberen und linken Werte, die wir hinzugefügt haben. Lassen Sie uns gehen und Transformation hinzufügen. Drehen Sie 45 Grad, um den grünen Hintergrund zu drehen. Okay, jetzt müssen wir es über unsere Verbindung bewegen, wenn wir den Mauszeiger darüber bewegen. Wenn wir also einen Blick auf unsere Demo werfen, können Sie sehen, dass, wenn ich über den Link schwebe und der grüne Hintergrund von seiner Ausgangsposition kommt, dann über den Link bewegt, bis er ein wenig nach oben rechts geht, gibt dann den Link zurück und deckt ihn ab. Wir werden also CSS-Animationen verwenden, um diesen Effekt zu erzeugen. Wir werden drei Phasen der Animation haben. In der ersten Phase wird der Hintergrund an seiner ursprünglichen Position sein. der zweiten Phase, bei 50% der Animationsdauer, wird der Hintergrund ein wenig in die obere rechte Ecke des Links verschoben. Dann bewegen wir uns zur dritten Stufe. Bei 100% der Dauer geht es zurück, um den Link zu decken. Also lasst uns das machen. Ich werde hier in meinem CSS gehen und eine neue Animation erstellen. Und nennen Sie es einfach Animation. Und im Inneren, bei 0% der Animationsdauer, werde ich sagen, links minus 110 Prozent und Top 90 Prozent. Wenn Sie sich erinnern, sind dies die Werte, die wir hier oben bereits angewendet haben. Das sollte also die Animation von der ursprünglichen Position des grünen Hintergrunds beginnen . Als nächstes werde ich das kopieren. Fügen Sie es erneut ein. Und bei 50% der Animationsdauer ändere ich die linke Seite auf 15 Prozent und die Oberseite auf minus 30 Prozent. Dann fügen Sie 100% hinzu. Ich werde die linke minus 10 Prozent und die Spitze minus 10% als auch. Nun müssen wir diese Animation dem grünen Hintergrund hinzufügen. Also werde ich hier rauf gehen. Und wenn ich den Mauszeiger über das Symbol führe, werde ich einige Änderungen am grünen Hintergrund vornehmen. Ich werde Animation hinzufügen, dann den Animationsnamen, die Animation ist, dann Animationsdauer 0,7 Sekunden. Und Animationsiteration zählt eins, weil wir möchten, dass dies nur einmal geschieht, wenn wir schweben. Und schließlich, Animationsfilm-Modus vorwärts, weil wir wollen, dass der grüne Hintergrund in seiner endgültigen Position bleibt, nachdem die Animation beendet. Und eine Sache bleibt übrig, die darin besteht, die Teile des grünen Hintergrunds außerhalb des Links zu verstecken , indem Sie hier in der Symbolauswahl nach oben gehen und Überlauf ausgeblendet hinzufügen. Und jetzt, wenn ich gehe und den Mauszeiger über den Link, können Sie sehen, dass der grüne Hintergrund von der linken unteren Ecke kommt, dann bewegt sich nach oben, bis er sich ein wenig über die obere rechte Ecke bewegt und dann zurückkehrt und den Link bedeckt. Und während alles, was passiert, wird das Symbol selbst größer und es ändert sich farblich, um den Hintergrund anzupassen. 68. 72 – kreative text mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Rahmen Hover-Effekt erstellen. Wenn ich den Mauszeiger über diesen Text führe, passiert dieser Effekt dort, wo der obere und untere Rand angezeigt wird, dann der linke und der rechte. Dann haben wir Ränder gedreht, die auch nacheinander erscheinen. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Box gebe. Dann werde ich innerhalb, dass ich eine Spanne hinzufügen und ihm eine Klasse von gedreht geben. Dies wird also die Spanne sein, die Ränder gedreht hat. Dann werde ich unten ein H1 hinzufügen. Und darin werde ich CSS sagen. Dann werde ich ein Zeilenumbruchelement hinzufügen , so dass die kommenden Texte in der folgenden Zeile sitzen. Dann werde ich eine weitere Spanne hinzufügen und darin werde ich Grenze sagen. Also wickeln wir dieses Wort Spannweite ein, nur um es individuell gestalten zu können. Dann nach dieser Spanne werde ich ein weiteres Zeilenumbruchelement hinzufügen. Und ich werde sagen, Hover, dann ein weiteres Zeilenumbruch-Element und sagen Effekt. Alles klar, dann werde ich zu meinem CSS gehen und das äußere div mit der Klasse der Box anvisieren. Dann werde ich Position, relative Breite, 200 Pixel, Höhe 200 Pixel als auch hinzufügen relative Breite, 200 Pixel, . Dann Box-Dimensionierung, Border-Box. Und schließlich, Hintergrundfarbe, gelb. So jetzt können Sie sehen, dass wir diese gelbe Box im Browser zentriert haben. Alles klar, lassen Sie uns an der H1 arbeiten. Ich gehe zurück und zielstrebig. Dann werde ich Marge 0 hinzufügen, Padding 0 als auch. Dann Farbe, diese dunkelgraue Farbe. Und um den Text zu zentrieren, werde ich die Position absolut, top, 50 Prozent hinzufügen. Links, 50 Prozent auch. Dann Transformieren. Übersetzen, negative 50 Prozent und negative 50 Prozent. Dann werde ich Text ausrichten, zentrieren , Schriftgröße, 24 Pixel hinzufügen. Und schließlich, Text transformieren, Großbuchstaben. In Ordnung, lassen Sie uns einfach eine andere Farbe zum Wortrahmen hinzufügen. Du erinnerst dich, dass wir es in die Spannweite eingewickelt haben. Also lasst uns diese Spannweite anvisieren. Und fügen Sie Farbe hinzu. Diese grüne Farbe und Schriftgröße, 30 Pixel. Ehrfürchtig. Lassen Sie uns an den Rändern dieser gelben Box arbeiten. Wir werden diese Grenzen mit den Vorher und Nachher Pseudo-Elementen erstellen. Also werde ich hierher gehen und das vorher Pseudo-Element der Box div anvisieren. Dann werde ich Inhalt leere Strings hinzufügen, Position absolut 0, links 0 als auch. Dann wollen wir, dass es die volle Breite und Höhe des Box-div einnimmt. So werden wir Breite 100% und Höhe 100% als auch hinzufügen. Dann werden wir Rand oben vier Pixel solid hinzufügen. Unsere grüne Farbe. Und Rand unten vier Pixel solide. Unsere grüne Farbe wieder. Dann Box-Dimensionierung, Border-Box, und schließlich Übergang 0,5 Sekunden. So jetzt können Sie sehen, dass wir diese beiden Ränder des vorher Pseudo-Elements oben und unten auf dem gelben Hintergrund haben. Und das liegt daran, dass wir die Höhe und die Breite des gelben Hintergrunds auf 100% einstellen. Also, wenn Sie die volle Breite und Höhe des Box-div aufnehmen, Ordnung, jetzt gehen wir und animieren diese beiden Ränder. Ich werde hierher zurückgehen und Transformationsskala x 0 hinzufügen. Um dann die Grenzen wachsen zu lassen, werde ich beim Schweben wieder hierher gehen und sagen, wenn wir über die Box schweben, möchte ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde Transformationsskala x wieder zu einem hinzufügen. Und jetzt können Sie sehen, dass die beiden Ränder jetzt ausgeblendet sind, weil wir x auf 0 setzen. Und wenn ich den Mauszeiger über das Box-div führe, wachsen die beiden Ränder wieder, bis ihre Skala x wieder eins wird. Alles klar, Lasst uns am linken und rechten Rand arbeiten. Jetzt. Wir werden sie mit dem After-Pseudo-Element erstellen. Also werde ich einfach das vorher Pseudo-Element kopieren. Fügen Sie es erneut ein und wechseln Sie vorher zu nachher. Dann. In diesem, werde ich Grenze oben zwei Grenze rechts ändern. Und Rand von unten an Rand links. Ich werde auch den Schwebeeffekt kopieren. Fügen Sie es ein und ändern Sie vor zu nachher. Dann ändere ich die Transformationseigenschaft von Maßstab x zu Maßstab. Warum? Und jetzt können Sie sehen, wenn ich gehe und den Mauszeiger über den Text führe, dieser Effekt geschieht dort, wo wir linke und rechte Ränder haben, die entlang der Y-Achse zusammen mit den After Pseudo-Elementen erscheinen und wachsen. Okay, jetzt arbeiten wir an den gedrehten Rändern. Wenn Sie sich erinnern, haben wir eine Spanne in unserem HTML-Markup mit einer Klasse von gedreht hinzugefügt, und wir sagten, dass wir es verwenden, um die gedrehten Ränder zu erstellen. Mal sehen, wie wir das tun können. Zuerst werde ich es anvisieren und Position hinzufügen, absolut. Dann Breite, 100%, Höhe, 100% auch. Anzeigeblock und Hintergrundfarbe. Gelb. Dann wollen wir es um 45 Grad transformieren. Also werde ich Transformation hinzufügen, 45 Grad drehen. Dann schließlich, Box Größe Rahmen Box Box. Und jetzt können Sie sehen, dass wir diesen gelben Hintergrund haben, der um 45 Grad gedreht wird und auf dem ersten Hintergrund sitzt. In Ordnung, jetzt lassen Sie uns den Rahmeneffekt für diesen gedrehten Hintergrund erstellen. Ich werde hierher gehen und den ganzen Code des Box-div kopieren und es sind Hover-Effekte. Dann füge ich das gedrehte div ein und wähle es aus, nicht die Box 1. Das wird also die Vorher- und Nachher-Pseudo-Elemente des gedrehten auswählen. Dann werde ich hierher gehen und das vor Pseudo-Element des gedrehten div anvisieren , wenn ich schwebe. Und das achter-Pseudo-Element des gedrehten div, wenn auch schwebt. Und jetzt können Sie sehen, wenn ich den Mauszeiger über den Text führe, dieser Effekt passiert dort, wo die vier Ränder der gedrehten Hintergründe wachsen und größer werden, was uns diesen wirklich coolen Effekt gibt. Schließlich wollen wir einige Übergangsverzögerungen zwischen den Grenzen hinzufügen , so dass sie nacheinander erscheinen. Und wir gehen hierher, wenn wir über das After-Pseudo-Element des Box-div schweben. Und ich werde Übergangsverzögerung 0,5 Sekunden hinzufügen , so dass, wenn wir den rechten und linken Rand des Box-div schweben, 0,5 Sekunden warten werden. Dann werde ich hier gehen und Übergangsverzögerung 1 Sekunde hinzufügen. Und dann endlich hier und fügen Sie Übergangsverzögerung 1,5 Sekunden hinzu. Und jetzt, wenn ich schwebe, können Sie sehen, dass die Grenzen nacheinander erscheinen und uns die exakte Wirkung geben, die wir wollen. 69. 73 - animation: Hallo an alle. Willkommen in diesem neuen Abschnitt des Kurses, in dem wir über CSS-Animationen und Keyframes sprechen werden . Nun ist die Art und Weise, wie CSS-Animationen und Keyframes funktionieren, sehr einfach. Zuerst müssen Sie eine CSS-Animationsregel definieren oder erstellen und sie einen beliebigen Namen benennen. Zweitens fügen Sie diese Animationsregel hinzu. Sie erstellen es zu einem beliebigen HTML-Element auf der Seite, so dass die Animation darauf funktioniert. Das wird viel einfacher sein, wenn wir es in Aktion sehen. Also, hier in meinem HTML, habe ich dieses div ganz von selbst. Ich habe einige Stile in meinem CSS hinzugefügt. Ich habe gerade eine Breite, Höhe und eine rote Hintergrundfarbe hinzugefügt . Wenn wir das im Browser sehen, können wir sehen, dass unser leeres div hier sitzt. Gehen wir nun zurück zu unserem CSS und sehen, wie Keyframes und Animationen in diesem div verwendet werden. Also haben wir gesagt, dass das erste, was wir tun müssen, ist die Animationsregel zu definieren. Und um das zu tun, schreiben wir es so bei Mark Keyframes. Dann wird der Animationsname, sagen wir, bewegen. Und dann im Inneren verwenden wir Schlüsselwörter wie von und nach. Also werde ich sagen, von add, transformieren, übersetzen X 0, und dann zu transformieren übersetzen x 1, 0, 0, 0, 0. Was hier los ist, ist, dass wir eine Animationsregel erstellt haben. Und was diese Animationsregel tun wird, ist dass es das Element von einem Zustand in einen anderen bringt. So wird es das Element von Translate X 0 nehmen, was von seiner ursprünglichen Position bedeutet, um x 1, 0, 0, 0, 0, grau zu übersetzen . Nun, wenn ich zum Browser gehe und meine Seite neu lade, können Sie nichts ändern sehen. Element sitzt nur an seiner Stelle und es ist keine Bewegung passiert. Und das liegt daran, dass wir die Animationsregel direkt hier erstellt haben, aber dem Browser nicht mitgeteilt haben, welches Element diese Animation erhält. Wenn Sie also mit einer Programmiersprache vertraut sind, ähnelt dies Funktionen, bei denen Sie einen Codeblock erstellen, der etwas tun sollte. Und dann fügen Sie diesen Codeblock zu den Elementen , die dieser Codeblock bewirken soll. Was wir hier tun sollten, ist, dass wir dem Browser mitteilen sollten , an welchem Element diese Animation funktionieren soll. Und dies kann leicht gemacht werden, indem Sie zu dem Element selbst gehen, das das div ist. Es gibt also zwei Eigenschaften, die erforderlich sind, damit die Animation an diesem Element funktioniert. Der erste ist der Animationsname, der sich bewegt. Und die zweite ist die Animationsdauer. Oder wie viele Sekunden wir möchten, dass diese Animation von Anfang bis Ende dauern soll. Sagen wir, drei Sekunden. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass das div jetzt von übersetzt X 0 beginnt, mit anderen Worten, von seiner ursprünglichen Position und bewegt sich, um x 1, 0, 0, 0, 0, 0 über einen Zeitraum von drei Sekunden zu übersetzen . Das ist es für diese Lektion. Das war eine Einführung in die CSS-Animation und Keyframes. Wir haben gelernt, was sie sind und wie sie funktionieren. Und in den nächsten Lektionen werden wir mehr Eigenschaften lernen, die uns weitere Kontrolle bei der Verwendung von CSS, Animationen und Keyframes geben. So sehen wir uns dann. 70. 74 – Erstelle Css-Animationen mit weiteren Phasen: Hallo an alle. In dieser Lektion lernen wir , wie Animationen mit mehr als zwei Stufen erstellt werden. Also lasst uns gleich reinspringen. Hier ist der Code aus der vorherigen Lektion. Wenn Sie einen Blick auf die Keywords werfen, die wir hier verwenden, können Sie sehen, dass wir von und nach haben. Und das bedeutet, dass sich das Element von dieser ersten Stufe in diese letzte Phase über eine bestimmte Dauer ändert , die in unserem Fall drei Sekunden beträgt. Nun, was ist, wenn wir mehr Änderungen und mehr Stufen hinzufügen wollen? Zum Beispiel, anstatt das Element horizontal von der ersten Position zur zweiten zu bewegen , was ist, wenn wir wollen, dass es von der ersten Position zu einer zweiten und dann 2 Drittel 1 bewegt wird. Also würden wir drei Stufen haben. Nun, wir können dies leicht tun, indem die prozentuale Methode anstelle der Schlüsselwörter von N2 verwenden. Was wir hier tun können, ist, dass wir dies aus dem Schlüsselwort entfernen und stattdessen 0% hinzufügen können. Dies bedeutet also 0% den Startpunkt der Animationsdauer. Dann werde ich diese beiden entfernen und 100% hinzufügen. Dies bedeutet bei 100% der Animationsdauer oder drei Sekunden. Was ich hier mache, ist, dass ich bei 0% der Animationsdauer, also dem Punkt, an dem die Animation beginnen soll, diese Transformation hinzufügen möchte, die tatsächlich nichts für das Element ändert. Das Element wird also von dort aus beginnen, wo es ursprünglich auf unserer Seite war. Und dann bei 100% der Animationsdauer, also am Ende der zweiten drei, möchte ich, dass sich das Element an dieser Position befindet. Während dieser drei Sekunden bewegt sich das Element von der ersten Position zur zweiten Position. Und nichts sollte sich von der vorherigen Lektion ändern. Also werde ich zum Browser gehen und neu laden. Und Sie können sehen, dass sich das div über drei Sekunden von seiner ursprünglichen Position in seine neue Position bewegt , genau wie wir es in der vorherigen Lektion getan haben. Gehen wir zurück zu unserem CSS. Nun, das sind immer noch zwei Stufen. Wir wollen mehr Etappen als das. Wir können das leicht mit der prozentualen Methode tun, weil es uns viele Möglichkeiten von 0% bis 100% gibt. Also zum Beispiel, wenn ich hier gehe und das 100% auf 50 Prozent ändere, und dann darunter 100% hinzufüge. Dann Transformieren und 1, 0, 0, 0, 0 auf der X-Achse umsetzen . Und dann sagen wir 500 Pixel nach unten. Jetzt haben wir drei Etappen. Die erste Stufe, die zweite Stufe und die dritte Stufe. Was also passieren wird, ist von 0% bis 50 Prozent der Animationsdauer, d. h. vom Anfang bis zum Mittelpunkt der Animationsdauer. Oder während der 1,5 Sekunden der vollen drei Sekunden sollte sich die Position des Elements von seiner ursprünglichen Position horizontal in diese zweite Position ändern . Und dann ändert sich das Element in den verbleibenden 1,5 Sekunden von dieser Position in diese neue Position, die 1, 0, 0, 0, 0 nach rechts und 500 Pixel in Richtung unten auf der Seite von seiner ursprünglichen Position. Wenn ich also zum Browser gehe und aktualisiere, können Sie sehen, dass sich das Element während der 1,5 Sekunden von seinem ursprünglichen Platz zu einem Punkt 1, 0, 0, 0, 0 nach rechts bewegt. Und dann bewegt sich an eine neue Position, die immer noch 1, 0, 0, 0, 0 nach rechts und 500 Pixel nach unten während der 2,5 Sekunden ist. Und danach kehrt die ursprüngliche Position zurück , sobald die Animationsdauer beendet ist. Jetzt können wir die Änderungsdauer für jede Stufe unterschiedlich gestalten. Zum Beispiel, wenn ich diese 50 Prozent auf nur 10 Prozent ändere, wird in dieser Situation die erste Stufe viel schneller passieren, weil es über einen Zeitraum von nur 10 Prozent der drei Sekunden passieren wird. Während die zweite Stufe langsamer passieren wird, weil es von 10 Prozent auf 100% passieren wird, was bedeutet, über einen Zeitraum von 90% der drei Sekunden. Also lassen Sie uns zum Browser gehen und sehen, wie das aussieht. Sie können sehen, dass die erste Stufe jetzt viel schneller geschieht, während die zweite langsamer geschieht. Also das ist es für diese Lektion, alle, wenn Sie irgendwelche Fragen dazu haben, lassen Sie es einfach im Abschnitt Fragen und Antworten und ich werde mein Bestes tun , um Sie in der nächsten Lektion zu sehen. 71. 75 – animation: Hallo an alle. Willkommen zu dieser neuen Lektion, in der wir über die Eigenschaft des Animationsfilmmodus lernen werden . Alles klar, was wir in der letzten Lektion getan haben, ist, dass wir dieses Div nach rechts verschoben , einhundert, zehnhundert Pixel, dann nach unten, 500 Pixel, so. Und dann, nachdem die Animation beendet ist, werden Sie feststellen, dass das div nur wieder an seinen ursprünglichen Platz springt. Das mag seltsam erscheinen. Was also, wenn wir wollen, dass das div in seiner endgültigen Position bleibt , wo die Animation endet, anstatt so zurück zu springen. Nun, wir können das mit der Eigenschaft des Animationsfilm-Modus tun, die dem Browser im Grunde sagt, was mit dem Element außerhalb des Animationsfensters zu tun ist, was bedeutet, bevor die Animation beginnt und nachdem es endet. Hier haben wir es also mit dem zweiten Fall zu tun, der nach dem Ende der Animation ist. Und es gibt zwei Möglichkeiten. Der erste ist, dass das Element wieder an seine ursprüngliche Stelle springt, ist die Standardeinstellung. Und das zweite ist, dass das Element in seiner endgültigen Position bleibt. Und wir werden das mit dem Animationsfilm-Modus-Eigenschaft tun. Also zurück zu unserem CSS. Ich werde direkt hier in den div-Selektor gehen und den Animationsfilm-Modus hinzufügen. Und wir haben vier Werte. Die erste ist keine, was außerhalb des Animationsfensters nichts tut. Es wird nur sagen, wenn die Animation beendet ist, das div vor der Animation in seinen ursprünglichen Zustand zurückversetzt wird. Und natürlich ist es der Standardwert. Der zweite Wert ist vorwärts, was uns für unsere Situation interessieren sollte denn vorwärts sagt dem Browser, die letzte Phase der Animation hier zu nehmen und sie auf das Element am Ende der Animation anzuwenden. Wenn ich jetzt zum Browser gehe und neu lade, können Sie sehen, dass das Element an seiner endgültigen Position bleibt und vor der Animation nicht an seinen ursprünglichen Platz zurückkehrt. Persönlich denke ich, das sieht realistischer aus. Jetzt können wir auch einen Wert verwenden, der rückwärts genannt wird. Um dies zu demonstrieren, werde ich einfach zu meinem CSS zurückkehren. Ich werde hier gehen und eine weitere Eigenschaft hinzufügen, die Animationsverzögerung ist. Und sagen wir drei Sekunden. Und was dies tun wird, ist, dass die Animation drei Sekunden warten lässt, bevor sie beginnt. Also, wenn ich zu meinem Browser gehe und aktualisiere, können Sie sehen, dass das div drei Sekunden wartet und dann beginnt, zu unserem CSS zurückzukehren. Nehmen wir an, wir möchten, dass die Animation von 500 Pixeln nach rechts beginnt und nicht von ihrem ursprünglichen Platz auf der Seite. Ich werde hier gehen und dies auf 500 Pixel anstelle von 0 ändern. Ich werde auch 10% auf, sagen wir, 50 Prozent ändern . Weil ich möchte, dass die horizontale Bewegung eine längere Zeit in Anspruch nimmt , damit wir sie wirklich sehen können. Und ich werde auch die Übergangsdauer auf fünf Sekunden ändern , damit wir klar sehen können, was passiert. Nun, nach dem Code, den wir hier haben, was passieren sollte, ist, dass die Animation drei Sekunden warten sollte, und dann sollte sie von diesem Punkt direkt hier beginnen , der 500 Pixel rechts von seiner ursprünglichen Position ist. Und dann sollte die Animation weitergehen, bis sie fertig ist. Und am Ende sollte das div in seiner endgültigen Position bleiben, weil wir gesagt haben, dass der Animationsfilm-Modus vorwärts. Also, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass die Animation drei Sekunden warten. Dann teilt das Element 500 Pixel nach rechts. Dann beginnt die Animation und bewegt sich weiter wie zuvor. Nun, das ist vielleicht nicht das, was Sie erwartet haben. Sie haben vielleicht gedacht, dass das div hier beginnen würde, 500 Pixel nach rechts, und dann drei Sekunden warten würde. Und danach würde die Animation beginnen. Ich meine, das macht Sinn, weil wir den Startpunkt der Animation auf 500 Pixel nach rechts setzen . Aber das ist nicht die Standardeinstellung. Denken Sie daran, dass die Elemente vor dem Start und nach dem Ende der Animation an ihrer ursprünglichen Stelle sein sollten. Wir konnten die Position ändern, nachdem die Animation beendet ist und sie zum letzten Punkt der Animation machen , indem wir vorwärts als Wert der Animationsfilmmodus-Eigenschaft verwenden. Und wir können das auch tun und die Animation an dem Startpunkt beginnen, den wir in den Schlüsselbildern definiert haben , und nicht an seiner ursprünglichen Stelle, indem wir einen anderen Wert verwenden, der rückwärts ist. Also werde ich zu meinem CSS zurückkehren und dies vorwärts, rückwärts ändern. Dann werde ich zu meinem Browser gehen und neu laden. Und jetzt können Sie sehen, die Animation beginnt von dem Punkt 500 Pixel nach rechts und nicht von seiner ursprünglichen Position. Aber weil wir vorwärts, rückwärts ändern , bleibt das div nicht mehr an seinem letzten Platz, es schnappt wieder in seine ursprüngliche Position zurück, wir können dies leicht beheben, indem wir sowohl vorwärts als auch rückwärts anwenden. Also werde ich zu meinem CSS zurückkehren und dies in beides ändern. Und jetzt, wenn ich gehe und den Browser neu lade, können Sie sehen, dass das Element für drei Sekunden am Startpunkt bleibt, dann bewegt sich zum letzten Punkt, und es bleibt dort, um die Animation. Um die Dinge zusammenzufassen, sagt uns die Eigenschaft des Animationsfilm-Modus nur woher die Elemente anfangen sollen und wo sie enden sollen. Wenn wir es nicht definieren, das Element, werden wir nur von seinem ursprünglichen Zustand beginnen, bevor eine Animation stattfindet. Und es wird auch wieder in diesen ursprünglichen Zustand zurückkehren, nachdem die Animation beendet ist. Aber wir können vorwärts verwenden, um die Elemente Tag im letzten Schritt der Animation zu machen. Oder wir können rückwärts verwenden, um es vom Startpunkt der Animation beginnen zu lassen. Oder wir können einfach beides verwenden, um die beiden Ergebnisse zusammenzubringen. 72. 76 - animation zählt die Eigenschaft: Hallo an alle. Willkommen zu dieser neuen Lektion in der CSS-Animation Übergang und transformiert Kurs, wo wir über die Animation Iteration Count Eigenschaft sprechen. Anzahl der Animationsiterationen sagt dem Browser einfach, wie oft die Animation wiederholt werden soll und akzeptiert Werte von Zahlen. Zwei bedeutet also, dass die Animation zweimal abgespielt wird, und drei bedeutet, dass sie dreimal wiederholt wird und so weiter. Großartig. Also hier in meinem CSS haben wir alles, wie es am Ende der vorherigen Lektion war. Ich werde nur diese Animationsverzögerungseigenschaft entfernen , so dass die Animation sofort beginnt. Und ich werde hier gehen und Animationsiterationszähler hinzufügen. Sagen wir drei. Und ich werde die Animationsdauer auf drei Sekunden ändern , damit es ein bisschen schneller wird. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass die Animation dreimal wiederholt wird, bevor sie fertig ist. Ehrfürchtig. Wir können auch das Schlüsselwort unendlich verwenden, um die Animation eine unendliche Anzahl von Malen oder für immer spielen zu lassen. Gehen wir also zurück zu unserem CSS und probieren Sie das aus. Ich werde hier gehen und das in unendlich ändern. Und jetzt, wenn ich zum Browser zurückgehe und neu lade, wird die Animation für immer gespielt und wird nie aufhören. Und das war's für dieses Eigentum. Es ist sehr einfach. Es gibt nur an, wie oft die Animation abgespielt werden soll. Ich möchte auch ein wenig über eine andere Eigenschaft sprechen, die die Animations-Timing-Funktion ist. Dies ist ähnlich der Übergangszeitfunktion die wir im ersten Abschnitt des Kurses gelernt haben. Und es akzeptiert die gleichen Werte, die 0s sind. Linear. Einfaches Ein-, Leichtigkeit und leichtes Ein- und Aussteigen Also lassen Sie uns diese zusammen überprüfen. Ich werde dieses unendliche zu eins ändern und dann Animations-Timing-Funktion yz hinzufügen. Also, was tut, ist es macht die Bewegung beginnt langsam, dann gehen Sie schneller, wenn n langsam. Alles klar, mal sehen, wie das aussieht. Aber zuerst ändern wir die Animationsdauer wieder auf fünf Sekunden. Um zu sehen, was los ist. Ich werde zu meinem Browser gehen und neu laden. Und mit der Animationsebene können Sie den Effekt der Leichtigkeit sehen. Alles klar, gehen wir zurück und versuchen, es zu erleichtern, was schnell beginnt. Der Wind verlangsamt sich am Ende. So wie so. Dann lassen Sie sich hineingehen, was, wenn Sie sich erinnern , langsam beginnt, dann am Ende schneller geht. Und Leichtigkeit in, out, das ist sehr ähnlich zu erleichtern, wie es langsam beginnt, dann geht schneller in der Mitte, dann kehrt zurück zu verlangsamen am Ende. Und schließlich, linear, wodurch die Änderungsrate konstant wird , so dass die Geschwindigkeit der Bewegung während der gesamten Animationsdauer gleich ist. Und Leute, das ist es für diese Lektion, und ich werde euch in der nächsten sehen. 73. 77 - animation: Hallo an alle. Willkommen zu dieser neuen Lektion in unserem Kurs, wo wir über die Animation Richtung Eigenschaft sprechen werden. Die Animationsrichtung Eigenschaften ziemlich unkompliziert. Es gibt nur die Richtung der Animation und es akzeptiert vier Werte. Der erste Wert ist normal, was der Standardwert ist. Und es sagt dem Browser, die Animation von Anfang an hier bis zum Ende zu starten , genau hier. Also lasst uns das versuchen. Ich werde hier gehen und Animationsrichtung hinzufügen, normal. Und wenn ich zum Browser gehe und neu lade, können Sie sehen, dass die Animation normal vom Anfang bis zum Ende abgespielt wird. Der zweite Wert, den wir verwenden können, ist umgekehrt, was den Browser anweist, die Animation abzuspielen. Umgekehrt, das heißt, es beginnt mit dem Ende der Animationen und endet am Anfang. Also werde ich dies ändern, um rückgängig zu machen und zu meinem Browser zurückzukehren. Und Sie können sehen, dass die Animation umgekehrt vom Ende bis zum Anfang abgespielt wird. Großartig. Jetzt ist der dritte Wert alternativ. Und was alternativ tut, ist, dass die Animation vom Anfang bis zum Ende dann vom Ende zum Anfang zurückkehrt. Und dann vom Anfang bis zum Ende und vom Ende bis zum Anfang und an und an , bis die Anzahl der Animationsiterationen beendet ist. Also werde ich das ändern, um abwechselnd zu werden. Und ich werde auch die Anzahl der Animationsiterationen auf unendlich und die Animationsdauer auf nur drei Sekunden ändern . Und jetzt, wenn ich zum Browser gehe und neu lade, wird die Animation vom Startpunkt bis zum Endpunkt und kehrt dann vom Endpunkt zum Ausgangspunkt zurück und so weiter. Und wir haben auch alternative Reverse, die das gleiche wie alternative tut, aber es beginnt nur vom Ende bis zum Anfang. Das ist der einzige Unterschied. Also lassen Sie uns das überprüfen. Ich werde alternative Flüsse hinzufügen. Und Sie können sehen, dass es vom Ende bis zum Anfang beginnt und dann bis zum Ende zurückgeht. Und es wird das für immer tun. 74. 78 - Animation shorthand: Hallo an alle. In dieser Lektion lernen wir, wie Sie alle CSS-Animationseigenschaften in einer einzigen Eigenschaft kombinieren . Denn wenn man sie anschaut, gibt es viele Eigenschaften und sie sind verwirrend. So können wir alle von ihnen in einer Eigenschaft namens Animation kombinieren. Aber wie haben wir das gemacht? Ich gehe hier und sag einfach Animation. Und dann ist die erste Eigenschaft, die ich normalerweise hinzufüge, der Animationsname. Also werde ich sagen, bewegen, dann ein Leerzeichen und fügen Sie die Animationsdauer, die drei Sekunden ist, dann ein Leerzeichen. Und wir können einfach alle diese Eigenschaften nebeneinander setzen. Es spielt keine Rolle, wie sie bestellt werden. Sie werden dasselbe tun, egal was zuerst oder eine Sekunde oder was auch immer erscheint. Aber Sie müssen etwas im Hinterkopf behalten, wenn Sie die Animationsverzögerungseigenschaft verwenden möchten, müssen Sie die Verzögerungszeit nach der Dauer hinzufügen, da der Browser immer den ersten Wert betrachtet , den Sie hier hinzufügen, als Animation Dauer, der folgende Zeitwert als Animationsverzögerung. Wenn ich hier fünf Sekunden hinzufüge, wird der Browser fünf Sekunden warten, bevor die Animation beginnt. Und genau so haben wir alle Eigenschaften in einer einzigen Eigenschaft zusammengefasst. Und wir haben die gleiche Animation, die wir vorher wollten. 75. 79 – floating mit -: Hallo an alle. In dieser Lektion werden wir lernen, diesen Text schweben von rechts nach links Effekt zu erstellen. Es ist eine unendliche oder anmeldet Animation. Und wenn man es ansieht, kann man sehen, dass es sich von links nach rechts dreht, dann von rechts nach links und so weiter und so weiter. Wir werden hier in unserem HTML beginnen, indem wir ein H1 hinzufügen. Dann im Inneren werde ich sagen, kommen, dann BR-Tags. Und drinnen, bald. Jetzt gehen wir zu unserem CSS. Ich werde das H1 anvisieren. Fügen Sie Text zentriert ausrichten hinzu, um den Text zu zentrieren. Farbe. Weiß. Dann Font-Familie. Arial. Schriftgröße, 90 Pixel, Zeilenhöhe, 90 Pixel für diesen Zwei-Buchstabenabstand. Dann Textschatten. Diese Werte. Und Sie können sehen, jetzt wir H1 sieht genau so aus, wie wir wollen. Als nächstes möchten wir es animieren. Also werde ich gleich hier gehen und eine neue Animation erstellen. Ich werde bei Markierung Schlüsselbilder sagen. Und jetzt werden wir es schweben nennen. Dann werde ich von und innerhalb davon sagen: Transformieren, Drehen Sie fünf Grad, so dass der Anfangszustand des H1 um fünf Grad im Uhrzeigersinn gedreht wird. Dann werde ich sagen, zu transformieren, drehen Sie minus fünf Grad, so dass der endgültige Zustand um fünf Grad gegen den Uhrzeigersinn gedreht wird. Und jetzt gehen wir hier hoch und fügen diese Animation zum H1 hinzu. Also werde ich sagen, Animation. Dann wird der Animationsname schweben, dann die Animationsdauer, drei Sekunden und die Animationszeitfunktion linear. Dann zählt die Animation Iteration, die unendlich ist. Natürlich. Nun, wenn ich den Browser neu lade, können Sie sehen, dass der H1 fünf Grad im Uhrzeigersinn beginnt, dann bewegt sich, bis er sich gegen den Uhrzeigersinn um fünf Grad dreht dann wieder in seinen ursprünglichen Zustand zurückkehrt. Aber das wollen wir nicht. Wir wollen, dass es vom Anfangszustand in den Endzustand übergeht. Und dann vom Endzustand zum Ausgangszustand. Und machen Sie das weiter. Wir können das kein Problem beheben, indem wir die Animationsrichtung auf abwechselnd einstellen. Also werde ich hier gehen und Animationsrichtung abwechselnd hinzufügen. Und jetzt, wenn ich den Browser neu lade, sollte der H1 die Art animieren, wie wir vom Anfangszustand bis zum Endzustand wollen. Endzustand, zwei Anfangszustand und so weiter. 76. 80 – Dreheffekt mit -: Hallo an alle. In dieser Lektion werden wir diese schöne CSS Ladeanimation mit Keyframes sowie CSS-Transforms erstellen . Also, hier in meinem HTML, werde ich ein div hinzufügen und ihm eine Klasse des Ladens geben. Dann werde ich zu meinem CSS gehen. Hier haben wir einige Stile zum Körper hinzugefügt, die nur an das div senden und eine schöne Hintergrundfarbe hinzufügen. Also, jetzt werde ich unser div mit der Klasse des Ladens anvisieren. Dann werde ich seine Breite auf 100 Pixel einstellen. Dann ist es auch eine Höhe von 100 Pixeln. Dann werde ich Hintergrundfarbe hinzufügen, weiß, damit wir es sehen können. Dann Umrandungsradius 12 Pixel, um ihm eine schöne abgerundete Ecken zu geben. Nun, wenn wir gehen und werfen einen Blick auf eine Demo und machte es langsamer und machte die Animation Iteration zählen nur eine, so dass wir klar sehen können, was los ist. Wenn ich also meine Seite neu lade, können Sie sehen, dass das div von seiner ursprünglichen Position beginnt, dann dreht es sich um 180 Grad auf seiner Y-Achse. Und dann, wenn es bei 180 Grad auf der Y-Achse ist, dreht es sich wieder um weitere 180 Grad auf seiner X-Achse. Also jetzt haben wir drei Phasen der Animation. Die erste Stufe ist 0%, und an diesem Punkt liegen die Drehung y und die Drehung x bei 0, was bedeutet, dass sich das Element in seiner ursprünglichen Position ohne Drehung befindet. Dann beträgt die zweite Stufe 50 Prozent, bei der das Element nur um 180 Grad entlang der y-Achse gedreht wird und die x-Achsen-Drehung immer noch 0 ist. Dann ist die letzte Stufe 100%, wo wir die Drehung auf der x-Achse um 180 Grad hinzufügen. So dass in diesem Stadium das Element sowohl auf seiner X-Achse als auch auf der Y-Achse um 180 Grad gedreht wird. Also lasst uns das machen. Ich werde zu meinem CSS gehen und eine neue Animation erstellen und es zum Beispiel laden nennen. Dann werde ich die erste Stufe 0% hinzufügen und Transform sagen. Drehen Sie X 0 Grad, und drehen Sie auch y 0 Grad dorthin, so dass die Animation an ihrer ursprünglichen Position beginnt. Dann füge ich die zweite Stufe der Animation bei 50 Prozent hinzu. Und ich werde sagen Transformieren, Drehen X 0 und drehen y 180 Grad. Bei 50% der Animationsdauer möchten wir also, dass das div um 180 Grad entlang der y-Achse gedreht wird. Und dann in der letzten Phase, bei 100% der Animationsdauer, füge ich Transformieren, Drehen X 180 Grad und drehe auch y 180 Grad. Und jetzt gehe ich hier hoch und füge Animation hinzu. Dann Animationsname, die geladen wird, dann Animationsdauer, zwei Sekunden, Animations-Timing-Funktion, linear. Und schließlich zählt die Animation Iteration, was, das ist richtig, unendlich. Und weil wir die Rotation x, Rotation y Funktionen verwenden, die auf einer 3D-Umgebung arbeiten, sollten wir eine Perspektive definieren. Also werde ich hier zum Körper gehen und Perspektive auf 100 Pixel hinzufügen. Und jetzt, wenn ich meinen Browser neu lade, können Sie das div sehen. Wir werden damit beginnen, 180 Grad auf seiner Y-Achse dann 180 Grad auf seiner x-Achse zu drehen. Und wir haben den Effekt, den wir wollten. 77. 81 – Ein Auto und ein Motorrad, das unter Animation verwendet: Hallo an alle. In dieser Lektion werden wir diese schöne unendliche Animation erstellen , wo wir ein Auto und ein Motorrad auf dieser Straße fahren. Die Idee hinter diesem Beispiel ist einfach. Wir haben ein Hintergrundbild, das ist dieser Weg. Und wir haben zwei Bilder. Einer für das Auto und der andere für das Motorrad. Die Farbe und die Bilder des Motorrads bewegen sich nicht. Sie sind in ihrer Position fixiert. Die Bewegung hier kommt aus dem Hintergrund. So animieren wir die Hintergrundposition für die untere linke Ecke des Bildes in der unteren rechten Ecke. Also lassen Sie uns sehen, wie wir diese Animation erstellen können. Ich werde hier in meinem HTML gehen und ein div mit einer Klasse von Hintergrund hinzufügen. Dann werde ich zu meinem CSS gehen, den Körper anvisieren und dafür auch Marge und Padding 0 hinzufügen. Dann werde ich das div mit der Klasse des Hintergrunds zielen und Höhe 100 vh hinzufügen, dann Hintergrund-URL, und wir werden das Straßenbild hinzufügen. Dann werde ich Hintergrundeposition hinzufügen, unten links. Das ist also der Anfangspunkt unserer Animation. Wir werden die Hintergrundposition von unten links bis zur unteren Rate animieren , so dass wir sie bewegen Hintergrund-Effekt wir wollen. Also lasst uns das machen. Ich werde hier gehen und eine neue Animation erstellen und es fahren nennen. Und in ihr drin. Denken Sie daran, dass wir die Hintergrundposition von unten links nach rechts unten animieren möchten. Also werde ich von der Hintergrundposition, unten links zur Hintergrundposition unten rechts sagen. - Großartig. Nun lassen Sie uns diese Animation zu unserem Hintergrund hinzufügen. Ich werde hier rauf gehen und Animation sagen. Dann der Animationsname, fährt, dann die Animationsdauer, 15 Sekunden, dann linear und unendlich, natürlich, weil wir wollen, dass die Animation weiterhin wiederholt sich auf unbestimmte Zeit. Wenn ich nun zu meinem Browser gehe und ihn neu lade, können Sie sehen, dass sich die Hintergrundposition von unten links ändert, die untere Rate, und macht den Hintergrund schön und glatt. Und jetzt müssen wir nur noch die Bilder von unserem Auto und Motorrädern hinzufügen. Also werde ich zu meinem HTML zurückkehren und in unser div gehen und das erste Bild mit der Klasse des Autos hinzufügen. Dann das zweite Bild darunter mit der Klasse des Motorrads. Sie können sehen, dass wir die Bilder hier haben, aber sie sehen im Moment seltsam aus. Also lassen Sie uns einige Stile zu ihnen hinzufügen. Wir gehen zu meinem CSS und zielen zuerst auf das Autobild. Dann werde ich die Position absolut hinzufügen, so dass wir die Position des Bildes steuern können. Dann werde ich links 300 Pixel und unten minus 50 Pixel hinzufügen. Dann werde ich mit 200 Pixeln hinzufügen, um das Autobild kleiner zu machen. Und jetzt können Sie sehen, dass das Auto viel besser aussieht. Jetzt machen wir das Gleiche mit dem Motorrad. Ich gehe zurück zu meinem CSS, kopiere das, füge es erneut ein, und ich werde in diesem Fall das Motorrad anvisieren. Dann werde ich links auf 700 Pixel ändern, so dass es ein Kopf des Autos sein wird. Dann unten auf 55 Pixel. So wird es ein wenig höher sein und uns das schöne 3D-Gefühl geben. Und schließlich werde ich die Breite auf 150 Pixel ändern. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass wir genau die treibende Animation haben, die wir wollten. Und wir können es kontrollieren. So können wir es schneller oder langsamer machen, indem wir die Animationsdauer ändern. Ich werde zu meinem CSS zurückkehren und es schneller machen, indem ich die Animationsdauer zehn Sekunden mache. Und jetzt können Sie sehen, dass sie schneller fahren. Jetzt. Bevor ich die Lektion beende, möchte ich Sie nur wissen lassen, dass ich das Hintergrundbild von dieser Seite bekommen habe, drei pic.com, das Tonnen von kostenlosen Bildern enthält, die Sie verwenden können. Und ich habe es über diesen Link bekommen. Sie können es einfach in den Resource Files finden. 78. 82 – text mit -: Hallo an alle. In dieser Lektion lernen wir, wie Sie diesen Text-Rotator mit CSS, Animationen und Keyframes erstellen . Ordnung, also hier in meinem HTML, werde ich H eins hinzufügen. Und darin werde ich sagen, dass ich CSS liebe. Dann werde ich eine leere Spanne hinzufügen. Diese Spanne enthält also die verschiedenen Wörter, die verändern, was unsere Animation Übergang und Transformation. Aber wir werden sie mit CSS hinzufügen. Nun, gehen wir zu unserem CSS. Sie können hier sehen, ich habe dem Körper etwas Stil hinzugefügt um die H1 horizontal und vertikal zu zentrieren. Ich habe diese Hintergrundfarbe auch zur Körperqualität hinzugefügt. Lassen Sie uns nun das H1 Ziel und fügen Farbe hinzu. Weiß. Dann Schriftgröße 50 Pixel. Dann werde ich die Spannweite anvisieren. Und wir werden das vorher Pseudo-Element verwenden, um den Inhalt hinzuzufügen, den wir wollen. Also werde ich zuerst Inhaltsübergänge sagen. Und hier ist es. Dann werde ich Text Transformation Großbuchstaben hinzufügen. Wenn Schriftfamilie, Arial. Und Farbe wird diese schöne blaue Farbe sein. Jetzt wollen wir die Wortübergänge ändern. Wir können dies kein Problem tun, indem wir eine neue Animation erstellen und es Wortschalter benennen. Zum Beispiel. Bei 0% setze ich den Inhalt auf Übergänge. Dann bei 50% werde ich es auf Animationen setzen. Und das 100%, werde ich es auf Transformationen setzen. Und jetzt gehen wir hier hoch und fügen Animationen hinzu. Wortwechsel. Fünf Sekunden, unendlich. Was nun passieren wird, ist, dass sich dieser Inhalt von Übergängen zu Animationen, zu Transformationen über einen Zeitraum von fünf Sekunden ändern wird . Und das wird für immer weitergehen, weil wir die Anzahl der Animationsiterationen auf unendlich setzen. 79. 83 – animated mit -: Hallo an alle. In dieser Lektion lernen wir, wie Sie dieses animierte Hintergrundmuster mithilfe von CSS-Animationen und Keyframes erstellen . Also lasst uns das machen. Hier in meinem HTML werde ich ein div hinzufügen und ihm eine Klasse von Banner geben. Dann werde ich zu meinem CSS gehen und dieses div mit der Klasse des Banners anvisieren. Und ich werde Höhe 100 vh hinzufügen, so dass es die volle Höhe des Browsers einnimmt. Dann füge ich das Hintergrundbild hinzu. Also werde ich Hintergrund-URL sagen, und ich werde unser Bild hinzufügen. Dann werde ich die Hintergrundposition 00 hinzufügen, so dass die Bildposition oben links ist. Und wenn wir das im Browser sehen, können Sie sehen, dass wir unser Musterbild haben und es wird wiederholt. Aber weil es ein Muster ist und andere Teile des Bildes genau gleich aussehen. Wir sehen es, als ob es die volle Breite und Höhe beansprucht. Aber das ist nicht wahr. Das Bild wird tatsächlich vertikal und horizontal wiederholt. So sehen wir im Moment tatsächlich viele wiederholte Bilder, nicht ein einziges Bild. Nun ist die Idee hinter dem animierten Hintergrundmuster, dass wir die Änderung in der Hintergrundposition von 0 links und 0 oben auf 0 auf links animieren . Und die Anzahl der Pixel gleich der Bildhöhe oben. Also werde ich zu meinem CSS gehen und ich werde eine neue Animation erstellen und es animiertes Muster benennen. Und ich werde von der Hintergrundposition 00 zur Hintergrundposition 0 von links und 600 Pixel von oben sagen. Jetzt habe ich hier 600 Pixel hinzugefügt, da die Musterhöhe 600 Pixel beträgt. Wenn Sie also möchten, dass sich das Muster vertikal bewegt, sollten Sie die Hintergrundposition 600 Pixel von der oberen Note aus machen. Jetzt werde ich hier rauf gehen und sagen Animation, animiertes Muster. 15 Sekunden, linear und unendlich, natürlich. Und jetzt, wenn ich meinen Browser neu lade, können Sie sehen, dass sich das Bild jetzt vertikal bewegt, bis es 600 Pixel bewegt, was das Ende eines Bildes und der Anfang eines anderen ist, und dann weitere 600 Pixel bewegt und so weiter und so weiter. Nun ist es wirklich einfach, das Muster horizontal zu bewegen. Also werde ich zu meinem CSS gehen und diese 600 Pixel 0 machen, damit es sich nicht vertikal bewegt. Dann werde ich 800 Pixel von links hinzufügen. Und ich habe 100 Pixel hinzugefügt, weil es die Breite meines Bildes ist. Mein Bild ist 600 Pixel x 800 Pixel. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass sich das Hintergrundbild horizontal bewegt. Und natürlich können wir es horizontal und vertikal gleichzeitig bewegen , indem wir zu meinem CSS zurückkehren und die 0 wieder auf 600 Pixel ändern. Und jetzt können Sie sehen, dass sich das Muster horizontal und vertikal bewegt. Zur gleichen Zeit. 80. 84 – Knapp Schatteneffekt mit shaking: Hallo an alle. In dieser Lektion werden wir diesen schönen Schüttel-Hover-Effekt für unsere Schaltfläche erstellen. Und natürlich werden wir dazu CSS-Animation verwenden. Bevor wir anfangen, wollten wir sehen, wie dieser Schütteleffekt funktioniert. Hier in dieser Demo habe ich die Animationsdauer sehr hoch gemacht, damit wir genau sehen können, was passiert. Also, wenn ich den Mauszeiger über den Link, Sie können sehen, es dreht sich ein wenig nach rechts, dann ein wenig nach links, Wenn ein wenig nach rechts wieder, und dann kehrt schließlich in seine ursprüngliche Position zurück. Das sollte also sehr einfach zu tun sein. Alles klar, lass uns das machen. Ich werde zu meinem HTML gehen und ich werde ein Anker-Tag hinzufügen und sagen, schweben Sie mich. Dann gehe ich zu meinem CSS und füge einige Stile hinzu. Ich werde dem Körper etwas dunkelgrauen Hintergrund hinzufügen. Dann werde ich das Anker-Tag anvisieren und Textdekoration hinzufügen. Keiner. Dann Farbe, weiß. Schriftfamilie, Sans Serif. Schriftgröße 40 Pixel. Rahmen, drei Pixel. Massiv weiß Polsterung 40 Pixel von oben und unten und 80 Pixel von links und rechts. Dann werde ich Übergang oder 0,3 Sekunden hinzufügen. Wenn ich dann den Mauszeiger über den Link führe, möchte ich, dass sich auch die Farbe und die Rahmenfarbe ändern. Also werde ich diese Codezeile kopieren, sie hier einfügen, und ich werde die weiße Farbe in diese rote Farbe ändern. Danach werde ich auch die Farbe selbst ändern, um anstelle von Licht zu lesen. Wenn ich nun den Mauszeiger über den Link gehe, können Sie sehen, wie sich die Rahmenfarbe und die Textfarbe ändern. Jetzt wollen wir den Schütteleffekt erzeugen. Was ich tun werde, ist, dass ich hier gehe und eine neue Animation erstellen werde. Und ich werde es benennen, schütteln. Und im Inneren werde ich sagen, bei 33 Prozent der Animationsdauer, dass die Verbindung um 10 Grad nach rechts gedreht wird. Und nach 66 Prozent der Animation möchte ich, dass sie auch um 10 Grad nach links gedreht wird. Also werden wir diesmal minus 10 verwenden. Und 100% der Animationsdauer. Ich möchte, dass es wieder um 10 Grad nach rechts gedreht wird. Was hier passieren wird, ist, dass der Knopf nach rechts gedreht wird, dann nach links, dann nach rechts, bevor er an seinen ursprünglichen Platz zurückkehrt. Großartig. Nun lassen Sie uns diese Animation zu unserer Schaltfläche beim Schweben hinzufügen. Wir gehen direkt hier und fügen Animation hinzu. Dann Animationsname, Schütteln und Animationsdauer 0,3 Sekunden, dann linear. Und schließlich zählt die Animationsiteration nur einmal beim Schweben. Und jetzt, wenn ich gehe und mit dem Mauszeiger über die Schaltfläche, können Sie sehen, dass der Schütteleffekt nach rechts geschieht, dann nach links, dann wieder nach rechts und dann in seine Ausgangsposition zurückkehrt. Und das ist genau der Effekt, den wir wollen. 81. 85 – Animationsknopf mit -: Hallo an alle. In dieser Lektion werden wir lernen, wie man diesen Link erstellt. Wenn Sie also einen Blick werfen, können Sie sehen, dass wir einen roten Hintergrund haben, der eine bestimmte Breite hat und die volle Höhe unseres Links einnimmt. Und dieser Hintergrund ist schief und er bewegt sich von links nach rechts über den Link. Wenn ich den Mauszeiger über den Link führe, können Sie sehen, dass der rote Hintergrund die volle Breite einnimmt. Und wenn wir weg schweben, kehrt es zurück, um von links nach rechts zu bewegen. Wie können wir diesen Effekt erzeugen? Nun, das ist eine einfache 1. Zuerst werden wir das vorher Pseudo-Element verwenden, um den roten Hintergrund zu erstellen. Und wir werden ihm die volle Höhe der Länge und eine bestimmte Breite geben, und sagen wir 120 Pixel. Dann werden wir es ein wenig mit der Skew-Funktion verzerren. Und wir werden eine Animation darauf anwenden , damit sie sich unendlich von links nach rechts bewegt. Wenn wir dann den Mauszeiger über den Link bewegen, werden wir ihn so machen, dass er die Schrägfunktion entfernt , die Animation stoppt und die volle Breite des Links einnimmt. Also lasst uns das wirklich machen. Hier in meinem HTML. Ich werde beginnen, indem ich hier gehe und einen Link hinzufüge. Und im Inneren werde ich sagen, schweben Sie mich. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde dem Körper einen dunkelgrauen Hintergrund hinzufügen. Dann werde ich das Anker-Tag anvisieren und Textdekoration hinzufügen. Keiner. Dann Farbe, weiß. Schriftfamilie. San Serif. Schriftgröße 40 Pixel, Rahmen, drei Pixel. Einfarbiges Weiß, Polsterung, 40 Pixel von oben und unten und 80 Pixel von links und rechts. Und schließlich, Position relativ. Nun, da der Link gut aussieht, müssen wir den roten Hintergrund mit dem vorher Pseudo-Element erstellen. Also werde ich zu meinem CSS gehen und vorher einen Doppelpunkt sagen. Und ich werde den Inhalt leer machen. Dann werde ich die Hintergrundfarbe rot machen. Dann werde ich oben 0 sagen, links 0 auch. Dann Breite. Nehmen wir an, 120 Pixel und Höhe, 100%, wenn Position absolut. Und dann, wenn wir es betrachten, können Sie sehen, es hat einen roten Hintergrund, nimmt die volle Höhe des Links und hat eine Breite von 120 Pixel. Aber Sie können sehen, dass die Buchstaben darunter versteckt sind. Wir können dies leicht beheben, indem wir zum vorigen Pseudo-Element zurückkehren und Z-Index minus1 hinzufügen. Und jetzt können Sie sehen, dass der Text davor erscheint. Gut. Jetzt wollen wir es ein wenig verzerren. Also werde ich zurückgehen und Transformieren Skew hinzufügen. Und ich werde es um minus 15 Grad verzerren. Und jetzt können Sie sehen, dass es schön verzerrt ist, wie wir wollen. Gut. Jetzt möchten wir die Animation erstellen, die sie von links nach rechts bewegt. Also werde ich hier gehen und einen neuen Animationsnamen erstellen, bewegen sich zum Beispiel. Und im Inneren werde ich sagen, von und ich möchte, dass der rote Hintergrund von außerhalb des Links beginnt. Also werde ich sagen links minus 120 Pixel, was die Breite des roten Hintergrunds ist. Auf diese Weise wird es von außerhalb des Links beginnen. Um diese Idee klar zu machen, Lassen Sie uns versuchen, hier nach oben zu gehen und links von 0 auf minus 120 Pixel zu ändern. Sie können sehen, dass es sich jetzt außerhalb des Links befindet. Das wird also unser Ausgangspunkt sein. Und gut. Jetzt gehen wir zurück und machen diese 0 erneut. Dann vervollständigen wir unsere Animation. Also werde ich gleich hier gehen und zwei links sagen, 100%. Die rote Hintergrundbewegung endet also bei 100% der Linkbreite nach links, d. h. außerhalb der Verknüpfung vom rechten Rand. Großartig. Fügen wir nun diese Animation zum roten Hintergrund hinzu. Ich gehe hier hoch und füge Animation hinzu. Dann Animationsname verschieben. Und Animationsdauer 1,2 Sekunden, dann linear, dann endlich unendlich. Und jetzt können Sie sehen, dass sich der rote Hintergrund von links nach rechts über den Link bewegt. Also k, Jetzt müssen wir es außerhalb der Verbindung verstecken. Also werde ich hier im Link-Selektor gehen und ich werde Überlauf versteckt hinzufügen. Alles klar, Jetzt, wenn Sie den Mauszeiger über den Link bewegen, möchten wir die Animation starten, die Schrägstellung entfernen und den roten Hintergrund die volle Breite annehmen lassen. Also werde ich gleich hierher gehen. Und wenn wir den Mauszeiger über den Link bewegen, möchte ich einige Änderungen vornehmen, die am Pseudo-Element vor passiert sind. Also zuerst werde ich die Breite und 100% machen. Es nimmt also die volle Breite der Verknüpfung ein und dann Transformieren Skew 0 Grad, um sie wieder zu seiner ursprünglichen Form zu machen. Und schließlich, Animation. Keiner. So starten Sie die Animation. Jetzt wollen wir, dass diese Änderungen reibungslos geschehen. Also werde ich hier in das vorher Pseudo-Element gehen und ich werde Übergang alle Nullen hinzufügen , fünf Sekunden. Und jetzt, wenn ich gehe und neu lade, können Sie den roten Hintergrund sehen. Wir bewegen uns weiter von links nach rechts, bis ich den Mauszeiger über den Link führe und ihn aufhalten lasse. An dieser Stelle nimmt es die volle Breite ein. Und wenn ich weg bin, werden wir uns wieder bewegen. 82. 86 – Text mit -: Hallo an alle. In dieser Lektion werden wir diese schönen Beleuchtungstexte mit CSS-Animationen erstellen. Dies ist also eine unendliche Animation und die Veränderung, die hier geschieht, weil eine Änderung in Farbe und Text Schatten. Also lasst uns das wirklich machen. Beginnen wir zunächst mit dem Hinzufügen des Markups unseres HTML. Also werde ich hier in den Körper gehen, und ich werde eine ungeordnete Liste hinzufügen. Und darin werde ich eine Listenelemente hinzufügen, und jedes Listenelement wird einen Brief enthalten. Gut, jetzt gehen wir zu unserem CSS und fügen Sie einige Stile hinzu. Ich werde dem Körper eine dunkelgraue Hintergrundfarbe hinzufügen. Dann werde ich die UL ins Visier nehmen. Und wir werden Marge 0 hinzufügen, Polsterung 0 als auch. Und wir werden Display flex hinzufügen, so dass alle Listenelemente nebeneinander angezeigt werden. Cool. Lassen Sie uns nun einige Stile zu den Listenbuchstaben selbst hinzufügen. Also werde ich das LI innerhalb der UL anvisieren. Und ich werde List-Stil und dann Farbe hinzufügen. Und ich werde eine hellere graue Farbe hinzufügen, wenn Schriftgröße 18 Pixel. Und schließlich, Buchstabenabstand 15 Pixel, um etwas Abstand zwischen den Buchstaben zu erhalten. Großartig. Lassen Sie uns nun die Beleuchtungsanimation erstellen. Ich werde hier gehen und eine neue Animation erstellen und es Beleuchtung nennen. Und im Inneren werde ich bei 0% der Animationsdauer sagen, dass die Farbe die graue Farbe sein soll. Und ich möchte, dass der Textschatten keine ist. Also wird sich nichts ändern. Dann kopiere ich das, füge es zweimal wieder ein und ändere einfach 0% auf 90 Prozent. Dann ändere ich bei 100% der Animationsdauer die graue Farbe in diese gelbe Farbe. Und ich werde hier einen Textschatten hinzufügen. Vor all dem habe ich tatsächlich viele Werte ausprobiert, bis ich herausgefunden habe, dass ich diesen Wert mag. Also, jetzt wollen wir diese Animation zu den Buchstaben hinzufügen. Also werde ich hier in der Listenelementauswahl hinauf gehen und ich werde Animation hinzufügen. Dann wird der Animationsname, Beleuchtung. Wenn die Animation Dauer 1,4 Sekunden, linear und unendlich, natürlich. Was also hier passieren wird, ist von 0% bis 90 Prozent der 1,4 Sekunden, was die Animationsdauer ist. Die Briefe werden sich nicht ändern. ihnen wird nichts passieren. Aber von 90% bis 100% der Animationsdauer sind die Buchstaben gelb und wir haben einen Textschatten. Ich habe die Änderung über einen sehr kurzen Zeitraum geschehen, um ihm ein Gefühl der Beleuchtung zu geben oder eine Glühbirne schnell ein- und ausschalten. Aber wenn die Änderung langsam geschieht, wird es wie Beleuchtung aussehen. Es wird sehr glatt und langweilig sein. Also lassen Sie uns das wirklich sehen. Sie können sehen, dass die Veränderung schnell geschieht, was uns die Wirkung der Beleuchtung gibt. Aber wenn wir uns unsere Demo ansehen, können Sie sehen, dass die Änderungen nicht alle gleichzeitig passieren. Der erste Buchstabe leuchtet zuerst auf, dann der zweite und dann der dritte und so weiter und so weiter. Wir können das einrichten, indem Sie einfach die Animationsverzögerungsfunktion verwenden. Ich werde zu meinem CSS zurückkehren und ich werde das erste Kind einer Listenelemente anvisieren. Und ich werde sagen, UL LI ntes Kind eins. Was dies also tun wird, ist, dass es das erste Listenelement in der UL anvisiert , das ist der erste Buchstabe. Als nächstes werde ich Animationsverzögerung 0 hinzufügen , weil ich möchte, dass der erste Buchstabe sofort aufleuchtet. Dann werde ich das alles kopieren. Fügen Sie es erneut ein, wählen Sie dieses Mal den zweiten Buchstaben aus, und ändern Sie die Animationsverzögerung auf 0,1 Sekunden. Auf diese Weise wird es 0,1 Sekunden warten, bevor es aufleuchtet. Dann werde ich das für alle Briefe tun. Und jedes Mal werde ich die Animationsverzögerung um 0,1 Sekunden erhöhen , damit sie nacheinander aufleuchten. Gut. Nun, da ich alle Animationsverzögerungen hinzugefügt habe, werfen wir einen Blick. Sie können sehen, dass der erste Buchstabe zuerst aufleuchtet, dann der zweite und dann der dritte, und so weiter, bis der letzte Buchstabe, wenn die Animation wieder beginnt, weil wir es unendlich gemacht haben. 83. 87 – Heartbeat mit -: Hallo an alle. In dieser Lektion werden wir lernen, wie man dieses Herz in CSS erstellt und wie man es mit CSS-Animation schlägt. Dies wird eine interessante Lektion sein. Mal sehen, wie wir das tun können. Alles klar, ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Herzklasse gebe. Dann gehe ich zu meinem CSS. Und ich werde damit beginnen, dem Körper eine dunkelgraue Hintergrundfarbe hinzuzufügen. Danach werde ich unser div mit der Klasse des Herzens anvisieren. Und ich werde einige Stile hinzufügen. Ich werde beginnen, indem ich Position, relativ hinzufüge. Dann Breite, 100 Pixel, Höhe 100 Pixel sowie. Hintergrundfarbe. Diese rote Farbe, natürlich. Gut. Jetzt können Sie sehen, dass dies nur ein normales div mit einem roten Hintergrund ist. Also lasst uns weiter arbeiten. Ich werde hier gehen und ich werde sowohl die Vorher als auch die Nachher Pseudoelemente verwenden , um das Herz zu schaffen. Also werde ich mit dem vorherigen Pseudo-Element direkt hier beginnen. Und ich werde den Inhalt einfach leer machen. Dann werde ich Position, absolut, oben 0, links 0 sowie die Breite 100% und Höhe 100% hinzufügen links 0 sowie . Dann werde ich Hintergrundfarbe hinzufügen. Und lassen Sie uns weiß für jetzt hinzufügen. Gut. Jetzt können Sie sehen, dass wir das vorher Pseudo-Element mit einer weißen Hintergrundfarbe über unserem div mit einer Klasse von Herzen sitzen. Was wir jetzt tun müssen, ist, dass wir das weiße Div um die Hälfte eines engen nach oben bewegt haben müssen . Also werde ich zu meinem CSS zurückkehren. Und innerhalb des vorher Pseudo-Elements werde ich transformieren übersetzen hinzufügen. Warum? - Minus 50%. Jetzt können Sie sehen, dass sich das weiße div nach oben bewegt, eine Entfernung, die der Hälfte eines engen entspricht. Großartig. Jetzt werde ich das alles kopieren. Fügen Sie es erneut ein. Und ich werde mich vor zu nachher ändern. Und ich werde den weißen Hintergrund zu ändern, sagen wir grün. Nun wollen wir dieses Mal das After-Pseudo-Element nach links verschieben, nicht nach oben. Also werde ich einfach hier gehen und übersetzen Y ändern, um X zu übersetzen. Jetzt können Sie sehen, dass es sich nach links bewegt, eine Entfernung, die der Hälfte seiner Breite entspricht. Gut. Jetzt werde ich hier im Div mit der Klasse des Herzens gehen. Und ich werde Transformieren hinzufügen, drehen, und ich werde es um 45 Grad drehen. Jetzt können Sie sehen, dass das div um 45 Grad gedreht wird und sowohl die davor als auch nachher Pseudo-Elemente damit rotieren. Jetzt glaube ich, du sagst dir: Hey, wir sind fast da und das stimmt. Alles, was wir jetzt tun müssen, um die Herzform zu erhalten, ist, hier zum vorherigen Pseudoelement zu gehen und den Grenzradius von 50 Prozent hinzuzufügen. Dann werde ich dasselbe für das Nachher tun. Und jetzt können Sie sehen, dass wir die Herzform haben, die wir wollen. Gehen wir zurück und ändern Sie die Hintergrundfarbe für beide auch zu lesen. Okay, jetzt haben wir es. Als nächstes müssen wir an der Animation arbeiten, um dieses Herz schlagen zu lassen. Hier ist eine langsame Demo unserer Animation, damit wir sie besser sehen können. Ich werde die Seite neu laden. Und Sie können sehen, dass das Herz für eine Weile still bleibt. Dann skaliert es sich. Wenn ein wenig skaliert wird, skaliert sich dann wieder und skaliert dann auf seine ursprüngliche Größe. Bleibt eine Weile still. Und dann wiederholen Sie den gleichen Prozess unendlich. Mal sehen, wie wir das schaffen können. Ich werde zu meinem CSS gehen, eine neue Animation erstellen und es Herzschlag nennen. Dann am Anfang der Animation, bei 0%, werde ich Transformation hinzufügen. Drehen Sie sich um 45 Grad, um das Herz gedreht zu halten. Dann skalieren Sie um eins, weil wir wollen, dass es mit seiner ursprünglichen Größe beginnen. Dann kopiere ich das alles und füge es fünfmal wieder ein. Und ich werde einige Prozent-Intervalle hinzufügen. Also werde ich 25 Prozent, 3050, 7100% hinzufügen . Gut. Bei 25 Prozent werde ich die Skala gleich halten, denn denken Sie daran, das Herz bleibt noch eine Weile, bevor die Animation beginnt. Von 0% bis 25 Prozent der Animationsdauer möchte ich, dass das Herz statisch bleibt. Dann werde ich bei 30 Prozent der Animationsdauer die Skala auf das 1,4-fache seiner ursprünglichen Größe erhöhen , so dass das Herz wirklich groß wird. Dann werde ich es bei 50 Prozent etwas herunterskalieren. Also werde ich ein 1.2 machen und bei 70 Prozent werde ich es wieder auf 1,4 skalieren. Dann möchte ich es bei 100% natürlich auf seine ursprüngliche Größe skalieren , also werde ich es so belassen. Jetzt müssen wir diese Animation zu unserem div hinzufügen. Also werde ich hier rauf gehen und Animationen hinzufügen. Herzschlag. Und die Animationsdauer, wichtiger für eine Sekunde, linear und unendlich, natürlich. Und jetzt können Sie sehen, wie unser Herz schlägt. Wenn sie noch für eine Weile, dann wird größer, dann ein wenig kleiner als größer wieder, dann kehrt zu seiner ursprünglichen Größe und so weiter und so weiter. Und das ist genau der Effekt, den wir wollen. 84. 88 – animated mit -: Hallo an alle. In dieser Lektion werden wir diese animierten Texte Hintergrund erstellen. Die Idee dahinter ist, dass wir dem Text ein Hintergrundbild hinzufügen und die Hintergrundpositions-Eigenschaft dieses Bildes animieren. Leicht genug, nicht wahr? Mal sehen, wie wir das tun können. Ich werde hier in meinem HTML beginnen, indem ich eine H hinzufüge, und ich werde nur CSS-Animation sagen. Dann werde ich zu meinem CSS gehen und ich beginne, indem ich dem Körper eine blaue Hintergrundfarbe hinzufüge. Dann werde ich das H1 anvisieren. Schriftgröße hinzufügen, 200 Pixel. Text wird zentriert ausgerichtet, um den Text zu zentrieren. Text transformieren Großbuchstaben, Hintergrund. Und ich werde unser Bild als Hintergrund hinzufügen. Sie können sehen, dass unser Bild zur Überschrift hinzugefügt wurde, aber wir möchten, dass es als Hintergrund für den Text selbst angezeigt wird. Wir können das mit einer Eigenschaft namens Bad Ground Clip tun. Also werde ich hier gehen und Webkit-Hintergrund-Clip-Text hinzufügen. Dadurch wird das Bild zum Hintergrund des Textes. Aber wir müssen die Farbe des Textes transparent machen. So können Sie sehen, der Text hat jetzt unser Bild als Hintergrund. Und jetzt wollen wir diesen Hintergrund animieren. Also werde ich hier gehen und eine neue Animation erstellen und sie benennen, sagen wir Texthintergrund. Dann werde ich von der Hintergrundposition 0 von links und 0 von oben zur Hintergrundposition sagen , 100% von links und 100% von oben. Dann gehe ich hier hoch und füge Animation hinzu. Texte, Hintergrund, 20 Sekunden, linear und unendlich natürlich. Und jetzt können Sie sehen, dass der Hintergrund tatsächlich von einer Position zur anderen animiert ist, unendlich die Animation, die wir wollen. 85. 89 – Bouncing Bällen mit -: Hallo an alle. In dieser Lektion werden wir diese Bouncing Ladeanimation erstellen. So können Sie sehen, dass wir fünf Kreise haben und sie prallen zufällig. Mal sehen, wie wir das tun können. Ich werde beginnen, indem ich hier in meinem HTML gehe, und ich werde eine URL hinzufügen. Dann werde ich fünf Listenelemente darin hinzufügen. Und diese Listenelemente werden die springenden Kreise oder Bälle sein. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde hier im Körper beginnen, indem ich Hintergrundfarbe hinzufüge, diese dunkelgraue Farbe. Dann werde ich die UL ins Visier nehmen. Und ich werde Marge 0, Polsterung 0 hinzufügen , dann flex anzeigen. Lassen Sie uns nun die Listenelemente innerhalb der URL ausrichten. Und jetzt fügen wir List-Stil hinzu. Keiner. Breite 30 Pixel, Höhe, 30 Pixel ebenfalls. Und dann Hintergrundfarbe, weiß. Dann Rand 0 von oben und unten und zehn Pixel von links und rechts, weil wir etwas Abstand zwischen den Listenelementen wollen. Also hier unsere Listenelemente sitzen nebeneinander, weil wir die Anzeigeeigenschaft der UL auf Flex gesetzt haben . Lasst uns weitermachen. Ich werde zurück in die Listenelementauswahl gehen und ich werde Randradius 50 Prozent hinzufügen, so dass die Listenelemente Kreise sein werden. Großartig. Also, jetzt müssen wir an unserer Animation arbeiten. Wenn wir einen kurzen Blick auf unsere Demo werfen, können Sie sehen, dass sich die Kreise von ihrer ursprünglichen Position nach oben in eine neue Position bewegen . Bewegen Sie sich dann wieder nach unten in die ursprüngliche Position. Die Animation wird also drei Stufen enthalten. In der ersten Stufe sich die Kreise ohne Bewegung in ihrer ursprünglichen Position. Dann bewegen sich die Kreise bei 50% der Animationsdauer um einen Abstand nach oben, sagen wir, 150 Pixel. Am Ende der Animationsdauer kehren wir dann zu ihrer ursprünglichen Position zurück. Mal sehen, wie wir das tun können. Ich werde hier gehen und eine neue Animation erstellen. Dann nenne ich es als Springen. Und innerhalb davon werde ich bei 0% der Animationsdauer sagen, ich werde transformieren Y 0 hinzufügen. Dann bei 50% der Animationsdauer. Transformieren, Translate Y minus 150 Pixel, so dass die Kreise 150 Pixel nach oben bewegen. Dann bei 100%, Transformieren, Translate Y 0 erneut, damit sie an ihre ursprüngliche Position zurückkehren. Gut. Jetzt werde ich hier in der Listenelementauswahl hinauf gehen und ich werde Animation hinzufügen. Dann springen. Dann die Animationsdauer, 0,8 Sekunden, dann linear und unendlich, natürlich. Jetzt können Sie sehen, dass die Kreise 150 Pixel hoch springen , wenn sie in ihre Ausgangsposition zurückkehren. Cu. Jetzt müssen wir einen Rahmen am unteren Rand der Kreise hinzufügen. Also werde ich in die URL gehen und ich werde Grenze hinzufügen, unten. Zehn Pixel, einfarbig weiß. Jetzt können Sie sehen, dass wir die Grenze unter den Kreisen haben. Großartig. Jetzt haben wir noch eins. Die Kreise springen jetzt zusammen. müssen wir ändern. Wir wollen es wie zufälliges Springen aussehen lassen. Was wir also tun können, ist, dass wir zufällige Animationsverzögerungswerte für jeden Kreis hinzufügen können. Also werde ich hier gehen und das erste Listenelement anvisieren. Also werde ich UL, LI und Kind eins sagen . Und darin werde ich Animationsverzögerung hinzufügen. Und ich werde jeden zufälligen Wert hinzufügen, sagen wir 0,45 Sekunden. Dann werde ich das alles kopieren. Fügen Sie es erneut vier Mal ein, so dass wir jedes Listenelement einzeln ausrichten können. Dann ändere ich die Nummer des Kindes hier auf zwei, dann drei, dann 45. Und ich werde Zufallswerte für jeden Kreis hinzufügen. Also für den zweiten Kreis werde ich, sagen wir, 0,6 Sekunden hinzufügen. Und für den dritten Kreis werde ich 0,3 Sekunden hinzufügen und den vierten Kreis verlassen. Antwort ist, so wird es sofort zu bewegen. Und schließlich werde ich dem fünften Kreis 0,1 Sekunden hinzufügen. Dies sind nur zufällige Werte, die dazu führen, dass sich die Kreise zufällig bewegen. Also, jetzt werde ich zurück zum Browser gehen und neu laden. Und Sie können sehen, dass die Kreise zufällig nach oben und unten springen, was uns den Effekt gibt, den wir wollen. Also das ist es für diese Lektion, alle, und ich werde dich in der nächsten sehen. 86. 90 - Regeneffekt mit -: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationen, Übergänge und Transformationen Kurs. In dieser Lektion werden wir diesen regnerischen Effekt mit CSS-Animation erstellen. Also lasst uns anfangen. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Regen gebe. Dann werde ich zu meinem CSS gehen, um dieses div zu stylen. Ich werde anfangen, indem ich den Körper anvisiere. Dann werde ich auch Padding, 0, Marge 0 hinzufügen . Die Hintergrund-URL. Und ich werde das Hintergrundbild hinzufügen. Dann werde ich Hintergrundwiederholung hinzufügen. Keine Wiederholung. Und schließlich, Hintergrundgröße. Einband Gut. So jetzt können Sie sehen, unser Bild ist als Hintergrund für den Körper gesetzt. Lasst uns weitermachen. Ich werde zu meinem CSS zurückkehren und ich werde das div mit der Klasse des Regens anvisieren. Dann im Inneren werde ich Höhe 100% hinzufügen, damit es die volle Höhe des Körpers aufnehmen kann. Dann Hintergrund-URL. Und ich werde das Regenbild hinzufügen. Der Regen, der fällt, ist eigentlich ein Bild , das Sie in den Ressourcen für diese Lektion finden können. Also jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass wir unseren Hintergrund haben und das Regenbild sitzt darüber. Jetzt müssen wir nur noch das Regenbild animieren. Also werde ich zurück zu meinem CSS gehen und ich werde eine neue Animation erstellen und es regen nennen. Dann werde ich bei 0% die Hintergrundposition 0% von links und 0% von oben hinzufügen . Dann bei 100%, werde ich Hintergrundposition 20 Prozent von links und 100% aus einer Stadt hinzufügen . Gut. Jetzt müssen wir die Animation zum Regenbild hinzufügen. Also werde ich hier rauf gehen und Animationen hinzufügen. Regen, 0,3 Sekunden, linear und unendlich, natürlich. Und jetzt, wenn ich in den Browser gehe und neu lade, kannst du sehen, dass sich die Position des Regenbildes ändert, was uns den regnerischen Effekt gibt, den du willst. 87. 91 – Symbole mit Ikonen: Hallo an alle und willkommen zu dieser neuen Lektion im Kurs, wo wir diesen schönen Hover-Effekt auf diese Font Awesome Symbole erstellen werden. Wenn ich also mit dem Mauszeiger über einen dieser bewege, kann man sehen, dass ein dunkelblauer Hintergrund einblendet und ein Rand verblasst und eine Animation um den Hintergrund herum hat. Also lassen Sie uns das zusammen schaffen. Also hier in meinem HTML, können Sie sehen, ich habe einen Link für die Font Awesome Icons Bibliothek, die mir Zugriff auf die Symbole geben , die wir in diesem Beispiel verwenden werden. Ich werde hier beginnen, indem ich eine UL und dann LI hinzufüge. Und im Inneren werde ich ein Icon-Tag hinzufügen und ihm eine Klasse von FAS und FAA Herz geben. Dann kopiere ich das, füge es dreimal wieder ein. Und ich werde jedes Mal die Icon-Klasse ändern. Also werde ich sagen, Glas Martini, Globus und Geschenk. So jetzt können Sie sehen, dass wir unsere vier Icons hier aufgelistet haben. Als nächstes gehen wir zu unserem CSS, um einige Stile hinzuzufügen. Ich werde auf die UL zielen und ich werde Polsterung, 0, Marge 0 sowie Flex anzeigen. Dann werde ich das LI darin anvisieren und List-Style-Typ hinzufügen. Keiner. Breite 120 Pixel, Höhe, 120 Pixel ebenfalls. Und wir wollen ein paar Leerzeichen zwischen den Symbolen. So werden wir Rand 0 und 20 Pixel von links und rechts hinzufügen. Dann werde ich Rand hinzufügen, zwei Pixel, solide. Und diese dunkelblaue Farbe. In Ordnung, jetzt wollen wir diesen Grenzradius machen. Also werde ich gehen und Grenze Radius 50 Prozent hinzufügen. Dann werde ich Übergang 0, 0, 0,5 Sekunden, Position relativ hinzufügen . Und um die Icons innerhalb des LI zu zentrieren, verwenden wir flexbox. Also werde ich Anzeige hinzufügen, Flex, Ausrichtung Elemente Center und Begründung Inhalt. Mitte. Cool. Lassen Sie uns nun einige Stile zu den Symbolen hinzufügen. Ich werde sie anvisieren und Schriftgröße hinzufügen. 48 Pixel, um es größer zu machen. Dann färben Sie unsere dunkelblaue Farbe und den Übergang. Alle 0,5 Sekunden. In Ordnung, wir haben unsere Symbole so aussehen, wie wir wollen. Jetzt ist es an der Zeit, auf dem blauen Hintergrund zu arbeiten, der einblendet. Um es zu erstellen, werde ich gleich hier gehen und UL LI vorher sagen. Und ich werde Inhalt leer hinzufügen. Positionieren Sie dann absolut, oben 0 , links, 0, Breite 100% und Höhe 100%. Dann Hintergrundfarbe, die dunkelblaue Farbe. Und um es auch zu einem Kreis zu machen, werden wir Grenzradius 50 Prozent hinzufügen. Jetzt können Sie sehen, dass wir den dunkelblauen Hintergrund haben und das Symbol bedeckt. Lass es uns weitermachen. Um das Symbol wieder erscheinen zu lassen, werde ich hierher zurückgehen und Z-Index minus1 hinzufügen und dann alle 0,5 Sekunden übergehen. Und wir werden Opazität 0 hinzufügen. Jetzt können Sie sehen, dass der Hintergrund verschwunden ist, weil wir die Deckkraft auf 0 setzen. Aber wir wollen, dass es wieder erscheint, wenn wir schweben. Also werde ich zu meinem CSS zurückkehren und wenn ich über den Verbündeten schwebe, werde ich es schaffen. Es gibt also einige Änderungen am vorigen Pseudo-Element. Ich werde Opazität hinzufügen, eine, um es wieder erscheinen zu lassen. Und ich werde Transformationsskala 0,8 hinzufügen. Es nimmt also nicht die volle Breite und Höhe des Verbündeten ein. Und so wird es einen freien Platz für uns lassen, um die Grenze hinzuzufügen. Wenn ich jetzt gehe und mit dem Mauszeiger über die Symbole gehe, können Sie sehen, dass der Hintergrund wieder angezeigt wird, und es nimmt nicht den gleichen Platz wie das Listenelement ein. Es nimmt 80% ein, so dass etwas freier Speicherplatz um ihn herum bleibt. Aber die Symbole selbst erscheinen nicht , weil sie die gleiche Farbe wie der Hintergrund haben. Lassen Sie uns also die Farbe ändern, wenn Sie schweben. Ich gehe hier und sage UL LI auf Schweben. Ich werde einige Änderungen vornehmen, die an den Symbolen passiert sind. Ich werde Farbe weiß hinzufügen. In Ordnung, jetzt lassen Sie uns den animierten Rahmen erstellen , der um den dunkelblauen Hintergrund herum erscheint. Ich kopiere das gesamte vorher Pseudo-Element, füge es ein und ändere vorher zu nachher. Dann werde ich einige Änderungen daran vornehmen. Zuerst werde ich den Hintergrund transparent machen, weil wir keine Hintergrundfarbe wollen. Dann werde ich Rand hinzufügen, zwei Pixel gestrichelt. Und diese hellere blaue Farbe. Und schließlich, Box-Dimensionierung Border-Box. Wenn wir also die Deckkraft in eins ändern, können Sie sehen, dass der Rahmen jetzt um den Rand der Listenelemente erscheint. Gehen wir also zurück und ändern Sie es wieder auf 0. Lassen Sie uns nun die Animation für den Rahmen erstellen. Ich werde hier gehen und eine neue Animation erstellen. Nennen Sie es rotieren. Und zu Beginn der Animation, bei 0%, werde ich Transformationsskala 0.92 hinzufügen, die das After-Pseudo-Element ein wenig nach unten verkleinert und zwischen den Rand der Listenelemente und dem blauen Hintergrund legt. Also als nächstes werde ich rotieren 0 Grad hinzufügen. Ich kopiere das, füge es wieder ein, und bei 100% werde ich es um 360 Grad drehen. Alles klar, das ist gut. Zuletzt werden wir diese Animation auf das After-Pseudo-Element anwenden , wenn wir den Mauszeiger über die LI bewegen. Also lasst uns das machen. Ich werde LI auf Schweben danach sagen. Und ich werde zunächst eine Deckkraft hinzufügen. Dann Animation, Drehen, zehn Sekunden, linear und unendlich. Richtig? Wenn ich nun mit dem Mauszeiger über die Symbole gehe, siehst du, dass der dunkelblaue Hintergrund eingeblendet wird. Dann ändert sich die Symbolfarbe in Weiß, und der gestrichelte Rahmen beginnt sich zu drehen. Und das gibt uns einen schönen Schwebeeffekt. 88. 92 - Textanimation herunterladen: Hallo an alle. Willkommen zu dieser neuen Lektion im Kurs, wo wir diese schöne Ladeanimation erstellen werden. Sie können sehen, dass dies eine schön aussehende Animation ist, bei der sich die Farben des Wortes laden ändern und sich auch der Buchstabenabstand und die Deckkraft ändern. Also lasst es uns schaffen. Hier in meinem HTML. Ich werde beginnen, indem ich eine UL hinzufüge. Dann füge ich einen Verbündeten hinzu und füge den ersten Buchstaben L hinzu. Dann kopiere ich diesen und füge ihn sechs Mal ein und ändere den Brief jedes Mal, bis wir das Wort geladen haben. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde die URL anvisieren und wir werden den Rand und das Auffüllen dafür zurücksetzen. Also werde ich Marge 0 hinzufügen, Padding 0 als auch. Und wir wollen, dass die Buchstaben nebeneinander angezeigt werden. Also werde ich Display flex hinzufügen. Jetzt. Alles klar, lass es uns weitermachen. Ich werde die Listenelemente innerhalb der URL ausrichten, die die Buchstaben darstellt. Dann werde ich List-Style-Typ hinzufügen, keine, um diese Kugeln loszuwerden. Dann Schriftgröße, 80 Pixel, um die Buchstaben größer zu machen, dann Buchstabenabstand. 20 Pixel. Da gehen wir. Hier sind unsere Buchstaben nebeneinander mit 20 Pixeln Abstand zwischen jedem einzelnen von ihnen. Als Nächstes werden wir an unserer Animation arbeiten. Ich gehe hier und erstelle eine neue Animation. Nennen Sie es geladen. Und machen wir es zunächst einfach. Lassen Sie uns einfach die Farben der Buchstaben ändern. Bei 0% der Animationsdauer werden wir die Farbe rot machen. Dann wird die Farbe bei 100% blau sein. Dies wird uns eine allmähliche Veränderung der Farbe von rot zu blau geben. Okay, fügen wir die Animation hier oben zu den Buchstaben hinzu. So Animation, Laden, drei Sekunden, linear und unendlich. In Ordnung, hier können Sie sehen, wie sich die Farbe der Buchstaben über einen Zeitraum von drei Sekunden von Rot zu Blau ändert. Als nächstes ändern wir die Position der Buchstaben. Ich möchte den Zug von rechts nach links machen. Also werde ich hier gehen und bei 0%, ich werde Transformation X minus 50 Pixel hinzufügen. Und bei 100%, Ich werde Transformieren X 50 Pixel hinzufügen übersetzen. So werden die Buchstaben beginnen, 50 Pixel von links von der ursprünglichen Position auf 50 Pixel nach rechts zu bewegen . Genau so. Okay, jetzt, während dieser Bewegung wollen wir den Buchstabenabstand ändern, damit die Buchstaben näher zueinander kommen und sich dann wieder auseinander ausbreiten. Also bei 0% werde ich Buchstabenabstand hinzufügen. 20 Pixel. Dann füge ich hier eine neue Animationsstufe bei 50% der Animationsdauer hinzu. Und im Inneren werde ich Buchstabenabstand minus 20 Pixel hinzufügen. Dann bei 100% füge ich wieder den Buchstabenabstand von 20 Pixeln hinzu. Was hier passieren wird, ist, dass während der Bewegung die Buchstaben näher zueinander kommen, dann werden wir uns wieder voneinander entfernen, genau wie Sie hier sehen können. Cool. Nun, eine Sache ist hier geblieben. Wenn wir die Seite neu laden, möchten wir, dass die Buchstaben schnell einblenden, Weile bleiben und dann ausblenden. Wir können dies erreichen, indem wir die Deckkraft kontrollieren. Also werde ich hier in der Animationsdauer gehen und bei 0% werde ich Deckkraft 0 hinzufügen. Dann möchte ich, dass es schnell verblasst. Also werde ich eine neue Stufe bei 10 Prozent erstellen, und ich werde Deckkraft eins hinzufügen. Jetzt, wenn ich gehe und neu lade, können Sie sehen, dass die Buchstaben schön verblassen. Gut. Jetzt wollen wir, dass sie auch verblassen. Also werde ich zu meinem CSS gehen und bei 50 Prozent werde ich auch Deckkraft eins hinzufügen. So bleiben sie scharf, unsichtbar von 10 Prozent bis 50%. Dann bei 100% werde ich Deckkraft 0 hinzufügen, damit sie gut verblassen werden. Also, wenn ich die Seite neu lade, können Sie sehen, dass sie verblassen, dann verblassen, was uns den Ladeeffekt gibt, den wir suchen. Großartig. Jetzt ist noch eine Sache übrig. Wir wollen, dass alle Briefe diesen Effekt abgeben, aber einer nach dem anderen. Also der erste Buchstabe, dann der zweite, dann der dritte, und so weiter. Was wir tun können, ist, dass wir die Animationsverzögerungseigenschaft für jeden von ihnen verwenden können. Also werde ich hier gehen und UL LI nth Kind eins hinzufügen . Dies wird auf den ersten Buchstaben abzielen. Und weil wir möchten, dass der erste Buchstabe sofort erscheint, werden wir Animationsverzögerung 0 Sekunden hinzufügen. Dann werde ich das alles kopieren. Fügen Sie es erneut sechsmal ein. Und ich werde hier eins ändern, 22. Und fügen Sie Animationsverzögerung, 0,2 Sekunden. Dann 3,40 Sekunden, 4,60 Sekunden, 5,80 Sekunden, 61 Sekunden und schließlich 7,21 Sekunden. Also hier sind wir. Die Buchstaben ändern sich nacheinander, was uns diese großartig aussehende Beladungsanimation gibt. 89. 93 – tolle pulse mit Css-Animationen: Hallo an alle. In dieser Lektion im CSS-Animationskurs werden wir diesen Pulseffekt erzeugen. Sie können sehen, wir haben ein Font Awesome Symbol hier für ein Telefon. Und es hat einen grünen Hintergrund. Und es gibt zwei Grenzen, die pulsierend sind. Sie werden größer und verschwinden. Wir werden also CSS-Animationen und Transformationen für diese Lektion verwenden . Ordnung, Zunächst einmal werde ich anfangen, hier in meinem HTML zu gehen und ein div hinzuzufügen und ihm eine Klasse von Puls zu geben. Dann werde ich in ihm ein Icon-Tag hinzufügen. Geben Sie ihm eine Klasse von FAS und FAS Telefon. Dies wird also das Telefonsymbol für uns drucken. Und Sie können hier sehen, dass ich einen CDN-Link für die Font Awesome Bibliothek verwende , der uns Zugriff auf alle Font Awesome Icons gibt. Ordnung, wenn wir das im Browser sehen, können Sie sehen, dass wir unser Symbol direkt hier in der Mitte der Seite haben, und es hat standardmäßig eine Farbe von Schwarz. Gehen wir also zu unserem CSS und fügen Sie einige Stile hinzu. Ich werde das div mit der Klasse des Pulses anvisieren, die unser Symbol darin hat. Und ich werde Breite, 100 Pixel, Höhe 100 Pixel als auch hinzufügen . Hintergrundfarbe, diese grüne Farbe, Farbe weiß. Und um einen Kreislauf zu machen, werden wir Grenzradius 50 Prozent hinzufügen. In Ordnung, jetzt lassen Sie uns das Symbol horizontal und vertikal eingeben. Ich werde Text-Ausrichtung, Mitte und Zeilenhöhe hinzufügen , 100 Pixel, um es vertikal zu zentrieren. Dann müssen wir das Symbol ein bisschen größer machen. So werden wir Schriftgröße 48 Pixel hinzufügen. Und schließlich werden wir Position relativ hinzufügen. Richtig? Also jetzt haben wir das Symbol mit diesem grünen kreisförmigen Hintergrund genau so aussehen, wie wir es wollen. Und jetzt wollen wir die Grenzen um sie herum schaffen, die animiert werden. Also lasst uns damit umgehen. Ich werde hier gehen und Post-Doppelpunkt sagen, bevor. Und ich werde Inhalte hinzufügen. Leere Position, absolut, links minus 20 Pixel. Oben minus 20 Pixel, Rate minus 20 Pixel und unten minus 20 Pixel ebenfalls. Dann werden wir eine Grenze zu diesem vor Pseudo-Element hinzufügen. Also werde ich sagen, Grenze, ein Pixel, solide und unsere grüne Farbe. Alles klar, jetzt können Sie sehen, dass wir unsere Grenze um die zuvor haben. Und der Abstand genau hier zwischen der Grenze und dem Puls-Div ist gleich 20 Pixel. Und das wird, weil wir hier links, oben, rechts und unten minus 20 Pixel hinzugefügt haben. Wenn wir also diese Minuspunkte auf der linken Seite auf 0 ändern, können Sie sehen, dass der Rand jetzt den linken Rand des Puls div berührt. Lassen Sie uns das wieder minus 20 Pixel machen. Und wir wollen eine kreisförmige Grenze. So werden wir Border-Radius 50 Prozent hinzufügen. Und jetzt werden wir diese Grenze animieren, um uns den Pulseffekt zu geben, den wir zu erzielen versuchen. Also werde ich eine neue Animation erstellen und sie pulsierend nennen. Und innerhalb davon bei 0% der Animationsdauer, werde ich transformieren, skalieren 0.5 und Deckkraft 0 hinzufügen . Dann bei 50 Prozent. Ich werde das kopieren und die Skala in eins und die Deckkraft in eins ändern. Dann bei 100% ändere ich die Skala auf 1,2, also wird sie größer und die Deckkraft auf 0, so dass wir verschwinden. Was hier passieren wird, ist, dass der Rand bei der Hälfte seiner Größe und einer Deckkraft von 0 beginnt , dann wird er größer, bis er seine ursprüngliche Größe und eine Deckkraft von eins erreicht, dann wird er noch größer und die Deckkraft wird wieder 0 sein, was bedeutet, dass es verblassen wird. Mal sehen, ob wir diesen Effekt erzielen können. Erster. Lassen Sie uns die Animation zum Rahmen hinzufügen. Ich gehe hier hoch und füge Animation hinzu 1,5 Sekunden pulsiert, linear und unendlich. Jetzt können Sie sehen, dass es größer wird und dann verschwindet. Okay, fügen wir noch eine Grenze hinzu. Ich werde hier gehen und Komma hinzufügen. Dann werde ich ein After-Pseudo-Element neben ihnen hinzufügen. Vorher. Dann wollen wir, dass sie ihre Animationen nacheinander starten. Also werde ich hier Rang gehen und das After-Pseudo-Element allein anvisieren. Und ich werde Animationsverzögerung 0,5 Sekunden hinzufügen. Und jetzt können Sie sehen, dass sie einen nach dem anderen beginnen und uns den Effekt geben, den wir wollten. 90. 94 – Einfache Bilder Slider mit Css-Animationen: Hallo an alle. In dieser Lektion werden wir diesen einfachen Bildschieberegler mit CSS-Animation erstellen. Die Idee hinter diesem Bildschieberegler ist sehr einfach, also lassen Sie uns sehen, wie wir es tun können. Zunächst werde ich hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Schieberegler gebe. Dann werde ich zu meinem CSS gehen und ich werde in den Body-Selektor gehen und Hintergrundfarbe hinzufügen. Diese dunkelgraue Farbe. Dann werde ich das div mit der Klasse des Schiebereglers anvisieren. Und ich werde Breite 800 Pixel, Höhe 400 Pixel, dann Hintergrund, URL hinzufügen . Und ich werde das erste Bild hinzufügen. Jetzt müssen wir unsere Animation erstellen, aber anstatt dass ihr mir zuschaut, werde ich die Aufnahme pausieren und sie hinzufügen. Dann werde ich erklären, wie es funktioniert. Also halten Sie sich fest. Willkommen zurück. So können Sie sehen, dass ich die Animation erstellt und gab ihm die Namensänderung BG. Die Idee hinter diesem einfachen Schieberegler ist, dass wir das Hintergrundbild des Div-Schiebereglers ändern werden. So können Sie sehen, dass bei 0% der Hintergrund das erste Bild ist und bis zu 20% der Animationsdauer so bleibt . Dann ändert sich der Hintergrund von 20 Prozent auf 25 Prozent vom ersten zum zweiten Bild. Und das zweite bleibt bis zu 45 Prozent der Animationsdauer, an diesem Punkt ändert es sich in das dritte Bild usw., bis alle Bilder angezeigt werden. Also lassen Sie uns diese Animation zum Schieberegler div hinzufügen. Ich werde hier gehen und Animation hinzufügen. Dann ändern Sie die Animation Namen BG, Dann 10 Sekunden, linear und unendlich. Und jetzt, wenn ich zum Browser gehe und das erste Bild neu lade, um eine Weile zu bleiben, dann erscheint das zweite Bild und bleibt für eine Weile. Dann die dritte und so weiter, bis die Animation beendet ist. 91. 95 – Hintergrundfarbe mit CSS-Animationen ändern: Hallo an alle. In dieser Lektion werden wir diese endlos wechselnde Hintergrundfarbe erstellen. Wie Sie sehen können, ändert sich die Hintergrundfarbe des Körpers reibungslos. Die Idee hinter diesem Effekt ist sehr einfach. Also lasst uns eintauchen und sehen, wie wir es schaffen können. Zunächst werde ich hier in meinem HTML gehen und ich werde ein H1 hinzufügen. Und im Inneren werde ich sagen geändert, dann BR-Tag, dann Hintergrundfarbe. Dann werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde das H1 anvisieren. Dann werde ich Schriftgröße 70 Pixel hinzufügen. Dann möchte ich den Text zentrieren. Also werde ich Text hinzufügen, ausrichten, zentrieren, dann Steuern transformieren, Großschreibung und Farbe weiß. Gut. Nun, um diese wechselnde Hintergrundfarbe zu erstellen, müssen wir eine neue Animation erstellen und so viele Schritte erstellen, wie wir brauchen. Und bei jedem Schritt werden wir die Hintergrundfarbe ändern. Also lasst uns sehen, wie wir das tun können. Ich werde hier gehen und eine neue Animation erstellen. Und ich werde es G nennen, ändern. Dann bei 0%, werde ich Hintergrundfarbe hinzufügen, diese schöne Farbe. Dann kopiere ich das, füge es wieder ein und 20 Prozent. Ich werde die Hintergrundfarbe in eine andere Farbe ändern. Gut. Jetzt unterbreche ich die Aufnahme und füge die anderen Schritte hinzu. Und willkommen zurück. Hier habe ich die anderen Schritte mit neuen Hintergrundfarben und 40%, dann 60%, dann bei 80 Prozent und schließlich bei 100% hinzugefügt dann 60%, dann bei 80 Prozent . Also müssen wir unsere Animation dem Körper hinzufügen. Also werde ich hier rauf gehen und Animationen hinzufügen. Dann ändert sich der Animationsname BG. Wenn die Dauer der Animation. Versuchen wir es zehn Sekunden. Wenn die Animation Iteration zählen unendlich, natürlich, Grad. Werfen wir nun einen Blick auf unsere Animation. Ich werde die Seite neu laden, wenn die Animation beginnen soll. So können Sie sehen, dass sich die Hintergrundfarbe reibungslos von einer Farbe zur nächsten ändert und so weiter und so weiter. Und es wird dies weiter tun, weil wir gesagt haben, dass die Animation Iteration unendlich zählt. Eine kleine Notiz hier. Wenn Sie sich die Animation, die wir erstellt haben, genau ansehen werden Sie feststellen, dass die Hintergrundfarbe am Anfang der Animation am Ende der Animation gleich ist. Und das liegt daran, wenn die Animation ihren ersten Zyklus beendet hat, wird sie von vorne beginnen. Und die letzte Farbe hier würde sich auf die erste Farbe ändern. Also, wenn sie nicht die gleiche Farbe ändern, wird nicht glatt sein. Zum Beispiel ändern wir diese letzte Farbe in, sagen wir grün. Dann geh und lade wieder. Dann warten wir, bis die Animation beendet ist. Und hier können Sie sehen, dass die Veränderung nicht reibungslos geschieht. Also sollten wir es zurück in die erste Farbe ändern und alles wird gut. Das ist es also für diese Lektion. Es war eine sehr einfache und Sie können so viele Farben verwenden, wie Sie wollen. So können Sie die Farbe beispielsweise alle 10 Prozent der Animationsdauer ändern. So würden Sie am Ende mit 10 verschiedenen Farben. Sie können auch die Zeit, die jede Farbe auf dem Bildschirm verbleibt, steuern , indem Sie die Animationsdauer ändern. 92. 96 – newtons Wiege mit CSS-Animationen: Hallo an alle. In dieser Lektion werden wir diesen Newton Cradle Effekt mit CSS-Animationen erstellen. Ich denke, das wäre eine interessante Lektion, also lasst uns sehen, wie wir das erreichen können. Zuallererst werde ich hier zu meinem HTML gehen, und ich werde ein div hinzufügen und ihm eine Klasse von Wiege geben. Dann werde ich im Inneren fünf leere Spannweiten hinzufügen, so dass jede Spannweite wie ein Arm der Wiege sein würde. Dann werde ich zu meinem CSS gehen, um dies wie unsere Demo aussehen zu lassen. Wir werden damit beginnen, alle Spannweiten innerhalb des div mit der Klasse der Wiege anzusprechen. Also werde ich sagen Wiege Spanne. Und ich werde fortfahren, indem ich die Anzeigeeigenschaft dieser Spannen so einstelle, dass sie Blockelemente werden. Auf diese Weise können wir ihnen Breite und Höhe hinzufügen. Dann werde ich Breite, drei Pixel hinzufügen. Und das wird die Breite der Arme der Wiege sein, dann Höhe, 300 Pixel und Hintergrundfarbe, weiß. Also, wenn ich gehe und meinen Browser neu lade, können Sie sehen, dass wir alle Spannweiten haben und sie sitzen übereinander. Da wir die display-Eigenschaft auf blockieren setzen, müssen wir sie so ausrichten, dass sie nebeneinander stehen und nicht von oben nach unten. können wir ganz einfach mit unserer guten Freundin Flexbox tun. Also werde ich hier in mein CSS gehen und ich werde ihren Container anvisieren, der die Klasse der Wiege hat. Und ich werde nur sagen Display Flex. Jetzt können Sie sehen, dass sie alle nebeneinander sitzen. Aber wir müssen sie trennen. Das bedeutet, dass wir ein wenig Platz zwischen ihnen hinzufügen müssen. Also werde ich in den Span-Selektor gehen und ich werde Rand 0 von oben und unten und 30 Pixel von links und rechts hinzufügen . Und jetzt können Sie sehen, dass sie einige Abstände haben. Großartig. Nun gehen wir zum Wiegen-Selektor und fügen Rand, Top 10 Pixel, einfarbig weiß. Und Sie können sehen, dass wir näher an das kommen, was wir wollen. Jetzt müssen wir an den Kreisen der Wiege arbeiten. Ich werde sie mit dem vorher Pseudo-Element erstellen. Also werde ich die Spannweiten wieder anvisieren. Und ich werde es vorher sagen. Dann werde ich Inhalt hinzufügen, leer, dann Position, absolut. Und dann lassen Sie uns tatsächlich hier gehen, um den Selektor zu überspannen und Position relativ hinzuzufügen , so dass die Kugeln oder Kreise relativ zu unseren Spins sein werden. Dann werde ich hier runter gehen und unten 0 hinzufügen , weil wir wollen, dass sie am Ende unserer Spannweiten liegen, natürlich. Dann links auch 0. Breite 60 Pixel, Höhe 60 Pixel. Wir brauchen, dass sie die gleiche Breite und Höhe haben, so dass sie Quadrate y sein werden, denn dann können wir sie leicht Kreise machen, indem wir nur Randradius hinzufügen. 50 Prozent. Dann schließlich werde ich Hintergrundfarbe hinzufügen, auch weiß. Okay, jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass wir die vorherigen Pseudo-Elemente für jede Spanne haben und sie sitzen am unteren Rand ihrer Spannweite, natürlich, weil wir unten 0 hinzugefügt haben. Aber jetzt müssen sie in jeder Spanne zentriert sein. Also, was wir tun können, ist, dass wir sie nach links verschieben können, so dass es zentriert ist, genau wie in unserer Demo. Also werde ich hier gehen und transformieren hinzufügen, x minus 50% übersetzen, so dass sie um die Hälfte ihrer Breite, die 30 Pixel ist, nach links verschoben die 30 Pixel ist werden und genau so zentriert werden. Aber Sie können sehen, dass es ein wenig Abstand zwischen den Kreisen gibt, die sie voneinander getrennt aussehen lassen. Lassen Sie uns also direkt hier in der Spanne Selektor gehen und diesen 30 Pixel-Rand auf 29 Pixel verringern. Da gehen wir. Sie berühren einander und es gibt keinen Raum zwischen ihnen. Großartig. Jetzt müssen wir an unserer Animation arbeiten, damit diese Wiege tatsächlich funktioniert. Also habe ich eine wirklich langsame Demo direkt hier von der Wiege, die uns sehen lässt, was klar passiert. Du musst hier vorerst den rechten Arm ignorieren und hier nur auf den linken Arm achten. Werfen Sie einen Blick auf seine Bewegung. Ich werde den Browser neu laden. Und Sie können sehen, dass der erste Arm von seiner ursprünglichen Position beginnt und um 60 Grad im Uhrzeigersinn dreht, dann dreht sich wieder in seine ursprüngliche Position. Tage für eine Weile, bis der zweite Arm zurückkehrt und dann den Vorgang wiederholt. So werden wir drei Stufen für die Animation des ersten Arms haben. In der ersten Stufe dreht sich der Arm im Uhrzeigersinn um 60 Grad und kehrt dann in der zweiten Stufe in seine ursprüngliche Position zurück. Und dann in der letzten Phasebleibt es noch in seiner ursprünglichen Position, bleibt es noch in seiner ursprünglichen Position bis der zweite Arm geht und seine Rotation abgeschlossen hat. Also lassen Sie uns tatsächlich diese drei Stufen erstellen. Ich werde hier gehen und eine neue Animation erstellen. Nennen Sie es linken Arm. Dann innerhalb davon werde ich sagen, dass ich bei 0% transformieren werde, 0 Grad drehen werde. Dann wird eine 25-prozentige Transformation um 60 Grad gedreht, so dass sich der Arm um 60 Grad im Uhrzeigersinn dreht. Dann mit 50 Prozent möchte ich, dass es wieder in seine ursprüngliche Position zurückkehrt. Also werde ich sagen Transformieren, Drehen Sie 0 Grad. Und ich möchte, dass es in dieser Position bleibt, bis der rechte Arm seine Rotation beendet hat. Also werde ich sagen, dass bei 100% auch „ Transform Drehen“ 0 Grad. Von 50 Prozent bis 100% der Animationsdauer werde ich dem linken Arm mitteilen, dass er Rotation 0 hat, was bedeutet, dass er in seiner Position bleibt. Cool. Jetzt möchten wir diese Animation zum linken Arm hinzufügen, also werde ich die Spanne anvisieren. Dann das erste Kind, das natürlich den linken Arm für uns auswählt. Dann füge ich Animation, linken Arm hinzu und füge eine Animationsdauer von zwei Sekunden hinzu. Dann lassen Sie sich einfach rein. Und unendlich. Dann werde ich gehen und neu laden. Und Sie können sehen, dass sich der linke Arm dreht, aber er dreht sich um seinen Mittelpunkt. Das ist natürlich völlig normal, denn das ist die Standardeinstellung, aber wir wollen, dass es von seinem oberen Punkt direkt hier dreht. Wir können damit umgehen. Kein Problem, indem Sie einfach hier in den Span-Selektor gehen und Transformationsursprung hinzufügen. Und jetzt können Sie sehen, dass der linke Arm so dreht, wie wir wollen. Es dreht sich um 60 Grad im Uhrzeigersinn, kehrt dann in seine Position bleibt für eine Weile. Wiederholt dann den Vorgang erneut. In Ordnung. Werfen wir nun einen Blick auf den rechten Arm. Ich werde wieder zu unserer langsamen Demo gehen. Und diesmal möchte ich, dass du auf den rechten Arm schaust. Wenn ich nachlade, kann man sehen, dass der rechte Arm in seiner Position bleibt und sich erst bewegt, wenn sich der linke Arm dreht und zurückkehrt. Und sobald er zurückkehrt, beginnt sich der rechte Arm gegen den Uhrzeigersinn um 60 Grad zu drehen. Das bedeutet, dass wir die Animationsverzögerungseigenschaft auf dem rechten Arm verwenden , um es warten zu lassen, bis der linke Arm seine Aktion abgeschlossen hat. Lasst uns wieder laden. Es wartet also. Dann beginnt sich zu drehen, endet und bleibt dann still, bis der linke Arm fertig ist, wiederholt dann den gesamten Prozess. Also lassen Sie uns diese Animation erstellen. Ich werde hier gehen und eine neue Animation erstellen. Nennen Sie es den rechten Arm. Dann werde ich, kann das nicht alles sein. Fügen Sie es wieder hier ein und ändern Sie einfach 60 Grad auf minus 60 Grad. Dann gehe ich hierher, kopiere das, füge es wieder ein und ändere das erste Kind in das letzte Kind. Dann ändere ich den Animationsnamen in den rechten Arm statt auf links. Lassen Sie alles wie es ist, und fügen Sie eine Animationsverzögerung von 1 Sekunde hinzu. Was passiert, wenn ich neu lade, ist, dass sich der linke Arm sofort nach links dreht , und es dauert 50 Prozent der Animationsdauer, um zu drehen und zurückzukehren. Mit anderen Worten, es wird 1 Sekunde dauern. der Zwischenzeit wird der rechte Arm diese 1 Sekunde warten , da er eine Animationsverzögerung von 1 Sekunde hat. Und dann beginnt es nach rechts zu drehen, nimmt die Hälfte seiner Animationsdauer, auch 1 Sekunde, um seine Aktion abzuschließen und zurückzukehren. Während dieser Zeit. Diese 1 Sekunde, die wiederum die Hälfte dieser Animationsdauer ist. Der linke Arm wird warten und diese Wartezeit für die Hälfte bewegt ihren halben Prozess wird für immer fortgesetzt. 93. 97 – schönes Ladeeffekt mit CSS-Animationen: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diese schöne vorinstallierte erstellen. Sie können sehen, dass wir vier Quadrate haben. Alle von ihnen sind um 45 Grad gedreht und sie haben diesen Effekt. Sie bewegen sich voneinander weg, alle drehen sich um 90 Grad als eine Einheit und kommen dann wieder zusammen. Und das wird vorbei passieren. Und das ist eine schöne Animation und es ist einfach zu tun. Eine grundlegende Zusammenfassung dessen, was wir tun werden, ist, dass wir ein Container-Div erstellen , das alle vier Quadrate darin enthält. Dann werden wir die Positionswerte für jedes Quadrat ändern, um die Foursquare zum äußeren div zu machen und den gesamten verfügbaren Platz einzunehmen. Dann drehen wir das äußere div, das alle vier Quadrate damit dreht. Und danach werden wir unsere erste Animation erstellen, in der wir die Höhe und Breite des Container-div ändern werden, wodurch sich die vier inneren Quadrate voneinander entfernen und dann zueinander zurückkehren. Und schließlich werden wir unsere zweite Animation erstellen , die die vier Quadrate selbst drehen wird. Mal sehen, wie wir das schaffen können. Vielleicht klang es nach viel, aber ich verspreche, es wird sehr einfach sein, wenn wir anfangen, es zu tun. Zuerst werde ich hier in meinem HTML beginnen, indem ich unser div hinzufüge und ihm eine Klasse von Containern gebe. Dann werde ich vier Spannen darin hinzufügen, und das werden die vier Quadrate innerhalb des Container-div sein. Danach werde ich zu meinem CSS gehen, um einige Stile hinzuzufügen. Ich werde damit beginnen, das div mit der Klasse des Containers zu zielen. Dann werde ich Breite 100 Pixel, Höhe 100 Pixel hinzufügen. Und wir werden eine temporäre Hintergrundfarbe von Rot hinzufügen. Und dann werde ich endlich Position relativ hinzufügen. So jetzt können Sie sehen, dass wir nur ein rotes Quadrat mit der Breite und Höhe von 100 Pixeln haben. wir vorangehen, werden wir jetzt an den vier Spannen innerhalb des Container-div arbeiten. Lassen Sie uns zuerst einige allgemeine Stile zu allen hinzufügen. Ich werde die Spanne anvisieren, und ich werde Position hinzufügen. Absolute Breite, 50 Pixel. Höhe 50 Pixel. Sie können sehen, dass sich nichts geändert hat, weil wir keine Hintergrundfarbe hinzugefügt haben. Also lasst uns jede Spanne einzeln anvisieren. Um das zu tun, werde ich hier gehen und Span in Kind sagen. Und ich werde den ersten anvisieren. Dann werde ich Tab 0 hinzufügen, links 0 auch. So wird die Spannweite in der oberen linken Ecke des Containers sein. Dann werde ich unten eine Hintergrundfarbe hinzufügen. Diese schöne gelbe Farbe. So können Sie jetzt sehen, dass das erste Quadrat oben auf dem roten Container mit der Breite und einer Höhe von 50 Pixeln sitzt , was die Hälfte der Containerbreite und -höhe ist. Und es ist in der oberen linken Ecke. Da wir links und oben auf 0 gesagt haben, werden wir das gleiche für alle drei anderen Quadrate tun, und wir werden sie in einer Weise positionieren, die sie vollständig den roten Behälter bedeckt machen. Also werden wir das nächste neben diesem gelben Quadrat positionieren, und die restlichen zwei werden unter ihnen positioniert. Richtig? Ich werde zurück in mein CSS gehen, um das zweite Quadrat anzusprechen. Also werde ich sagen, Spanne und Kind 2. Und ich werde Top 0 und rechts 0 hinzufügen. Dann Hintergrundfarbe, diese grüne Farbe. Jetzt können Sie sehen, dass wir die grünen Quadrate neben dem gelben sitzen. Da wir gesagt haben, es ist richtig Eigentum auf 0. Ehrfürchtig. Nun lasst uns an den anderen beiden Quadraten arbeiten. Ich werde zu meinem CSS zurückkehren und diesen Codeblock kopieren. Fügen Sie es zweimal erneut ein. Und ich werde die dritte Spanne anvisieren und oben hier unten wechseln. Dadurch wird es auf der linken Seite des Behälters unter dem ersten Quadrat positioniert. Ich werde auch seine Hintergrundfarbe zu dieser schönen rötlichen Farbe ändern. Dann werde ich die vierte Spanne anvisieren und von oben nach unten und von links nach rechts wechseln. So wird es in der unteren rechten Ecke des Containers unterhalb des grünen Hintergrunds positioniert . Dann werde ich Farbe hinzufügen, diese blaue Farbe. Alles klar, jetzt können Sie sehen, dass wir die vier Quadrate haben , und sie decken den roten Behälter vollständig ab. Beginnen wir nun mit der Animation des Containers. Wir werden seine Breite und Höhe animieren, um es größer als kleiner zu machen. Wieder werde ich hier gehen und eine neue Animation erstellen. Und ich werde es einfach animieren nennen. Dann in ihm, bei 0% der Animationsdauer, werde ich sagen, Breite 100 Pixel und Höhe 100 Pixel als auch. So wird der Container in seiner ursprünglichen Größe beginnen. Dann kopiere ich das, füge es ein. Und bei 10 Prozent der Animationsdauer werde ich die Werte der Breite und Höhe so belassen, wie sie sind, was 100 Pixel beträgt. Auf diese Weise bleibt der Container vom Beginn der Animation bis zu 10% der Animationsdauer in seiner ursprünglichen Größe, bevor er größer wird. Dann werde ich das noch einmal einfügen. Und bei 50% der Animationsdauer werde ich nun den Containerquadrat größer machen. Ich werde die Breite auf 150 Pixel anstelle von 100 ändern. Und dann die Höhe auf 150 Pixel als auch. Dann fügen Sie erneut ein. Und bei 90 Prozent werde ich die Breite und die Höhe 100 Pixel machen. Dann schließlich, bei 100%, werde ich auch die Breite und Höhe als 100 Pixel belassen. Im Grunde genommen wird der Wandel in der Wissenschaft von 10 Prozent auf 90 Prozent der Animationsdauer auftreten . Es wird größer, dann gehen Sie zurück zu seiner ursprünglichen Größe. Also lassen Sie uns diese Animation zum roten Container hinzufügen. Ich werde hier in den Container-Selektor gehen. Und ich werde Animation hinzufügen, 1 Sekunde animieren, linear und unendlich. Also, wenn ich gehe und den Browser neu lade, können Sie sehen, dass der rote Container größer wird und die vier inneren Quadrate voneinander trennt, dann wieder kleiner wird und zu seiner ursprünglichen Größe zurückkehrt. Cool, aber wir sind noch nicht fertig. Wir wollen das rote Quadrat um 45 Grad drehen. Also werde ich direkt hier in den Container-Selektor zurückkehren, und ich werde Transformation hinzufügen, 45 Grad drehen. Jetzt können Sie sehen, dass sich der Behälter um 45 Grad dreht und alle vier Quadrate mit ihm drehen, weil sie darin sind. Wir brauchen diesen roten Hintergrund nicht mehr. Also werde ich hierher zurückgehen und es entfernen. Ehrfürchtig. Jetzt haben wir nur noch eins übrig, nämlich die Quadrate zu drehen, während sie sich voneinander wegbewegen. Dies wird einfach zu tun sein. Lassen Sie uns also die Animation erstellen, die dafür verantwortlich ist. Ich werde hier gehen und eine neue Animation erstellen. Und ich werde es nennen, drehen. Dann kopiere ich alle Stufen der ersten Animation und füge sie in die Drehanimation ein. Und bei 0% werde ich das entfernen und Transformieren Drehen 0 Grad. Dann wird es bei 10 Prozent wieder 0 Grad sein. Und bei 50 Prozent werde ich es auf 90 Grad ändern, so dass jedes Quadrat um 90 Grad gedreht wird. Dann bei 9100% werde ich es wieder um 90 Grad gedreht lassen. Ich will nicht, dass es sich zurückdreht. Ich wollte nur um 90 Grad gedreht bleiben. Cool. Lassen Sie uns diese Animation zu unseren Quadraten hinzufügen. Ich werde hier in der Spanne Selektor gehen und Animation hinzufügen. Drehen. 1 Sekunde, linear und unendlich. Ehrfürchtig. So können Sie jetzt sehen, dass die vier Quadrate um 90 Grad drehen , während sie weit voneinander entfernt sind, dann gehen Sie zurück zueinander, unseren coolen kleinen Effekt zu vervollständigen. 94. 98 – Quadrate Effekt mit CSS-Animationen: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir lernen, wie man diese schöne Vorspannung oder Animation erstellt. Sie können sehen, dass wir drei Quadrate hatten und sie bewegen sich, als würden sie einander jagen. Ich möchte, dass Sie sich nur einen von ihnen genau ansehen. Und Sie werden feststellen, dass jeder sich nur in einem normalen Pfad bewegt, tatsächlich ein Pfad eines anderen Quadrats. Und sie bewegen sich alle auf dem gleichen Weg. Der einzige Unterschied besteht darin, dass alle eine andere Animationsverzögerungseigenschaft haben. Sie bewegen sich also nacheinander erzeugen diesen Jagdeffekt. Also lasst uns anfangen, das zu schaffen. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Loader gebe. Dann werden wir drei Spannen hinzufügen, und das sind die drei Quadrate, die das vorgeladene erstellen. Dann werde ich zu meinem CSS gehen. Zuerst werde ich das Container-div anvisieren, das eine Klasse von Loader hat. Und ich werde Breite, 150 Pixel, Höhe 150 Pixel als auch hinzufügen . Position relativ. Dann darunter werde ich die Spannen in diesem Container-div anvisieren. Und ich werde Position hinzufügen. Absolute Breite, 50 Pixel. Höhe 50 Pixel ebenfalls. Hintergrund, weiß. Und schließlich Grenze Radius, vier Pixel. So jetzt können Sie sehen, dass wir ein Quadrat mit einer Höhe und Breite von 50 Pixeln haben. Und das sind eigentlich drei Spannweiten, die übereinander sitzen. Lassen Sie uns nun daran arbeiten, unsere Animationen zu erstellen. Ich werde zu meinem CSS gehen und eine neue Animation erstellen und es Chase nennen. Dann in ihm bei 0% der Animationsdauer, oder am Anfang, werde ich oben 0 hinzufügen, links 0. Das bedeutet also die Quadrate. Wir beginnen in der oberen linken Ecke ihres Containers. Dann unten, bei 12,5% der Animationsdauer, werde ich Top 0 hinzufügen und 50% links. Jetzt werden die Quadrate um 50% der Containerbreite nach rechts verschoben. Dann darunter. Und bei 25 Prozent werde ich die Top 0 links hinzufügen, 50 Prozent. Sie können also sehen, dass sich die Werte nicht von 12,5% der Animationsdauer auf 25 Prozent ändern . Und das ist, weil wir wollen, dass die Plätze für eine Weile an ihrem Platz bleiben , bevor sie zur nächsten Position gehen. Dies wird den Effekt nur schöner aussehen lassen. Jetzt pausiere ich das Video und füge die anderen Stufen hinzu. Dann werde ich erklären, was ich getan habe. So 25 Prozent der Animationsdauer, haben wir 37,5% hinzugefügt, Top 50 Prozent hinzugefügt und 50 Prozent verlassen. Die Quadrate bewegen sich also von der rechten oberen Ecke in die untere rechte Ecke bleiben dann für eine Weile an diesem Ort, bis wir 50 Prozent der Animationsdauer erreichen. Und darunter haben wir bei 62,5% der Animationsdauer wieder links auf 0 gewechselt. Die Quadrate befinden sich also in der unteren linken Ecke des Containers und bleiben in dieser Position bei 75 Prozent. Dann kehren sie bei 87,5% der Animationsdauer wieder in die obere linke Ecke zurück. Und bleiben Sie an diesem Ort, bis die Animation beendet ist. Und das machen wir für immer weiter. Also lassen Sie uns hier in der Span-Selektor gehen und diese Animation hinzufügen. Ich gehe hier und füge Animation hinzu. Verjagen. Zwei Sekunden, linear und unendlich. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass sich die Quadrate bewegen und einen quadratischen Pfad, und sie alle bewegen sich zusammen. Sie erscheinen also als ein Quadrat. Nun, um sie als drei separate Quadrate erscheinen zu lassen, Wir können Animationsverzögerung verwenden. Um das zu tun. Ich werde das zweite Quadrat anvisieren, indem ich hier gehe und span n-te Kind auch sage. Und ich werde Animationsverzögerung hinzufügen, 0.700 Sekunden. Dann kopiere ich das, füge es erneut und wähle das dritte Quadrat und füge die Animationsverzögerung 1,4 Sekunden hinzu. Und jetzt, wenn ich zu meinem CSS gehe und neu lade, können Sie sehen, dass sich die drei Quadrate nacheinander bewegen, was uns genau den Ladeeffekt gibt, den wir wollten. 95. 99 – text mit CSS-Animationen: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen vorinstallierten Text-Animationseffekt erstellen. Sie können also sehen, dass wir hier ein H1 haben, und es ist irgendwie von diesem gelben Text darüber verdeckt. Mal sehen, wie wir das tun können. Ich werde hier in meinem HTML beginnen, indem ich ein H1 hinzufüge. Und ich werde nur sagen, laden. Dann werde ich zu meinem CSS-Ziel gehen, dieses. Und ich werde Schriftgröße 40 Pixel hinzufügen. Rand, 0, Polsterung, 0. Texttransformation, Großbuchstaben, Buchstabenabstand, zehn Pixel, Farbe, weiß. Und schließlich Position relativ. Jetzt können Sie sehen, dass wir unser weißes H1 haben und es sieht ziemlich gut aus. Nun, lasst uns an den gelben Texten arbeiten, die es verdecken. Wir werden das vor Pseudo-Element verwenden, um diesen gelben Text zu erstellen. Also werde ich gleich hierher gehen und vorher einen Doppelpunkt sagen. Und darin werde ich Inhalte laden, weil wir das gleiche Wort wollen. Natürlich. Dann positionieren Sie absolut , oben, 0, links 0 als auch. Breite: 100%. Und Farbe. Diese schöne gelbe Farbe. Jetzt können Sie sehen, dass das H1 jetzt gelb ist, und das liegt daran, dass es jetzt durch den gelben Text bedeckt ist, der das vorherige Pseudo-Element ist. In Ordnung, lasst uns weiter arbeiten. Ich werde genau hier in das vorher Pseudo-Element gehen und Überlauf hinzufügen. Versteckt. Dann Grenze, richtig? Vier Pixel, solide. Und unsere gelbe Farbe. Cool. So jetzt können Sie sehen, dass der Text einen rechten Rahmen hat, der sich mit ihm bewegt und den weißen Text mit dem gelben füllen wird . Und jetzt müssen wir nur daran arbeiten, diesen gelben Text zu animieren. Ich werde wieder zu meinem CSS gehen und eine neue Animation erstellen. Und ich werde es animieren nennen. Dann werde ich bei 0% der Animationsdauer Breite 0 hinzufügen. Dann fügen Sie 50 Prozent hinzu. Ich werde die Breite 100% machen. Und schließlich, bei 100%, werde ich die Breite wieder auf 0 setzen. Was diese Animation also tun wird, ist, dass die gelben Tags bei einer Breite von 0 beginnen, dann wird ihre Breite erhöht, bis sie 100% des weißen Textes wird, wodurch sie es vertuschen wird. Dann wird seine Breite wieder 0 sein, und es wird bis zum Ende der Animation verkleinert. Und das wird weiter unendlich passieren, weil wir natürlich Anzahl der Animationsiterationen auf unendlich setzen. Also lassen Sie uns diese Animation zum gelben Hintergrund hinzufügen. Ich gehe hier hoch und füge Animation hinzu. Animieren. Fünf Sekunden, linear und unendlich. Jetzt können Sie sehen, dass der gelbe Text größer wird und den weißen Text verdeckt. Dann schrumpft es wieder. Und es macht das unendlich gibt uns dieses schöne vorinstallierte. 96. 100 – ring mit CSS-Animationen: Hallo an alle. In dieser Lektion werden wir diesen schönen Loader-Effekt erstellen. Sie können sehen, dass wir das Wort laden in diesem Ring haben, der um ihn dreht. Mal sehen, wie wir das schaffen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge ihm eine Klasse von Containern gebe. Diese Klasse enthält also den Ring und den Text. Dann werde ich ein anderes div hinzufügen, ihm eine Klasse von Text geben. Und ich werde das Laden in diesem div schreiben. Dann werde ich unten ein anderes div hinzufügen, ihm eine Klasse von Ring geben. Und das wird der Ring sein, der sich um den Text dreht. Dann gehe ich zu meinem CSS, um diesen Ladeeffekt zu erstellen. Ich beginne zuerst, indem ich das div mit der Klasse des Containers anspreche. Dann werde ich Position, relative Breite, 200 Pixel, Höhe 200 Pixelsowie 200 Pixel hinzufügen relative Breite, 200 Pixel, Höhe 200 Pixel . Jetzt hat das Container-Div eine Breite und eine Höhe von 200 Pixeln, und es ist horizontal und vertikal im Browser aufgrund des Flexbox-Codes hier im Körper zentriert . Alles klar, jetzt werde ich das Div mit der Klasse des Rings anvisieren. Und ich werde seine Breite auf 100% und seine Höhe auch auf 100% einstellen. Es braucht also die gleiche Breite und Höhe wie sein Container. Dann werde ich diesem Ring div einen temporären Hintergrund hinzufügen. Also werde ich Hintergrundfarbe hinzufügen, rot. Danach werde ich Rand links hinzufügen. Vier Pixel, solide. Diese dunkelgraue Farbe. Jetzt können Sie sehen, dass der Ring div einen roten Hintergrund und einen dunkelgrauen linken Rand hat. Lassen Sie uns diesen Ring div zu einem Kreis machen. Also werde ich hierher zurückgehen und den Grenzradius hinzufügen, den Prozentsatz. Und jetzt können Sie sehen, dass der Ring div jetzt ein Kreis ist, der einen linken Rand hat. Und dieser linke Rand wird der Ring sein, der sich um das Wort lädt. Also brauchen wir diesen roten Hintergrund nicht mehr. Deshalb werde ich zurückgehen und diese Codezeile entfernen. Jetzt, richtig? Jetzt können Sie sehen, dass wir diese linke Grenze für sich haben. Und so schaffen wir den Ring, ist nur eine Seite Rand eines Kreises. In Ordnung, Lassen Sie uns diesen Text stylen, damit er besser aussieht. Ich werde das div mit der Klasse des Textes anvisieren. Und ich werde Position, absolut, oben, 0, links 0 als auch hinzufügen . Dann Breite, 100%, Höhe 100%. Und um den Text in ihm horizontal zu zentrieren, werde ich Text ausrichten Mitte hinzufügen. Dann, um es vertikal zu zentrieren, werde ich Zeilenhöhe, 200 Pixel hinzufügen. Und jetzt ist das Laden des Wortes innerhalb des Textes div zentriert. Lasst uns weiter arbeiten. Ich werde hierher zurückgehen und Schriftgröße, 22 Pixel, Schriftgewicht, fett hinzufügen . Und schließlich, Text transformieren Großbuchstaben. So sieht der Text jetzt genau so aus, wie wir wollen. Wir haben noch eine Sache zu tun, nämlich den Ring hier zu drehen. Also lasst uns das machen. Gehen Sie zurück zu meinem CSS und erstellen Sie eine neue Animation. Dann werde ich es benennen, drehen. Dann in ihm bei 0% der Animationsdauer, werde ich Transformation hinzufügen, 0 Grad drehen. Dann bei 100%, werde ich Transformation hinzufügen , 360 Grad drehen. So wird der Ring während der Animationsdauer eine volle Rotation machen. Dann werde ich hier in das Ringdiv gehen, um diese Animation hinzuzufügen, ich werde Animation hinzufügen, drehen, dann Animationsdauer von 1 Sekunde, dann linear. Und schließlich unendlich, so dass der Ring sich um sich dreht. Und jetzt, wenn ich zurückgehe und neu lade, können Sie sehen, dass der linke Rand beginnt sich um den Text zu drehen und gibt uns den Ladeeffekt, den wir wollen. 97. 101 – line mit CSS-Animationen: Hallo an alle. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Linienladeeffekt erzeugen. Und um zu sehen, was passiert, nun, schauen wir uns eine langsamere Demo dieses Ladeeffekts an. Ich werde die Seite neu laden und Sie können die Linie Skalen sehen oder wächst von links nach rechts. Dann schrumpft es auch von links nach rechts. Dann wächst es wieder von rechts nach links. Und schließlich schrumpft es auch von rechts nach links. Dies wird ein interessanter Effekt sein, also lassen Sie uns sehen, wie wir es schaffen können. Ich werde hier in meinem HTML gehen und ein div hinzufügen. Dann geben Sie ihm eine Klasse des Ladens. Dann werde ich zu meinem CSS gehen diese Klasse des Ladens anvisieren. Und ich werde Breite, 300 Pixel, Höhe, drei Pixel, Hintergrundfarbe, weiß hinzufügen . Jetzt können Sie sehen, dass wir unsere Linie hier haben, und jetzt ist es Zeit, sie zu animieren. Ich gehe zurück und erstelle eine neue Animation. Nennen Sie es Zeile. Und in diesem, bei 0% der Animationsdauer, werde ich Transformationsskala x 0 hinzufügen. So beginnt die Linie mit einer Skala von 0 zu wachsen. Und wir wollen, dass es von links nach rechts wächst. Das bedeutet, dass wir seine Transformationsursprungeigenschaft ändern müssen. Es ist standardmäßig zentriert, so dass wir es links machen. Also werde ich Transformationsursprung links hinzufügen. Dann füge ich bei 45 Prozent der Animationsdauer die Transformationsskala x 1 hinzu. Die Linie wird also bei 45 Prozent der Animationsdauer auf ihrer vollen Breite liegen. Es wird in dieser Dauer von nichts bis zu seiner vollen Breite skaliert, vom Beginn der Animation bis zu 45 Prozent der Animationsdauer. Deshalb müssen wir den Transformationsursprung so halten, wie er ist. Also werde ich auch den Transformationsursprung links hinzufügen. Dann möchte ich bei 50% der Animationsdauer die Skala so behalten, wie sie ist. Also werde ich Transformationskala x Morgen hinzufügen. Dann werde ich Transformationsursprung hinzufügen. Vorerst verlassen. Schließlich, bei 100% der Animationsdauer, wollen wir, dass die Linie wieder verkleinert wird. Also fügen wir Transformationsskala x 0 hinzu, dann transformieren Ursprung. Für jetzt wieder links. Okay, gehen wir nach oben und fügen diese Animation der Linie hinzu. Ich werde Animationslinie hinzufügen. Und jetzt gehen wir zum Browser und laden Sie es neu. Sie können sehen, dass die Linie von links nach rechts wächst da wir die Eigenschaft „Transformationsursprung“ auf links dann von rechts nach links zurückschrumpft. So schrumpft es auch in seinen linken Punkt. Denn beim Verkleinern setzen wir auch seine Transformationsursprungeigenschaft auf links. Es schrumpft also basierend auf seinem linken Punkt von rechts nach links. Aber das wollen wir nicht. Wir wollen, dass es von links nach rechts oder in seine rechte Seite schrumpft. Also, wie können wir das tun? Nun, sobald es vollständig skaliert ist, können wir einfach seine Transformationsursprungeigenschaft so einstellen, dass es, wenn es schrumpft , in seinen richtigen Punkt schrumpfen wird und uns den gewünschten Effekt geben wird. Also werde ich hier zurück gehen und dass 50 Prozent der Animationsdauer, Ich werde die Transformationsursprungeigenschaft von links nach rechts ändern. Und ich werde das Gleiche zu 100% tun. Und jetzt, wenn ich zurückgehe und neu lade, können Sie sehen, dass die Linie dieses Mal in ihren rechten Punkt schrumpft oder von links nach rechts. Und das ist der Effekt, den wir wollen, wenn auch richtig. Jetzt wollen wir, dass diese Animation für immer weitergeht. Also gehen wir hierher zurück und fügen unendlich hinzu. Und jetzt, wenn ich gehe und die Seite neu lade, können Sie sehen, dass die Animation geht weiter und weiter und wiederholt sich für immer. Aber es gibt ein Problem. Sobald ein Zyklus der Animation beendet ist, wird er abgeschnitten und beginnt von Anfang an links. Aber wir wollen, dass es nach der Fertigstellung umkehrt. Also nach dem Abschluss wollen wir vom Ende bis zum Anfang zurückkehren. Und wir können das tun, indem wir direkt hier neben der unendlichen Eigenschaft gehen und alternative hinzufügen. Und wenn Sie sich erinnern, alternate ist ein Wert der Animationsrichtungseigenschaft. Und es sagt nur dem Browser, die Animation von Anfang an beginnen zu lassen und zu ihrem Ende zu gehen, und dann von seinem Ende bis zu seinem Anfang und so weiter und so weiter. Wenn ich nun zum Browser zurückgehe und neu lade, können Sie sehen, dass sich die Animation nach Abschluss umgekehrt bewegt. Und genau das ist der Effekt, den wir suchen. 98. 102 – Anfängliche Linien: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diesen schönen Ladeeffekt erstellen. Es wird eine sehr einfache Lektion sein. Also lasst uns anfangen. Wir beginnen hier in meinem HTML, indem wir ein div hinzufügen und ihm eine Klasse des Ladens geben. Dann werde ich ein anderes div hinzufügen, ihm eine Klasse von OBJ geben. Dann kopiere ich dieses div, füge es sieben Mal wieder ein. In Ordnung, lassen Sie uns zu unserem CSS gehen, um den Ladeeffekt zu erzeugen. Ich werde beginnen, indem ich das div mit der Klasse 0 j anvisiere. Dann werde ich Breite sechs Pixel, Höhe 40 Pixel und Hintergrund weiß hinzufügen . Jetzt können Sie sehen, dass die acht divs untereinander sitzen , weil sie divs sind und Entwickler Blockelemente sind, was bedeutet, dass sie standardmäßig untereinander angezeigt werden. Aber wir wollen sie nebeneinander sitzen lassen. können wir leicht machen. Kein Problem, indem Sie einfach hier in meinem CSS gehen und auf ihren Container abzielen, der das div mit der Klasse des Ladens ist. Und nur das Hinzufügen von Display-Flex. Jetzt können Sie sehen, dass die acht divs nebeneinander in einer Reihe sitzen, und jedes von ihnen hat eine Breite von sechs Pixeln und eine Höhe von 40 Pixeln. Aber wir wollen etwas Raum zwischen ihnen hinzufügen. Also werde ich zum OBJ-Selektor gehen und ich werde Rand 0 von oben und unten und drei Pixel von links und rechts hinzufügen . Jetzt können Sie sehen, dass wir unserem Lader näher kommen. Wir müssen nur die Ecken ein wenig abgerundet machen. Also werde ich Border-Radius 10 Pixel hinzufügen. Und los geht's. Wir haben den gleichen Lader, den wir wollen. Okay, lassen Sie uns daran arbeiten, den Loader zu animieren. Die Idee hinter dieser Animation ist wirklich einfach. Wir werden nur die Skalierung y-Funktion für jedes dieser acht divs ändern. Wir werden es bei 0 beginnen lassen, dann zu eins wechseln und wieder zu 0 zurückkehren. Und wir werden die Animationsverzögerungseigenschaft verwenden, um diese Änderung geschehen zu lassen. Und es wird den acht divs passieren, eine nach dem anderen, was uns den Effekt gibt, den wir wollen. Also werde ich eine neue Animation erstellen. Nennen Sie es geladen. Dann bei 0% der Animationsdauer werde ich Transformationsskala y 0 hinzufügen, und ich werde das kopieren. Fügen Sie es erneut ein und fügen Sie 50 Prozent hinzu. Ich werde die Skala y eins anstelle von 0 machen. Und schließlich, bei 100%, werde ich die Skala zurück auf 0 ändern. Wieder. - Cool. Lassen Sie uns diese Animation zu den acht divs hinzufügen. Ich werde hier innerhalb des div mit der Klasse von 0 BJ hinaufgehen und Animation hinzufügen. Laden. Dann Animationsdauer von 0,8 Sekunden. Linear und unendlich. Ehrfürchtig. Jetzt können Sie sehen, dass die acht Divs größer, dann kleiner und dann wieder größer werden. Und sie werden das auf unbestimmte Zeit tun. Um den gewünschten Effekt zu erzielen, müssen wir die Animationsverzögerungseigenschaft für jedes div verwenden. Also lasst uns jedes div individuell anvisieren. Ich werde hier gehen und sagen, oh, BJ Doppelpunkt n-ten Kind zu, um das zweite div zu zielen. Dann werde ich in ihm Animationsverzögerung, 0,1 Sekunden hinzufügen. Dann werde ich das alles kopieren. Fügen Sie es erneut sechsmal ein. Dann füge ich für das dritte div eine Animationsverzögerung 0,2 Sekunden hinzu. Dann für die 4.3. 0 Sekunden und für die 5.4. 0 Sekunden. Und für die 6,50 Sekunden, für die 7.6. 0 Sekunden. Und schließlich für die 8.7. 0 Sekunden. Und genau so können Sie sehen, dass die divs animiert sind, sich nacheinander zu bewegen, was uns diesen wirklich schönen Effekt gibt, den wir wollten. Und wir können einen weiteren coolen Effekt erzielen, indem wir nur eine Codezeile hinzufügen. Ich werde in das OBJ div gehen und ich werde transformieren Ursprung unten hinzufügen. Und das macht nur die Linie skaliert vom unteren Punkt, nicht von ihrem Mittelpunkt, was uns einen weiteren coolen Effekt gibt, den Sie in Ihren Projekten verwenden können. 99. 103 – Ringe die Umdrehung mit CSS-Animationen: Hallo an alle. In dieser Lektion werden wir diesen schönen Ladeeffekt mit CSS-Animationen erstellen. Sie können sehen, dass wir einen kleinen weißen Kreis in der Mitte haben. Dann haben wir einen gelben Ring, der sich um ihn dreht. Dann ein grünes in der Mitte und ein rotes, das sie umgibt. Und Sie können auch sehen, dass die roten und gelben in die gleiche Richtung drehen , während der grüne in die entgegengesetzte Richtung rotiert, wir werden diese rotierenden Ringe mit Rändern erstellen. Mal sehen, wie wir sie erschaffen können. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Loader geben. Dann werde ich ein anderes div hinzufügen, ihm eine Klasse von äußerer geben. Dies wird also der rote Rand sein, der alle umgibt. Dann werde ich ein anderes div hinzufügen und ihm eine Klasse von Mitte geben. Und das wird der grüne Rand in der Mitte sein, der sich in die entgegengesetzte Richtung dreht. Dann ein anderes div mit der Klasse von Enter, um den inneren gelben Ring zu erstellen. Und schließlich, ein div mit der Klasse der Daten, um den weißen Punkt oder einen Kreis in der Mitte zu erstellen. Dann werde ich zu meinem CSS und zielgerichteten div mit der Klasse des Loaders gehen, die alle unsere Klassen enthält. Dann werde ich Breite hinzufügen, 200 Pixel, Höhe 200 Pixel sowie. Dann werde ich Position relativ hinzufügen. Dann werde ich das div mit der Klasse von outer zielen und Position absolut hinzufügen, so dass wir es relativ zu seinem Elternteil, dem Loader div, positionieren können. Dann wollten wir die gleiche Breite und Höhe wie sein Container aufnehmen. So werden wir oben 0, links, 0, rechts 0 und unten hinzufügen . Du hast es auch 0 erraten. Dies wird also nur dazu führen, dass das äußere div das Loader-div vollständig auffüllt und seine volle Breite und Höhe einnimmt. Dann, um den äußeren roten Rand zu erstellen, werde ich Rand links hinzufügen, fünf Pixel solide. Diese rote Farbe. Dann kopiere ich das, füge es dreimal ein. Dann werde ich von links nach rechts wechseln und alles andere so lassen, wie es ist. Also werden wir auch eine Rate rote Grenze haben. Dann werde ich sowohl die obere als auch die untere Grenze anvisieren. Und machen Sie ihre Farben transparent, nicht rot. Jetzt können Sie sehen, dass wir zwei rote Ränder haben, nur links und rechts. Und wir haben keine oberen und unteren Ränder, weil wir die Farbe auf transparent setzen, damit sie nicht angezeigt werden. In Ordnung, gehen wir zurück und machen sie kreisförmige Grenzen. Ich gehe hierher und füge den Grenzradius 50 Prozent hinzu. Und jetzt können Sie sehen, dass die Grenzen ein kreisförmiges sind. Und wir haben unsere äußeren roten Ränder geschaffen. Um die Grenzen in der Mitte zu erstellen, werden wir einfach dieses div, eingefügte und zielgerichtete div mit der Klasse der Mitte kopieren . Dann werden wir einfach die Werte von oben, unten, links und rechts auf 30 Pixel anstelle von 0 ändern , so dass dieses div von 30 Pixeln von der linken Seite des Containers beginnt und bei 30 Pixeln von der rechten Seite des Containers endet. Seine Breite beträgt also 200 Pixel minus 60 Pixel, das sind 140 Pixel. Und so wird es kleiner sein. Und das Gleiche wird mit seiner Höhe passieren. Es wird auch kleiner als der Container div um 60 Pixel sein. Jetzt können Sie sehen, dass wir diese mittleren Grenzen in der Mitte haben. In Ordnung, lassen Sie uns auch die inneren Grenzen schaffen. Ich kopiere das mittlere div, füge es ein und ziele das innere. Dann ändere ich einfach die Positionierungseigenschaften auf 60 Pixel anstelle von 30. Dieses Div startet also 60 Pixel von seinem Container links und endet bei 60 Pixeln auf der rechten Seite. Und das Gleiche oben und unten. So können Sie sehen, dass wir diese Grenze auch eingeben. In Ordnung, jetzt lassen Sie uns den kleinen Kreis erstellen, der in der Mitte dieser Grenzen sitzt. Ich werde gehen und das div mit der Klasse von dot anvisieren. Dann werde ich Position hinzufügen, absolut. Oben 90 Pixel, links. 90 Pixel, Rate 90 Pixel. Und unten. Richtig, 90 Pixel. So wird der Kreis 90 Pixel vom Container div in alle Richtungen um positioniert . Dann werde ich Hintergrundfarbe hinzufügen, weiß. Und schließlich, um es zu einem Kreis zu machen, werde ich Grenzradius 50 Prozent hinzufügen. So jetzt können Sie sehen, dass wir den kleinen weißen Kreis haben , der in der Mitte des Containers div sitzt. Nun, da wir alle Elemente erstellt haben, fangen wir an, ihnen die Animation hinzuzufügen. Zuallererst werde ich hier gehen und eine neue Animation erstellen. Nennen Sie es, drehen Sie sich. Dann werde ich bei 0% der Animationsdauer transformieren, 0 drehen. Dann bei 100%, werde ich Transformation hinzufügen , 360 Grad drehen. Dann werde ich diese Animation zu unseren Grenzen hinzufügen. Also werde ich zuerst in das innere div gehen, dann Animation hinzufügen, drehen, dann Animationsdauer von 1 Sekunde, dann linear und unendlich. Dann kopiere ich diese Animationserklärung und füge sie in die anderen beiden Dibs ein. Und jetzt können Sie sehen, dass die drei Divs zusammen in die gleiche Richtung rotieren, was uns diesen Effekt gibt. Aber wenn Sie sich erinnern, möchten wir, dass sich die mittlere Grenze in die entgegengesetzte Richtung dreht. Was wir also tun können, ist, dass wir genau hier in das mittlere Div gehen und umgekehrt als Animationsrichtungseigenschaft hinzufügen können. Die Animation wird also in die entgegengesetzte Richtung erfolgen. Und jetzt können Sie sehen, dass das div in der Mitte in die entgegengesetzte Richtung rotiert, was uns diesen schönen Ladeeffekt gibt. Und das einzige, was übrig bleibt, ist, die Farben der mittleren und inneren Grenzen zu ändern. Also werde ich zurück in das mittlere div gehen und die Rahmenfarben in eine grüne anstelle von rot ändern. Und ich werde dasselbe auch für die inneren Grenzen tun. Ich werde seine Farbe in Gelb anstelle von Rot ändern. Und jetzt können Sie sehen, die mittleren und inneren Grenzen haben diese neuen Farben. Und das ist der exakte Effekt, den wir wollen. 100. 104 – Quadrate ausblenden: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Ladeeffekt mit CSS-Animation erstellen. Sie können sehen, dass wir neun Quadrate haben, die schön verschwinden und uns diesen Effekt geben. Und Sie können sehen, dass die erste Spalte auf der linken Seite zuerst verblasst, dann die zweite, dann die dritte. Wir haben einige kleine Animationsverzögerung zwischen jeder Spalte. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Loader geben. Dies wird also die Klasse sein, die die neun Quadrate darin enthält. Dann werde ich neun Spannweiten hinzufügen, und jede Spannweite wird eine Klasse von S. Also von S1 bis neun haben. Also werden wir S1, S2, S3 haben, und diese neun Spannen sind verantwortlich für die Erstellung von R-Quadraten. Dann werde ich zu meinem CSS gehen und das div mit der Klasse von Loader anvisieren. Dann werde ich Position, relative Breite, 90 Pixel, Höhe 90 Pixel sowie hinzufügen relative Breite, 90 Pixel, . Dann zeigen Sie, flex, dann flex-Richtungsspalte an, so dass die neun divs in Spalten ausgerichtet werden. Dann flex, wrap, wrap, so dass die Quadrate eine zweite Spalte erstellen , wenn sie nicht genug Platz in der ersten haben, dann unter dem, werde ich unsere Spannen anvisieren. Dann werde ich Breite 30 Pixel hinzufügen. Höhe 30 Pixel ebenfalls. Dann werde ich einen roten temporären Hintergrund hinzufügen. Dann schließlich, Position relativ. Und jetzt können Sie sehen, dass wir dieses Quadrat haben, und eigentlich sind es unsere neun Quadrate. Aber da sie alle die gleiche Hintergrundfarbe haben und sie so nah beieinander sitzen, erscheinen sie als ein großes Quadrat. Ordnung? Jetzt werde ich das vorangehende Pseudoelement unserer Spannweiten anvisieren. Dann werde ich Inhalte hinzufügen. Leere Saiten. Position, absolut, oben, 0, links, 0, Breite, 100% und Höhe. 100% auch. Dann werde ich Hintergrundfarbe hinzufügen, weiß. Und jetzt können Sie sehen, die Farbe der Boxen ist jetzt warten, denn wir haben jetzt neun vor Pseudo-Elemente und sie haben die gleiche Breite und Höhe wie die Boxen. Das ist, warum sie vertuschen die Box ist völlig in Ordnung. Jetzt werde ich zurückgehen und diesen roten Hintergrund entfernen, weil wir ihn nicht mehr brauchen. Dann werde ich die Animation erstellen, die für unseren Effekt verantwortlich ist. Also werde ich eine neue Animation erstellen. Nennen Sie es geladen. Dann bei 0% der Animationsdauer, werde ich Breite 100% und Höhe 100% hinzufügen . Dann am Ende der Animationsdauer, bei 100%, werde ich Breite 0 und Höhe 0 hinzufügen. Dann werde ich hier vor einem Pseudo-Element hinauf gehen und Animation hinzufügen. Laden 1 Sekunde, linear und unendlich. Und jetzt können Sie sehen, dass die neun Boxen diesen Effekt haben, bei dem ihre Breite und Höhe 0 über eine Animationsdauer von 1 Sekunde wird. Nun, wir haben nur noch eine Animationsverzögerung zu den zweiten, dritten Spalten hinzuzufügen, um uns den genauen Effekt zu geben, den wir wollen. Also werde ich zurückgehen und die vorangehenden Pseudoelemente der Spannweiten anvisieren, die besser in der zweiten Spalte platziert sind. Und das sind die Spanne mit der Klasse von S4. Dann die Spanne mit der Klasse von S5 oder der fünften Spanne, dann die Spanne mit der Klasse von sechs oder der sechsten Spanne. Und darin werde ich Übergangsverzögerung 0,1 Sekunden hinzufügen. Dann werde ich das kopieren. Fügen Sie es erneut ein. Dann werde ich die vorangehenden Pseudoelemente der Spanne in der dritten Spalte anvisieren, die die Spanne mit der Klasse von sieben sind. Dann als 89. Dann ändere ich die Animationsverzögerung auf 0,2 Sekunden. Und jetzt können Sie sehen, dass der Effekt zuerst für die erste Spalte geschieht, dann die zweite Spalte danach. Dann ist die dritte Spalte, die uns diese schöne Beladung Animation gibt. 101. 105 – Anstiegsseiten mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Ladeeffekt erstellen. Sie können sehen, wir haben die sechs bunten Teile des Laders und sie haben diesen Effekt, in dem sie größer als, kleiner, als größer, und so weiter. Und das passiert einer nach dem anderen. Lassen Sie uns sehen, wie wir das schaffen können. Ich werde hier in meinem HTML gehen und ein div hinzufügen. Geben Sie ihm eine Klasse von Loader. Und in diesem div werde ich sechs Spannweiten hinzufügen. Dann werde ich zu meinem CSS gehen und das Loader-div anvisieren. Dann werde ich Breite 70 Pixel hinzufügen. Und um sie nebeneinander anzuzeigen, werde ich Displayflex hinzufügen. Dann werde ich die Spannweiten innerhalb des Loader-div anvisieren. Und fügen Sie Breite 10 Pixel hinzu. Höhe, 60 Pixel, Rand, 0 Pixel von oben und unten und ein Pixel von links und rechts. Dann schließlich, Hintergrundfarbe, weiß. Und jetzt können Sie sehen, dass die sechs Bänder nebeneinander sitzen und zwischen jedem einen Pixel-Rand haben. Gehen wir zurück und arbeiten an dem Animationseffekt. Ich werde hierher gehen und eine neue Animation erstellen. Nennen Sie es geladen. Dann in diesem, bei 0% der Animationsdauer, werde ich Transformationsskala y 0.1 hinzufügen. So beginnen die Spannweiten mit 0,1 seiner ursprünglichen Größe zu animieren. Dann werde ich bei 35 Prozent der Animationsdauer die Transformationsskala y wieder zu einem hinzufügen. Dann werde ich bei 60 Prozent und bei 100% auch die Transformationsskala y 0.1 hinzufügen. Was diese Animation also tun wird, ist, dass unsere Spanne mit 0,1 ihrer ursprünglichen Größe animiert wird . Dann werden sie größer, bis sie ihre ursprüngliche Größe wieder erreichen. Dann werden sie von 35 Prozent auf 60 Prozent wieder auf 0,1 ihrer Größe schrumpfen. Und sie bleiben so für eine Weile von 60 Prozent bis 100% der Animationsdauer, dann werden sie wieder auf die ursprüngliche Größe zurückkehren und so weiter und so weiter. Wir werden weiter unendlich animieren. Ordnung, lassen Sie uns diese Animation zu unseren Spannweiten hinzufügen und wir gehen hierher und fügen Animationen hinzu. Ladung. 0,8 Sekunden. Erleichtern Sie sich rein, raus. Und schließlich unendlich. Und jetzt können Sie sehen, die Spannweiten hatten diesen Animationseffekt, wo sie bei einer kleinen Größe beginnen , dann größer werden, dann wird wieder kleiner und bleiben dort für ein wenig, und dann größer und so weiter. Jetzt müssen wir den Hintergrund jeder Spanne ändern und wir werden auch einige verschiedene Animationsverzögerungen zu jeder Spanne hinzufügen , so dass sie nacheinander erscheinen. Also werde ich hierher gehen und sagen, erweitern Sie nth-child eins, um die erste Spanne zu zielen. Dann werde ich im Inneren eine Hintergrundfarbe hinzufügen. Diese grüne Farbe und Animationsverzögerung 0,2 Sekunden. Jetzt werde ich das Video pausieren und alle anderen Bereiche anvisieren und verschiedene Hintergrundfarben und Animationsverzögerungen zu jeder Spanne hinzufügen. Sie können sehen, dass ich verschiedene Hintergründe und Animationsverzögerungen hinzugefügt habe. Und wenn ich gehe und den Browser neu lade, können Sie sehen, dass die Spannweiten jetzt verschiedene Farben haben und sie animieren nacheinander, was uns diesen wirklich coolen Effekt gibt. 102. 106 – background: Hallo an alle. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion lernen wir, wie man diesen animierten Hintergrund erstellt. So können Sie sehen, wir haben einen Text hier, der Hintergrundanimation sagt. Und im Hintergrund haben wir viele Boxen. Und wenn Sie sich eines dieser Boxen ansehen, können Sie sehen, dass es sich vom unteren Rand des Bildschirms bewegt, das kommt von unten. Und dann bewegt es sich beim Drehen nach oben. Und seine Deckkraft nimmt ab, bis sie den oberen Bildschirmrand erreicht. Und darüber hinaus. Dann wird die Deckkraft 0 und es verblasst. Alles klar, fangen wir hier in unserem HTML an und fügen Sie ein div hinzu. Geben Sie ihm eine Klasse von Containern. Dann werden wir innerhalb dieses div ein weiteres div hinzufügen und ihm eine Klasse von Quadrat geben. Also werden wir dieses quadratische div verwenden, um unsere Boxen zu erstellen. Aber es gibt viele Boxen. Also werden wir dieses quadratische Div kopieren und es mehrmals einfügen , gleich der Anzahl der Boxen, die wir haben. Also jetzt haben wir 10 divs mit der Klasse des Quadrats, die die 10 beweglichen Boxen im Hintergrund darstellen wird. Dann werde ich unten ein anderes div hinzufügen, ihm eine Klasse von Text geben. Und darin werde ich das Wort Hintergrundanimation hinzufügen. In Ordnung, lassen Sie uns zu unserem CSS gehen, um unsere Stile hinzuzufügen. Ich werde mit dem Container-div beginnen, das alle divs enthält. Also werde ich es ins Visier nehmen. Dann werde ich Position, relative Breite, 100%, Höhe, 100% sowie 100% hinzufügen . So wird es die gesamte Breite und Höhe des Körpers oder des gesamten Bildschirms aufnehmen. Dann werde ich Überlauf versteckt hinzufügen. Jetzt lasst uns den Text stylen, den wir haben. Also werde ich das div mit dem Klassentext anvisieren. Dann wollen wir es horizontal und vertikal zentrieren. Also werden wir Position hinzufügen, absolut, top, 50 Prozent, links, 50%. Dann transformieren, übersetzen, negative 50 Prozent und negative 50 Prozent. So können Sie jetzt sehen, dass der Text horizontal und vertikal innerhalb des Container-div zentriert ist . Und da das Container-div die gesamte Breite und Höhe des Körpers hat, wird der Text horizontal und vertikal innerhalb des Körpers zentriert. Gehen wir zurück und lassen Sie diesen Text ein bisschen besser aussehen. Ich werde hier gehen und Farbe hinzufügen, weißen Text transformieren. Großbuchstaben, Schriftgröße 45 Pixel. Dann Rand oben fünf Pixel, einfarbig weiß. Und Rand unten 50 Pixel, massiv weiß als auch. Jetzt sieht der Text viel besser aus und wir sind bereit, die Animation der Boxen oder der Quadrate zu erstellen. Denken Sie daran, es gibt 10 Quadrate, also werden wir zuerst alle Stile hinzufügen, die sie gemeinsam haben. Und danach werden wir jeden der 10 einzeln ausrichten und ihre einzigartigen Stile hinzufügen. Also lassen Sie uns zuerst die gemeinsamen Stile hinzufügen, ich werde das div mit der Klasse des Quadrats anvisieren. Und ich werde Position absolut hinzufügen. Dann, um sie unter dem Boden des Containers div zu positionieren, das die gleiche Höhe des Körpers hat. Das bedeutet, dass sie sich unter dem Körper oder unter dem Bildschirm bewegen. Ich werde unten, negative 100 Pixel hinzufügen. Dann werde ich Hintergrundfarbe hinzufügen. Diese hellgraue Farbe. Alles klar, das sind die üblichen Stile, die alle Boxen haben. Alle von ihnen befinden sich unter dem unteren Rand des Bildschirms. Und alle von ihnen haben die gleiche Hintergrundfarbe. Aber wenn ich zum Browser gehe und neu lade, kann man sehen, dass nichts auf dem Bildschirm erscheint, weil ich keine Breite oder Höhe für diese Quadrate festgelegt habe. Und selbst wenn ich zum Code-Editor zurückkomme und hier in den Container-Selektor komme, entfernen Sie diese Überlauf-versteckte Eigenschaft. Gehen Sie dann zurück zum Browser und laden Sie es neu. Sie können sehen, dass auch nichts erscheint. Sie verstecken sich also nicht unter dem unteren Rand des Bildschirms aufgrund ihrer unteren Eigenschaft oder etwas. Wir müssen nur ihre Breite und ihre Höhe einstellen, damit sie erscheinen. Und das machen wir für jedes Quadrat einzeln, weil sie unterschiedliche Breiten und Höhen haben. Also lasst uns das mit dem ersten Quadrat machen. Ich werde hierher gehen und das erste Quadrat anvisieren, indem quadratische n-te Kind eins hinzufüge. Dann werde ich seine Breite auf 75 Pixel setzen, dann seine Höhe auch auf 75 Pixel, weil es offensichtlich ein Quadrat ist. Dann schließlich werde ich seine linke Eigenschaft auf 7% setzen. Wenn ich jetzt nach unten scrolle, können Sie sehen, dass unser erstes Quadrat hier unter dem Körper erscheint. Und es scheint, weil wir eine Breite und eine Höhe darauf setzen. Und es sitzt auch auf der linken Seite, weil wir gesagt, es ist links Eigenschaft 7% Alles in Ordnung, Wir wollen nicht, dass es erscheint, wenn wir scrollen. Also werden wir zurück in das Container-div gehen. Und wir fügen Überlauf wieder versteckt hinzu. Und jetzt ist es nicht mehr sichtbar, aber es ist immer noch da. In Ordnung, lassen Sie uns daran arbeiten, diese Box zu animieren. Sie erinnern sich, dass die Boxen von unten nach oben auf dem Bildschirm verschoben wurden , während sie gleichzeitig gedreht und ausgeblendet wurden. Also erstellen wir eine Animation, die das tun wird. Also werde ich hier eine neue Animation erstellen. Nennen Sie es Boxen. Dann werden wir bei 0% der Animationsdauer oder zu Beginn davon unten negative 100 Pixel hinzufügen, oder zu Beginn davon unten negative 100 Pixel hinzufügen,wie es ist. So wird es von einer Position unter dem unteren Rand des Bildschirms beginnen. Dann werde ich bei 100% der Animationsdauer die untere Eigenschaft auf 100% ändern. Dadurch wird die Box vom unteren Rand des Bildschirms nach oben verschoben. Wir müssen auch die Boxen drehen und ihre Deckkraft verringern. Also lasst uns das machen. Ich werde Transformation hinzufügen, 180 Grad drehen, dann Deckkraft 0. Am Ende der Animationsdauer werden die Boxen also um 180 Grad gedreht und ihre Deckkraft ist 0. In Ordnung, lassen Sie uns diese Animation zu unseren Boxen hinzufügen. Ich werde hier in das div mit der Klasse des Quadrats gehen. Und ich werde Animationsboxen hinzufügen. Dann Animationsdauer von zehn Sekunden. Dann wollen wir, dass die Animation für immer weitergeht. Also fügen wir unendlich hinzu. Und schließlich, leichtere dich rein, raus. Und jetzt, wenn ich zum Browser gehe und neu lade, können Sie sehen, dass die Box beginnt, sich von unterhalb des unteren Bildschirms nach oben zu bewegen , während sie sich dreht. Und seine Deckkraft nimmt ab, bis sie nach oben geht und verschwindet. Dann geht es zurück zu seiner ursprünglichen Position unter dem Bildschirm. Und die Animation passiert immer wieder, weil wir sie unendlich gemacht haben. Also, jetzt haben wir Animationen erstellt, und das einzige, was diese Lektion noch beenden kann, ist, die anderen neun Boxen zu erstellen. So werden wir für alle unterschiedliche Breiten und Höhen einstellen. Wir werden auch die linke Eigenschaft für sie ändern, so dass sie nebeneinander sitzen. Und schließlich werden wir ihnen einige verschiedene Animationsverzögerungen hinzufügen , damit sie sich alle zu einem anderen Zeitpunkt bewegen. Und damit werden wir unsere Wirkung bekommen. Also pausiere ich das Video und füge diese verschiedenen Stile für die neun anderen Boxen hinzu. Und wir kommen wieder. Alles klar, jetzt habe ich alle Stile hinzugefügt. Zum Beispiel können Sie im zweiten Quadrat sehen, wir setzen die Breite und die Höhe auf 65. Wir setzen auch die linke Eigenschaft auf 15%, so dass sie neben dem ersten Platz sitzt. Und schließlich haben wir eine Animationsverzögerung von vier Sekunden hinzugefügt, so dass sie sich erst vier Sekunden nach dem Neuladen der Seite bewegt. Ich habe auch verschiedene Werte für den Rest der Felder hinzugefügt , die ich Ihnen erlauben werde, einen Blick auf die Quellen dieser Lektion werfen. Okay, jetzt gehe ich zurück und lade den Browser neu, und dann beginnen die Boxen zu verschiedenen Zeiten von unten nach oben zu bewegen , während sie sich drehen und verblassen. Und das gibt uns die Wirkung, die wir wollen. 103. 107 – -: Hallo an alle, willkommen zu dieser neuen Lektion im CSS-Animationskurs. In dieser Lektion werden wir diese schöne verschiebbare Hexagon-Ladeanimation erstellen. Sie können sehen, dass es aus zwei Teilen besteht, einer horizontalen Linie und der sechseckigen Form darüber. Die Linie dreht sich auf ihrem Mittelpunkt hin und her, während sich das Sechseck von einer Seite zur anderen bewegt, auch hin und her. Und es dreht sich gleichzeitig auf seinem Mittelpunkt. Dies wird ein interessantes Beispiel sein. Mal sehen, wie wir das tun können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Zeilen gebe. Dann werde ich ein anderes div hinzufügen und ihm eine Klasse von Sechseck geben. In Ordnung, dann werde ich zu meinem CSS gehen, um diese Divs zu stylen. Ich werde das div mit der Klasse der Linie anvisieren. Dann werde ich Breite hinzufügen, 300 Pixel, Rand unten, vier Pixel, einfarbig weiß. Das wird also die Linie sein, auf der sich das Sechseck bewegt. Dann werde ich Position relativ hinzufügen. Okay, Jetzt werden wir lernen, wie man die Sechseckform erstellt. Zuerst werde ich das div mit der Klasse von Hexagon anvisieren. Dann werde ich Position hinzufügen, absolut, links, 0, unten, 0, Breite 50 Pixel, Höhe 30 Pixel. Und schließlich, Hintergrundfarbe, rot. So jetzt können Sie sehen, wir haben nur ein Rechteck, das eine Breite von 50 Pixeln und eine Höhe von 30 Pixeln und eine rote Hintergrundfarbe hat. Die Idee hinter der sechseckigen Form ist wir weitere zwei Rechtecke wie dieses erstellen, und wir werden eines von ihnen um 60 Grad und das andere um negative 60 Grad drehen. Und das wird uns die sechseckige Form geben, nach der wir suchen. Also lassen Sie uns das tatsächlich schaffen. Um die anderen beiden Rechtecke zu erstellen, werden wir die Vorher- und Nachher-Pseudo-Elemente verwenden. Also werde ich das div mit der Klasse von Hexagon anvisieren und vorher einen Doppelpunkt hinzufügen. Und ich werde Inhalt leere Strings hinzufügen, weil wir hier nichts hinzufügen möchten. Dann absolut positionieren, oben 0, links, 0. Wir möchten, dass es die gleiche Breite und Höhe wie das rote Rechteck hat. So werden wir Breite, 100%, Höhe, 100% als auch hinzufügen . Dann fügen wir Hintergrundfarbe hinzu, blau für jetzt. Alles klar, jetzt können Sie sehen, dass wir das blaue Rechteck oben auf dem roten sitzen. Und es vertuscht es, weil es die gleiche Höhe und Breite hat wie das rote Rechteck. Okay, jetzt werden wir Transformationsrotieren hinzufügen. So können Sie jetzt sehen, dass das blaue Rechteck jetzt um 60 Grad gedreht wird und das rote Rechteck erscheint jetzt dahinter. Lasst uns weiter arbeiten. Wir werden das vorher Pseudo-Element kopieren, es wieder einfügen und vor, nach ändern. Ändern Sie dann die Hintergrundfarbe in Grün. Und wir werden es um negative 60 Grad drehen, nicht 60. Und hier können Sie sehen, dass wir den grünen Hintergrund oben auf dem roten und blauen Hintergrund sitzen und ihn um negative 60 Grad drehen. Und diese drei Rechtecke erzeugen die sechseckige Form. Wenn ich also zurückgehe und die Hintergrundfarbe für alle in Weiß ändere, dann lade meinen Browser neu. Sie können deutlich sehen, dass die sechseckige Form oben auf der Linie sitzt, aber wir müssen sie ein wenig nach oben bewegen. Also werde ich zurück zum Hexagon-Selektor gehen, und ich werde unten auf 14 Pixel anstelle von 0 ändern. Und jetzt sitzt das Sechseck richtig knapp über der Linie. Jetzt richtig? Nachdem wir die Sechseckform erstellt haben, müssen wir nun an der Animation arbeiten. Wenn wir uns unsere Demo ansehen, möchte ich, dass Sie sich auf die Hexagon-Animation konzentrieren. Sie können sehen, dass hier zwei Dinge passieren. Zuerst bewegt sich das Sechseck von links nach rechts, dann geht es wieder zurück, und es wird das unendlich weitermachen. Und während Sie sich von links nach rechts bewegen, können Sie sehen, dass sich das Sechseck auf seinem Mittelpunkt dreht. Und wenn wir einen Blick auf die Linie selbst werfen, können Sie sehen, dass sie sich auch um etwa 30 Grad hin und her dreht , zusammen mit der Bewegung des Sechsecks. Gehen wir also zurück und erstellen Sie diese Animationen. Zuerst erstellen wir die Animation für das Sechseck. Ich werde eine neue Animation erstellen. Nennen Sie es animieren Sechseck. Dann werde ich bei 0% der Animationsdauer links 0 hinzufügen. Dann bei 50 Prozent werde ich links 100% hinzufügen. Und schließlich, bei 100%, werde ich links hinzufügen. Wieder 0. Was diese Animation also tun wird, ist, dass das Sechseck von seiner ursprünglichen Position links nach rechts um 100% der Containerbreite bewegt wird, die 300 Pixel beträgt, dann wird es wieder an seine ursprüngliche Position zurückkehren. Also lassen Sie uns diese Animation zum Sechseck hinzufügen. Ich werde hier in das Sechsecken-Div hinauf gehen, und ich werde Animation hinzufügen. Animieren Sie Hexagon. Zwei Sekunden, linear. Und weil wir wollen, dass die Bewegung auf unbestimmte Zeit geschieht, werden wir sagen unendlich. So, jetzt können Sie sehen, dass das Sechseck bewegt sich von links nach rechts, dann geht es wieder und so weiter. Aber wenn wir diese Bewegung genauer betrachten, können Sie sehen, dass, wenn das Sechseck das Ende der Linie erreicht, es durch einen Raum, der seiner Breite entspricht, etwas darüber hinausgeht. Und das liegt daran, dass wir hier auf 100% Rate gesetzt haben. Um dies zu verhindern, sollten wir hier die Breite des Sechsecks von diesem 100% subtrahieren. Um dies zu tun, werden wir die Zählfunktion verwenden. Also werde ich hier gehen und calc hinzufügen, 100% minus die Breite des Rechtecks, das 50 Pixel beträgt. Das bedeutet also, dass das Hexagon nun einen Abstand gleich 100% des Abstands nach links abzüglich seiner eigenen Breite, die 50 Pixel beträgt. Wenn ich zurückgehe und nachlade, siehst du, dass sich das Sechseck richtig bewegt, genau so, wie wir es wollen. Alles klar, lassen Sie uns daran arbeiten, das Sechseck zu drehen. Wir wollen das Sechseck drehen, während wir uns bewegen. Nehmen wir an, wir wollen es auf dem Weg zu Zyklen drehen. Also zwei Zyklen, oder gleich 360 Grad multipliziert mit zwei, was 720 Grad ist. Also werde ich hier bei 50% der Animationsdauer gehen , bei der das Sechseck am Ende der Linie sein wird. Und ich werde Transformation hinzufügen, 720 Grad drehen. Und das bedeutet von 0 bis 50 Prozent der Animationsdauer. Mit anderen Worten, während der ersten Hälfte der Animationsdauer wird das Sechseck von 0 Grad auf 720 Grad gedreht, dann von 50 Prozent auf 100%, oder während der zweiten Hälfte der Animationsdauer der Sechseck dreht sich von 720 Grad auf 0 Grad zurück. Wir hätten also einfach rotieren 0 am Anfang und am Ende der Animationsdauer hinzufügen können, aber es ist der Standardwert. Also haben wir nichts hinzugefügt, und wir werden das gleiche Ergebnis erhalten. Wenn ich jetzt in den Browser gehe und neu lade, können Sie sehen, dass sich das Sechseck dreht, während sich über die Linie bewegt, genau so, wie wir wollen. Sie dreht sich während der ersten Hälfte der Animationsdauer von 0 Grad auf 720 Grad dreht sich dann in der zweiten Hälfte zurück. Großartig. Jetzt müssen wir die Linie selbst animieren. Also werde ich eine neue Animation erstellen. Benennen Sie es animierte Linie. Und bei 0% der Animationsdauer werde ich Transformation hinzufügen. Drehen Sie 30 Grad. So wird die Linie um 30 Grad gedreht. Wenn ich die Seite neu lade. Dann werde ich das kopieren. Fügen Sie es erneut ein. Und bei 25 Prozent der Animationsdauer ändere ich die Drehung zurück auf 0 Grad. Es ist also die Drehung 0 und es wird nur eine horizontale Linie sein, wie sie ist. Dann bei 50 Prozent. Ich werde es auf negative 30 Grad ändern. So wird es um 30 Grad drehen, aber in die andere Richtung, weil wir ein negatives Vorzeichen haben. Und bei 75 Prozent werde ich wieder 0 hinzufügen, so dass es wieder in seine horizontale Position zurückkehrt. Und schließlich, bei 100%, werde ich es wieder auf 30 Grad ändern. Was hier passieren wird, ist, wenn wir neu laden, wird die Linie um 30 Grad nach rechts gedreht. Wenn die Animation dann weitergeht, kehrt sie wieder auf 0 Grad zurück. Dann negativ 30 Grad, das ist 30 Grad nach links. Dann gehen Sie zurück zu 0 Rotation, dann 30 Grad. Und es wird das für immer tun. In Ordnung, Lassen Sie uns diese Animation zu unserer Linie hinzufügen. Ich werde direkt hier zum Container div gehen und ich werde Animation hinzufügen. Animieren Sie die Linie zwei Sekunden. Und beachten Sie, dass wir die Animationsdauer hier zwei Sekunden machen sollten , so dass es mit der Animation des Sechsecks übereinstimmt. Dann fügen wir linear und unendlich hinzu. So jetzt können Sie sehen, dass alles perfekt funktioniert und wir haben die Ladeanimation. Wir wollen. 104. 108 – Erweitern von line mit CSS-Animationen: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erstellen. Sie können sehen, wenn ich den Mauszeiger über die Menüpunkte, dieser Effekt passiert, wo wir eine dünne rote Linie haben, die von links kommt und dann erweitert, um den Link zu decken, gibt uns diesen coolen Effekt. Mal sehen, wie wir das schaffen können. Ich werde hier in meinem HTML gehen und eine URL hinzufügen. Wenn ein LI, dann ein Anker-Tag darin. Und ich werde sagen, nach Hause. Dann kopiere ich diesen Link, füge ihn viermal wieder und sag über Dienste, Team und Kontakt. Dann werde ich zu meinem CSS gehen, um sie in dir zu stylen. Ich werde es die URL drehen und den Rand 0 hinzufügen, wobei 0 ebenfalls aufgefüllt wird. Dann, um das Listenelement nebeneinander sitzen zu lassen, werde ich Displayflex hinzufügen. Dann werde ich das LI im List-Stil anvisieren. Keiner. Dann werde ich das Anker-Tag anvisieren und Position, relativ hinzufügen. Anzeige. Blocken. Dann Rand 0 von oben und unten und zehn Pixel von links und rechts, um einen gewissen Abstand zwischen den Links zu haben. Dann werde ich Padding hinzufügen, fünf Pixel von oben und unten und zehn Pixel von links und rechts. Wann werde ich Farbe hinzufügen. Mit dunkelgrauer Farbe. Schriftgröße 30 Pixel. Textdekoration, keine. Text-Transformation. Großbuchstaben Wenn schließlich Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass die Menü-Links genau so aussehen, wie wir wollen. Gehen wir nun zurück und erstellen Sie die dünne Linie, die von links kommt. Wir werden das mit dem before Pseudo-Element erstellen. Also wurde ich gewählt und fügen Sie Inhalt, leere Zeichenfolge, eine Position, absolute Breite, 100%, Höhe, nur vier Pixel hinzu. Dann wollen wir, dass diese Linie vertikal zentriert wird. Also werde ich Top 50 Prozent hinzufügen. Dann Transformieren, übersetzen Y negativ 50%. Dann, um es nach links zu verschieben, fügen wir links, negative 100% hinzu. Und Hintergrundfarbe. Diese rote Farbe. Dann schließlich Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass wir diese dünnen Linien haben, die neben den Links sitzen. Und wenn wir den Mauszeiger über die Links bewegen, wollen wir, dass diese Linien von links nach rechts verschoben werden. Dann wird es erweitert, um den Link abzudecken. Also lasst uns das machen. Ich werde hier gehen und eine neue Animation erstellen. Nennen Sie es Zeile. Dann innerhalb, dass bei 0%, Ich werde links negativ 100% und Höhe vier Pixel hinzufügen. Dann kopiere ich diesen Code, füge ihn erneut ein und ändere links zu 0. Und ich werde die Höhe gleich vier Pixel belassen, wie sie ist. Dann kopieren Sie diesen Code, fügen Sie ihn ein und ändern Sie die Höhe zu 100%. So wird es die volle Höhe der Verbindung in Anspruch nehmen. Dann werde ich den Z-Index negativ hinzufügen. Was hier passieren wird, ist, dass sich die rote Linie von der linken Position bewegt. Wir bewegen uns, bis es einen linken Wert von 0 hat. Danach wird es sich ausdehnen und seine Höhe wird zunehmen, bis es ein Blinzeln bedeckt. Und wir haben hier den Z-Index negativ hinzugefügt , so dass der Text vor der roten Linie erscheint. In Ordnung, lassen Sie uns diese Animation zur roten Linie hinzufügen. Wenn ich über den Link schwebe, werde ich hierher gehen und sagen, wenn wir den Mauszeiger über das Anker-Tag bewegen, werde ich das vorher Pseudo-Element auswählen und Animation hinzufügen. Linie 0,5 Sekunden linear. Und wir wollen, dass die Animation stoppt, wenn sie den Endpunkt erreicht. Wir werden hier vorwärts hinzufügen. Und jetzt, wenn ich gehe und den Mauszeiger über die Links, können Sie sehen, dass die rote Linie von links nach rechts bewegt. Dann dehnt es sich aus, um die volle Höhe der Verbindung aufzunehmen und es zu vertuschen, was uns diesen wirklich coolen Effekt verleiht. Das einzige, was jetzt noch übrig bleibt, ist, die Farbe des Linktextes in Weiß zu ändern , wenn der Mauszeiger über die Links fährt. Also werde ich hierher gehen und sagen, wenn wir über den Link schweben, werde ich die Farbe in Weiß ändern. Und ich werde auch hier in den Link gehen und Überlauf versteckt hinzufügen. Und jetzt können Sie sehen, dass die rote Linie jetzt versteckt ist. Und wenn ich zurückgehe und den Mauszeiger über die Menü-Links führe, kommt die rote Linie von links nach rechts. Dann wird es erweitert, um den Link zu vertuschen und uns den genauen Effekt zu geben, den wir wollen. 105. 109 – background die Animation mit CSS-Animationen: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese Hintergrundanimation erstellen. Sie können sehen, wir haben diese Überschrift, die diese Hintergrundanimation Texte hat. Und wir haben diese Boxen, die beim Drehen größer werden. Einige von ihnen sind rot und die anderen blau. Und sie haben unterschiedliche Animationsverzögerungen. Deswegen erscheinen sie nacheinander. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Containern geben. Und darin werde ich H2 hinzufügen und Hintergrundanimation sagen. Dann unten werden wir unsere Boxen hinzufügen. Ich werde ein div hinzufügen, ihm eine Klasse von Box geben. Wenn unsere Kopie dieses div, fügen Sie es fünfmal wieder ein. Das wären also die sechs Boxen, die unsere Wirkung haben werden. Dann werde ich zu meinem CSS gehen, das div mit der Klasse des Containers anvisieren und Position, relativ, Höhe, 100 vh und Überlauf versteckt hinzufügen . Dann werde ich das Ziel H2 und fügen Rand 0, Farbe, weiß, Position, absolut. Und um es zu zentrieren, werde ich Top 50 Prozent hinzufügen. Links. 50 Prozent auch. Dann transformieren, übersetzen, negative 50 Prozent und negative 50 Prozent. Dann werde ich Schriftgröße 45 Pixel hinzufügen. Text-Transformation, Großbuchstaben. Dann schließlich, z-Index 1, so dass die Box nicht vertuschen wird. Und jetzt können Sie sehen, dass der H2 so viel besser aussieht. Gehen wir zurück und arbeiten an den Kisten. Ich werde das div mit der Klasse der Box anvisieren. Und ich werde Position hinzufügen, absolut. Top, 80 Prozent, links, 45 Prozent. Die Breite. 10 Pixel, Höhe, 10 Pixel ebenfalls. Dann umranden Sie ein Pixel. Solide Diese blaue Farbe. Und jetzt können Sie sehen, dass wir diese kleine Kiste haben. Es hat einen kleinen blauen Rand mit einem Pixel. Das ist nicht nur eine Box, eigentlich die sechs Boxen, aber wir sitzen übereinander oder vor einander. Deshalb erscheinen wir als eine Schachtel. Und wir werden die Positionierung jeder Box so ändern, dass sie sich an verschiedenen Stellen auf der Seite befinden. Also gehen wir zurück und machen das. Ich werde hier gehen und das zweite Kind der Boxen anvisieren. Also werde ich das div mit der Klasse der Box anvisieren. Und ich werde sagen, nth-child zwei. Und dann werde ich Top 40 Prozent hinzufügen und 25 Prozent verlassen. Ich werde auch eine Rahmenfarbe hinzufügen, rot. Jetzt können Sie sehen, dass wir hier eine neue Box in ihrer neuen Position sitzen. Okay, gehen wir zurück und machen dasselbe für die anderen Kisten. Ich werde dieses div kopieren, es viermal wieder einfügen. Und das wird das dritte Div hier anvisieren. Und James stieg auf 50 Prozent und ging auf 75 Prozent. Dann werde ich das vierte Div anvisieren und oben auf 10 Prozent ändern und auf 90% verlassen. Ich werde auch Randfarbe rot hinzufügen, wenn das fünfte div oben auf 85 Prozent ändert und auf 10 Prozent belassen wird. Und schließlich, das sechste Kind und ändern Top 10 Prozent und links zu 50 Prozent. Fügen Sie dann Rahmenfarbe hinzu, rot. Und jetzt können Sie sehen, dass wir unsere sechs Boxen überall haben weil wir die Positionierung jedes einzelnen geändert haben. Lassen Sie uns nun an dem Animationseffekt arbeiten. Wenn Sie sich erinnern, werden die Boxen beim Drehen größer. Also werde ich hierher gehen und eine neue Animation erstellen. Nennen Sie es Boxen. Und in ihm bei 0% der Animationsdauer, werde ich Transformation hinzufügen, 0 skalieren und 0 Grad drehen. Dann Deckkraft eins. Und darunter werde ich bei 100% transformieren,20 skalieren,960 Grad drehen und Deckkraft 0 hinzufügen 20 skalieren, . Was hier passieren wird, ist, dass die Box von einer Transformationsskala von 0 beginnt, was bedeutet, dass von nichts tatsächlich zu einer Transformationsskala von 20. So wird es während der Animationsdauer 20 Mal größer. Und es wird dabei von 0 Grad auf 960 Grad gedreht. Und auch seine Deckkraft wird abnehmen, bis sie transparent wird. In Ordnung, lassen Sie uns diese Animation zum Box-div hinzufügen. Ich gehe hier hoch und füge Animationsboxen hinzu. Dann eine Animationsdauer von 12 Sekunden, dann lassen Sie sich in, wenn unendlich. So jetzt können Sie sehen, dass die Box größer wird, während sie rotiert, was uns den Effekt gibt, den wir wollen. Aber der Effekt wird viel besser sein, wenn wir einige Animationsverzögerungen zwischen den Boxen hinzufügen können. So werden sie nacheinander erscheinen. Also gehen wir zurück und machen das. Ich werde hier in das zweite Kind gehen und Animationsverzögerung zwei Sekunden hinzufügen. Dann innerhalb der dritten untergeordneten, und fügen Sie Animationsverzögerung. Vier Sekunden. Dann sechs Sekunden innerhalb des vierten Kindes. Und acht Sekunden im fünften Kind. Und schließlich zehn Sekunden im sechsten Kind. Und jetzt können Sie sehen, dass die Boxen nacheinander animieren, aufgrund der unterschiedlichen Animationsverzögerungen, die wir jedem von ihnen hinzugefügt haben. Aber es gibt ein Problem, wie Sie sehen können, wenn ich die Seite neu lade. Schauen Sie sich zum Beispiel diese Box an. Sie können sehen, dass es angezeigt wird und auf das Ende der Animationsverzögerung wartet. Dann startet es den Animator. Aber wir wollen nicht, dass es erscheint, bis es anfängt, zu animieren. Was wir also tun können, ist, dass wir hier zurückgehen und Transformationsskala 0 hinzufügen können. Und jetzt können Sie sehen, dass die Box nicht angezeigt wird, bis sie mit der Animation beginnen. Und sie alle bewegen sich und geben uns die Wirkung, die wir wollen. 106. 110 – Was ist die - und wie wir ihn verwenden können, um Formen erstellen zu 10 zu 1.: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir über die CSS-Clip-Pfad-Eigenschaft lernen und wie wir sie verwenden können, um die Formen zu erstellen. So erstellen wir ein Dreieck, einen Kreis, ein Sechseck über einen Stern und eine Nachrichtenform. Es ist ein sehr leistungsfähiges Werkzeug und wir werden es in den kommenden Lektionen verwenden , um einige kreative Animationsbeispiele zu erstellen. Also vor allem, was ist die Clip-Path-Eigenschaft? Nun, der Clip-Pfad ist eine CSS-Eigenschaft, mit der wir einen bestimmten Teil oder Bereich einesElements angeben können einen bestimmten Teil oder Bereich eines , der mit dem Rest des Elements ausgeblendet wird. Also alle Beispiele, die wir gesehen haben, wo nur der Teil des Elements angezeigt wird. Im Dreiecks-Beispiel haben wir uns entschieden, einen Teil unseres Bildes anzuzeigen, der die Dreiecksform hat. Und der Rest des Bildes außerhalb dieser Dreiecksform war versteckt. Und das gilt auch für den Rest der Formen. Alles klar, lassen Sie uns sehen, wie wir die Clip-Pfadeigenschaft verwenden können, um diese Dreiecksform zu erstellen. Wir haben in unserem ersten Beispiel gesehen. Hier in meinem HTML habe ich nur ein Bild. Und in meinem CSS habe ich eine bestimmte Breite und eine Höhe für dieses Bild hinzugefügt. Und wie Sie sehen können, sitzt das Bild in der Mitte des Browsers. In Ordnung, jetzt lassen Sie uns die Clip-Pfadeigenschaft verwenden, um die gewünschte Dreieckform zu erstellen. Wir möchten also nur diesen Teil anzeigen und den Rest des Bildes ausblenden oder abschneiden. Wie können wir das tun? Ich werde hier in das Element gehen, das wir clippen wollen, was das Bild ist. Dann werde ich Clip-Pfad-Polygon hinzufügen. Und ich werde diesen Code einfach hier hinzufügen. Und wie Sie sehen können, der Teil des Bildes, der angezeigt wird, dieses Dreieck und der Bereich außerhalb dieses Dreiecks ist ausgeblendet. Gehen wir also zurück und erklären Sie den Code, den wir hier hinzugefügt haben. Dieser Code hier definiert den Bereich des Bildes, das wir anzeigen möchten. Sie können sehen, es besteht aus drei Paaren, und jedes Paar stellt einen Punkt des Dreiecks. Das erste Paar stellt also diesen Punkt des Dreiecks dar. Das zweite Paar stellt diese zweite dar, und das dritte Paar stellt diesen letzten Punkt dar. Und das sind die Punkte, die unser Dreieck definieren oder erstellen. Lassen Sie uns also sehen, wie der Wert jedes Paares diese Punkte darstellt. Bevor das Bild abgeschnitten wurde, war das seine Größe, richtig? Es war ein Quadrat. Also werde ich dieses Quadrat so verlassen, wie es ist, um uns vorzustellen, was hier passiert ist. Das erste Punktepaar beträgt 50 Prozent und 0%. Diese 50 Prozent stellen also den Abstand von der linken oberen Ecke des Bildes entlang der x-Achse dar. Und die 0 stellt den Abstand von der linken oberen Ecke des Bildes entlang der Y-Achse dar. Also begannen wir hier in der oberen linken Ecke des Bildes. Dann bewegten wir uns 50 Prozent nach rechts entlang der x-Achse, bis wir hier erreichten. Dann bewegten wir 0% nach unten entlang der Y-Achse. Also 0 Prozent bedeutet, dass wir uns überhaupt nicht bewegt haben. Das ist also unser erstes Dreieck. Dann hat das zweite Paar hier 0% an der x-Achse und 100% auf der y-Achse. Und das ist wahr. Sie können hier sehen, dass sich dieser Punkt in der unteren linken Ecke befindet. Ab der linken oberen Ecke haben wir also 0% Abstand nach rechts und 100% Abstand nach unten verschoben. Und wir landeten an diesem Punkt. Schließlich hat das dritte Paar 100% auf der x-Achse und 100% auf der y-Achse. Und es stellt diesen Punkt dar, der sich in der unteren rechten Ecke befindet. Ausgehend von der linken oberen Ecke bewegten wir uns 100% nach rechts entlang der X-Achse und 100% nach unten entlang der Y-Achse, um zu diesem Punkt zu gelangen. Alles klar, im Grunde geben wir dem Browser einfach die Punkte, die unsere Form definieren. Und dann zeichnet der Browser diese Form und zeigt an, was in der Form enthalten ist , und blendet oder schneidet die restlichen Teile des Elements außerhalb der Form. Nehmen wir an, ich möchte ein anderes Dreieck zeichnen, das diesen Teil des Bildes zeigt und den Rest verbirgt. Also im Grunde wollen wir das Dreieck auf den Kopf stellen oder die Basis an der Spitze machen. Lassen Sie uns also unsere drei neuen Punkte definieren. Die erste befindet sich hier in der oberen linken Ecke. Also im Grunde werden wir uns nicht bewegen und entweder horizontal oder vertikal. Das erste Paar wird also gleich 0, 0% sein. Bewegen Sie sich zur zweiten, befindet es sich in der oberen rechten Ecke. So werden wir 100% nach rechts entlang der x-Achse und 0% entlang der y-Achse bewegen. So werden wir 1000% haben. Dann wird der dritte und letzte Punkt genau hier in der unteren Mitte des Bildes sein. So werden wir 50 Prozent nach rechts entlang der x-Achse und 100% nach unten entlang der y-Achse bewegen . Also werden wir hier 50 Prozent und 100% haben. Und jetzt, wenn ich den Browser neu lade, können Sie sehen, dass wir dieses neue Dreieck haben, das durch diese drei neuen Punkte definiert wird. Na gut, Leute, also ist es Übung. Ich möchte, dass Sie versuchen, diese Dreiecksform zu erstellen , in der sich die Basis auf der linken Seite des Bildes befindet. Sie werden also nur einige Werte hier ändern, um diese Form zu erhalten. Also pausieren Sie das Video und versuchen Sie es auf eigene Faust. Alles klar, Jetzt möchte ich Ihnen von einem sehr netten Werkzeug erzählen, das wir ab sofort bei der Arbeit mit der Clip-Pfadeigenschaft verwenden werden. Wie Sie vielleicht bemerkt haben, wird es schwierig sein, komplexe Formen zu erstellen, indem Sie sie direkt codieren. Es wird schöner, wenn wir ein Werkzeug haben, das uns helfen kann. Und dieses Tool ist eigentlich eine Website namens clippy. Wie ihr sehen könnt, Leute, wir haben hier viele Formen, die wir auf unsere Elemente anwenden können. Also haben wir dieses Dreieck und sein Code sitzt genau hier. So können wir diesen Code einfach kopieren und direkt zu unserem Element hinzufügen. Versuchen wir also die Kreisform. Ich werde diesen Code kopieren. Gehen Sie zurück zum Browser und fügen Sie ihn hier in die Bildauswahl ein. Und wie Sie sehen können, wird das Bild jetzt in einen Kreis verwandelt und die Teile außerhalb des Kreises sind ausgeblendet. Gehen wir zurück und probieren Sie eine andere Form aus. Versuchen wir es mit diesem Raumschiff. Ich werde den Code kopieren. Gehen Sie zurück zu meinem CSS und fügen Sie es ein. Dann können Sie sehen, dass das Bild jetzt die Sternform annimmt. Wie Sie Leute sehen können, ist die Clip-Pfadeigenschaft wirklich mächtig beim Erstellen von Formen aus HTML-Elementen. Wir können auch steuern, welche Form wir erstellen möchten. Es müssen hier nicht diese spezifischen Formen sein. Wir können herumspielen, bis wir die Form bekommen, die wir wollen. Zum Beispiel werde ich diese Trapezform hier wählen. Und wie Sie sehen können, haben wir diese bunten Punkte, die wir verwenden können, um sich zu bewegen und jede Form zu kreieren, die wir wollen. Sagen wir mal, ich bin glücklich mit diesem hier. Ich kann seinen Code von hier kopieren, ihn in den Bildauswahlbereich einfügen. Und wie Sie sehen können, hat das Bild jetzt diese Form. Also möchte ich, dass Sie mit diesem netten Werkzeug herumspielen und sich daran gewöhnen weil wir es viel in unseren zukünftigen Animationen, Effekten verwenden werden. 107. 111 – kreative split mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen Split-Text-Ladeeffekt mit Clip-Pfad und CSS-Animationen erstellen . Sie können sehen, dass das Wort Laden in zwei Teile geteilt wird, oder oberen Teil und einen unteren Teil. Wir werden das mit der Clip-Pfadeigenschaft tun. Und auch der obere Teil kommt von rechts nach links, während der untere Teil von links nach rechts kommt. Und sie treffen sich in der Mitte, die das Wort laden bildet. Es ist ein ziemlich schöner Effekt. Also fangen wir an, es zu erstellen. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Loader gebe. In ihm werde ich eine Spanne hinzufügen, ihm eine Klasse der oberen Hälfte geben. Und darin werde ich das Wort laden hinzufügen. Dann kopiere ich diese Spanne, füge sie ein und ändere die Klasse in die untere Hälfte statt in die obere Hälfte. Wenn ich dann zu meinem CSS gehe, werde ich das div mit der Klasse des Loaders anvisieren. Dann werde ich Breite 300 Pixel, Höhe 60 Pixel hinzufügen. Dann umranden sieben Pixel, solide. Diese blaue Farbe. Und ich werde auch einen Rahmenradius von 10 Pixeln hinzufügen. Alles klar, lassen Sie uns zu diesen beiden Spannweiten schicken. Ich gehe zurück und füge Text ausrichten, zentrieren und Zeilenhöhe, 60 Pixel hinzu. Und schließlich werde ich Position relativ hinzufügen. Wie Sie sehen können, sind die Spannweiten jetzt innerhalb des Loader-div zentriert. Gehen wir zurück und lassen diese Spannweiten übereinander sitzen. Also werde ich hierher zurückgehen und auf die Spannweite zielen. Dann werde ich Position absolut, oben 0, links 0 als auch hinzufügen . Dann, um sie die gleiche Breite und Höhe wie das Loader div haben. Ich werde Breite, 100%, Höhe, 100% hinzufügen. Dann werde ich Schriftgröße hinzufügen, 48 Pixel. Text-Transformation, Großbuchstaben. Und schließlich, Schriftgewicht 600. Und wie Sie sehen können, sind die Spannweiten jetzt größer und sie sitzen übereinander weil wir die Breite und Höhe auf 100% ihres Behälters einstellen. Okay, gehen wir zurück und arbeiten an der ersten Band, die die oberste Halbklasse hat. Ich werde es ins Visier nehmen. Dann werde ich Farbe hinzufügen. Diese schöne rote Farbe. Dann wollen wir nur die obere Hälfte dieser Spanne sichtbar machen und die untere Hälfte hoch, da die untere Hälfte durch die zweite Spanne dargestellt wird. Also würden wir das mit der Clip-Pfadeigenschaft tun. Ich werde nach Clippy gehen und die Trapezform wählen. Dann werde ich diese Kreise ziehen, bis ich genau die obere Hälfte unseres Elements bekomme. Genau so. Dann kopiere ich den Code, gehe zurück zu meinem CSS und füge ihn in die Spanne mit der Klasse der oberen Hälfte ein. Dann werde ich die Spanne mit der Klasse der unteren Hälfte anvisieren. Dann fügen Sie Farbe hinzu, unsere blaue Farbe. Dann wollen wir nur die untere Hälfte anzeigen. Also werde ich zurück zu Clippy gehen und diese Punkte bewegen, um die untere Hälfte zu bekommen. Nur. Dann kopiere ich den Code. Gehen Sie zurück und fügen Sie es in die untere Halbspanne ein. Und genau wie diese Jungs, können Sie sehen, dass wir nur die obere Hälfte der ersten Spanne sichtbar haben , während der untere Teil versteckt oder abgeschnitten ist. Und das gleiche für den unteren Teil. Und weil sie übereinander sitzen und die gleiche Schriftgröße haben. Sie scheinen, als wären sie ein Element, aber sie sind es nicht. Alles klar, schließlich, lassen Sie uns die Animation erstellen , die die Bewegung macht, bis sie sich gegenseitig treffen. Ich werde eine neue Animation erstellen. Nennen Sie es, teilen Sie sich. Dann in ihm bei 0% der Animationsdauer, werde ich transformieren hinzufügen, X 100% übersetzen. Dann werde ich das kopieren. Fügen Sie es dreimal erneut ein. Und bei 40 Prozent ändere ich den Wert der Transformation zurück auf 0. Dann bei 60% werde ich es auch 0 machen. Dann bei 100% werde ich es zu negativ 100% ändern. Wenn Sie sich diese Animation ansehen, können Sie sehen, dass das Element, werden wir bei 100% seiner Breite von rechts beginnen. Dann bewegt es sich nach links, bis es mit 0 übersetzen an seine ursprüngliche Position zurückkehrt. Dann bleibt er von 40 Prozent bis 60 Prozent der Animationsdauer an seiner Position bei 0 übersetzen. Dann bewegt es sich wieder um 100% nach links. Also lassen Sie uns diese Animation zur oberen Hälfte hinzufügen. Ich werde hier gehen und Animation hinzufügen. Split, dann Animationsdauer von vier Sekunden, dann linear und schließlich unendlich. Jetzt können Sie sehen, dass sich der obere Teil von rechts bewegt, dann bleibt er ein wenig in der Mitte, dann bewegt er sich nach links und macht das weiter. Fügen wir diese Animation auch dem unteren Teil hinzu. Ich werde zurück gehen, um die Animationszeile des Codes zu kopieren, sie einzufügen, und am Ende werde ich nur umgekehrt hinzufügen. Dies ist also ein Animationsrichtungswert, der das Element in umgekehrter Richtung von 100% bis 0% animiert. Also beginnen wir auf der linken Seite und gehen nach rechts, nicht von rechts nach links. Und schließlich werde ich hier in das Loader div gehen. Und ich werde Überlauf versteckt hinzufügen, so dass die Spannen nicht außerhalb eines Loader-div erscheinen. Und jetzt können Sie sehen, dass der untere Teil auch in die andere Richtung animiert ist. Und zusammen schaffen sie diesen wirklich schönen Effekt. 108. 112 – kreative - Effekt mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Welleneffekt mit CSS-Animationen und der Clip-Pfadeigenschaft erstellen . Es ist ein ziemlich cooles Beispiel und wir werden sehen, wie wir die Clip-Pfadeigenschaft animieren können , um einen so coolen Effekt zu erzielen. Also werde ich hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Wellen gebe. Dann werde ich in ihm ein H2 hinzufügen und sagen Welle. Ich kopiere dieses H2 und füge es erneut ein. Und wie Sie sehen können, haben wir nur zwei Überschriften übereinander gesetzt. Gehen wir zu unserem CSS und beginnen mit dem Styling. Dann. Ich werde ihr Container-Div anvisieren, das die Klasse der Welle hat. Und ich werde Position relativ hinzufügen. Dann Breite von 500 Pixel und Höhe 500 Pixel. Dann werde ich die Überschrift selbst anvisieren und die Position absolut hinzufügen , so dass beide relativ zu den Wellencontainern übereinander positioniert werden. Und um sie horizontal und vertikal zu zentrieren, füge ich Textausrichtung, Mitte, dann Zeilenhöhe, 500 Pixel hinzu. Dann lassen Sie uns die Schriftart vergrößern, indem Sie die Schriftgröße 170 Pixel hinzufügen. Dann schließlich, Text transformieren Großbuchstaben. Und jetzt können Sie sehen, dass unsere Überschriften größer sind und sie übereinander sitzen und horizontal und vertikal im Browser zentriert sind. Lasst uns weitermachen. Ich werde hierher zurückgehen und t2 int Kind eins sagen , um die erste Überschrift zu zielen. Dann werde ich darin Farbe hinzufügen. Diese hellblaue Farbe. Wie Sie sehen können, hat sich nichts geändert, weil die zweite Überschrift darüber sitzt und sie bedeckt. In Ordnung, lasst uns diese zweite Überschrift anvisieren. Ich werde sagen, h2 nth Kind zwei. Und darin werde ich dieser dunkleren blauen Farbe Farbe Farbe hinzufügen. Und wie Sie sehen können, hat es einen blauen Hintergrund und verdeckt die erste Überschrift. Wenn wir zum Beispiel den oberen Teil der zweiten Überschrift abschneiden, sehen wir den oberen Teil der ersten darunter. Also lasst uns das schnell machen. Ich werde auf die Website Kopie gehen und ich werde nur diese Punkte verschieben, bis ich nur die untere Hälfte sichtbar. Dann kopiere ich den Code und gehe zurück zum zweiten Überschriften-Selektor und füge das hinzu. Und wie Sie sehen können, ist der obere Teil der zweiten Überschrift jetzt abgeschnitten, und die obere Hälfte, die hier mit dieser helleren blauen Farbe sichtbar ist. Eigentlich die erste Überschrift. Jetzt wissen wir also, dass die zweite Überschrift oben auf der ersten steht. In Ordnung, ich werde einfach diese Clip-Pfadzeile des Codes entfernen. Und jetzt haben wir die zweite Überschrift wieder sichtbar. Als nächstes möchten wir die wellenförmige Animation der zweiten Überschrift erstellen. Also werde ich zu meinem CSS zurückkehren, um eine neue Animation zu erstellen. Und ich werde es Welle nennen. Dann werde ich in ihm drei Animationsschritte erstellen. Die erste ist bei 0%, dann die zweite bei 50 Prozent. Und der letzte ist bei 100%. Dann gehe ich zurück auf die Clippy-Website. Und wie Sie hier sehen können, haben wir ein benutzerdefiniertes Polygon. Und das ermöglicht es uns, jede Form zu erstellen, die wir wollen, indem wir Punkte hinzufügen. Also werde ich versuchen, eine wellenförmige Form zu erstellen, wie Sie sehen können indem Sie einige Punkte hinzufügen und sie bewegen. Okay, das sieht also gut aus. Ich werde den Code kopieren. Gehen Sie zurück zu meinem CSS und fügen Sie es hier bei 0% der Animationsdauer ein. Und hier bei 100%. Dann werde ich wieder auf die Seite gehen und versucht, eine weitere Welle in die andere Richtung zu erzeugen. Also werde ich einige Punkte hinzufügen und versuchen, die wellenförmige Form zu bekommen. Dann kopiere ich den Code und füge ihn hier bei 50% der Animationsdauer ein. Was also passieren wird, Jungs, ist die zweite Überschrift wird die Form der ersten Welle haben. Dann wird es sich mit 50% auf die zweite Welle animieren. Dann geht es wieder auf die erste Welle bei 100% zurück. Und all dies wird reibungslos passieren uns einen schönen welligen Effekt geben. Also werde ich hier in der zweiten Überschrift hinauf gehen und Animation hinzufügen. Wave. Zwei Sekunden, leichtes Ein- und Aussteigen. Dann endlich unendlich. Und wie Sie sehen können, hat die zweite Überschrift jetzt die Form der Welle. Und es wird von der ersten Form animiert. Die zweite Form, die uns diesen schönen welligen Effekt gibt. Und Sie können sehen, die erste Überschrift mit der blauen Lichtfarbe ist hier unter dem Welleneffekt sichtbar. Wir können auch einen weiteren coolen Effekt erzeugen, indem wir zurück in die erste Überschrift gehen und die Farbe in transparent anstelle von hellblau ändern. Dann unten werde ich Webkit-Textstrich zu Pixeln und der gleichen blauen Farbe hinzufügen . Und jetzt können Sie sehen, die Farbe der ersten Überschrift ist jetzt transparent. Und wir haben einen Schlaganfall um ihn herum. Und es sieht sehr schön aus. 109. 113 – kreative image mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Bild-Hover-Effekt mit der Clip-Pfad-Eigenschaft erstellen . So können Sie sehen, wir haben drei Bilder hier und sie sind auf diese Weise aufgeteilt. Und wenn Sie über einem von ihnen schweben, wird es größer und nimmt den gesamten Raum des Containers ein. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Containern gebe. Und dann werde ich ein anderes div hinzufügen und ihm eine Klasse von abgeschnittenem und einer anderen Klasse von abgeschnittenem geben. Dann kopiere ich diese Klasse, füge sie zweimal wieder und ändere Clip eins in Clip 2. Dann der Clip drei. Danach werde ich zu meinem CSS gehen und das Container-div anvisieren. Dann werde ich Position, relative Breite, 800 Pixel, Höhe, 500 Pixel hinzufügen . Dann schließlich, Hintergrundfarbe. Diese dunkelgraue Farbe. Jetzt können Sie sehen, dass wir diesen dunkelgrauen Hintergrund haben. Dann werde ich das div mit der Klasse des Clips anvisieren. Dann füge ich Position, absolut, oben, 0, links, 0, Breite 100% und Höhe 100% hinzu. Dann schließlich Übergang oder 0,5 Sekunden. Dies ist also eine allgemeine Klasse, die auf alle drei der Dibs angewendet wird. Wir setzen nur die Breite und Höhe der divs auf die volle Breite und Höhe des Containers. Alles klar, fangen wir an, jedes Div einzeln anzuvisieren. Ich werde das div mit der Klasse von Clip 1 anvisieren. Dann werde ich Hintergrund-URL, erstes Bild hinzufügen , und Sie werden alle Bilder in der Ressourcendatei finden. Dann werde ich Hintergrundgröße, Abdeckung, dann Hintergrundposition, Mitte hinzufügen . Und jetzt können Sie sehen, dass wir dieses erste Hintergrundbild hier haben, und es nimmt die volle Breite und Höhe des Container-div ein. Dann werde ich dieses div kopieren, es erneut einfügen, das zweite div anvisieren und mein zweites Bild als Hintergrund verwenden. Dann werde ich es wieder einfügen. Ziele dieses Mal das dritte div und verwende das dritte Bild. Und jetzt können Sie sehen, dass die Bilder übereinander sitzen. Dieses Bild hier ist also das dritte, und es sitzt oben auf den beiden anderen. In Ordnung, lassen Sie uns nun die Bilder so schneiden, dass sie die Form haben, die wir wollen. Ich werde auf die Clippy-Website gehen und wir werden mit dem dritten Bild beginnen. Wir möchten, dass der rechte Teil des dritten Bildes erscheint. Also kann ich diese Punkte einfach bewegen, bis ich die Form habe, die ich will. Sagen wir, diese Form. Dann kopiere ich den Code. Gehe zurück zu meinem CSS und füge es in das dritte div ein. Und jetzt können Sie sehen, dass das dritte div abgeschnitten ist und nur dieser Teil hier auf der rechten Seite ist sichtbar. Alles klar, lassen Sie uns an der zweiten Seite arbeiten und die Punkte bewegen, bis ich eine Form in der Mitte bekomme. Also werde ich rumspielen, bis ich komme, wo ich will. Okay, ich werde den Code jetzt kopieren. Fügen Sie es erneut in das zweite div ein. Und jetzt können Sie sehen, dass es auch beschnitten ist und der mittlere Teil sichtbar ist. Lassen Sie uns schnell das erste div schneiden. Also werde ich zurück auf die Seite gehen und ich möchte, dass die linke Seite erscheint. Also werde ich die Punkte bewegen, bis ich die Form habe, die ich will. Dann werde ich den Code kopieren und innerhalb des ersten div hinzugefügt. Und genau so können Sie sehen, dass das erste div auch abgeschnitten ist und der Teil auf der linken Seite sichtbar ist. Alles klar, jetzt wollen wir an dem Hover-Effekt arbeiten. Zuallererst werde ich hier gehen und sagen, wenn ich über den Container schwebe, möchte ich einige Änderungen vornehmen, die an allen drei divs geschehen sind. Also werde ich das Clip-Div anvisieren. Dann möchte ich alle Teile der Clips ausblenden, wenn ich über den Container schwebe. Also werde ich auf die Clippy-Website gehen und ich werde alle Punkte nach rechts ziehen, so dass sie ausgeblendet werden. Ich kopiere den Code, gehe zurück zum Code-Editor und füge ihn hier ein. Und jetzt, wenn ich gehe und den Mauszeiger über den Container führe, kannst du sehen, dass alle Divs schrumpfen, bis sie verschwinden. Aber das wollen wir nicht. Wir möchten, dass das Bild, über das wir den Mauszeiger bewegen erweitert wird, bis es die volle Breite und Höhe einnimmt. Das ist es, was wir als Nächstes tun werden. Ich werde hierher gehen und sagen, wenn ich über den Clip div schwebe. Und da wir wollen, dass die Bilder auf die volle Breite erweitert werden, gehe ich zurück zur Clippy-Site und werde die Punkte verschieben bis ich die volle Breite und Höhe sichtbar habe. Dann gehe ich und kopiere den Code, gehe wieder zurück und füge ihn hier ein. Dieser Codeblock bedeutet also nur, dass, wenn er über eines der drei Bilder schwebt, das erweitert, bis es die volle Breite und Höhe einnimmt. Gehen wir also zum Browser und probieren Sie das aus. Sie können sehen, dass, wenn ich den Mauszeiger über ein beliebiges Bild führe, es erweitert und den vollen Raum einnimmt und die anderen Bilder verdeckt. Und das ist der Effekt, den wir wollen. 110. 114 – kreative CSS Up-Effekt mit pop: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Pop-up-Hover-Effekt erstellen. Sie können sehen, dass wir hier einen kleinen Kreis haben. Und wenn wir den Mauszeiger darüber bewegen, erscheint dieses div und es enthält eine Kopfzeile und einen Absatz. Die Idee hinter diesem Effekt ist also sehr einfach. Wir werden unser div erstellen, dann nur den kleinen Kreis auf der rechten Seite zeigen und den Rest des div verstecken. Wenn Sie dann darüber schweben, werden wir alle div zeigen. Alles klar, fangen wir an, das zu tun. Hier in meinem HTML werde ich ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich innen ein H hinzufügen und Informationen sagen. Dann füge ich einen Absatz hinzu und füge hier einen zufälligen Text hinzu. Dann werde ich zu meinem CSS gehen, um an diesen zu arbeiten. Ich werde das div mit der Klasse der Karte anvisieren. Dann werde ich seine Breite auf 500 Pixel und seine Höhe auf 250 Pixel einstellen . Dann werde ich seine Hintergrundfarbe auf diese schöne hellblaue Farbe setzen. Dann füge ich Padding hinzu, 20 Pixel von oben und 80 Pixel von rechts, dann 20 Pixel und 20 Pixel von unten und links. Dann werde ich Randradius 10 Pixel hinzufügen, um die Ecken ein wenig abgerundet zu machen. Dann schließlich Übergang oder 0,5 Sekunden. Und jetzt können Sie sehen, wir hatten diese Karte div und es enthält eine Kopfzeile und einen Absatz. Alles klar, lassen Sie uns weitermachen. Ich werde das H1 anvisieren. Fügen Sie dann Rand hinzu, unten 20 Pixel. Dann werde ich den Absatz ausrichten und seine Schriftgröße auf 18 Pixel einstellen. Alles klar, das sieht besser aus. Nun, lasst uns daran arbeiten, dieses div in den kleinen Kreis zu schneiden , der in der oberen rechten Ecke sitzt. Ich werde auf die Clippy-Website gehen. Dann werde ich die Form des Kreises hier unten wählen. Dann werde ich diesen Kreis kleiner machen und versuchen, ihn in der oberen rechten Ecke zu positionieren. Okay, das sieht gut aus. Ich werde diesen CSS-Code kopieren. Gehe zurück zu meinem CSS und füge es in das Kartendiv ein. Und wie Sie sehen können, haben wir jetzt diesen kleinen Kreis hier sitzen, und der Rest der Karte ist jetzt versteckt. Wenn Sie den Mauszeiger über die Karte bewegen, möchten wir die Größe der Karte auf ihre volle Größe zurücksetzen. Also gehe ich zurück zur Clippy-Website wähle die Kreisform erneut aus. Und ich werde die Kreisgröße vergrößern, bis sie die volle Größe des div anzeigt. Dann werde ich diesen Code kopieren. Gehen Sie zurück zu meinem CSS und sagen Sie, wenn ich über die Karte schwebe, werde ich diesen Code einfügen. Und jetzt, wenn ich zurückgehe und den Mauszeiger über den kleinen Kreis führe, kann man sehen, dass er auf seine volle Größe zurückkehrt die Kopfzeile und den Absatz zeigt. Und all dies geschieht reibungslos, weil wir hier einen Übergang von 0,5 Sekunden hinzugefügt haben. Na gut, Leute, das war's also für diesen Effekt. Es war wirklich einfach, aber es sieht gut aus. 111. 115 – Schwarz bis - mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Text-Hover-Effekt mit der Clip-Pfadeigenschaft erstellen . Sie können hier sehen, wir haben diesen Text, wo die Hälfte davon das Wort weiß und die andere Hälfte ist das Wort schwarz. Und wenn wir den Mauszeiger über den schwarzen Teil bewegen, erscheint das schwarze Wort und das weiße Wort wird kleiner, bis es verschwindet. Und das gleiche passiert, wenn man über das weiße Wort schwebt. Es erscheint vollständig, während das schwarze Wort verschwindet. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Maine gebe. Dann werde ich darin ein H1 hinzufügen und das Wort schwarz darin hinzufügen. Dann noch eine darunter, und fügen Sie das Wort weiß hinzu. Dann werde ich zu meinem CSS gehen, um das Hauptdiv zu zielen und Position, relative und Breite 800 Pixel hinzuzufügen . Dann werde ich das H1 anvisieren, Position hinzufügen, absolut, Top 50 Prozent, links, 50% auch. Dann transformieren, negative 50 Prozent und negative 50 Prozent übersetzen. Dann werde ich Rand 0, Polsterung 0 und Breite hinzufügen . 100%. Text ausrichten, zentrieren, Schriftgröße, 220 Pixel. Und schließlich, Text transformieren, Großbuchstaben. Und jetzt können Sie sehen, dass die beiden Worte übereinander sitzen. In Ordnung, lasst uns weiter arbeiten. Ich gehe hierher und wähle den zweiten, der das Wort Weiß darin hat. Also werde ich sagen, H1 n-ten Kind zwei. Dann werde ich Farbe weiß hinzufügen, dann Übergang 0,5 Sekunden. Jetzt können Sie sehen, dass das Wort weiß oben auf dem Wort schwarz sitzt. Und wir wollen nur die Hälfte davon sichtbar machen. Also werden wir auf die Clippy-Website gehen. Wählen Sie dann die Trapezform. Bewegen Sie die Punkte, bis ich die Form erhalte, die ich für das weiße Wort anzeigen möchte. Kopieren Sie dann den Code. Gehen Sie zurück und fügen Sie es in den Selektor für das Wort weiß ein. Und jetzt können Sie sehen, dass das Wort weiß jetzt geteilt ist. Und dies ist der einzige Teil, der sichtbar ist, während der andere Teil ausgeblendet ist. Aber wie Sie sehen, ist das Wort Schwarz hinter dem Wort Weiß sichtbar, und das wollen wir nicht. Also, was wir tun können, ist, können wir eine Hintergrundfarben ähnlich der Hintergrundfarbe des Körpers hinzufügen . Und es wird das Teil verbergen, das sichtbar ist. Also werde ich zurückgehen und das tun. Ich gehe hierher und füge Hintergrundfarbe hinzu. Diese Farbe. Es ist die gleiche Farbe wie der Hintergrund des Körpers. Und jetzt können Sie sehen, dass diese Hintergrundfarbe angewendet wird und wir haben die genaue Form, die wir wollen. Alles klar, lassen Sie uns an dem Hover-Effekt arbeiten, wenn Sie über das Wort Weiß schweben. Wir wollen, dass es die volle Größe nimmt und das Wort Schwarz vertuscht. Also werde ich H ein nth-Kind zu sagen. Und wenn ich darüber schwebe, gehe ich zurück auf die Clippy-Website und werde das Wort weiß auf seine volle Größe zurückgehen lassen. Also werde ich die Punkte bewegen, bis ich die volle Größe des Schiffes bekomme. Und dann kopiere ich den Code, gehe zurück und füge ihn ein. Und jetzt können Sie sehen, wenn ich über das Wort weiß schwebe, wird es größer und kehrt zu seiner vollen Größe vertuscht das Wort schwarz. Alles klar, jetzt wollen wir dasselbe für das Wort Schwarz tun. Wenn Sie darüber schweben. Wir wollen, dass es größer wird und wieder in seine volle Größe zurückkehrt und das Wort weiß vertuscht. Also werde ich die erste Überschrift auswählen, die das Wort weiß hat, indem ich ein, n-tes Kind eins hinzufüge. Und wenn ich darüber schwebe, möchte ich einige Änderungen vornehmen, die an dem passiert sind, der direkt daneben sitzt. Also bedeutet diese Codezeile hier nur, dass, wenn ich über das Wort weiß schwebe, ich Änderungen vornehmen werde, die am Wort schwarz geschehen sind. Also zielt dieser Selektor hier nur auf das H1-Element ab, das direkt nach diesem Element sitzt. Also gehe ich zurück auf die Clippy-Website und möchte die weiße Überschrift schrumpfen lassen , bis sie verschwindet, damit das schwarze Element auftauchen kann und seine volle Größe wird. Also werde ich den Tanz bewegen, bis ich die Form habe, die ich will, was im Grunde keine Form ist. Dann gehe ich zurück zu meinem CSS und füge diesen Code hier hinzu. Das bedeutet also nur, dass, wenn ich den Mauszeiger über das erste H1, das ist das Wort schwarz, das zweite schrumpfen wird, bis es verschwindet. Und das wird uns den Effekt geben, den wir wollen. Und jetzt, wenn ich gehe und mit dem Mauszeiger über das Wort schwarz, können Sie sehen, dass das Wort weiß schrumpft, bis es verschwindet und das Wort schwarz auf seine volle Größe geht, was uns den Effekt gibt, den wir wollen. 112. 116 – Bild um den Hovereffekt mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese Karte Hover-Effekt mit CSS-Clip-Eigenschaft erstellen. Sie können sehen, dass wir dieses Bild haben und wenn Sie darüber schweben, schrumpft es, bis es zu einem kleinen Kreis wird. Und wir haben hier einige Inhalte, die unter dem Bild erscheinen. Also haben wir h1, h2 oder einen Absatz und ein Anker-Tag. Wir werden diesen coolen Effekt mit V clip-path Eigenschaft erstellen. Also lasst uns das machen. Ich werde hier in meinem HTML gehen und ein div hinzufügen, ihm eine Klasse von Karte geben. Dann werde ich unten ein weiteres div hinzufügen. Geben Sie ihm eine Klasse. Dies wäre also das div, das unser Bild enthält. Dann werde ich unser Bild darin hinzufügen. Dann unterhalb dieses div werde ich ein weiteres hinzufügen. Geben Sie ihm eine Klasse von Inhalten. Dann werde ich darin ein H2 hinzufügen und Titel sagen. Dann ein Absatz danach. Und ich werde einige Lorem Ipsum Dummy Text hinzufügen. Und schließlich werde ich einen Anker-Tag hinzufügen und sagen mehr lesen. In Ordnung, ich werde zu meinem CSS gehen, um das zu stylen. Ich werde das div mit der Klasse der Karte anvisieren. Dann werde ich Position, relative Breite, 335 Pixel, Höhe, 500 Pixel hinzufügen relative Breite, . Danach werde ich das div mit der Klasse des Bildes anvisieren und Position absolut, top 0, links 0 hinzufügen . Dann wollen wir, dass es die volle Breite und Höhe der Karte einnimmt. So werden wir Breite 100% und Höhe 100% als auch hinzufügen . Dann schließlich werden wir Übergang oder 0,5 Sekunden hinzufügen. Alles klar, lassen Sie uns weitermachen. Ich werde das Bild selbst anvisieren, das in unserem div sitzt und Breite 100% hinzufügen. Und jetzt können Sie sehen, dass das Bild die gleiche Breite wie sein Container hat. Jetzt wollen wir das Bild schrumpfen lassen und zu einem kleinen Kreis werden, wenn wir darüber schweben. Also lasst uns das machen. Ich werde sagen, wenn ich über das div schwebe, das die Klasse der Karte hat, möchte ich einige Änderungen am div mit der Klasse des Bildes vornehmen. Und ich werde auf die Website Clippy gehen, um die Kreisform zu erstellen, die wir wollen. Ich werde versuchen, die genaue Kreisgröße zu erstellen, die ich in der genauen Position möchte, die ich will. Dann kopiere ich den Code. Geh wieder zurück und füge es hier ein. Dann gehe ich wieder auf die Clippy-Website zurück und ich werde diesen Kreis die volle Größe aufnehmen lassen , damit wir die volle Größe des Elements zeigen können. Dann kopiere ich den Code erneut. Gehen Sie zurück und gehen Sie direkt hier in das Bild div, und fügen Sie den Code hier in das div mit der Klasse des Bildes ein. Dies wird also tun, wenn wir den Mauszeiger über die Karte bewegen, ändert sich das div mit der Klasse des Bildes von dieser Clip-Pfadeigenschaft zu dieser Clip-Pfadeigenschaft, wo es ein kleiner Kreis sein wird. Und jetzt können Sie sehen, wenn ich den Mauszeiger über die Karte führe, das Bild schrumpft, bis es kleiner wird. Und wenn Sie weg schweben, geht es zurück, um die gesamte Größe der Karte zu decken. Alles klar, gehen wir zurück und arbeiten weiter. Wir werden an den Inhalten arbeiten. Also werde ich das div mit der Klasse des Inhalts anvisieren. Und ich werde die Position absolut, links, 0, unten 50 Pixel hinzufügen , weil wir den Text über dem unteren Rand um 50 Pixel positionieren wollen. Dann, um den Text in der Mitte auszurichten, werde ich Text ausrichten Mitte hinzufügen. Jetzt können Sie sehen, der Inhalt befindet sich am unteren Rand der Karte div. Lasst uns weitermachen. Ich werde das H2 anvisieren. Dann füge ich auch Padding und Marge 0 hinzu. Dann werde ich Texttransformation hinzufügen, Großbuchstaben. Dann werde ich den Absatz anvisieren und Rand unten 25 Pixel hinzufügen. Dann werden Schriftgröße, 16 Pixel und Text transformiert. Großschreibung. Dann werde ich das Anker-Tag anvisieren. Anzeige, Inline-Block hinzufügen. Textdekoration Keiner. Hintergrundfarbe, schwarze Farbe, weiß. Padding, fünf Pixel von oben und unten und zehn Pixel von links und rechts. Dann schließlich werde ich Text transformieren Großbuchstaben hinzufügen. Alles klar, jetzt haben wir den Inhalt so, wie wir wollen. Lasst uns weitermachen. Wir möchten, dass dieser Inhalt ausgeblendet wird und nur angezeigt wird, wenn wir den Mauszeiger über die Karte bewegen. Also werde ich hierher gehen und das H2, den Absatz und das Anker-Tag anvisieren . Dann werde ich Deckkraft 0 hinzufügen, dann Übergang 0,3 Sekunden. Und ich werde hinzufügen transformieren Y 20 Pixel übersetzen. Wir setzen die Übersetzen Y auf 20 Pixel hier, weil wir möchten, dass diese Elemente von unten in ihre ursprüngliche Position verschoben werden, während sie eingeblendet werden. Wenn wir den Mauszeiger über die Karte bewegen, wird es ein schönerer Effekt sein, als nur zu versagen. Dann, wenn wir schließlich über die Karte schweben, wollen wir, dass diese Elemente wieder erscheinen und schön verblassen. Also werde ich sagen, wenn wir den Mauszeiger über die Karte bewegen, werde ich einige Änderungen am H2 vornehmen. Dann werde ich das kopieren, einfügen und dieses Mal auf den Absatz abzielen. Dann werde ich auch das Anker-Tag anvisieren. Dann werde ich in diesem Inneren noch einmal Opazität hinzufügen , so dass diese Elemente wieder beim Schweben erscheinen. Dann Transformieren, Y 0 übersetzen, so dass sie von unten in ihre ursprüngliche Position verschoben werden. Und schließlich, Übergangsverzögerung 0,5 Sekunden. Und jetzt, wenn ich zurückgehe und mit dem Mauszeiger über das Bild schrumpft, sieht man, dass es zu einem Kreis wird. Und der Inhalt hier verblasst schön, während er sich von unten in seine Position bewegt, was uns diesen wirklich coolen Effekt verleiht. 113. 117 – kreative image mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Bild-Hover-Effekt mit der Clip-Pfad-Eigenschaft erstellen . Wenn ich den Mauszeiger über das Bild führe, wird es von der linken unteren Ecke in die rechte obere Ecke verkleinert. Und wir haben diesen Text darunter zu sehen. Und dieser Text enthält ein H2, einen Absatz und einen Link. Lassen Sie uns sehen, wie wir diesen Effekt erzeugen können. Ich werde hier in meinem HTML beginnen, indem ich ein div hinzufüge und ihm eine Klasse von Karte gebe. Dann werde ich ein weiteres mit der Klasse des Inhalts hinzufügen. Und in diesem Content-Div werde ich einen H2 hinzufügen und sagen, Bild Hover-Effekt. Dann werde ich einen Absatz hinzufügen und etwas Lorem Ipsum Text hinzufügen. Dann schließlich werde ich ein Anker-Tag hinzufügen und sagen mehr lesen. Dann werde ich zu meinem CSS-Ziel das div mit der Klasse der Karte gehen. Wenn ich Position relative Breite hinzufügen, 400 Pixel, Höhe, 400 Pixel sowie. Und schließlich, Hintergrundfarbe, schwarz. So hier können Sie sehen, dass wir einen schwarzen Hintergrund mit einer Breite und einer Höhe von 400 Pixeln im Browser sitzen. Alles klar, lassen Sie uns weitermachen und wir gehen hierher zurück und zielgerichtete Div mit der Klasse der Inhalte. Dann werde ich Position, absolute Breite, 60 Prozent, Top, 50 Prozent, links,50 Prozent als auch hinzufügen 60 Prozent, Top, 50 Prozent, links, . Dann, um den Inhalt zu zentrieren, werde ich transformieren, übersetzen, negative 50 Prozent und negative 50 Prozent hinzufügen . Dann werde ich Farbe hinzufügen, weiß. Und schließlich, Text ausrichten Mitte. Und jetzt können Sie sehen, dass der Inhalt div in der Karte zentriert ist. Lassen Sie uns weiter arbeiten und wir gehen zurück zu meinem CSS und zielen auf das H2. Dann werde ich Rand, unten 20 Pixel und Texttransformation hinzufügen . Großschreibung. Ich werde auch auf den Absatz abzielen. Fügen Sie Rand unten 30 Pixel hinzu. Und Text-Transformation. Großschreibung. Dann werde ich das Anker-Tag anvisieren. Anzeige hinzufügen. Inline-Block, Padding, 10 Pixel von oben und unten und zehn Pixel von links und rechts. Dann umranden. Ein Pixel. Massiv weiß. Textdekoration, keine. Farbe. Weiß. Übergang 0,5 Sekunden. Dann schließlich, Text transformieren. Großschreibung. Nun, wenn Sie den Mauszeiger über den Link bewegen, möchten wir die Farbe in Schwarz ändern und einen weißen Hintergrund hinzufügen. Also lasst uns das machen. Ich werde hier gehen und sagen, wenn ich über den Link schwebe, werde ich seine Farbe in Schwarz ändern. Und ich werde Hintergrundfarbe weiß hinzufügen. Und jetzt, wenn ich den Mauszeiger über den Link führe, haben wir diesen Effekt, bei dem sich die Hintergrundfarbe in Weiß ändert und die Farbe des Textes in Schwarz ändert. Fügen wir nun das Bild hinzu, das sich auf dem Inhalt befindet. Ich gehe zurück zu meinem HTML, gehe direkt hier unter das Inhaltsdiv und füge ein Bild-Tag hinzu. Dann werde ich unser Bild hinzufügen. Sie finden es in den Ressourcen für diese Lektion. Wie Sie sehen können, ist dieses Bild überall. Gehen wir zurück zu CSS und beheben das. Ich werde es ins Visier nehmen. Dann fügen Sie Position, absolut, oben, 0, links 0 sowie. Breite 100% und Höhe 100%. Wenn ein Objekt passt abgedeckt. Und schließlich, Übergang 0,5 Sekunden. So jetzt können Sie sehen, dass unser Bild jetzt oben auf dem Inhalt sitzt und es verdeckt. Jetzt möchten wir einen Hover-Effekt erstellen. Wenn wir also über das Bild schweben, wollten wir von der linken unteren Ecke bis zur rechten oberen Ecke schrumpfen. Also werde ich hierher gehen und sagen, wenn ich über das Bild schwebe. Dann werde ich auf die Clippy-Website gehen und ich werde die Trapezform wählen. Dann werde ich diesen Punkt hier von der unteren linken Ecke nach oben rechts verschieben. Kopieren Sie dann den Code und kehren Sie zu meinem CSS zurück und fügen Sie ihn ein. Dann gehe ich zurück auf die Clippy-Website und lasse das Bild auf seine volle Größe zurückkehren. Wieder. Kopieren Sie den Code und kehren Sie zu meinem CSS zurück und fügen Sie ihn hier in das Bild-Tag ein. Dies wird dem Browser nur sagen, dass, wenn wir den Mauszeiger über das Bild bewegen, wir möchten, dass es von dieser vollen Größe zu dieser Größe wechselt, wo es vollständig ausgeblendet wird sich von der unteren linken Ecke zur oberen rechten Ecke bewegt. Wenn ich also mit dem Mauszeiger über das Bild gehe, kann man sehen, dass es genau den gleichen Effekt hat, den wir wollen. Es schrumpft von der linken unteren Ecke zur oberen rechten Ecke. Und tatsächlich können wir das ziemlich leicht ändern. Nehmen wir zum Beispiel an, wir wollen es von der oberen linken Ecke zur rechten unteren Ecke schrumpfen. Wir können das leicht machen, indem wir auf die Clippy-Website zurückkehren. Und ich werde diesen Punkt hier von der oberen linken Ecke nach unten rechts verschieben. Dann kopiere ich den Code. Gehen Sie zurück zur Bildauswahl, und fügen Sie sie hier ein, wenn Sie den Mauszeiger über das Bild bewegen. Und jetzt, wenn ich den Mauszeiger über das Bild führe, kann man sehen, dass es von der oberen linken Ecke zur rechten unteren Ecke schrumpft, was uns diesen coolen Effekt gibt. 114. 118 – kreative menu mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese coole erstellen und dann bewegen Sie den Effekt mit der Clip-Pfad-Eigenschaft. Sie können sehen, wenn ich den Mauszeiger über die Links im Menü, dieser Effekt passiert, wo wir eine horizontale Linie, die durch die Links bewegt in Art teilt sie in zwei Hälften, die obere Hälfte und die untere Hälfte. Und Sie können sehen, die obere Hälfte bewegt sich ein wenig nach oben rechts und die untere Hälfte bewegt sich nach unten links. Lassen Sie uns also anfangen, diesen Effekt zu erzeugen. Ich werde hier gehen und dann eine UL hinzufügen, und dann ein Anker-Tag darin. Und ich werde sagen, nach Hause. Dann gehe ich hierher und füge Daten hinzu, Text und sage auch nach Hause. Hier erfahren Sie später, warum wir das Datentext-Attribut hinzugefügt haben. Dann kopiere ich diesen Listeneintrag, füge ihn viermal wieder ein. Und sagen Sie über die Dienste, Team und Kontakt. In Ordnung, ich werde zu meinem CSS gehen und die UL anvisieren. Dann werde ich Marge 0 hinzufügen, Padding 0 als auch. Dann werde ich das LI anvisieren und Position hinzufügen. Relativ, List-Stil, keine. Und schließlich, Rand, zehn Pixel von oben und unten und 0 Pixel von links und rechts. Alles klar, ich werde das Anker-Tag anvisieren und Position relativ hinzufügen. Dann zeigen Sie Block, Text, Ausrichten, Zentrieren, Rand, 0 an. Padding, fünf Pixel von oben und unten und zehn Pixel von links und rechts. Dann werde ich Text Transformation hinzufügen. Großbuchstaben, Übergang, 0,5 Sekunden. Schriftgröße, 16 Pixel, Schriftgewicht, 900. Und schließlich, Textdekoration. Keiner. Und jetzt können Sie sehen, dass die Links genau so aussehen, wie wir wollen. Als nächstes möchten wir die Links in zwei Hälften aufteilen , so dass, wenn die Linie durch sie verläuft. Split-Effekt wird passieren, und wir werden das mit der Clip-Pfadeigenschaft tun. Also zuerst werde ich das vor Pseudo-Element des Anker-Tags anvisieren und Inhalte hinzufügen, einen TTR-Datentext. Was dies also tun wird, ist, dass es den Text, den wir im Datentext-Attribut haben, greifen und ihn in den Inhalt des vorher Pseudo-Elements jedes Links einfügen wird. Das vorher Pseudoelement des ersten Links wird also einen Inhalt von zu Hause haben. Der zweite Link wird einen Inhalt von etwa haben, und so weiter. Ordnung, als nächstes möchten wir, dass dieser Inhalt perfekt auf dem ursprünglichen Text des Links sitzt . Also werde ich Position, absolut, oben, 0, links, 0, Breite 100% hinzufügen . Dann füge ich Padding hinzu, fünf Pixel von oben und unten und 0 Pixel von links und rechts. Dann werde ich Farbe hinzufügen. Diese dunkelgraue Farbe Box Größe Border-Box-Übergang, 0,5 Sekunden. So können Sie jetzt sehen, dass die vorher Pseudo-Elemente perfekt auf den Links sitzen und sie haben diese dunkelgraue Farbe. Alles klar, jetzt wird das vorher Pseudo-Element die obere Hälfte sein. Gehen wir also auf die Clippy-Website und erstellen Sie den dafür verantwortlichen Code. Also werde ich die Trapezform wählen und die Punkte verschieben, bis sie die obere Hälfte genau darstellen. Dann kopiere ich den Code zurück in das vorher Pseudo-Element und füge ihn ein. So können Sie jetzt sehen, dass die obere Hälfte des vorher Pseudo-Elements sichtbar ist, während der untere Teil ausgeblendet ist. Lassen Sie uns tatsächlich zurückgehen und die Farbe der Links transparent machen. Ich werde in den Linkselektor gehen und Farbe hinzufügen. Transparent Und jetzt können Sie es deutlich sehen, die obere Hälfte ist sichtbar und die untere ist versteckt. Okay, lassen Sie uns dasselbe für das After-Pseudo-Element tun. Der einzige Unterschied ist, dass wir die obere Hälfte verstecken und die untere zeigen. Also kopiere ich das vorher Pseudo-Element, füge es erneut ein. Und das einzige, was sich ändern wird, ist die Clip-Pfadeigenschaft. Also gehe ich zurück auf die Clippy-Website und werde die Punkte verschieben, um die untere Hälfte zu erreichen, nicht die obere. Dann kopiere ich den Code, gehe zurück und füge ihn in das After-Pseudo-Element ein. Und jetzt können Sie sehen, dass das After-Pseudo-Element jetzt auf der unteren Hälfte erscheint. Ordnung? Wenn Sie den Mauszeiger über die Links bewegen, möchten wir, dass das vorige Pseudo-Element in die rechte obere Ecke und das nachfolgende Pseudo-Element zur linken unteren Ecke bewegt. Also lasst uns das machen. Ich werde sagen, wenn ich über das Anker-Tag schwebe, werde ich einige Änderungen am Pseudo-Element vornehmen, das die obere halbe Stunde ist, die Farbe in diese rote Farbe ändern. Und ich werde transformieren hinzufügen, 10 Pixel übersetzen. So wird es zehn Pixel nach rechts entlang der x-Achse bewegen, die negativen 3 Pixel. Es wird also um drei Pixel nach oben verschoben. Dann werde ich das nochmal kopieren. Und ändern Sie dies in negative 10 Pixel und positive drei Pixel. Und jetzt, wenn ich über einen Link schwebe, können Sie sehen, dass sich die obere Hälfte und die untere Hälfte bewegen und uns unseren coolen Split-Effekt und auch ihre Farbe ändert. Um zu lesen. Das einzige, was jetzt noch übrig ist, ist die horizontale Linie, die durch die Links verläuft und sie aufteilt. Wir werden das mit dem vor Pseudo-Element der Listenelemente erstellen. Also werde ich es ins Visier nehmen. Dann werde ich darin leere Strings begnügen. Position, absolut. Dann, um es vertikal zu zentrieren, werde ich Top 50 Prozent hinzufügen. Dann Transformieren, Y negativ übersetzen 50 Prozent. Dann möchten wir, dass es die volle Breite des Listenelements einnimmt. Also fügen wir Breite hinzu, 100%. Dann Höhe, nur ein Pixel. Und Hintergrundfarbe. Diese dunkelgraue Farbe. Dann wollen wir, dass es von der linken Seite auf die rechte Seite kommt. Also werde ich links negativ 100% hinzufügen. Und schließlich Übergang 0,5 Sekunden. Und jetzt können Sie sehen, dass wir diese dünne Linie haben, die auf der linken Seite der Listenelemente sitzt. Und wenn wir den Mauszeiger über die Listenelemente bewegen, möchten wir, dass diese Zeile über die Links nach rechts verschoben wird. Also werde ich sagen, wenn ich über die Listenelemente schwebe, möchte ich einige Änderungen am vorigen Pseudo-Element vornehmen. Ich werde die linke Eigenschaft auf 100% anstelle von negativem 100% setzen. Und jetzt, wenn ich über die Links schwebe, können Sie sehen, dass sich die Linie über die Links bewegt, was uns diesen coolen Spaltungseffekt gibt. Gehen wir zurück und verstecken die Linie außerhalb der Verbindung. Ich gehe zurück hierher in das Listenelement und füge Überlauf versteckt hinzu. Wir wollten auch den Effekt teilen, um eine gewisse Verzögerung zu haben und etwas passieren, nachdem die Linien beginnen sich zu bewegen. Also werde ich in die obere Hälfte gehen und Übergangsverzögerung 0,25 Sekunden hinzufügen. Und ich werde dasselbe auch für die untere Hälfte tun. Und jetzt können Sie sehen, dass die horizontale Linie jetzt ausgeblendet ist. Und wenn wir den Mauszeiger über den Link bewegen, bewegt sich die Linie und spuckt sie, was uns den genauen Effekt gibt, den wir wollen. 115. 119 – kreative hover mit -: Hallo an alle, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren Schaltflächeneffekt mit der Clip-Pfadeigenschaft erstellen. Sie können sehen, dass diese Schaltfläche auf diese Weise in zwei Teile geteilt wird, einen weißen Teil und einen violetten Teil. Und wenn Sie den Mauszeiger über den weißen Teil bewegen, dehnt sich die Hintergrundfarbe der Schaltfläche aus und wird weiß. Und ähnlich, wenn Sie über den violetten Teil schweben, dehnt er sich auch aus und der Hintergrund der Schaltfläche wird violett. Also lassen Sie uns diesen Effekt erzeugen. Ich werde hier in meinem HTML beginnen, indem ich ein Anker-Tag hinzufüge. Dann werde ich eine Spanne hinzufügen und Knopf sagen. Dann noch eine Spanne darunter. Und sagen Sie Button auch. Okay, dann werde ich zu meinem CSS gehen und das Anker-Tag anvisieren. Fügen Sie dann Position, relative Breite, 180 Pixel, Höhe 60 Pixel hinzu. Dann werde ich die Spannweiten innerhalb des Links anvisieren und Position absolut hinzufügen , so dass wir sie relativ zum Anker-Tag positionieren können. Dann werden wir oben 0 hinzufügen, links 0 als auch. Breite, 100%, Höhe, 100% auch. Die beiden Drehungen haben also die gleiche Breite und Höhe wie die Verbindung. Dann werde ich Farbe hinzufügen, weiß, Hintergrundfarbe, diese lila Farbe. Dann zentrieren wir den Text. Ich werde Text-Ausrichtung, Mitte und Zeilenhöhe, 60 Pixel hinzufügen . Dann werde ich Texttransformation, Großbuchstaben Abstand zu Pixeln hinzufügen . Dann schließlich, Schriftgröße, 22 Pixel. Und jetzt können Sie sehen, dass die beiden Spannweiten übereinander sitzen und die volle Breite und Höhe des Anker-Tags einnehmen. Alles klar, jetzt möchte ich die zweite Spanne anvisieren. Also werde ich sagen, span n-ten Kind, um die zweite Spanne zu zielen. Dann werde ich die Hintergrundfarbe in Weiß und die Farbe in unsere violette Farbe ändern . Dann werde ich den Übergang 0,5 Sekunden hinzufügen. So können Sie jetzt sehen, dass die zweite Spanne einen weißen Hintergrund hat und die Textfarbe lila ist. Aber darunter befindet sich die erste Spanne mit dem violetten Hintergrund und weißem Text. Und der Grund, warum die zweite Spanne oben auf dem ersten erscheint, ist einfach, weil sie nach dem ersten im HTML-Markup kam. Aber wenn wir diesen spezifischen Teil aus der zweiten Spanne abschneiden, wird der erste darunter erscheinen, und das werde ich als nächstes tun. Ich werde auf die Clippy-Website gehen und ich werde dieses Mal die linke Punktform wählen. Dann werde ich die Punkte bewegen, bis ich die Form habe, die ich will. Also werden wir versuchen, es die Hälfte der Spannweite zeigen zu lassen. Dann werde ich seinen Code kopieren. Gehen Sie zurück zu meinem CSS und fügen Sie es ein. Und jetzt können Sie sehen, dass nur dieser Teil auf der rechten Seite in der zweiten Spanne sichtbar ist , während der linke Teil abgeschnitten wurde. Und das ist der Grund, warum die erste Band jetzt darunter erscheint. Okay, jetzt, wenn wir über die zweite Spanne schweben, die der weiße Teil ist, wollen wir, dass es wieder größer wird und die volle Größe der Verbindung aufnimmt. Also werde ich hier gehen und span nth-child auch sagen, um die zweite Spanne zu zielen. Und wenn ich darüber schwebe, möchte ich die volle Größe der zweiten Spanne anzeigen. Also gehe ich zurück auf die Clippy-Website und ich werde die Punkte nach links verschieben , bis es die volle Größe des Elements anzeigt. Dann kopiere ich den Code, gehe zurück und füge ihn hier ein, um über die zweite Spanne zu schweben. Und jetzt, wenn ich zurückgehe und den Mauszeiger über den weißen Teil führe, kann man sehen, dass er sich nach links ausdehnt und die volle Größe des Links annimmt. So ändert sich seine Größe vom ersten Fall, in dem der rechte Teil nur sichtbar ist, bis zum zweiten Fall, in dem seine volle Größe sichtbar ist. Nun, wenn wir den Mauszeiger über den violetten Teil bewegen, wollen wir, dass der weiße Teil schrumpft und verschwindet , so dass die erste Spanne oder der violette Teil vollständig erscheint. Also lasst uns das machen. Ich werde hier gehen und span nth-child sagen. Eins, um auf den violetten Hintergrund zu zielen. Und wenn wir darüber schweben, wollen wir einige Änderungen an der Spanne vornehmen, die direkt danach kommt, nämlich dem weißen Hintergrund. Dann gehe ich zurück auf die Clippy-Website und ich werde alle Punkte nach rechts verschieben , damit der weiße Hintergrund schrumpfen und vollständig verschwinden wird. Dann kopiere ich diesen Code, gehe zurück und füge ihn hier ein. Und jetzt, wenn ich den Mauszeiger über den violetten Teil schrumpft, sieht man, dass der weiße Teil ganz nach rechts schrumpft, so dass der violette Teil wieder erscheint. Und wenn er über den weißen Teil schwebt, wächst er nach links, bis er die volle Größe der Verbindung einnimmt. Und dass jeder genau der Effekt ist, den wir wollen. 116. JavaScript-Effekte: So viele von Ihnen haben mich gebeten, einige Lektionen mit JavaScript-Effekten zu erstellen. Hier sind wir also in diesem Abschnitt, in dem wir lernen werden, wie man Javascript und CSS-Animationen zusammen verwendet , um einige wirklich interessante Effekte zu erzielen, die nicht nur mit CSS erstellt werden können. Also hier sind die Beispiele, die wir zusammen erstellen werden. 117. Hover-Effekt einer bunten Textanimation: Hallo alle zusammen. Willkommen zu einer weiteren neuen Lektion im Kurs. In dieser speziellen Lektion werden wir diesen wirklich coolen Text-Hover-Effekt erzeugen wirklich coolen Text-Hover-Effekt Sie können sehen, dass dieser Effekt eintritt, wenn wir mit der Maus über diesen Text fahren, wie Sie sehen können, der Text leuchtet von links nach rechts und alle Buchstaben haben unterschiedliche Wenn wir den Mauszeiger wegbewegen, verschwindet dieser Lichteffekt. Wir werden diesen Effekt mit HTML, CSS und ein wenig Hilfe von Fangen wir an, diesen Effekt zu erzeugen. Ich werde in meinem HTML-Code ein H zwei hinzufügen und ihm eine Textklasse geben. Dann werde ich darin Javascript-Text hinzufügen. Dann gehe ich zu meinem CSS und ziele auf den Körper ab. Fügen Sie Display hinzu, biegen Sie, richten Sie den Inhalt aus, zentrieren Sie eine Linie , Mittelpunkt der Elemente, Mindesthöhe, 100-VH-Hintergrund, diese dunkelgraue Farbe Danach wähle ich die H2 und füge dann die relative Schriftgröße drei E M, Buchstabenabstand, 0,05 M. Cursor-Standardtext transformiert Großbuchstaben, dann schließlich Schriftstärke 500 Jetzt können Sie sehen, dass der H Two viel besser aussieht. Okay, jetzt gehen wir zur Javascript-Datei. Was wir für alle tun wollen, ist, dass wir jeden Buchstaben des H-Textes in eine separate Spalte packen wollen. Der Buchstabe J wird in eine Spanne eingeschlossen, dann der Buchstabe A, dann der Buchstabe und so weiter und so fort. Dann fangen wir an, diese Spannen zu stylen. Wir werden das mit Javascript machen. Lass uns das machen, und ich hoffe, du verstehst, was ich meine. Ich fange hier an, indem die H2 auswähle und sie in einer Variablen speichere. Ich erstelle eine Variable, nenne sie Text und sage Document Query Selector und ziele auf die H-Two ab, die eine Textklasse hat Fangen wir jetzt an, jeden Buchstaben in eine Spalte zu packen. Ich werde einen neuen Variablennamen erstellen, der sich erstreckt. Dann setze ich das auf Text im Text. Innertext-Methode extrahiert den Text in den H-Two, nur um zu sehen, was wir tun den Text in den H-Two, nur um zu sehen, was wir Schritt für Schritt werde ich hierher gehen und Konsolen-Log-Spans hinzufügen. Wenn wir jetzt die Konsole öffnen, können Sie sehen, dass wir Javascript-Text gedruckt haben , also den Text innerhalb der H-Zwei. Okay, jetzt wollen wir jeden Buchstaben einzeln abrufen , damit wir ihn in eine Spanne einordnen können. Und das können wir mit der Split-Funktion machen. Ich werde hier hin gehen und Split hinzufügen, und ich werde eine leere Zeichenfolge hinzufügen. Die Eigenschaft split wird für Zeichenketten verwendet , um sie aufzuteilen, und sie gibt ein Array zurück, das oder die geteilten Buchstaben enthält, und die leeren Zeichenketten hier sind das Trennzeichen. Wenn wir hier beispielsweise ein Leerzeichen innerhalb der leeren Zeichenketten hinzugefügt haben, können Sie hier sehen, dass unsere Zeichenfolge in zwei Wörter aufgeteilt ist . Da wir aber wollen, dass alle Buchstaben getrennt werden, werden wir dieses Leerzeichen hier entfernen. Jetzt können Sie sehen, dass wir ein großes Array haben, das alle Buchstaben als Array-Elemente enthält. Ordnung, jetzt wollen wir diese Buchstaben im Array in einer Schleife durchgehen und damit beginnen, sie in Felder zu packen. Und das werden wir mit der Map-Methode machen. Ich werde hier eine Karte als ersten Parameter hinzufügen, ich werde beim zweiten Parameter einen Buchstaben hinzufügen, ich werde für den Index hinzufügen. Die Map-Methode ist im Grunde eine Methode, die das Array durchläuft und ein neues Array erstellt, das auf dem Aufrufen einer Funktion für jedes Element des ursprünglichen Arrays basiert . Der erste Parameter sind hier die Elemente des Arrays. In unserem Beispiel sind Buchstabe hier die Buchstaben innerhalb unseres Spans-Arrays Hier ist der Index des Elements. Für die erste Schleifeniteration wird der Buchstabe hier der Buchstabe J sein und I wird Null sein Dann ist der Buchstabe für die zweite Schleifeniteration der zweite Buchstabe a und der Index ist eins Und so weiter und so fort. Dann werde ich die Funktion der Map-Methode darin erstellen . Ich werde Rückkehr sagen. Dann öffne ich ein Template-Literal, füge ein Span-Tag schließe dann das darin enthaltene Span-Tag Wir werden jeden Buchstaben hinzufügen. Dazu fügen wir ein 1-Dollar-Zeichen dann den Buchstaben in geschweiften Klammern Was hier passieren wird, jeder ist, dass die Map-Methode das Buchstabenfeld durchläuft, jeden Buchstaben innerhalb einer Spanne hinzufügt dann daraus ein neues Array zurückgibt Wie Sie hier sehen, haben wir ein großes Array und jedes Element ist ein Span-Tag mit einem Buchstaben darin. In Ordnung, um das zu beenden, wollen wir alle Elemente des Arrays extrahieren und sie wieder in normale Zeichenketten konvertieren , um sie einfach in unseren HTML-Code einzufügen Und das können wir ziemlich einfach tun, indem wir die Join-Methode verwenden Ich werde hierher gehen und dann Join und leere Zeichenketten als Trennzeichen hinzufügen . Wenn Sie sich nun die Variablen Spans in der Konsole ansehen, können Sie sehen, dass sie als Zeichenfolge angezeigt werden Und wir können sie jetzt ganz einfach in die HTML-Überschrift einfügen , indem wir hier den Text innerHTML = Spans hinzufügen Nun, wenn wir uns das H Two ansehen, können Sie sehen, dass es jetzt all diese Spannen hat Jeder Buchstabe ist in eine Spanne eingeschlossen. Gehen wir nun zu unserem CSS und wählen die Bereiche innerhalb der H-Zwei aus und fügen Farbe hinzu Diese hellere graue Farbe, dann Übergang 0,25 Sekunden Dann werde ich sagen, wenn ich mit der Maus über H zwei fahre, werde ich die Spanne anvisieren und Farbe hinzufügen, diese hellgrüne Um den Glanzeffekt zu erzielen, füge ich dann den Textschatten hinzu, diesen Wert Wenn ich jetzt gehe und den Mauszeiger über das H two bewege, können Sie sehen, dass wir diesen schönen Leuchteffekt haben Jetzt wollen wir den Buchstaben eine gewisse Übergangsverzögerung hinzufügen. Gehen wir zurück zu Javascript. Gehen Sie hier innerhalb der Spanne und fügen Sie die Stilübergangsverzögerung hinzu. Dann verwenden wir Vorlagenliterale, um Code einzufügen. Dann addieren Sie I mal 40, dann Millisekunden. Wir haben den Index hier verwendet, um die Übergangsverzögerung einzigartig zu machen Für jede Spanne ist es Null mal 40 Millisekunden für den ersten Buchstaben, einmal mal 40, dann zweimal 40 und so weiter und so fort Wenn wir jetzt mit der Maus über H zwei fahren, können Sie sehen, wie die Buchstaben nacheinander leuchten Lassen Sie uns auch die Farbe jedes Buchstabens mithilfe der CSS-Eigenschaft filter ändern jedes Buchstabens mithilfe der CSS-Eigenschaft filter Ich werde hier einen Filter hinzufügen und ihn um 30 Grad drehen. Dadurch hat jede Spanne eine andere Farbe. So wie du es hier sehen kannst. Alle Buchstaben haben jetzt verschiedene coole Farben. haben wir alle Damit haben wir alle diesen wirklich coolen, glänzenden Effekt. 118. kreisförmiges Navigationsmenü mit JavaScript: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen kreisförmigen Menüumschalteffekt erzeugen diesen kreisförmigen Menüumschalteffekt Sie können sehen, dass diese sechs kreisförmigen Links angezeigt werden, wenn ich auf diese Umschaltfläche klicke sechs kreisförmigen Links angezeigt werden, wenn ich auf diese Sie können sehen, dass sie um die Umschalttaste herum angeordnet sind Wenn Sie erneut klicken, gehen sie zurück und verstecken sich hinter der Umschalttaste Wir werden Java-Skript verwenden, um diesen Effekt zu erzielen. Ich werde hier in meinem HTML-Code beginnen, indem ein di hinzufüge und ihm eine Containerklasse gebe. Dann füge ich darin ein weiteres Div hinzu und gebe ihm eine Klasse von Toggle Das wird die Umschalttaste sein. Dann möchten wir darin das Umschaltflächensymbol hinzufügen. Und wir werden diese Symbole von einer Website namens Ion Icons bekommen einer Website namens Ion Icons Um die Icons einzubinden, gehe ich zu Usage und kopiere diesen Code hierher. Dann füge es in unseren HTML-Code ein. Um dann das Umschaltsymbol auszuwählen, klicke ich auf die Symbole Wähle dann diesen Code aus und kopiere ihn hierher. Dann geh zurück und füge es hier in das Umschalt-Dif ein. Dann wollen wir darunter die Menüelemente hinzufügen. Ich werde eine UL hinzufügen, dann eine L. Darin wollen wir CSS-Variablen verwenden. Hier werde ich Stil zwei und eins hinzufügen. Diese Variable entspricht dem ersten Listenelement. Dann werde ich darin ein Anker-Tag hinzufügen. Wir wollen das Home-Icon hinzufügen. Ich werde hierher zurückkehren und danach suchen. Dann kopiere diesen Code und füge ihn hier wieder ein. Jetzt können Sie sehen, dass wir die Umschalttaste und den Home-Link Okay zusammen, ich werde die Aufnahme pausieren und die anderen Links hinzufügen, so wie ich es mit diesem gemacht habe Wie Sie sehen können, haben wir hier sechs Symbole hinzugefügt und die Variable um 1—6 erhöht , und sie sind alle da. In Ordnung, gehen wir zu unserem CSS und zielen auf den Körper ab. Fügen Sie dann Mindesthöhe, 100 VH Display Flex hinzu, richten Sie den Inhalt zentriert aus, richten Sie die Elemente aus, zentrieren Sie den Hintergrund linearen Farbverlauf von 45 Grad von dieser violetten Farbe zu dieser roten Farbe Danach werde ich das Container-Div als Ziel angeben. Fügen Sie Breite 270 Pixel und Höhe 270 Pixel hinzu. Zeigen Sie dann Flex an, richten Sie den Inhalt zentriert aus, richten Sie die Elemente aus, zentrieren Sie die Position relativ und geben Sie einen temporären roten Hintergrund an. Jetzt können Sie sehen, dass das Tago-Symbol und die anderen Links nebeneinander stehen Okay, lass uns an der Umschalttaste arbeiten. Ich werde es ins Visier nehmen Breite 70 Pixel, Höhe 70 Pixel hinzufügen. Dann Hintergrund weiß, Rand, Radius 50%, Farbe diese dunkelgraue Farbe. Um das Symbol dann innerhalb des Kreises zu zentrieren, füge ich Display Flex, Justify Content Center, Elemente zentriert ausrichten dann Schriftgröße 30 Pixel hinzu. Der Cursorzeiger hat einen Index von 20. Dann endlich Übergang 0,3 Sekunden. Lassen Sie uns nun am Klick-Effekt arbeiten. Wenn Sie auf die Umschaltfläche klicken, möchten wir, dass sie sich zu einem X-Zeichen und nicht zu einem Pluszeichen dreht nicht zu einem Pluszeichen Wenn wir auf diese Schaltfläche klicken, möchten wir dem Container-Div eine Klasse hinzufügen und die Umschaltfläche gestalten Basierend auf dieser Klasse gehe ich zur Javascript-Datei und wähle zunächst das Container-Div Ich sage, lass Container gleich Document Query Selector sein und wähle den Container Danach werde ich schnell auf das Toggle Div zielen. Dann gehe ich hierher und sage Toggle Event Listener hinzufügen. Das Ereignis, das wir uns anhören möchten, ist Click. Dann füge ich unsere Funktion hinzu. Darin werde ich eine Container-Klassenliste hinzufügen, umschalten und eine Klasse namens active hinzufügen Das war's für das Java-Skript, Leute. Wenn wir auf die Umschaltfläche klicken, wird dem Container grundsätzlich eine Klasse namens active hinzugefügt Lass uns das versuchen. Sie können sehen, wenn ich auf die Umschaltfläche klicke, diese aktive Klasse hier hinzugefügt wird Wenn ich erneut klicke, wird sie entfernt. Okay, gehen wir zurück zu unserem CSS und wählen den Container Div aus. Wenn der Container dann eine aktive Klasse hat, zielen wir auf die Toggle-Klasse ab und fügen eine Transformation hinzu, die um 45 Grad gedreht wird und fügen eine Transformation hinzu, die um 45 Grad gedreht Jetzt können Sie sehen, wenn ich auf die Umschalttaste klicke, dass sie sich um 45 Grad dreht und zu einem X-Zeichen wird Wenn Sie erneut klicken, kehrt es aufgrund des Entfernens der aktiven Okay, lass uns weitermachen. Lass uns an der UL arbeiten, die alle Listenelemente enthält. Es hat eine Menüklasse. Ich werde das anvisieren und die Position absolut oben Null hinzufügen, links Null, dann Breite 100% Höhe 100%. Dann werde ich das L I im Menü anvisieren und die Position absolut oben 00, Breite 100% Höhe 100% hinzufügen und dann endlich Zeigerereignisse hinzufügen. Jetzt können Sie sehen, dass alle Listenelemente in der oberen linken Ecke positioniert sind. Lassen Sie uns darunter auf das Anker-Tag innerhalb des Listenelements abzielen . Darin werde ich Breite 55 Pixel und Höhe 55 Pixel hinzufügen . Färben Sie diesen dunkelgrauen Hintergrund, weißer Randradius, 50% Schriftgröße, 22 Pixel. Dann füge ich Display Flex Justify Content Center hinzu, ein Einzelpostencenter. Um die Links dann unter der Umschalttaste zu positionieren , füge ich die Position absolut oben 50% links transformiere negativ um 50% und negativ um 50% . Sie können sehen, dass die Links jetzt hinter der Umschaltfläche versteckt sind Außerdem füge ich sichtbare Zeigerereignisse hinzu, dann einen Übergang von 0,3 Sekunden Wenn Sie auf die Umschaltfläche klicken, möchten wir, dass die Schaltflächen wieder angezeigt werden. Ich wähle den Container , wenn der Container eine aktive Klasse hat heißt, wenn wir auf die Schaltfläche klicken, wähle ich die Anker-Tags aus und füge sie zu Null hinzu. Wenn Sie jetzt auf die Umschaltfläche klicken, können Sie sehen, wie sich die Links nach oben bewegen Wenn Sie erneut klicken, bewegen sie sich zurück und verstecken sich hinter der Umschaltfläche Jetzt müssen Sie nur noch dafür sorgen, dass sich die Links um die Umschaltfläche drehen Ich werde hier in die Listenelemente gehen und Transform Rotation hinzufügen Da wir sechs Listenelemente haben, füge ich calc 360 Grad mal sechs mal v hinzu. Das ist die Variable, die wir zu unserem HTML-Code hinzugefügt haben Das erste LI wird um 360 Grad gedreht , geteilt durch sechs mal eins, also 60. Das zweite wird um 120 Grad gedreht und so weiter und so weiter, bis das letzte um 360 Grad gedreht wird. Jetzt können Sie sehen, wenn wir auf die Umschalttaste klicken, dass die sechs Symbole rund um die Umschalttaste verteilt Aber wie Sie sehen können, werden die Symbole gedreht, um sie umzukehren Wir können hier eine Transformation hinzufügen, negative 50% und negative 50% übersetzen und dann negative 360 Grad geteilt durch das Sechsfache der Variablen I drehen . Dadurch werden alle gedrehten Links wieder auf Null Grad zurückgesetzt. Jetzt können Sie sehen, wenn Sie auf die Schaltfläche klicken, dass die Links jetzt genau so aussehen, wie wir es möchten, aber wir müssen nur den roten Hintergrund entfernen. Das war's für alle, für diese Lektion. Ich hoffe es hat euch gefallen und wir sehen uns in der nächsten. 119. Website-Parallaxe-Effekt mit JavaScript: Hallo zusammen, Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir einen coolen Parallax-Website-Effekt erzeugen einen coolen Parallax-Website-Effekt Sie können sehen, dass wir diesen Header einem Logo und einer Navigationsleiste Wir haben auch dieses Hintergrundbild und diese Überschrift mit der Aufschrift Parallax-Website Wir haben auch einige Dummy-Inhalte hier unter der Kopfzeile. Wie Sie sehen können, nur eine Überschrift und ein Absatz. Aber schauen Sie genauer hin, wenn wir nach unten scrollen, können Sie sehen, dass wir diesen coolen Parallax-Effekt haben , bei dem sich die Überschrift hier beim Scrollen nach unten bewegt beim Scrollen nach unten Außerdem bewegt sich dieses Baumblatt hier in der oberen rechten Ecke nach rechts oben sich dieser Hügel hier nach unten bewegt, bewegen sich diese beiden Hügel in verschiedene Richtungen, einer nach rechts und der andere nach links, was uns diesen wirklich coolen Effekt verleiht. Fangen wir hier in unserem HTML-Code an, indem wir einen Header hineinfügen Wir fügen eine H-Zwei hinzu und sagen Logo. Dann füge ich darunter ein Nav-Element hinzu und gebe ihm eine Navigationsklasse. Dann werden wir darin die Links hinzufügen. Ich werde ein Anker-Tag hinzufügen und zu Hause sagen. Dann füge ich schnell die anderen Anker-Tags hinzu. Wie Sie sehen können, haben wir das Logo und die Navigationsleiste. Ordnung, gehen wir zu unserem CSS und wählen den Hauptteil aus und fügen den Hintergrund hinzu, diese hellgraue Farbe, dann die Mindesthöhe, 100 VH. Dann werde ich die Kopfzeile als Ziel anvisieren und die Position absolut oben Null, links Null mit 100% hinzufügen Position absolut oben Null, links Null mit 100% Dann füge ich 30 Pixel von oben und unten und 100 Pixel von links und rechts Dann füge ich Display-Flex hinzu. Dann wollen wir, dass sich das Logo und die Navigationsleiste auf der linken Seite befinden. Ich werde Justify Content Flex hinzufügen. Starten Sie Align Items Center , um sicherzustellen, dass die Kopfzeile sichtbar ist. Egal, welche Elemente wir hinzufügen, ich werde einen Index von 100 hinzufügen. Jetzt können Sie sehen, dass wir das Logo und die Navigationsleiste auf der linken Seite haben. Ich werde zurückgehen und das Logo ins Visier nehmen. Dann füge ich Schriftgröße zwei, Farbe M und diese grüne Farbe hinzu. Dann füge ich, um einen gewissen Abstand zwischen dem Logo und dem Navigationsmenü zu haben , den rechten Rand, 270 Pixel hinzu , genau wie Sie hier sehen. In Ordnung, lass uns am Navigationsmenü arbeiten. Ich werde die Anker-Tags in der Navigation anvisieren und Textdekorationen hinzufügen, nicht farbig, diese grüne Farbpolsterung, sechs Pixel von oben und unten und 15 Pixel von links und rechts Dann füge ich einen Randradius hinzu: 20 Pixel, Rand Null von oben und unten und zehn Pixel von links und rechts Dann Schriftstärke 600, schließlich Übergang 0,5 Sekunden. Jetzt können Sie sehen, dass die Links viel besser aussehen. Ich werde hier hingehen und sagen, wenn ich mit der Maus über diese Links fahre, werde ich den Hintergrund, unsere grüne Farbe und die Farbe Weiß hinzufügen unsere grüne Farbe und die Farbe Weiß Jetzt können Sie sehen, dass die Links diesen schönen Schwebeeffekt haben. Okay, lassen Sie uns jetzt an den Bildern arbeiten denen wir den Parallax-Effekt erzeugen werden Sie können hier sehen, dass wir sieben Bilder haben , die uns, wenn sie zusammengefügt werden, unseren vollständigen Hintergrund ergeben Wir haben fünf Bilder für die Hügel und ein Bild für das Blatt und ein weiteres für die Pflanze. Natürlich finden Sie all diese Bilder in der Ressourcendatei. Ich werde hier in meinem HTML-Code einen neuen Abschnitt hinzufügen, ihm eine Klasse Parallaxe geben Dann füge ich darin ein Bild hinzu und füge dann das erste Bild hinzu , nämlich Hill One Ich werde ihm auch die ID von Hill One geben , um es in der Javascript-Datei als Ziel festzulegen. Dann füge ich schnell alle anderen Bilder hinzu. Jetzt können Sie sehen, dass wir acht Bilder hinzugefügt haben, alle Bilder unseres Hintergrunds und Sie sehen sie hier im Browser. Ich werde auch ein H zwei hinzufügen, ihm eine Text-ID geben und Parallax-Website sagen Ordnung, jetzt gehe ich zurück zu meinem CSS und wähle das Parallax-Div aus, das alle Bilder enthält, und füge den positionsrelativen Display-Flex Begründen Sie dann das Inhaltszentrum und auch die Ausrichtung der Elemente in der Mitte Höhe 100 VH. Jetzt können Sie sehen, dass alle Bilder nebeneinander hinzugefügt wurden Lass uns weiterarbeiten. Ich gehe zurück und füge overflow hidden hinzu , um genau die gewünschte Form zu erhalten Wir werden die Bilder im Parallax-Div auswählen und die Position hinzufügen Dann oben Null, links, Nullbreite 100% Endlich Zeigerereignisse, keine Jetzt können Sie sehen, dass wir diesen Hintergrund haben. Das sind einfach alle unsere Bilder zusammen, sie bilden diesen Hintergrund. Der Grund, warum das so perfekt passiert , ist , dass all diese Bilder für diesen Zweck entworfen wurden. Es ist, als ob dies nur eine Ansicht ist , die in mehrere Bilder aufgeteilt wurde. Okay, lass uns an den beiden arbeiten , die eine Text-ID hatten. Ich werde es ins Visier nehmen und eine Position hinzufügen. Absolute Schriftgröße fünf, EM-Farbe weiß. Dann schattiert der Text diesen Wert. Jetzt können Sie sehen, dass der H Two genau so aussieht, wie wir es wollen. Okay, lass uns etwas Inhalt hinzufügen. Um eine Scrollleiste zu haben, gehe ich zu meinem HTML-Code und füge einen neuen Abschnitt mit einer Inhaltsklasse Dann füge ich ein H zwei hinzu und sage Parallax-Scrolling-Website Dann werde ich darunter einen Absatz hinzufügen und einen Dummy-Text hinzufügen Jetzt können Sie sehen, dass wir diesen Inhalt haben. Lassen Sie uns hier schnell einige Stile hinzufügen. Ich werde zu meinem CSS zurückkehren, den Inhalt als Ziel festlegen und dann den positions-relativen Hintergrund hinzufügen, dieser grüne Farbabstand beträgt 100 Pixel Dann nehme ich die zwei H ins Visier und füge Schriftgröße drei, Farbe E, M, weißer Rand unten zehn Pixel Dann wähle ich den Absatz aus und füge Schriftgröße eins Farbe M, Weiß, Schriftstärke 300 hinzu. Jetzt können Sie sehen, dass das Inhalts-Div viel besser aussieht. Sie haben vielleicht bemerkt , dass wir hier diese dunkelgrüne Farbe so gewählt haben , dass sie zum unteren Rand unseres Hintergrunds passt . Sie liegen sehr nahe beieinander. Unglaublich. Nachdem wir den HTML- und CSS-Code dieses Beispiels fertiggestellt haben, ist es an der Zeit, am Java-Skript zu arbeiten. Ich gehe zur Java-Script-Datei und wähle dann zunächst die Elemente aus , die wir animieren oder ändern möchten Ich werde sagen, Text dokumentieren lassen, Element für ID abrufen Ich wähle das Element mit der Text-ID aus , also die beiden. Dann wähle ich schnell die anderen Elemente , die wir in unserer Javascript-Datei verwenden werden. Sie können sehen, dass wir vier weitere Elemente ausgewählt haben, Glaubensbild und drei Bilder der Hügel. Okay, lass uns an dem Effekt arbeiten. Ich gehe hierher und sage Fenster, Event-Listener-Scroll hinzufügen Dann erstelle ich eine Callback-Funktion. Im Grunde bedeutet dieser Code, dass Code, den wir hier in dieser Callback-Funktion hinzufügen , bei jedem Scrollen der Seite ausgeführt wird jedem Scrollen der Seite ausgeführt wird Ordnung, innerhalb der Funktion werde ich eine neue Variable mit dem Namen value erstellen und ihren Wert auf Fenster-Scroll setzen Dies ist die vertikale Entfernung , um die die Seite gescrollt wurde Wenn wir zum Browser zurückkehren und ein wenig scrollen, wird es hier diese Entfernung sein Ordnung, dann arbeiten wir an Elementen, um ihre Position zu ändern, indem wir hier den Variablenwert verwenden. Lassen Sie uns zuerst mit der H2 arbeiten, die die ID von Text hat, ich sage Textstil, Rand oben. Das wird gleich sein. Wir werden hier Vorlagenliterale verwenden. Indem wir diese beiden Symbole hinzufügen, fügen wir ein Dollarzeichen und offene geschweifte Klammern hinzu, um darin einen ausführbaren Code einzufügen Dann sage ich Wert mal 2,5. Dann füge ich außerhalb der geschweiften Klammern Pixel hinzu ich Was hier passieren wird, ist , dass jedes Mal, wenn wir durch die Seite scrollen, Javascript den Wert des scrollenden Y Javascript den Wert des scrollenden Y erfasst und ihn dann mit 2,5 multipliziert. Das Ergebnis wird als oberer Rand für die beiden H festgelegt Immer wenn wir am Rand nach unten scrollen, erhöht sich der obere Wert, sodass sich die beiden H nach unten bewegen Lass uns das ganz schnell versuchen. Sie können sehen, wenn ich nach unten scrolle, bewegt sich das H zwei nach unten. Wenn ich nach oben scrolle, bewegt es sich wieder nach oben. In Ordnung, lass uns hier an dem Blatt arbeiten. Wir möchten, dass es sich beim Scrollen nach unten in die obere rechte Ecke außerhalb der Seite bewegt beim Scrollen nach unten in die obere rechte Ecke außerhalb der Seite Also sage ich Blattstil oben gleich, ich verwende auch Vorlagenliterale und multipliziere den Wert 1,5. Diesmal wird der obere Teil auf einen negativen Wert gesetzt, wodurch das Blatt nach oben bewegt Wenn ich zum Beispiel in meinen Browser gehe, können Sie beim Scrollen sehen, das Blatt nach oben bewegt Ordnung, gehen wir zurück und bewegen es auch nach rechts Ich werde diesen Code duplizieren, dann von oben nach links wechseln und einfach negativ 1,5 auf 1,5 ändern. Einfach so. Wenn ich die Seite nach unten scrolle, bewegt sie sich nach oben rechts. Jetzt nicht nur nach oben. Ich glaube, du hast die Idee. Ich werde schnell den anderen Code für die restlichen Bilder hinzufügen . Wie Sie sehen können, habe ich im Grunde dasselbe für die Three Hills-Bilder gemacht . Ich habe gerade ihre Position geändert. Ich habe die Position dieser Position nach rechts geändert , da ich einen positiven Wert für die linke Seite hinzugefügt habe. diesen betrifft, wird er sich nach links bewegen da er einen negativen linken Wert hat. Beim letzten Wert hier bewegt er sich nach unten, da er einen positiven oberen Wert hat. Wie ihr hier sehen könnt, verschiebe ich die ausgewählten Elemente und ändere ihre Position, wenn ich nach unten scrolle ich die ausgewählten Elemente und ändere ihre Position, wenn ich nach unten scrolle. Wir haben diese beiden Hügel in der Mitte, die sich voneinander trennen, während dieser Hügel hier alle nach unten bewegt. Das war's für den Parallax-Effekt. Sie können sehen, dass die Idee dahinter sehr einfach ist. Ich hoffe es hat dir gefallen und wir sehen uns in der nächsten Lektion. 120. Erweiterbares Kartendesign mit JavaScript: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese animierte Profilkarte erstellen. Sie können sehen, dass wir diese Karte haben, und wenn wir auf diese Umschaltfläche klicken, können Sie sehen, dass die Karte erweitert wird und dieses Bild angezeigt wird Beachten Sie auch, dass sich die Umschalttaste von unten nach oben dreht , wenn wir darauf klicken Mal sehen, wie wir diese Karte erstellen können. Ich werde in meinem HTML-Code hierher kommen, indem ein Div mit einer Kartenklasse hinzufüge. Dann gehe ich zu meinem CSS und wähle das Karten-Div aus. Fügen Sie dann Position, relative Breite, 350 Pixel, Höhe, 85 Pixel, Hintergrund hinzu. Dieser marineblaue Rand hat einen Radius von 20 Pixeln. Endlich Übergang 0,5 Sekunden. Jetzt können Sie sehen, dass wir diesen marineblauen Hintergrund hatten. Kehren wir zu unserem HTML-Code zurück. Wir wollen die Umschaltfläche erstellen. Unten füge ich einen hinzu, gebe ihm eine Klasse von Umschaltern Dann füge ich darin eine Spanne hinzu. Dann gehe ich zurück und ziele auf das Toggle Div. Das wird der Teil unten sein. Ich werde Position, absolute Breite 70 Pixel, Höhe 60 Pixel, Hintergrund weiß hinzufügen absolute Breite 70 Pixel, . Um es dann unten zu positionieren, füge ich unten negative 60 Pixel hinzu. Die linke 50% -Transformation übersetzt x negative 50% Dann füge ich den unteren linken Randradius 35 Pixel und den unteren rechten Randradius ebenfalls 35 Pixel hinzu. Dann endlich der Cursorzeiger. Jetzt können Sie sehen, dass wir diesen weißen Teil unten haben. Aber wenn wir uns unser Beispiel ansehen, können Sie sehen, dass die Kurve hier glatter ist Gehen wir zurück und erstellen das. Wir werden das Before-Pseudoelement verwenden. Dazu wähle ich das Before-Pseudoelement des Toggle-Divs aus und füge dem Inhalt leere Zeichenketten hinzu (Position, absolute Breite 35 Pixel, Höhe 35 Pixel Dann hintergründe ich einen temporären roten Hintergrund. Dann füge ich links negative 34 Pixel hinzu und dann den oberen rechten Radius 35 Pixel. Dann füge ich darunter den Boxschatten 11 Pixeln als horizontalen Offset hinzu. Dann negative zehn Pixel als vertikaler Offset, Null als Unschärfewert und zehn Pixel als Streuwert, dann eine grüne Farbe Jetzt können Sie sehen, dass wir diese grüne Farbe haben, die wir mithilfe der Eigenschaft Box Shadow hinzugefügt Ordnung, ich gehe hierher und ändere die rote Farbe in transparent. Dann wollen wir den gleichen Teil auf der rechten Seite erstellen. Ich werde den Codeblock kopieren, einfügen und von links nach rechts wechseln. Dann ändere den Rand nach links. Ändern Sie hier auch den horizontalen Versatz auf negative 11 Pixel. Jetzt können Sie sehen, dass wir es hier auf der rechten Seite haben. Dann gehe ich hier in den Toggle Dive und ändere die Hintergrundfarbe von Weiß auf Dunkelblau Ändere auch die Farbe des Boxschattens auf Marineblau statt auf Grün Jetzt können Sie sehen, dass wir diesen Navy-Teil unten haben. Okay, lassen Sie uns jetzt den Pfeil erstellen, in diesem Navy-Teil positioniert wird. Wir werden ihn mithilfe der Spanne innerhalb der Umschaltfläche erstellen. Wir wählen diese zusätzliche Position, absolute Breite zehn Pixel, Höhe zehn Pixel Dann der Rand mit den unteren drei Pixeln, durchgehend weiß. Dann werden wir auch einen rechten Rand hinzufügen. Um es dann zu zentrieren, fügen wir die oberen 50% links und 50% transformieren dann negative 50% negative 70%. Um es zu drehen, fügen wir dann eine Drehung um 45 Grad hinzu. Dann füge ich einen Übergang von 0,5 Sekunden hinzu. Ordnung, wenn wir jetzt auf diese Umschaltfläche klicken, möchten wir, dass sich dieser Bereich dreht und nach oben zeigt Wir werden das mit Javascript machen. Ich gehe zur Javascript-Datei und ziele zunächst auf die Karte ab. Ich werde eine neue Variable erstellen, ihr einen Namen geben und die Karte auswählen. Ich werde auch auf das Toggle-Div abzielen. Wenn wir dann darunter auf das Umschalt-Div klicken, möchten wir dem Karten-Div eine Klasse hinzufügen dann den Bereich basierend auf dieser Klasse gestalten Wenn wir dann erneut klicken, möchten wir diese Klasse entfernen Im Grunde werden wir eine Klasse umschalten , wenn wir auf die Umschaltfläche klicken Ich gehe hier hin und sage „Toggle“, Event-Listener hinzufügen“ und höre mir das Klickereignis an Dann erstellen wir eine Callback-Funktion und sagen „Kartenliste umschalten“ und geben der Klasse den Namen „ Aktiv Namen „ Aktiv Wenn Sie sich nun das Karten-Div ansehen und auf den Toggle Div klicken, können Sie sehen, dass dem Karten-Div eine aktive Klasse hinzugefügt wurde Wenn Sie erneut klicken, wird es entfernt. Ordnung, wenn wir jetzt auf die Umschaltfläche klicken, wollen wir den Pfeil drehen Ich gehe zu meinem CSS und ziele auf die Karte ab. Wenn die Karte eine aktive Klasse hat, wählen wir den Bereich innerhalb des Umschalt-Divs Darin fügen wir eine Transformation hinzu, übersetzen negative 50% und negative 70%, drehen dann und ändern den Drehungsgrad auf 225 Grad. Jetzt können Sie sehen, wie sich der Pfeil dreht , wenn Sie auf die Umschaltfläche klicken Okay, lass uns weitermachen. Ich nehme die Karte ins Visier , wenn sie eine aktive Klasse hat Ich füge die Höhe hinzu, 420 Pixel. Wenn Sie jetzt auf die Umschaltfläche klicken, können Sie sehen, wie die Karte erweitert und ihre Höhe zunimmt Wenn Sie erneut klicken, schrumpft sie. Gehen wir zu unserem HTML-Code im Auto, ich werde ein weiteres Div mit einer Inhaltsklasse hinzufügen Wir werden ein weiteres Div mit einer Inhaltsklasse hinzufügen. Darin werde ich ein H zwei hinzufügen und Paul Smith sagen. Dann füge ein BR-Tag hinzu, dann ein Span, sagen wir Creative Developer. Dann kehre ich zu meinem CSS zurück und ziele auf das Inhalts-Div ab. Fügen Sie dann Position, absolute Einfügung und versteckten Überlauf hinzu. Danach wähle ich das Inhaltsfeld „div“ aus und füge einen relativen Abstand zwischen Position, 20 Pixel, Textausrichtung in der Mitte, Z-Index zehn, Display Flex, Justify Content Center und Zeilentrale hinzu 20 Pixel, Textausrichtung in der Mitte, Z-Index zehn, Display Flex, Justify Content Center und Zeilentrale Danach werde ich die beiden ins Visier nehmen. Dann füge Farbe, Weiß, Schriftstärke 500, Schriftgröße 1,25 M hinzu. Text transformiert den Großbuchstabenabstand 0,05 M, dann Zeilenhöhe 1,1 M. Darunter ich den Bereich innerhalb der H Zwei fest und füge Schriftgröße 0,75 M und Schriftstärke Dann wird der Text großgeschrieben. Jetzt können Sie sehen, dass der Text hier viel besser aussieht. In Ordnung, gehen wir zurück zu unserem HTML. Und unter den beiden H füge ich eine neue hinzu, gebe ihr eine Klasse von Bildbox, gehe dann zurück zu unserem CSS und ziele auf die Bildbox. Fügen Sie dann die relative Breite der Position und Höhe von 250 Pixeln hinzu. 250 Pixel weißer Hintergrund. Um den Inhalt dann vertikal zu positionieren, gehe ich hier nach oben in das Inhaltsfeld div und füge eine Flex-Richtungsspalte hinzu. Dann gehe ich hierher und füge die oberen 20 Pixel am Rand hinzu. Dann Box Shadow Negative zehn Pixel, zehn Pixel, zehn Pixel. Dann grenzt diese Farbe schließlich an fünf Pixel, durchgehend weiß. Dann entferne ich diesen Hintergrund. Dann kehren wir zu unserem HTML-Code zurück und in der Bildbox div füge ich ein Bild hinzu und füge unser Bild hinzu. Dann gehe ich zurück zu unserem CSS und ziele auf dieses Bild ab. Dann füge die Position hinzu, füge den gelösten Stoff hinzu, obere Null links Null, Breite 100%, Höhe 100%, dann das Objekt passt auf das Cover Jetzt können Sie sehen, dass das Bild hier genau so aussieht, wie wir es wollen Lassen Sie uns abschließend die Schaltfläche unten hinzufügen. Ich gehe zurück zu unserem HTML-Code und füge eine Schaltfläche hinzu und sage dann, stelle mich ein. Dann gehe ich zurück zu unserem CSS und wähle die Schaltfläche als Ziel. Fügen Sie dann den relativen Rand der Position, oberen 20 Pixel, einen Abstand von zehn Pixeln und 35 Pixeln hinzu Dann der Randradius 25 Pixel, keine Kontur, kein Cursorzeiger, Schriftgröße ein M. Texttransformation, Abstand zwischen Großbuchstaben, 0,1 M, Schriftstärke 500, Farbe Grau Dann fügen wir diesen Boxschatten hier hinzu. Jetzt haben wir alle, die Sie sehen können, diesen Button. Und auf diese Weise haben wir dieses coole Design geschaffen. Ich hoffe, dir gefällt diese Lektion und wir sehen uns in der nächsten. 121. Untitled: Hallo zusammen. Wir haben eine weitere neue Lektion für Sie im Kurs. In dieser Lektion werden wir diesen coolen Clip-Pfad-Animationseffekt erzeugen . Sie können sehen, dass wir diese große Überschrift in der Mitte der Seite und diese beiden Kreise der oberen linken und unteren rechten Ecke haben. Wenn wir durch die Seite scrollen, diese beiden Kreise größer , bis sie die Überschrift verdecken. Das Coole daran ist, dass die Teile der Überschrift, die von den Kreisen abgedeckt werden , diesen schönen Strich haben. Wenn wir nach oben scrollen, wird die Überschrift weiß. Auch hier werden wir Java-Skript verwenden, um den Clip-Pfadwert beim Scrollen zu ändern Fangen wir an, diesen Effekt zu erzeugen. Ich werde in meinem HTML-Code hierher gehen und einen Abschnitt hinzufügen. Dann füge ich unser H two hinzu und sage Scroll. Dann füge ich darunter ein Div mit einer Klasse von Kreis eins hinzu, weiteres Div mit einer Klasse von Kreis zwei. Dann gehe ich zu meinem CSS und ziele den Körper und füge Höhe 200 VH hinzu, um eine Scrollleiste zu haben, genau wie Sie es hier sehen Danach wähle ich den Abschnitt aus und füge den oberen Teil links, Null Breite, 100% Höhe, Null Breite, 100% Höhe, 100 H hinzu. Dann füge ich diese dunkelgraue Farbe als Hintergrund Jetzt können Sie sehen, dass der Abschnitt eine Höhe von 100 VH hat. Aber wenn wir scrollen, können Sie sehen dass wir nach dem Abschnitt nach rechts scrollen Aber wir wollen, dass es auch beim Scrollen bei uns bleibt. Wir können das tun, indem wir zu unserem CSS gehen und eine feste Position hinzufügen. Jetzt können Sie sehen, egal wie viel wir scrollen, der Abschnitt bleibt genau dort, wo er an seiner Position fixiert werden soll. Ich werde zu meinem CSS zurückkehren und die beiden ins Visier nehmen. Fügen Sie dann die absolute obere Position von 50% hinzu. Transformieren Sie dann den negativen Text mit 50% Breite und 100% iger Breite und richten Sie die Mittelfarbe weiß aus. Dann endlich Schriftgröße 18 EM. Jetzt können Sie sehen, dass der H Two viel besser aussieht. Okay, lass uns an den Kreisen arbeiten. Jetzt werde ich das erste Div mit der Klasse Kreis ins Visier nehmen. Fügen Sie dann die Position absolute Breite, 100 Höhe und 100% Hintergrund hinzu. Diese grüne Farbe. Jetzt können Sie sehen wir diesen grünen Hintergrund haben dass wir diesen grünen Hintergrund haben, der den ganzen Körper bedeckt, da er eine Breite und eine Höhe von 100% hat. Jetzt wollen wir diesen grünen Hintergrund so beschneiden, dass der einzige Teil , der sichtbar ist, der Kreis in der oberen linken Ecke ist. Ich gehe zurück und füge den Clip-Pfad-Kreis mit 150 Pixeln als Radius hinzu. Dann bei 0,00 an der X-Achse und Null an der Y-Achse, die irgendwann die obere linke Ecke sein wird. Einfach so, jeder, den sichtbaren Teil des grünen Hintergrunds sehen kann , ist dieser grüne Kreis. Okay, lassen Sie uns schnell dasselbe für den unteren rechten Kreis tun . Ich werde den Code kopieren, einfügen und auf das Div mit dem zweiten Kreis zielen. Dann ändere einfach die Hintergrundfarbe in diese orange Farbe. Ändern Sie außerdem die Position des abgeschnittenen Teils auf 100% und 100% , sodass er in der unteren rechten Ecke angezeigt wird Jetzt können Sie sehen, dass wir diesen orangefarbenen Kreis hier in der unteren rechten Ecke Ordnung, wenn wir jetzt durch die Seite scrollen, wollen wir, dass diese Kreise größer werden Gehen wir zu unserer Java-Script-Datei und machen das. Ich werde mit der Auswahl des ersten Kreises beginnen. Also werde ich sagen, lassen Sie ein gleichwertiges Dokument einkreisen und holen Sie sich den Abfrageselektor Und ich werde den ersten Kreis ins Visier nehmen , der eine Klasse von Kreis eins hat Dann werde ich das duplizieren und diesmal den zweiten Kreis ins Visier nehmen. Dann gehe ich hierher und sage Window Add Event Listener. Dann höre ich mir das Scroll-Event an. Dann erstelle ich darin eine Callback-Funktion. Ich werde eine neue Variable erstellen, sie benennen und einen Scroll-Wert angeben Und ich setze das auf den Fenster-Scroll-Y-Wert. Im Grunde ist dieser Wert der Abstand zwischen der Bildlaufleiste und dem oberen Rand des Fensters Wenn wir nach unten scrollen, steigt dieser Wert. Aber wenn wir nach oben scrollen, nimmt er ab. Es ist ein veränderbarer Wert und wir werden ihn verwenden, um den Radius der Kreise zu ändern. Wenn wir auf der Seite scrollen, sage ich, dass der Clip-Pfad einem Stil entspricht. Dann erstelle ich ein neues Template-Literal , um den Wert des Clip-Pfads hinzuzufügen Dann füge ich einen Kreis hinzu. Dann öffne einen Codeblock. Und 150 plus der variable Scrollwert mal 0,75 Pixel bei 0,0 Wie Sie alle sehen können, der Clip-Pfadwert des ersten Kreises beim Scrollen der Seite 150 Pixel, was der Anfangswert ist, plus dem Bildlaufwert der Seite multipliziert mit 0,75 Wie wir wissen, der Scrollwert der Seite erhöht sich der Scrollwert der Seite, solange wir Das führt zu einer allgemeinen Erhöhung des Radiuswerts des Kreises Lass uns das versuchen. Wie Sie sehen können, wenn wir nach unten scrollen, nimmt es zu, wenn wir nach unten scrollen, und wenn wir nach oben scrollen, nimmt es ab. Cool. Wirklich schnell. Machen wir dasselbe mit dem orangefarbenen Kreis. Ich werde hierher zurückkehren und diesen Code kopieren. Fügen Sie es ein und wählen Sie den zweiten Kreis aus. Dann ändere einfach die Position des Kreises so, dass er sich bei 100% und 100% in der unteren rechten Ecke befindet. Wenn ich jetzt zurückgehe und durch die Seite scrolle, kannst du sehen, dass der orangefarbene Kreis auch größer wird. Okay, jetzt wollen wir das H zweifarbig transparent machen und einen Strich um die Buchstaben herum haben. Ich gehe zu meinem HTML-Code und kopiere die H-Zwei und füge sie in die beiden Divs Dann kehre ich zu meinem CSS zurück und ziele die H-Zwei im ersten Kreis-Tauchgang Dann ziele ich auf die beiden H innerhalb des zweiten Kreis-Divs ab. Darin füge ich Farbe, transparenten Webtext, fünf Pixel und diese graue Farbe hinzu. Wenn ich zurückgehe und nach unten scrolle, können Sie sehen, dass, sobald sich die Kreise mit der H2 schneiden, die H-Zwei diesen Effekt hat, der darauf zurückzuführen ist , dass wir diesen Strich um die H-Zwei innerhalb der Kreise herum hinzugefügt haben Das weiße H zwei in der Mitte ist das außerhalb der beiden Kreise 122. Animation beim Scrollen mit JavaScript 1: Hallo alle zusammen. Willkommen zu einer weiteren neuen Lektion im Kurs. In diesem Kurs werden wir mithilfe von Javascript eine Animation zum Scroll-Effekt erstellen . Sie können sehen, dass wir diese Webseite haben , die mehrere Abschnitte enthält. Wenn Sie durch die Seite scrollen, können Sie sehen, dass wir in jedem Abschnitt eine Überschrift und einen Absatz haben , die in die Seite animiert Sobald wir den Punkt dieses Abschnitts erreicht haben und ich den Abschnitt passiert habe, verschwindet sein Inhalt wieder Sobald ich nach oben scrolle und weitermache, erscheint der Inhalt noch einmal. Dies ist eine sehr verbreitete Art Elemente auf einer Website zu animieren Lasst uns lernen, wie wir das machen können. Zuallererst können Sie hier in unserem HTML-Code sehen , dass wir fünf Abschnitte haben. Jeder Abschnitt hat eine eindeutige Klasse, Abschnitt eins , Abschnitt zwei, Abschnitt drei und so weiter bis Abschnitt fünf. Wie Sie sehen können, haben die Abschnitte 1—4 einen sehr einfachen Inhalt, nur ein H zwei und einen Absatz. Und alle Überschriften und Absätze in jedem Abschnitt haben eine Animationsklasse Dann haben wir hier, im fünften Abschnitt, ein Div mit einer Klasse von Bildern Darin haben wir drei Bilder. Jedes Bild hat eine Animationsklasse, genau wie die Absätze und Überschriften in den anderen Dann haben wir in unserem CSS einige grundlegende Stile, damit die Seite besser aussieht Wir setzen die Mindesthöhe jedes Abschnitts auf 100 VH, sodass er die gesamte Höhe des Viewports einnimmt Außerdem haben wir den Inhalt zentriert und einige grundlegende Stile hinzugefügt z. B. einige Hintergrundfarben und verschiedene Farben für jeden Abschnitt Sie haben die Ressourcendateien dieser Lektion. Laden Sie sie herunter und sehen Sie sich diese Stile an. Okay, jetzt lasst uns mit dem Scroll-Effekt arbeiten. Ich werde zu meiner Java-Script-Datei gehen. Und lassen Sie uns zunächst alle Abschnitte ins Visier nehmen. Also werde ich eine Variable mit dem Namen It sections erstellen. Dann setze ich das auf Document Query Selector. Ich werde nur auf die Abschnitte abzielen. Dann werde ich unten sagen, dass das Scrollen des Fensters entspricht Ich werde eine neue Funktion erstellen. Diese Funktion hier wird ausgeführt, wenn wir durch die Seite scrollen. Innerhalb dieser Funktion wollen wir alle Abschnitte nacheinander durchgehen und sie mithilfe von Javascript-Code beeinflussen. Ich werde Abschnitte sagen. Für jede Schleife hier werde ich abkürzen. Wir werden die Abschnitte in einer Schleife durchgehen. Jeder Abschnitt wird den Namen sec erhalten. Dann erstelle ich eine Callback-Funktion. Darin werde ich eine neue Variable mit dem Namen Scroll Distance Set erstellen, die dem Scroll-Y des Fensters entspricht. Diese Variable, jeder, ist die Entfernung, die gescrollt Diese Variable, jeder, ist die Entfernung, die gescrollt Das ist der Abstand vom oberen Rand der Bildlaufleiste zum oberen Rand der Seite Im Folgenden erstelle ich eine neue Variable, nenne sie sec distance und setze sie auf secsettp Diese Eigenschaft „Offset Top gibt den Abstand vom äußeren Rand des Abschnitts an, der Oberkante des übergeordneten Bereichs , in diesem Fall der Körper Nehmen wir den zweiten Abschnitt hier als unser Beispiel. Der versetzte obere Rand des zweiten Abschnitts ist der Abstand vom oberen Rand des zweiten Abschnitts zum oberen Rand der Seite. Tatsächlich entspricht er der Höhe des ersten Abschnitts. Wie beim dritten Abschnitt entspricht die versetzte Oberseite der Höhe des ersten und zweiten Abschnitts zusammen. In Ordnung, lass uns weitermachen. Gehen wir zurück zum Browser. Und was wir hier tun wollen, ist, dass wir beim Scrollen durch die Seite, sobald wir zum Beispiel den zweiten Abschnitt hier erreicht haben, diesem Abschnitt einige Stile hinzufügen möchten , die den gewünschten Animationseffekt erzeugen den gewünschten Animationseffekt Und wenn wir ihn übergeben, werden diese Stile entfernt. Das Gleiche passiert für den dritten Abschnitt, genau hier, und den vierten und so weiter. Wir möchten die Variablen, die wir hier erstellt haben, verwenden, damit der Browser erkennt, wann wir auf eine bestimmte Klasse stoßen. Dann werden die gewünschten Stile hinzugefügt. Lass uns das machen. Ich werde hier sagen, wenn Scroll-Entfernung größer oder gleich der Sekunden-Entfernung ist, sage ich Sekundenklasse, Liste hinzufügen. Ich werde eine Klasse namens Show Animate hinzufügen. Wie Sie alle sehen können, wenn die Entfernung beim Scrollen der Entfernung zwischen dem Bereich und dem Seitenanfang entspricht der Entfernung zwischen dem Bereich und dem Seitenanfang Diese If-Anweisung wird ausgeführt, aber lassen Sie uns zum Browser gehen und sehen, wann dieser Zustand eintritt Der Abschnittsabstand ist ein fester Wert, wie wir für den zweiten Abschnitt gesagt haben Er entspricht der Höhe des ersten Abschnitts. Es ändert sich nie, es sei denn wir ändern die Höhe des ersten Abschnitts. In der Zwischenzeit ändert sich der Wert für den Scrollabstand. Es ändert sich, wenn wir die Seite irgendwann scrollen , wenn diese beiden Werte genau gleich sind. Hier wird die If-Bedingung wahr. Das passiert, wenn wir scrollen, bis der obere Rand des zweiten Abschnitts den oberen Rand des Browsers berührt. In diesem Fall entspricht der Scrollabstand dem Abstand vom Abschnitt zum Seitenanfang. Lassen Sie uns die Seite untersuchen. Ich möchte, dass sich jeder hier den zweiten Abschnitt genau anschaut . Sie können sehen, sobald ich den Anfang des zweiten Abschnitts erreicht habe, die Wenn-Bedingung wahr wird. Und dem zweiten Abschnitt wurde eine neue Klasse namens show animate hinzugefügt Sobald wir den dritten Abschnitt erreicht haben, wird ihm auch die Klasse hinzugefügt Das passiert mit allen Abschnitten, wie Sie sehen können. Okay, das ist die Hauptidee, Leute. Wir werden diese Klasse verwenden , um die Abschnitte zu gestalten. Ich werde in meinem CSS hierher zurückkehren und Elemente mit der Klasse Animate anvisieren Denkt daran: Alle Überschriften, Absätze und Bilder in unserem HTML-Code haben die Klasse Animate Im Grunde haben alle Elemente diese Klasse. Okay, lass uns zu unserem CSS zurückkehren. Und innerhalb des animierten Divs werde ich Opazität Null hinzufügen Filter-Unschärfe, fünf Pixel, dann Übergang 0,5 Sekunden Jetzt können Sie sehen, dass alle Elemente ausgeblendet sind, da wir allen die Opazität Null hinzugefügt haben Wenn wir jetzt zu einem Abschnitt scrollen, möchten wir ihn wieder sichtbar machen Ich werde zu meinem CSS zurückkehren und sagen, wann der Abschnitt eine Klasse von Show Animate hat Und wie Sie wissen, passiert das, sobald wir zu dem Abschnitt scrollen Ich werde auf das animierte Div abzielen und Opacity One hinzufügen. Dann filtere Unschärfe auf Null Pixel. Wenn Sie jetzt zurückgehen und durch die Seite scrollen, können Sie sehen, dass der Inhalt verblasst und sichtbar ist, sobald wir einen Abschnitt erreicht haben Inhalt verblasst und Gehen wir zum Anfang der Seite und laden die Seite neu. Sie können sehen, dass der Inhalt des ersten Abschnitts unsichtbar ist, wenn wir neu laden der Inhalt des ersten Abschnitts unsichtbar ist Aber wir wollen, dass es angezeigt wird, wenn wir neu laden. Wir wollen nicht warten, bis wir die Seite gescrollt haben. Wir können das tun, indem wir zu unserem HTML-Code gehen und dem ersten Abschnitt hier eine Klasse von Show Animate hinzufügen ersten Abschnitt hier eine Klasse von Show Animate Wenn ich jetzt die Seite neu lade, können Sie sehen, dass der Inhalt sichtbar ist Jetzt können wir jedem Abschnitt verschiedene Effekte hinzufügen jedem Abschnitt verschiedene Effekte hinzufügen Lass uns das versuchen. Ich gehe zu meinem CSS und ziele im zweiten Abschnitt auf die Animate-Klasse Dann füge transform translate x 100% hinzu. Dann werde ich das schnell duplizieren Wenn der zweite Abschnitt eine Show-Animate-Klasse hat, setze ich den Wert für Translate X wieder auf Null zurück Es kehrt zu seiner Position zurück. Wenn ich jetzt zum zweiten Abschnitt scrolle , können Sie die Inhaltsfolien von rechts nach links sehen. Dank der Übersetzungseigenschaft haben wir uns geändert. Okay, lassen Sie uns den anderen Abschnitten weitere Stile hinzufügen. Ich werde den Code kopieren, einfügen und den dritten Abschnitt hier anvisieren. Hier. Dann ändere ich die Übersetzungsfunktion auf Skalierung und füge den Wert 0,7 hinzu. Dann füge ich hier Skala eins wieder zu eins hinzu. Dann füge ich das wieder ein und ziele auf den vierten Abschnitt ab. Dann stelle ich Rotate hier auf 30 Grad, dann hier wieder auf Null Grad. Dann füge ich den Code erneut und wähle den fünften Abschnitt aus , der die Bilder enthält. Lassen Sie translate x hier bei 100% stehen. Fügen Sie dann eine negative Drehung um 90 Grad hinzu. Stellen Sie es dann hier wieder auf Null Grad ein. Wenn ich jetzt zurückgehe und die Seite neu lade und durch sie scrolle, können Sie sehen, dass die Elemente reibungslos angezeigt werden, wenn wir einen neuen Abschnitt erreichen , was uns diesen wirklich coolen Effekt verleiht Jetzt ist dieser Effekt subtil und du kannst ihn auf diese Weise verwenden. In der nächsten Lektion werden wir jedoch einige einfachere Tricks sehen, die wir hinzufügen können , um diesen Effekt noch dynamischer zu gestalten. Aber vorerst möchte ich, dass du herumspielst und verschiedene Animationseffekte mit den Elementen ausprobierst. Probieren Sie all die verschiedenen Effekte aus, die wir in diesem Kurs gelernt haben . Viel Spaß. 123. Animation beim Scrollen mit JavaScript 2: In der letzten Lektion haben wir diese Animation zum Scroll-Effekt erstellt . Sie können sehen, dass der Inhalt gut aussieht, wenn Sie nach unten scrollen. Aber wie Sie sehen können, wenn wir nach oben scrollen, der Inhalt nicht animiert Es hat die Animationseffekte nur einmal. Wenn wir uns die Seite ansehen, können Sie beim Scrollen durch die Seite sehen, die Show Animate-Klasse hinzugefügt wurde Und wenn sie einmal hinzugefügt wurde, wird sie nicht entfernt. Lass uns etwas in unserem Java-Skript ausprobieren. Ich werde hierher gehen und etwas anderes sagen, dann kopiere ich das, füge es ein und entferne die Klasse. Diesmal wird die Klasse entfernt, wenn die Abschnittsentfernung ist gescrollte Entfernung kleiner als die Das passiert, wenn wir nach oben scrollen und den oberen Teil des Abschnitts passieren Gehen wir zum Browser und sehen , dass ich die Seite inspizieren werde. Und wenn ich nach unten scrolle, kannst du sehen, dass die Klasse hinzugefügt wurde. Und wenn Sie nach oben scrollen, können Sie sehen, dass die Klasse entfernt wurde und die Elemente von der Seite entfernt wurden Das ist jetzt ein viel coolerer Effekt. Okay, lass uns etwas anderes versuchen. Fügen wir den Absätzen einfach eine gewisse Übergangsverzögerung hinzu , sodass sie etwas nach den Überschriften erscheinen Ich gehe zu meinem CSS und wähle den Absatz aus, der eine Animate-Klasse hat, das sind im Grunde alle Absätze auf der Seite Dann füge ich eine Übergangsverzögerung von 0,2 Sekunden hinzu. Jetzt können Sie sehen, dass, wenn wir durch die Seite blättern, die Absätze etwas hinter den Überschriften erscheinen. Fügen wir den Bildern auch eine gewisse Übergangsverzögerung hinzu , damit sie nacheinander erscheinen Ich gehe zu meinem CSS und ziele das zweite Bild im fünften Abschnitt ab. Fügen Sie dann eine Übergangsverzögerung von 0,2 Sekunden hinzu. Dann duplizieren Sie diesen Code und ändern Sie die Übergangsverzögerung auf 0,4 Sekunden. Wenn ich jetzt zurückgehe und durch den fünften Abschnitt scrolle, können Sie sehen, dass die Bilder nacheinander erscheinen uns den gewünschten Effekt geben. Wenn Sie jedoch bemerkt haben, dass die Elemente erst erscheinen, wenn wir den oberen Rand des Abschnitts erreicht haben, ist es viel besser, wenn wir sie etwas früher erscheinen lassen können ist es viel besser, wenn wir sie etwas früher erscheinen lassen können, damit wir nicht bis zum oberen Rand des Abschnitts scrollen müssen. Das können wir tun, indem wir die Klasse hinzufügen. Bevor wir den oberen Rand des Abschnitts erreichen, gehe ich zu meinem Javascript. Gehen Sie hierher und sagen Sie, wenn der Scrollabstand größer oder gleich dem Abschnittsabstand -150 ist , werden die Cs hinzugefügt, die Klasse wird 150 Pixel über dem oberen Rand des Abschnitts hinzugefügt über dem oberen Rand des Abschnitts Einfach so, ihr könnt sehen, dass die Elemente ein bisschen früher erscheinen Und damit haben wir dieses Beispiel beendet. Ich hoffe, es hat Ihnen gefallen und ich rate Ihnen, das, was Sie in diesem Beispiel gelernt haben, umzusetzen und daraus Ihre eigenen Ideen zu entwickeln. 124. Straßenanimation im Nachtmodus mit JavaScript: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese interessante Straßenanimation erstellen . Wie Sie sehen, haben wir diese Szene mit einem Hintergrund, einer Sonne und zwei Autos, die sich gegeneinander bewegen. Der Hintergrund bewegt sich ebenfalls, was uns ein realistisches Gefühl vermittelt. Wenn wir auf die Sonne klicken, können Sie sehen, wie sie sich in einen Mond verwandelt und die Szene dunkel wird. Dies ist im Grunde ein Dunkelmodus, und wir werden ihn mit Javascript implementieren . Ich denke, das ist ein wirklich cooles Beispiel, und ich hoffe, es wird dir gefallen. Fangen wir hier in unserem HTML-Code an, indem wir einen Abschnitt ihm eine Szenenklasse geben. Dann füge ich darin ein weiteres Div hinzu, die Sonnenklasse. Darunter werde ich ein weiteres mit der Klasse BG hinzufügen. Darin werden wir die Autobilder hinzufügen. Ich werde das erste Bild hinzufügen und ihm die Klasse eines Autos geben. Dann füge ich darunter das zweite Bild hinzu und gebe ihm die Klasse von Auto zwei. Sie finden diese Bilder in den Ressourcendateien für diese Lektion. Jetzt können Sie sehen, dass wir gerade diese beiden Bilder von Polizeiautos in unserem Körper haben. Ordnung, gehen wir zu unserem CSS und zielen auf den Szenenbereich ab. Ich füge die relative Höhe der Position hinzu, 100-VH-Überlauf hat den linearen Gradienten verdeckt Dann füge ich diese hellblaue Farbe hinzu. Dann füge ich Weiß und Weiß hinzu. Jetzt können Sie sehen, dass wir einen schönen Farbverlauf von hellblau oben bis weiß unten haben einen schönen Farbverlauf von hellblau oben , sodass wir eine Szene in der Nähe des Himmels haben. In Ordnung, lasst uns daran arbeiten, die Sonne zu erschaffen. Ich werde den Div mit der Sonnenklasse ins Visier nehmen. Position hinzufügen, absolute Breite 100 Pixel, Höhe 100 Pixel Hintergrund, weißer Randradius 50% Dann die oberen 100 Pixel links, 55% Jetzt können Sie sehen dass wir diesen weißen Kreis hier oben auf unserem Körper haben . Gehen wir hier hin und fügen Transformation hinzu, übersetzen x negativ um 50% , um es ein wenig nach links zu verschieben. Dann Box Shadow 0050 Pixel als Unschärfewert und Weiß als Farbe Dann Übergang 0,2 Sekunden. Schließlich der Cursorzeiger. Jetzt bekommt die Sonne diesen verschwommenen Schatten. Lass uns am Hintergrund-Div arbeiten. Ich werde das Div mit der Klasse B, G anvisieren und Position, absolute Breite und 100% des Szenen-Divs hinzufügen . Dann Höhe nur 280 Pixel. Und um es unten zu positionieren, füge ich die untere Null hinzu. Dann füge ich die Hintergrund-URL hinzu. Und ich werde dieses Hintergrundbild hinzufügen , das Sie hier sehen können. Sie finden es in den Ressourcen für diese Lektion. Sie können sehen, dass wir diesen Hintergrund hier unten mit einer Höhe von 280 Pixeln haben . Gehen wir zurück und fügen die Hintergrundgröße 1.500 Pixel hinzu. Dann Wiederholung im Hintergrund, Wiederholung. Jetzt können Sie sehen, dass das Hintergrundbild viel besser aussieht. Okay, lass es uns animieren. Ich werde eine neue Animation erstellen. Nennen Sie es, animieren Sie BG darin. Bei 0% füge ich die Hintergrundposition x Null Pixel hinzu. Dann ändere ich bei 100% den X-Wert für die Hintergrundposition auf negative 1.500 Pixel. Damit sich das Bild nach links bewegen würde. Dann gehe ich hier hoch in das BG-Div und füge eine Animation hinzu animiere G 25 Sekunden linear, unendlich Jetzt können Sie sehen, wie sich die Position des Hintergrunds entlang der horizontalen Linie ändert, was uns das Gefühl gibt , dass sich das Bild bewegt Ordnung, jetzt lasst uns daran arbeiten , die Bilder des Autos zu stylen. Ich werde das erste Auto ins Visier nehmen und 20 Pixel hinzufügen, um es ein wenig auf die obere maximale Breite von 200 Pixeln zu verschieben, dann den Z-Index eins. Jetzt können Sie sehen, dass das erste Auto jetzt kleiner ist und sich in der unteren linken Ecke der Straße befindet. Ich werde dem zweiten Auto auch einige Stile hinzufügen. Ich werde es auswählen, eine Position hinzufügen, den absoluten Tiefpunkt. 50 Pixel, um es ein wenig über das erste Auto zu verschieben. Dann auch eine maximale Breite von 200 Pixeln. Jetzt können Sie sehen, dass das zweite Bild auch genau hier in der unteren Ecke der Straße steht. In Ordnung, gehen wir zurück und ändern ihre Positionen. Wir wollen, dass das erste Auto von der linken Straßenseite auftaucht. Ich werde hierher zurückkehren und negative 200 Pixel hinzufügen. Wir möchten, dass das zweite Bild von der rechten Seite erscheint. Ich werde rechts negative 200 Pixel hinzufügen. Jetzt können Sie sehen, dass die beiden Autos nicht mehr sichtbar sind, da sich das erste außerhalb der Straße nach links bewegt hat und das zweite außerhalb der Straße nach rechts gefahren ist. Lassen Sie uns nun die Animation erstellen, sie sich auf der Straße bewegen. Ich werde eine neue Animation erstellen und sie Car One nennen. Dann füge ich bei 0% der Animationsdauer Transform Translate x Zero Pixel hinzu. Dann füge ich bei 90% und 100% translate x calc 100 V plus 200 Pixel Das erste Auto bewegt sich von links ganz nach rechts bis es die Straße überquert und die Straße verlässt Ich werde hier im ersten Auto hochfahren und Animationswagen eins hinzufügen, 18 Sekunden linear, unendlich. Jetzt kannst du sehen, dass das erste Auto von links kommt, außerhalb der Straße, fährt den Weg entlang , bis es die Straße überquert. Machen wir schnell dasselbe für das zweite Auto. Ich kopiere die Animation, füge sie ein und ändere den Namen der Animation in Auto zwei. Dann lasse ich den Übersetzungswert unverändert, füge aber eine Drehung um 180 Grad hinzu, sodass das Bild um 180 Grad entlang seiner Y-Achse gedreht wird . Mit anderen Worten, es wird vertikal umgedreht. Dann werde ich hier den Wert für Translate X auf negative 100 VW -200 Pixel ändern negative 100 VW -200 Es bewegt sich von der rechten Seite die ganze Straße entlang zur linken Seite überquert dann auch die linke Seite Ich werde mit dem zweiten Auto hierher fahren und Animationen hinzufügen. Auto zwei, 12 Sekunden linear, unendlich. Jetzt können Sie sehen, dass das zweite Auto von der rechten Seite kommt und sich ganz nach links bewegt. Und beide Autos treffen sich mitten auf der Straße, was uns diesen wirklich coolen Effekt verleiht. Jetzt ist es an der Zeit, daran zu arbeiten die Szene in den Nachtmodus zu wechseln. Wenn wir auf den Sonnentauchgang klicken, wir zu der Klasse, die den Nachtmodus erstellt Ich gehe zur Javascript-Datei, erstelle eine neue Variable, nenne sie Sun und füge einen Dokumentabfrageselektor Und wähle das Div mit der Klasse Sun aus. Dann dupliziere ich das und ziele auf den Szenenabschnitt ab. Darunter werde ich Sun Add Event Listener sagen. Ich werde mir das Click-Event anhören. Dann füge ich eine Callback-Funktion hinzu, die jedes Mal ausgeführt wird, wenn wir auf die Sonne klicken Dann werde ich darin Sun Class List Toggle sagen. Und ich werde eine Klasse namens Night hinzufügen. Wenn ich jetzt die Seite betrachte und anfange, auf die Sonne zu klicken, können Sie sehen, dass die Nachtklasse jedes Mal hinzugefügt und entfernt wird , wenn wir auf das Sonnen-Div klicken. Ordnung, jetzt gehen wir zu unserem CSS und beginnen die Stile der Seite basierend auf dieser Klasse zu ändern. Ich werde hierher gehen und den Szenenbereich ins Visier nehmen. Wenn der Szenenabschnitt dann einen Nachtkurs enthält , füge ich den Hintergrund hinzu, diese dunkle Marinefarbe. Wenn ich jetzt zurückgehe und auf die Sonne klicke, kannst du sehen, wie sich die Hintergrundfarbe zu dieser Marinefarbe ändert . Ordnung, gehen wir zurück und duplizieren das Auswahlziel, die Sonne Dann addieren Sie links 45% statt 55%, es bewegt sich ein wenig nach links Dann wollen wir den Box-Schatten entfernen, den es hat. Also werde ich alle seine Werte auf Null setzen. Jetzt kannst du sehen, wenn du auf die Sonne klickst, sie bewegt sich nach links und der Schatten unten wird entfernt. In Ordnung, jetzt wollen wir es in eine Mondform umwandeln. Ich werde diesen Selektor noch einmal duplizieren. dann das Pseudoelement vor dem Sonnen-Div aus und fügen Sie den Inhalt hinzu. Fügen Sie leere Zeichenketten hinzu. Positionieren Sie das absolute obere negative Element um 20 Pixel , um es ein wenig nach oben zu verschieben, dann 20 Pixel nach links, um es nach links zu verschieben Dann füge ich mit 100% Höhe und 100% Hintergrund einen temporären roten Hintergrund Dann endlich Grenzradius 50% Wenn ich jetzt zurückgehe und auf die Sonne klicke, siehst du, dass wir diesen roten Kreis haben , der einen großen Teil der Sonne bedeckt. Wenn wir die Farbe dieses roten Kreises auf dieselbe Farbe wie den Hintergrund ändern , erhalten wir die Mondform. Ich gehe zurück und mache das schnell. Und wenn du jetzt auf den Sonnentauchgang klickst , kannst du alle sehen. Es wird zu einer Mondform und die ganze Szene wird zu einer Nachtszene, was uns genau den Effekt gibt, den wir wollen. 125. animiertes Banner der Website mit JavaScript: Hallo zusammen, willkommen zu einer weiteren neuen Lektion in unserem Kurs. In dieser Lektion werden wir diesen Effekt erzeugen. Sie können sehen, dass auf der Seite innerhalb dieses Kreises, der ihn umgibt, ein großer Text schwebt . Im Hintergrund haben wir eine riesige Anzahl von Sternen, die leuchten und sich langsam bewegen, was uns diesen wirklich coolen Effekt verleiht. Wir werden diese Sterne automatisch mit Javascript erstellen . Fangen wir in meinem HTML-Code an. Ich werde einen Abschnitt hinzufügen, dann füge ich ein H zwei hinzu und sage Willkommen zu unserem. Dann füge ich einen BR-Tag hinzu, dann einen Span und sage. Dann gehe ich zu meinem CSS, den Bereich als Ziel aus und füge Display, Flex, Justify, Content Center, Align-Elemente, Mittenhöhe , 100-VH-Hintergrund hinzu, diese Marineblaufarbe Um dann den Kreis um den Text herum zu erstellen, verwenden wir das Pseudoelement B four in diesem Abschnitt Ich werde das auswählen und dem Inhalt leere Zeichenketten hinzufügen, absolute Position mit 30 VW-Höhe, 30 V ebenfalls Dann Rand fünf, B durchgehend. Diese orange Farbe. Dann Grenzradius 50% Jetzt können Sie sehen, dass wir diesen orangefarbenen Kreis in der Mitte haben. Fügen wir den weißen Ring um ihn herum hinzu. Ich füge Box Shadow 0001v als Spread-Eigenschaft hinzu, dann dieselbe Marinefarbe wie der Hintergrund Dann dupliziere ich das und ändere die Streuung auf 1,3 V dann die Farbe auf Weiß Und jetzt können Sie sehen, dass wir diesen weißen Ring haben , der den orangefarbenen Kreis umgibt. Okay, lassen Sie uns der Überschrift einige Stile hinzufügen. Jetzt wähle ich es aus und füge Position, absolute Schriftgröße acht, Farbe Weiß, Schriftstärke 400 hinzu. Dann schreiben Sie eine Linienmitte, Zeilenhöhe zwei, E, M, Z, Index fünf, Transformationsschräge y minus sieben Grad. Jetzt können Sie sehen, dass der Text auf der Y-Achse zentriert und ein wenig schief ist Um dann die gewünschte Textform zu erhalten, müssen wir etwas Textschatten hinzufügen Also werde ich Textschatten hinzufügen. Wenn wir uns diesen Wert ansehen, erhöht er den Wert des Textschattens bei dieser hellgrauen Farbe nur schrittweise von einem Pixel auf fünf Pixel. Und wie Sie sehen können, sieht es viel besser aus. Ordnung, lassen Sie uns den Span stylen, was das Wort Site ist. Ich werde es ins Visier nehmen und dann Schriftstärke 700 hinzufügen , um es fetter zu machen. Dann Schriftgröße drei, M. Schließlich Textschatten, dieser Wert, der eine Erhöhung des Schattenwerts beinhaltet , aufgeteilt in zehn Stufen von einem Pixel auf zehn Pixel Das sind zehn Erhöhungen. Jetzt können Sie sehen, dass der H Two genau so aussieht, wie wir es wollen. Jetzt ist es an der Zeit, die schwebende Animation der H-Two zu erstellen . Ich werde eine neue Animation erstellen. Es schwebt bei 0% und 100% in ihr . Ich füge negativen Transformationswinkel von sieben Grad hinzu, so wie es ist Dann übersetze ich meine negativen 20 Pixel, ich werde das duplizieren Und bei 50% ändere ich die Übersetzung auf 20 Pixel. Dann gehe ich hier hoch und füge eine Animation hinzu , die 5 Sekunden schwebt und unendlich langsam ist. Jetzt können Sie sehen, dass der Text von oben nach unten animiert ist und sich genau so bewegt, wie wir es wollen. Ordnung, jetzt ist es an der Zeit, die Sterne im Hintergrund zu erstellen. Wir werden das mit Javascript machen. Ich werde dort hingehen und als Erstes auf den Abschnitt zielen, indem ich sage, lass Abschnitt gleich Abschnitt für Dokumentenabfrageselektor Dann erstelle ich im Folgenden eine neue Variable mit dem Namen J und wir setzen sie auf Null Dann erstelle ich eine While-Schleife und sage, while j ist kleiner als 200. Innerhalb der Schleife werden wir die Sterne erstellen. Ich werde damit beginnen, eine neue Variable mit dem Namen Star zu erstellen, und ich werde Dokument sagen. Element erstellen, Wir haben gerade ein Tag erstellt. Dann erstellen wir einige Variablen , die wir später verwenden werden. Um die Sterne zu stylen, erstelle ich eine Variable mit dem Namen x und setze sie auf Mathe Floor Math Dot Random mal Fensterbreite. Fenster in Breite gibt hier die Innenbreite des Fensters in Pixeln zurück . Dann nehmen wir diesen Wert und multiplizieren ihn mit dem Ergebnis der mathematischen Zufallsmethode. gibt eine Zahl zurück, die größer oder gleich Null ist, kleiner als eins. Dann nehmen wir das Ergebnis und runden es auf eine Ganzzahl ab. der Floor-Methode verwenden wir den Wert, den wir von hier erhalten , um die Sterne zu positionieren. Ich würde sagen, Sternenstil links entspricht x Pixeln. Wir werden den Wert x verwenden , um die Sterne links zu positionieren. Dann werde ich diese beiden Codezeilen duplizieren. Ändern Sie den Variablennamen in y und ändern Sie dann die Breite des Fensters in die Innenhöhe, um einen Wert zu erhalten , der auf der Höhe des Fensters basiert. Dann ändere ich hier links nach oben und x nach y. Dann legen wir die Breite und Höhe der Sterne fest. Ich erstelle eine neue Variable, nenne sie Größe und setze sie auf Mathe Dot Random mal Vier. Dann werden wir diese Größe verwenden, um die Breite und Höhe der Sterne festzulegen. Ich sage Sternpunktstil, Punktbreite, Pixel in Übergröße. Beachten Sie, dass wir hier eins hinzufügen müssen , da der Größenwert tatsächlich Null sein kann. Da Mathe Random hier 0,0 mal vier Null ergeben kann. Die Größe wird in diesem Fall Null sein und die Breite wird Null sein. Das ist nicht gut. Um diese Situation zu vermeiden, müssen wir hier eine hinzufügen. Cool, ich werde das duplizieren und die Breite in Höhe ändern. Nachdem wir die Position und die Abmessungen der Sterne festgelegt haben , fügen wir sie unserem Abschnitt hinzu Ich werde hier hingehen und Abschnitt anhängen Kind sagen. Und wir werden das Sternenelement anhängen. Am Ende der Schleife sagen wir dann J plus, sodass die Schleife weiterhin Elemente erzeugt , bis j hier gleich 200 ist, was wiederum 200 Elemente erzeugt Wenn wir uns nun unsere Seite ansehen und auf den Bereich zielen, können Sie darin sehen, wir all diese Eye-Tags haben, die wir erstellt haben. Es gibt tatsächlich 200 von ihnen und sie haben alle zufällige Stile, wie Sie sehen können. In Ordnung, um sie auf der Seite zu sehen, gehen wir zu unserem CSS und fangen an, sie zu stylen. Ich werde die Augenmarken innerhalb des Abschnitts auswählen und die Position hinzufügen. Absoluter Hintergrund, weißer Randradius 50% Jetzt können Sie sehen, dass die Sterne jetzt sichtbar sind. Ordnung, verwenden wir die Eigenschaft Box Shadow, um sie zum Leuchten zu bringen. Ich füge Boxschatten hinzu und füge dann diesen Wert hinzu, bei dem der Unschärfewert allmählich zunimmt Jetzt können Sie sehen, dass die Sterne leuchten. Ordnung, jetzt lasst uns am Animationseffekt der Sterne arbeiten Animationseffekt der Sterne Ich werde eine neue Animation mit dem Namen Stars erstellen. Dann füge ich bei 0% der Animationsdauer die Deckkraft Null hinzu Dann füge ich bei 10% die Deckkraft eins hinzu. Dann werde ich das duplizieren. Bei 90% lasse ich die Opazität so wie sie ist. Dann werde ich sie bei 100% wieder auf Null setzen. Dann gehe ich hierher und füge Animationssterne hinzu. Linear, unendlich. Wie Sie sehen können, ist nichts passiert, weil wir keine Animationsdauer festgelegt haben. Lassen Sie uns das mit Javascript machen , um Zufallswerte für jeden Stern zu erhalten. Ich gehe hier in die Javascript-Datei und erstelle eine neue Variable mit dem Namen Duration. Und wir setzen es gleich der mathematischen Zufallszahl mal zwei. Danach füge ich Animationsdauer im Sternenstil einer Dauer von einer Sekunde entspricht. Einfach so, dass alle Sterne, die Sie sehen können , jetzt animiert sind, da wir hier für jeden einzelnen von ihnen eine zufällige Animationsdauer festgelegt haben . 126. Animation der javascript-Tabulatur: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese einfache Navigationsregisterkarte erstellen. Sie können sehen, dass wir diesen Kreis haben , in dem sich dieses Pluszeichen befindet. Wenn Sie darauf klicken, dreht es sich, bis das Pluszeichen zu einem X-Zeichen wird Außerdem wird diese einfache horizontale Navigation angezeigt. Beachten Sie, dass die Navigation in zwei Schritten erfolgt. Zunächst bewegt sich dieser kreisförmige Teil unterhalb des Kreises nach unten. Dann wird es erweitert und wird zum Navigationsmenü. Wenn Sie erneut klicken, wird das Menü zuerst reduziert. Dann bewegt sich der kreisförmige Teil nach oben und verschwindet. Außerdem haben wir hier diesen Raum, der den Kreis und die Navigation voneinander trennt. Wir werden lernen , wie man das schafft. Das sieht wahrscheinlich nach einem einfachen Beispiel aus, aber glauben Sie mir, es hat einige wirklich coole Tricks. Fangen wir an, es zu erstellen. Ich werde in meinem HTML-Code hierher gehen und eine hinzufügen, ihr eine Navigationsklasse geben. Dann werde ich darin ein weiteres Div mit einer Umschaltklasse hinzufügen ein weiteres Div mit einer Umschaltklasse Dann gehe ich zu meinem CSS und ziele auf das Navigations-Div ab. Dann füge ich einfach Position Relative hinzu. Im Folgenden werde ich auf die Toggle-Klasse abzielen und die relative Breite der Position, 75 Pixel, hinzufügen relative Breite der Position, 75 Pixel, 75 Pixel ebenfalls. Hintergrund ist diese rosafarbene Farbe. Dann Cursorzeiger, dann lassen Sie uns das Plus-Symbol im Inneren mit dem Before-Pseudoelement erstellen das Plus-Symbol im Inneren mit dem Before-Pseudoelement Ich werde es ins Visier nehmen und Inhalte hinzufügen. Das Pluszeichen positioniert dann absolute Schriftgröße drei, EM-Farbe weiß. Dann Übergang 1,5 Sekunden. Jetzt können Sie sehen, dass wir dieses Pluszeichen hatten. Ordnung, um es zu zentrieren, gehe ich hier in den Tundlativ und füge Display, Flex, Justify, Content Center, eine Zeile, Artikelzentrum hinzu, einfach so Sie können sehen, dass es zentriert ist. Wenn wir nun auf dieses Div klicken, möchten wir, dass es sich dreht, bis das Pluszeichen wie immer zu einem X wird. Wir werden das tun, indem wir eine Klasse umschalten, wenn wir auf den Schalter klicken , und sie basierend auf dieser Klasse gestalten Ich gehe zu meiner Java-Script-Datei und erstelle eine neue Variable mit dem Namen Toggle Dann werde ich schnell auf das Div mit der Klasse Togle abzielen das Div mit der Klasse Togle Dann werde ich im Folgenden sagen, Event-Listener hinzufügen umschalten. Dann erstelle ich eine Callback-Funktion. Darin sage ich Toggle Class List, Toggle und eine Klasse Toggle und Jetzt kannst du jedes Mal, wenn ich auf das Toggle Div klicke, hier sehen, dass eine Klasse namens active hinzugefügt und dann aus dem Toggle Div entfernt wird Ordnung, dann gehe ich zurück zu meinem CSS-Ziel, dem Toggle Wenn es eine Klasse namens active enthält, wähle ich das B-fore-Pseudoelement aus, das das Pluszeichen ist Ich füge Transformation und Drehung um 225 Grad hinzu. Wenn ich jetzt auf den Schalter di klicke, kannst du sehen, dass sich das Pluszeichen dreht und zu einem X wird , da die aktive Klasse jetzt hinzugefügt wurde Wenn Sie dann erneut klicken, wird die aktive Klasse entfernt und daher funktioniert der Code hier nicht Deshalb dreht sich das X wieder zurück zu einem Pluszeichen. Okay, lass uns an dem Menü arbeiten, das erscheint, wenn du auf den Umschalttauchgang klickst Ich gehe zu meinem HTML-Code und füge unter dem Toggle-Div ein weiteres Div mit einer Menüklasse Jetzt haben wir zwei Divs im Navigations-Div. Dann gehe ich zu meinem CSS und wähle das Menü div aus. Dann füge Breite 60 Pixel hinzu. Höhe ebenfalls 60 Pixel. Dann Hintergrund weiß. Jetzt können Sie sehen, dass wir diesen weißen Hintergrund haben. Jetzt gehe ich hier oben in das Navigations-Div und füge Display Flex, Justify Content Center, Align Items Center hinzu. Jetzt können Sie sehen, dass sie direkt nebeneinander sitzen. Wir wollen den weißen Hintergrund relativ zum Piquin positionieren relativ zum Piquin Da das Pinkue den Positionswert relativ hat, werde ich hier in das Menü gehen und Position absolut hinzufügen Und wie Sie sehen können, ist es jetzt relativ zum rosafarbenen Hintergrund positioniert Okay, ich füge auch einen Randradius von 50% hinzu. Dann füge ich Transform Translate Y mit negativen 30 Pixeln hinzu, um es nach oben zu verschieben. Dann gehe ich hier hoch in den Schalter, tauche und füge einen Randradius von 70 Pixeln Dann transformiere Y ebenfalls negativ um 30 Pixel. Damit der rosafarbene Kreis über dem weißen erscheint, füge ich einen Index zehn hinzu. Okay. Wenn wir jetzt auf den Toggle Dive klicken, wollen wir das Menü wieder einblenden Ich werde hierher gehen und das Toggle Div als Ziel wählen, wenn es eine aktive Klasse gibt Ich werde das Menü mit diesem Selektor auswählen die Geschwister der HTML-Elemente auswählt Dann füge ich die Breite 360 Pixel und 70 Pixel hinzu. Transformiere dann Translate Y zu Null , sodass es zu seiner Position zurückkehrt. Wenn ich jetzt auf das Toggle Div klicke, siehst du, dass das Menü hier mit dieser neuen Breite und Höhe angezeigt wird hier mit dieser neuen Breite und Höhe Okay, wir möchten, dass das Menü reibungslos erscheint. Ich gehe zurück in das Menü-Div und füge Übergangstransformation von 0,5 Sekunden hinzu. Bei 0,5 Sekunden dann auch Höhe 0,5 Sekunden. Sie fragen sich vielleicht, warum wir nicht einfach 0,5 Sekunden für alle Eigenschaften verwendet haben. Aber wir haben das getan, was wir stattdessen getan haben , um es uns leicht zu machen, die Übergangsverzögerung für jede Eigenschaft zu kontrollieren die Übergangsverzögerung , damit wir unseren Effekt erzielen können. Um das zu verstehen, füge ich hier Übergangsverzögerung von 0 Sekunden für die Transform-Eigenschaft hinzu. Diese Zeile wird hier sofort angezeigt , wenn Sie auf den Umschalter di klicken Dann 0,5 Sekunden für die Eigenschaft Breite und ebenfalls 0,5 Sekunden für die Höhe Wenn ich jetzt auf den Tangle Dive klicke, kannst du sehen, wie sich der Kreis zuerst nach unten bewegt. Dann werden seine Breite und Höhe gleichzeitig größer, was uns den gewünschten Effekt verleiht. Aber wenn Sie erneut klicken , kollabiert alles gleichzeitig. Wir können es so lassen, wie es ist, oder wir können einige Übergangsverzögerungen hinzufügen , um es schöner zu machen. Lass uns das versuchen Ich gehe hier in das Menü div und füge Übergangsverzögerung von 1 Sekunde für die Transformation hinzu, dann 0,5 Sekunden für die Breite und Höhe. Wenn die aktive Klasse entfernt wird, wird diese Eigenschaft für die Übergangsverzögerung angewendet. Die Breite und Höhe warten 0,5 Sekunden, bevor sie verkleinert werden. Danach erfolgt die Transformation, wie Sie hier sehen können Jetzt wollen wir den Teil erstellen, der den Toggle-Tauchgang und das Menü voneinander trennt Ich werde hier oben in den Tauchgang „Toggle“ gehen und einen Rand mit zehn durchgehenden Pixeln und derselben Farbe wie der Körper hinzufügen Rand mit zehn durchgehenden Pixeln und derselben Farbe wie der Körper Jetzt können Sie sehen, dass die beiden Teile durch diesen Rand getrennt sind durch diesen Rand getrennt Ordnung, jetzt fügen wir die Symbole hinzu, die im Menü erscheinen sollen. Ich rufe die Ion Icons-Website auf , die wir in einer früheren Lektion verwendet haben, und klicke dann auf Verwendung. Komm her und kopiere diesen Code. Dann füge es vor dem Ende des Body-Tags in meinen HTML-Code ein. Dann füge ich im Menü div ein U, L, dann ein L I hinzu und füge Stil I hinzu, der 0,1 Sekunden entspricht. Wir werden diese Variable in der Eigenschaft für die Übergangsverzögerung verwenden , dann füge ich ein Anker-Tag hinzu. Dann werde ich das fünfmal duplizieren. Ich mache den dritten LI. Wir werden es nur für Styling-Zwecke benötigen. Ich werde die Variable auch im zweiten LI und im vierten LI auf 0,2 Sekunden ändern . Dann gehe ich auf die Icons-Website und suche nach Home und kopiere den Code. Geh zurück und füge es hier in das erste Anker-Tag ein. Dann pausiere ich die Aufnahme und füge schnell die anderen Symbole hinzu. Jetzt können Sie sehen, dass wir die anderen Symbole hinzugefügt haben und sie sich hier im Browser befinden. Ordnung, gehen wir zu unserem CSS und wählen die URL im Menü aus. Fügen Sie Position, relative Anzeige, Flex und Ausrichtung des Inhalts hinzu, zentrieren Sie die Linienelemente in der Mitte und lassen Sie dann einen Abstand von 35 Pixeln ein. Schließlich die Zeilenhöhe 80 Pixel. Dann wähle ich das L I in der UL und füge das Listenformat hinzu, ohne den Zeiger zu transformieren Y negativ zu übersetzen (30 Pixel). Dann füge ich den Übergang 0,25 Sekunden hinzu, dann die Deckkraft Null und schließlich die Übergangsverzögerung var I. Dann gebe ich darunter an, wann das Umschalt-Div eine Klasse von aktiv hat, oder mit anderen Worten, wenn wir auf das Umschalt-Div klicken, wähle ich sie in und dann die Listenelemente aus Im Inneren füge ich dann die Opazität hinzu, eine Transformation, und übersetze Y auf Null Pixel. Wie Sie sehen können, werden die Symbole hier angezeigt, wenn Sie auf das Umschalt-Div klicken , aber wir möchten, dass sie erst erscheinen, nachdem das Menü angezeigt Ich gehe zurück und füge die Übergangsverzögerung hinzu, kalkuliere 0,75 Sekunden plus Es wird sich etwas verzögern, genau wie Sie hier sehen Okay, lassen Sie uns diese Icons ganz schnell stylen. Zunächst möchten wir hier in der Mitte etwas Abstand hinzufügen. Ich werde das dritte untergeordnete Element der Listenelemente auswählen , die wir leer gemacht haben. Dann füge ich die Breite 30 Pixel hinzu. Danach werde ich auf die Anker-Tags innerhalb des LI zielen und die Display-Block-Schriftgröße 1.7 EM und die Textdekoration n hinzufügen und schließlich diese graue Farbe darunter einfärben . Wenn ich mit der Maus über das LI fahre, wähle ich das Anker-Tag und füge Farbe unserer rosa Farbe Jetzt kannst du sehen, dass die Symbole viel besser aussehen und wenn du mit der Maus darüber fährst, wechselt ihre Farbe zu Rosa Damit, Leute, haben wir diesen coolen Effekt fertiggestellt. Ich hoffe, du lernst daraus ein paar coole Tipps und wir sehen uns im nächsten. 127. Bewegen eines Hintergrundbildes beim Scrollen mit JavaScript: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen Effekt erzeugen. Sie können sehen, dass wir diesen Inhalt in der Mitte und diesen Hintergrund haben. Wenn wir die Seite scrollen, können Sie sehen, wie sich der Hintergrund von links nach rechts bewegt. Beim Scrollen nach oben bewegt es sich von rechts nach links zurück. Dies ist ein sehr cooler Effekt , den Sie in Ihren Projekten verwenden können Mal sehen, wie wir das machen können. Ich werde hier in meinem HTML-Code beginnen und ein Div hinzufügen. Gib ihm eine Klasse BG. Dann füge ich darunter ein weiteres Div mit einer Inhaltsklasse hinzu. Dann füge ich ein H zwei hinzu, sagen wir Background, und bewege mich beim Scrollen. Dann füge ich darunter einen Absatz hinzu und füge diesen Text hinzu. Dann gehe ich zu meinem CSS und ziele auf das Div mit der Klasse BG ab. Dann füge die Position fest hinzu, dann oben Null links, Null Breite, 100% Höhe, 100% Hintergrund-URL. Dann fügen wir das Musterbild hinzu. Dann füge ich die Wiederholung der Rückrunde hinzu. Wiederhole die Hintergrundgröße, 700 Pixel. Jetzt können Sie sehen, dass das Hintergrundbild genau so aussieht, wie wir es haben möchten. Dann wähle ich das Div mit der Inhaltsklasse aus und füge der Position eine relative Breite von 1.000 Pixeln hinzu. Dann mit einem Abstand von 100 Pixeln von oben und unten und automatisch von links und rechts. Dann füge ich einen Index hinzu, weiße Hintergrundpolsterung, 50 Pixel Dann Box Shadow 010 Pixel, 30 Pixel, R Gb00 00.1 Alles klar, dann wähle ich die H2 innerhalb des Inhalts-Divs und füge Schriftgröße zwei M hinzu, dann den oberen Rand 20 Dann wähle ich die Absätze innerhalb des Inhalts-Divs aus und füge die Schriftgröße 1,2 M Zeilenhöhe 1,6 M hinzu. In Ordnung, gehen wir zur Javascript-Datei und erstellen zunächst eine neue Variable, nennen sie Pattern und zielen auf das BG-Div in unserem Dann werde ich darunter Fenster sagen. Fügen Sie einen Event-Listener hinzu. Und ich werde mir das Scroll-Event anhören. Dann erstelle ich eine Callback-Funktion. Darin werde ich die Hintergrundposition im Musterstil angeben und diese Position auf das Scrollen des Fensters in Pixeln einstellen Das bedeutet, dass beim Scrollen der Seite die Eigenschaft für die Hintergrundposition um einen Wert erhöht wird, Eigenschaft für die Hintergrundposition um einen Wert erhöht wird der der y-Scroll-Entfernung entspricht. Lass uns das versuchen. Sie können beim Scrollen durch die Seite sehen, sich das Hintergrundbild bewegt, während wir scrollen, und wenn wir nach oben scrollen, bewegt es sich in umgekehrter Richtung 128. Text-Hover-Effekt mit Unschärfe und Fokus: Hallo zusammen. Willkommen zu einer weiteren neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Effekt erzielen. Sie können sehen, dass wir diese Überschrift in der Mitte und einen verschwommenen Hintergrund hinten Wenn Sie mit der Maus über die Überschrift fahren, tritt dieser Effekt auf. Die Überschrift wird größer und verschwommen, während sich der Hintergrund nach hinten bewegt und klarer wird Wenn wir den Mauszeiger wegbewegen, rückt die Überschrift wieder in den Fokus , während der Hintergrund wieder verschwommen ist Das ist ein wirklich cooler und eigentlich einfacher Effekt. Mal sehen, wie wir ihn erzeugen können. Ich werde in meinem HTML-Code hierher gehen und einen Abschnitt hinzufügen. Dann füge ich ein H zwei hinzu und sage Fokus. Dann werde ich darunter ein Bild hinzufügen. Füge einfach unser Bild hinzu. Das war's für den HTML-Code. Gehen wir zu unserem CSS und zielen den Abschnitt, die Add-Position, relative Breite, die Höhe von 100% und 100 VH ab, um die gesamte Körpergröße einzunehmen Zeigen Sie dann die Elemente Flex, Justify, Content Center und Align an Dann endlich Overflow versteckt. Dann nehme ich das Bild als Ziel und füge die Position hinzu, absolute Breite 140%, Höhe 140% , das obere Minus 20% und das linke Minus ebenfalls 20% Um diesen verschwommenen Effekt auf dem Bild zu erzielen, fügen wir dann Filterunschärfe hinzu Dann werde ich zum Schluss einen Übergang von 2 Sekunden hinzufügen. Jetzt können Sie sehen, dass das Bild verschwommen ist, genau wie wir es wollen. Okay, gehen wir zurück und nehmen die beiden ins Visier. Fügen Sie dann eine positionsrelative Farbe hinzu. Weiße Schriftgröße zehn, EM-Texttransformation in Großbuchstaben, dann Textschatten 05 Pixel, 25 Pixel, dann diese Farbe. Dann füge ich die Schriftstärke 800 hinzu, damit die Überschrift vor dem Bild angezeigt wird. Wir werden einen Index zwei hinzufügen. Endlich, Übergang 2 Sekunden. Jetzt können Sie sehen, dass wir unsere Überschrift haben. Okay, lassen Sie uns am Schwebeeffekt der Überschrift arbeiten. Ich werde sagen, wenn ich mit der Maus über die Überschrift fahre, füge ich Filterunschärfe hinzu, zehn Pixel Dann füge ich darunter die Transformationsskala 1.2 hinzu. Jetzt können Sie sehen, dass dieser Effekt eintritt, wenn ich mit der Maus über diese Überschrift fahre wird es größer und verschwommen Dank des Codes wird es größer und verschwommen, wir fügen es Nachdem wir die Überschrift fertiggestellt haben, erzeugen wir den Schwebeeffekt des Hintergrundbilds Ich werde sagen, wenn ich mit der Maus über das Bild fahre, wähle ich das Bild mit diesem Selektor aus, wodurch wir die Geschwister unseres Elements auswählen In diesem Fall ist das Bild ein Geschwisterbild der beiden H. Dann füge ich die obere Null hinzu, die linke Null, die Breite 100%, die Höhe 100% schließlich die Filter-Unschärfe, Null Pixel Und jetzt können Sie sehen, dass das Bild kleiner wird, wenn wir den Mauszeiger über die Überschrift bewegen, wir den Mauszeiger über die Überschrift bewegen, da wir seine Höhe und Breite von 140% auf 100% reduziert haben . Außerdem ist der Unschärfeeffekt weg, da wir ihn auf Null statt auf zehn Pixel geändert haben ihn auf Null statt auf zehn Pixel geändert Das passiert zusammen mit dem Überschrifteneffekt und gibt uns genau den Effekt, den wir anstrebten 129. Textfokus und Unschärfe-Effekt: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen coolen Texteffekt erzeugen. Sie können sehen, dass wir diesen Text haben, der verschwommen ist. Wenn wir mit der Maus über einen Buchstaben im Wort fahren, rückt der Buchstabe in den Fokus und wir können ihn deutlich sehen Außerdem haben wir diese vier Rahmen um die Buchstaben herum, die erscheinen, wenn wir den Mauszeiger darüber bewegen, und verschwinden, wenn wir den Mauszeiger Lassen Sie uns beginnen und sehen, wie wir diesen Effekt erzielen können. Ich werde in meinem HTML-Code hierher gehen und ein H zwei hinzufügen. Dann werde ich darin eine Span hinzufügen, ein Tag innerhalb dieser Spanne. Wir werden dieses Tag verwenden, um die vier Grenzen um jeden Buchstaben herum zu erstellen. Dann füge ich den ersten Buchstaben hinzu. Dann kopiere ich das und füge es viermal ein und ändere die Buchstaben , sodass das Wort Fokus entsteht. Dann gehe ich zu meinem CSS und ziele auf den Körper ab. Fügen Sie dann Display Flex, Justify, Content, Align Items Center in der Höhe 100 VH Dann füge ich dem Hintergrund einen linearen Farbverlauf von 45 Grad hinzu, diese blaue Farbe zu dieser gelben Farbe Jetzt können Sie sehen, dass wir diese coole Verlaufsfarbe hatten. Im Folgenden werde ich das H Two anvisieren und die Position des Displays um 15 Pixel erweitern Position des Displays um 15 , um die Buchstaben durch 15 Pixel voneinander zu trennen. Dann Farbe weiß, Schriftgröße vier, E, M, Cursorzeiger. Dann endlich Text in Großbuchstaben umwandeln. Darunter werde ich dann die Spannweiten innerhalb der H-Zwei anvisieren und die relative Position hinzufügen Lassen Sie uns nun die vier Ränder um die Buchstaben herum erstellen. Wir werden das mit dem Element innerhalb der Spannweiten tun. Ich werde auf die vier Pseudoelemente des hinzugefügten Inhalts abzielen. Leere Zeichenketten, absolute Position w, zwei Pixel, Höhe acht Pixel, Hintergrund weiß Jetzt können Sie sehen, dass wir diese kleine weiße Linie in der oberen linken Ecke jedes Buchstabens haben. Lass uns weitermachen. Ich gehe zurück und füge zu Null, links negativ, fünf Pixel hinzu. Nachdem wir nun die vertikale Linie erstellt haben, erstellen wir die horizontale Linie. Ich wähle das Pseudoelement nach dem Element aus und füge den Inhalt hinzu leere Zeichenketten, absolute Position mit acht Pixeln Höhe, zwei Pixel, Hintergrund weiß Dann füge ich links oben Null hinzu, negative fünf Pixel. Jetzt können Sie sehen, dass wir diese horizontale Linie haben. Auf diese Weise haben wir die obere linke Ecke erstellt. Lassen Sie uns nun die anderen drei Ecken erstellen. Wir werden das tun, indem wir diesen oberen linken Rand mit der Eigenschaft Box Shadow duplizieren diesen oberen linken Rand mit der Eigenschaft Box Shadow Ich gehe hier in das Pseudo-Element vor und füge Box Shadow Zero als horizontalen Wert, 53 Pixel als vertikalen Wert und Weiß hinzu Jetzt können Sie sehen, dass wir diese vertikale Linie in der unteren linken Ecke Lassen Sie uns ihre vertikale Linie erstellen. Ich werde das kopieren. Fügen Sie es hier ein und ändern Sie 53 Pixel auf 60 Pixel. Und jetzt können Sie sehen, dass wir den Rand von der oberen linken Ecke bis zur unteren linken Ecke dupliziert der oberen linken Ecke bis zur unteren linken Ecke Ordnung, ich werde schnell die anderen Box-Shadow-Werte hinzufügen Ich werde hier 37 Pixel als horizontalen Wert, 53 Pixel als vertikalen Wert und Weiß hinzufügen . Dann füge ich hier 30 Pixel als horizontalen Wert und 60 Pixel als vertikalen Wert hinzu, weiß. Jetzt können Sie sehen, dass wir den Rand der unteren rechten Ecke haben. Fügen wir auch den letzten Rand in der oberen rechten Ecke hinzu. Ich werde hier 36 Pixel als horizontalen Wert, Null als vertikalen Wert und Weiß hinzufügen . Dann hier unten und füge 30 Pixel als horizontalen Wert hinzu, dann Null als vertikalen Wert und Weiß. Jetzt können Sie sehen, dass die vier Ränder genau so aussehen, wie wir es wollen. Wir haben sie alle mit der Box-Shadow-Eigenschaft erstellt. Lassen Sie uns den Schwebeeffekt erzeugen. Jetzt. Ich werde hier auch Opazität hinzufügen Dann gehe ich hierher und sage, wenn ich mit der Maus über die Felder fahre, wähle ich das vorherige Pseudoelement des Elements Ich werde dasselbe auch für das Pseudoelement nach dem Ende tun und Jetzt können Sie sehen, dass die vier Ränder jetzt ausgeblendet sind, und wenn wir den Mauszeiger über einen Buchstaben bewegen, können Sie sehen, dass sie Lassen Sie uns nun am Unschärfeeffekt arbeiten. Ich werde hier innerhalb der Spannen vorgehen und Filter Blur hinzufügen , Im Folgenden werde ich sagen, wenn Sie mit der Maus über die Bereiche fahren und Filter Blur Null hinzufügen . Wenn ich jetzt mit der Maus über einen Buchstaben fahre, können Sie sehen, dass der Buchstabe, über dem wir den Mauszeiger bewegen in den Fokus rückt und sehr deutlich wird Lassen Sie uns abschließend einige Übergänge hinzufügen. Ich werde hier innerhalb der Zeitspannen vorgehen und Übergang 0,5 Sekunden hinzufügen Dann füge ich hier beim Bewegen des Mauszeigers einen Übergang von 0 Sekunden hinzu, sodass der Übergang nur stattfindet, wenn der Mauszeiger von den Buchstaben weg bewegt wird sodass der Übergang nur stattfindet , nicht wenn der Mauszeiger darüber bewegt wird, wie Das war's, alle, die Sie sehen können, wir haben diesen wirklich einfachen, aber sehr coolen Effekt erzeugt aber sehr 130. Kreativer Glassmorphismus-Animationseffekt: Hallo zusammen, willkommen zu einer weiteren neuen Lektion im Kurs In dieser Lektion werden wir diese coole Glasmorphismus-Animation erstellen diese coole Glasmorphismus-Animation Sie können sehen, dass wir diesen halbtransparenten Kreis in der Mitte hatten halbtransparenten Kreis in der Mitte Wir haben ein rotes Quadrat und einen weißen Kreis , die sich über den halbtransparenten Kreis bewegen. Wenn wir uns hier nur auf den weißen Kreis konzentrieren, können Sie sehen, wie er sich hinter dem halbtransparenten Kreis von links nach rechts bewegt und beim Überqueren des Kreises verschwommen wird Wenn wir uns von rechts nach links zurückbewegen, bewegt er sich vor dem halbtransparenten Kreis und wird wieder sichtbar Das passiert auch mit dem roten Quadrat. Aber der Zeitpunkt ist anders. Das ist ein wirklich cooles Beispiel. Fangen wir an, es zu erstellen. Ich werde hier in meinen HTML-Code gehen und ein Di hinzufügen und ihm eine Loader-Klasse geben. Dann werde ich darin drei Spans hinzufügen. Wir werden diese Spannweiten verwenden, um die drei verschiedenen Formen in unserem Effekt zu erzeugen die drei verschiedenen Formen in unserem Dann gehe ich zu meinem CSS und wähle „ Body Add“, „Display“, „Flex“, Justify“, „Content Center“, „Elemente ausrichten“, Center in Höhe“, 100 VH, den Hintergrund, diese dunkelblaue Dann wähle ich darunter den Lader-Tauchgang aus, der die drei Bereiche enthält, und füge die relative Breite der Position, 150 Pixel, Höhe 150 Pixel. Dann eine temporäre rote Hintergrundfarbe. Jetzt können Sie sehen, dass wir dieses rote Quadrat in der Mitte des Fensters haben. Ordnung, gehen wir zurück und wählen die Spannweiten im Lader Tauchen Sie ein und fügen Sie Position Absolute hinzu, um sie relativ zum Loader-Div zu positionieren Bei einer Breite von 100% und einer Höhe von 100% nimmt es die gesamte Breite und Höhe des Ladertauchgangs ein. Dann eine temporäre blaue Hintergrundfarbe. Jetzt können Sie sehen, dass wir dieses blaue Quadrat haben , das das rote verdeckt. Eigentlich sind das drei blaue Quadrate. Nicht eins, aber sie sind übereinander gestapelt. Dann gehe ich zurück und füge den Grenzradius 50% hinzu, sodass diese drei Felder einen Kreis bilden, wie Sie es jetzt sehen Ordnung, jetzt arbeiten wir an dem halbtransparenten Kreis in der Mitte Ich wähle das erste untergeordnete Element der Felder aus und füge den Hintergrund hinzu, diese halbtransparente Farbe, um es deutlich zu sehen Ich werde hierher gehen und diesen blauen Hintergrund entfernen , diesen roten Hintergrund Jetzt können Sie sehen, dass wir diesen halbtransparenten Kreis haben. Okay, lass uns an dem roten Quadrat arbeiten , das sich über den halbtransparenten Kreis bewegt. Jetzt werden wir es mit dem zweiten Span innerhalb des Loader-Divs erstellen . Ich werde darauf abzielen und Hintergrund, unsere rote Farbe und dann den Randradius Null hinzufügen , um ein Quadrat zu erhalten. Nochmals, da wir alle Span-Kreise erstellt haben, indem hier in der Span-Auswahl den Randradius um 50% hinzugefügt haben. Jetzt können Sie sehen, dass wir dieses rote Quadrat haben , das den halbtransparenten Kreis verdeckt Ordnung, lassen Sie uns den Glasmorphismus-Effekt für den halbtransparenten Kreis erzeugen den Glasmorphismus-Effekt für den halbtransparenten Kreis Ich gehe hier hoch und füge Hintergrundfilter Blur hinzu, zehn Pixel, dann Z-Index zwei sodass er den roten Hintergrund verdeckt, um den Effekt deutlich zu sehen . Ich gehe hier innerhalb des roten Hintergrunds und füge Transform Translate negative 50 Pixel und negative 50 Pixel und negative 50 Jetzt können Sie sehen, dass der Teil des roten Quadrats, der sich hinter dem Kreis befindet, verschwommen ist und der Kreis jetzt eine Glasmorphismusform hat In Ordnung, gehen wir zurück und entfernen das. Dann lasst uns am Animationseffekt des roten Quadrats arbeiten . Ich werde eine neue Animation erstellen und sie darin animate nennen Bei 0% der Animationsdauer füge ich Transform Translate negative 150 Pixel auf der X-Achse und 50 Pixel auf der Y-Achse Skalieren Sie dann 0,4 , um es zu verkleinern. Dann endlich um Null Grad drehen. Dann kopiere ich das, füge es ein und das bei 50% der Animationsdauer. Ich ändere die Übersetzungseigenschaft auf 150 Pixel auf der X-Achse und auf negative 50 Pixel auf der Y-Achse. Es wird also nach oben rechts verschoben. Ich werde auch den Drehungsgrad auf 180 Grad ändern, sodass er sich dreht, während er sich über den Kreis bewegt. Schließlich werde ich es bei einem Wert unterhalb dieses Bereichs, bei 100% der Animationsdauer, wieder an seine ursprüngliche Position zurückbewegen. Und ich ändere die Drehung auf 360 Grad. Ordnung, ich gehe hier hoch in das rote Quadrat und füge Animation Animate 4 Sekunden als Animationsdauer Dann langsam raus und unendlich. Jetzt können Sie sehen, dass das rote Quadrat animiert ist und sich über den halbtransparenten Kreis bewegt. Und Sie können sehen, dass es verschwommen wird, wenn es den Kreis kreuzt , wenn es sich hinter ihm bewegt Wenn es jetzt zurückkehrt, wollen wir, dass es wieder über dem Kreis sichtbar ist und nicht verschwommen ist können wir also tun, indem wir zu Beginn der Animation hierher gehen und den Z-Index eins hinzufügen Dann werden wir es bei 50% ebenfalls auf eins setzen. Dadurch wird das rote Quadrat in der ersten Hälfte der Animation verschwommen Dann werde ich das alles kopieren. Füge es ein und bei 50.000 1% ändere ich den Z-Index einfach auf drei. Ebenfalls bei 100% werde ich auch Z-Index drei hinzufügen. Dadurch wird das rote Quadrat über dem Kreis erscheinen, sodass es in der nicht verschwommen zweiten Hälfte der Animation nicht verschwommen ist, so wie Sie es hier sehen. ersten Hälfte ist es verschwommen, da der Z-Index eins ist , der niedriger als zwei ist, also der Wert des Kreises In der zweiten Hälfte ist es nicht verschwommen , da es einen Z-Indexwert von drei hat , der höher ist als der des Kreises. Cool Nachdem wir das verstanden haben, können wir ganz einfach den weißen Kreis erstellen, sich auch über den halbtransparenten Kreis bewegt. Ich werde einfach den roten Kreis kopieren. Fügen Sie es ein und wählen Sie den dritten Bereich aus. Dann ändere ich die Hintergrundfarbe Weiß und entferne das Bild, sodass es immer noch ein Kreis ist. Jetzt können Sie sehen, dass wir diesen weißen Kreis haben , der sich zusammen mit dem roten Quadrat bewegt. Gehen wir hierher und fügen die Animationsverzögerung hinzu. Negative 2 Sekunden. Wir haben uns für 2 Sekunden entschieden, weil das die Hälfte der Animationsdauer ist , also 4 Sekunden. Damit sich die beiden Bereiche mit perfektem Timing übereinander bewegen mit perfektem Timing übereinander Genau wie Sie hier sehen, wenn sich einer von ihnen links der andere rechts befindet und sie sich in der Mitte treffen , und sie sich in der Mitte treffen , was uns diesen wirklich coolen Glasmorphismus-Effekt verleiht 131. Gestapelter Karten-Hover-Effekt: Hallo zusammen. Willkommen zu dieser neuen Lektion in unserem Kurs. In dieser Lektion werden wir diesen Effekt erzeugen, bei dem wir drei übereinander gestapelte Karten innerhalb dieses Kreises Und wenn Sie mit der Maus über eine von ihnen , erscheinen sie hier nebeneinander Fangen wir also an, dieses Beispiel zu erstellen. Ich werde in meinem HTML-Code hierher gehen und ein Div mit der Klasse Container hinzufügen . Dann werde ich darin ein weiteres Div mit der Kartenklasse hinzufügen . Ich werde auch Stil hinzufügen, ich werde eine Variable deklarieren, lassen Sie uns ihren Wert auf einen negativen Wert setzen. Dann kopiere und füge ich zwei andere Divs mit derselben Klasse ein und ändere einfach den Variablenwert auf 0,1. Dann gehe ich zu meinem CSS Wählen Sie den Hauptteil aus und fügen Sie Display Flex, Justify, Content Center, Align Items, Mindesthöhe, 100 VH-Hintergrund hinzu. Diese dunkelviolette Farbe, dann Übergang 0,5 Sekunden Danach werde ich Pseudoelement „Vorher“ im Hauptteil zielen , um den großen Kreis zu erstellen und Inhalt hinzuzufügen Leere Zeichenketten positionieren absolut oben Null links Null, Breite 100% Höhe, 100% Z-Index negativ, zwei Hintergründe, dieser gelbe Farbübergang 0,5 Sekunden Jetzt können Sie sehen, dass wir einen gelben Hintergrund haben , der das gesamte Fenster ausfüllt. Da seine Höhe und Breite zu 100% dem Körper entsprechen. Gehen wir zurück und machen daraus einen Kreis. Ich werde den Clip-Pfad-Kreis mit 250 Pixeln als Radius hinzufügen. Dann in der Mitte als Position. Jetzt können Sie sehen, dass der einzige Teil, der auf dem gelben Hintergrund zu sehen ist, dieser Kreis in der Mitte ist. Dann nehme ich das Container-Div ins Visier , das alle drei Karten zusammenfasst, füge die relative Positionsbreite 1.100 Pixel, Höhe 400 Pixel und einen temporären roten Hintergrund Jetzt sehen Sie diesen roten Hintergrund, der sich über dem gelben Kreis Okay, lass uns die Karten auswählen. Ich werde die Divs mit einer Kartenklasse ins Visier nehmen und Breite 300 Pixel und Höhe 400 Pixel hinzufügen 300 Pixel und Höhe 400 Pixel Hintergrund, weiße Position absolut um 50% -200 Pixel Damit es vertikal zentriert wird. Dann links 50% und Randradius zehn Pixel. Um es dann horizontal zu zentrieren, fügen wir transform translate x negative 50% hinzu. Jetzt können Sie sehen, dass die Karten innerhalb des roten Hintergrunds liegen, aber sie sind übereinander gestapelt und deshalb erscheinen sie als ein Div Aber lasst uns zurückgehen und uns unsere drei Karten ansehen. Ich gehe hier hin und addiere Translate Y 50 Pixel mal der Variablen. Ich erinnere mich, dass die Variablenwerte negativ sind 10,1. Das bedeutet, dass sich die erste Karte entlang der Y-Achse um 50 Pixel nach oben bewegt , da ihr Wert einmal minus 50 ist, was minus 50 ist. Außerdem bleibt die zweite unverändert, da ihr Wert Null mal 50 ist , was Null ist. Schließlich bewegt sich die dritte Karte um 50 Pixel nach unten. Ordnung, lassen Sie uns auch für alle drei Karten eine Drehung um 40 Grad hinzufügen . Jetzt können Sie sehen, dass die drei Karten gedreht wurden und die erste Karte nach oben gerückt ist. Die zweite befindet sich in der Mitte und die dritte unten. Wie ich es erklärt habe, lassen Sie uns schnell unseren roten Hintergrund entfernen. Gehen wir auch zurück und fügen eine Neigung von minus 20 Grad auf der X-Achse und eine negative Neigung von zehn Grad auf der Y-Achse Dann endlich die Skala 0,6 Jetzt können Sie sehen, dass wir fast den gewünschten Effekt haben Das Einzige, was jetzt noch übrig ist, ist ein bisschen Boxschatten hinzuzufügen , um die Karten zu trennen. Ich werde Boxschatten mit 25 Pixeln, 20 Pixeln, 100 Pixeln hinzufügen , diese graue Farbe. Und jetzt sind sie getrennt. Aber wie Sie sehen können, ist das dritte Div oben, dann das zweite, dann das erste, aber umgekehrt. Wir wollen, dass das erste Div oben ist, dann das zweite und dann das dritte. Das können wir ganz einfach mit der Z-Index-Eigenschaft tun. Ich gehe zurück und füge einen negativen Index mal der Variablen für das erste Div hinzu, das wird negativ mal minus eins sein, was eins für das zweite ist, es wird Null für das dritte sein, es wird negativ einmal eins sein, es wird negativ eins sein, was negativ eins ist, was negativ eins ist. Es wird den niedrigsten Z-Index haben und ganz unten im Stapel stehen, genau wie Sie hier sehen können. Dann füge ich zum Schluss einen Übergang von 0,5 Sekunden hinzu. Fügen wir der zweiten und dritten Karte etwas Transparenz hinzu, damit sie einen schönen Drei-D-Effekt haben. Wir wählen die zweite Karte aus und fügen Deckkraft 0,8 dann die dritte Karte und ändern die Deckkraft auf 0,6. Jetzt können Sie sehen, dass sie viel besser aussehen In Ordnung, lasst uns am Schwebeeffekt arbeiten. Jetzt werde ich sagen, wenn ich mit der Maus über den Container fahre, der sich an den gelben Hintergrund erinnert, werde ich die Karten als Ziel anvisieren und die Position Absolute Z hinzufügen , Index eins, Deckkraft eins Dann transformiere Translate X negativ um 50% und das überschreibt alle Transformationen, die wir hier oben gesehen haben Und wende diese Übersetzungsfunktion nur hier an, die Drehung, die Schräglage, all das wird entfernt Und das bedeutet, dass die Karten übereinander gestapelt werden, wieder übereinander gestapelt werden, wie Sie hier sehen Okay, jetzt wollen wir etwas Abstand zwischen ihnen hinzufügen. Nehmen wir an, wir möchten 350 Pixel zwischen jeder Karte hinzufügen. Wir können zurück gehen und addieren, dann fügen wir neben diesen negativen 50% hinzu und berechnen das 350-Pixel-fache der Variablen Und das bedeutet für alle, dass der ersten Karte negative 350 Pixel hinzugefügt werden , der zweiten Karte Null, sodass sie an ihrer Position bleibt, und 350 Pixel zur dritten Karte Und das wiederum wird jeden von ihnen um 350 Pixel trennen , genau wie Sie hier sehen können. Jetzt ist es an der Zeit, diesen Karten etwas Inhalt hinzuzufügen. Ich werde zu meinem HTML-Code im Karten-Div zurückkehren und weiteres Div mit einer Inhaltsklasse hinzufügen. Ich werde Stil hinzufügen. Dann füge ich eine Variable J mit einem Wert von eins hinzu. Dann füge ich in diesem Div ein H zwei hinzu und sage Karte eins. Dann füge ich einen Absatz hinzu und füge etwas Text hinzu. Dann kopiere ich das Inhalts-Div, füge es erneut ein und ändere die J-Variable auf zwei und Karte eins auf Karte zwei. Dann füge ich es auch hier ein. Und ändere J auf drei und Karte eins auf Karte drei. Sie können sehen, dass wir den Inhalt hier in den drei Karten haben. Gehen wir zu unserem CSS. Ich werde hier in das Auto gehen und Display, Flex, Justify Content Center, eine Zeile und ein Artikelzentrum hinzufügen Flex, Justify Content Center, . Und jetzt können Sie sehen, dass der Inhalt im Autobereich zentriert ist . Lass uns weitermachen. Ich wähle den Inhalt und füge eine positionsrelative Polsterung hinzu, 25 Pixel färben diese dunkelgraue Farbe ein, Übergang 0,5 Sekunden, dann Opazität Null Im Folgenden werde ich sagen, dass ich, wenn ich mit der Maus über das Container-Div fahre, auf den Inhalt auswähle und die Deckkraft eins hinzufüge Dann wird die Übergangsverzögerung 0,2 Sekunden mit der Variablen J multipliziert . Das erste Inhalts-Div hat eine Übergangsverzögerung von 0,2 Das zweite wird um 0,4 Sekunden verzögert. Und der dritte wird um 0,6 Sekunden verzögert, genau wie Sie hier sehen können. Damit haben wir diese Lektion beendet. Ich hoffe es hat dir gefallen und wir sehen uns in der nächsten. 132. Kreativer 4-Linien-Knopf-Hover-Effekt mit CSS: Hallo, da alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button-Hover-Effekt erzeugen Sie können sehen, dass die Schaltfläche von vier Linien umgeben ist. Und wenn wir mit der Maus darüber fahren, kommen die vier Linien zusammen und schrumpfen, bis sie verschwinden Dann vergrößert sich dieser leuchtende Hintergrund , bis er die Schaltfläche verdeckt Wir werden lernen, wie wir dieses Hintergrundglühen mithilfe der Eigenschaft Box Shadow erzeugen können dieses Hintergrundglühen mithilfe der Eigenschaft Box Shadow Lass uns anfangen. Ich werde hier in meinem HTML-Code beginnen, indem ein Div hinzufüge und ihm eine Containerklasse gebe. Dann werde ich darin ein Anker-Tag hinzufügen. Dann werde ich darin vier Bereiche für die vier Zeilen hinzufügen. Ich werde gleich hier hingehen und Button sagen. Dann kopiere ich dieses Anker-Tag und füge es erneut ein, um eine weitere Schaltfläche zu erstellen. Dann gehe ich zu meinem CSS. Ich werde damit beginnen, einige allgemeine Reset-Stile hinzuzufügen. Ich füge Abstand am Rand Null, Größe des Felds Null, Rahmenfeld, Schriftfamilie, Sands und Schriftfamilie, Sands Dann nehme ich den Hauptteil ins Visier und füge Display Flex, Justify, Content Center hinzu, um das Container-Div horizontal im Dann füge ich eine Zeile hinzu und zentriere sie vertikal. Dann füge ich eine Mindesthöhe von 100 VH hinzu. Dann hintergründe endlich diese dunkelgraue Farbe. Dann nehme ich das Container-Div ins Visier und füge Display-Flex hinzu, um die Ausrichtung der Schaltflächen zu steuern. Dann füge ich eine Lücke von 150 Pixeln hinzu , um die Schaltflächen voneinander zu trennen. Zum Schluss: biegen, wickeln, wickeln. Jetzt werde ich auf die Anker-Tags zielen und eine relative Position hinzufügen , um die vier Zeilen relativ zum Anker-Tag zu positionieren . Dann füge ich Textdekoration keine Texttransformation, Großbuchstaben, 20 Pixel von oben und unten und 35 Pixel von links und rechts Dann füge ich einen Rahmen mit zwei durchgehenden Pixeln hinzu. Diese schöne blaue Farbe, dann färbe unsere blaue Farbe mit einer Schriftgröße von 20 Pixeln. Buchstabenabstand vier Pixel, schließlich Übergang 0,5 Sekunden. Jetzt können Sie sehen, dass die Knöpfe viel schöner aussehen. Wenn wir jetzt mit der Maus über die Links fahren, möchten wir die Textfarbe auf Weiß ändern und die Ränder entfernen Ich werde auf den Link zielen, wenn ich mit der Maus darüber fahre. Ich werde die Farbe Weiß hinzufügen , um die Textfarbe auf Weiß statt auf Blau zu ändern Dann füge ich einen Rahmen hinzu, zwei Pixel einfarbig, transparent, um den Rand zu entfernen. Jetzt können Sie sehen, dass wir den gewünschten Effekt erzielen, wenn wir mit der Maus über die Links fahren Lassen Sie uns nun die vier Linien, die die Links umgeben, mithilfe der vier Bereiche erstellen , die wir in jedem Link erstellt haben in jedem Link erstellt Ich werde die Bereiche innerhalb der Links als Ziel festlegen und Position Absolute hinzufügen , um sie relativ zu den Links zu positionieren Und wir werden jeden von ihnen einzeln kontrollieren. Dann füge ich den Hintergrund hinzu, unsere blaue Farbe. Jetzt werden wir die erste und dritte Spanne ins Visier nehmen. Ich werde sagen, Span n-tes Kind eins, dann Span n-tes Kind drei. Ich werde die Breite 40 Pixel und die Höhe vier Pixel hinzufügen. Das werden die horizontalen Linien sein. Dann kopiere ich das, füge es ein und wähle den zweiten und vierten Bereich aus. Dann ändere ich die Breite auf vier Pixel und die Höhe auf 40 Pixel Das werden also die vertikalen Linien sein. Jetzt können Sie sehen, dass die Linien hier erscheinen, aber sie sind übereinander gestapelt Gehen wir zurück und kontrollieren wir ihre Position. Ich nehme das erste Kind ins Visier und füge die oberen 50% minus zwei Pixel hinzu. Damit die erste Zeile vertikal zentriert wird. Um es dann nach links vom Link zu verschieben, fügen wir nach links negative 50 Pixel hinzu. Dann füge ich einen Übergang von 0,5 Sekunden hinzu. Entspann dich. Jetzt können Sie sehen dass sich die erste Zeile links vom Link befindet. Ordnung, wenn wir jetzt mit der Maus über den Link fahren, möchten wir, dass sich diese erste Zeile wieder in die Mitte des Links bewegt und verkleinert Gleichzeitig werde ich genau hier hingehen. Und wenn ich mit der Maus über den Link fahre, ziele ich auf die erste Zeile und füge links 50% hinzu, um sie wieder in die Mitte zu verschieben Ich füge außerdem den Transformationsmaßstab x Null hinzu, sodass die Linie schrumpft, wenn sie zurück zur Mitte geht Wenn Sie jetzt den Mauszeiger über den Link bewegen, können Sie sehen, dass sich die erste Linie beim Verkleinern wieder in die Mitte bewegt Damit die Linie zur linken Seite hin schrumpft, füge ich hier den Transformationsursprung links hinzu Wenn wir nun den Mauszeiger vom Link wegbewegen, möchten wir, dass die Linie ein wenig wartet , bevor sie zu ihrer Position zurückkehrt Ich werde hier in den CSS-Block der ersten Zeile gehen und eine Übergangsverzögerung von 0,25 Sekunden hinzufügen Wenn ich dann mit der Maus über den Link fahre, füge ich eine Übergangsverzögerung von 0 Sekunden Die Verzögerung tritt also nur auf, wenn Sie mit der Maus vom Link wegfahren, und nicht, wenn Sie den Mauszeiger so darüber Ordnung, jetzt haben wir nur noch eine Sache übrig und das ist, der Linie etwas Boxschatten hinzuzufügen , um diesen schönen Leuchteffekt zu erzielen Wir gehen zurück innerhalb aller Felder und fügen den Boxschatten 00, Unschärfewert von zehn Pixeln und die Farbe unserer blauen Farbe Dann kopiere ich diesen Wert, füge ihn viermal erhöhe den Unschärfewert schrittweise für jeden Wert So können wir diesen verschwommenen Effekt erzielen, wie Sie ihn hier sehen Okay, jetzt machen wir dasselbe für die anderen drei Zeilen. Ich gehe hierher und kopiere das. Füge es dreimal ein. Dann werde ich die dritte Zeile ins Visier nehmen. Wechseln Sie von links nach rechts, weil wir möchten, dass es auf der rechten Seite positioniert wird. Dann ändere ich den Transformationsursprung nach rechts statt nach links. Ich werde auch hier von links nach rechts wechseln. Jetzt können Sie sehen, dass sich die dritte Zeile rechts neben dem Link befindet. Wenn Sie den Mauszeiger über den Link bewegen, bewegt er sich zurück in die Mitte und verkleinert Okay, jetzt wollen wir die zweite Zeile ins Visier nehmen. Wir wollen es horizontal zentrieren, nicht vertikal. Also werden wir hier von oben nach links wechseln. Und wir werden hier von links nach oben wechseln , um es nach oben über dem Link zu verschieben. Wir werden auch den Ursprung der Transformation nach oben ändern. Wenn wir die Seite neu laden, können Sie sehen, dass sie sich jetzt über den Links Gehen wir jetzt zurück und setzen den Schwebeeffekt fort. Ich gehe hierher und ziele die zweite Zeile und wechsle von links nach oben Dann ändere ich die Skala X in die Skala Y, damit sie vertikal schrumpft Jetzt können Sie sehen, dass wir den gewünschten Effekt erzielen Machen wir schnell dasselbe für die vierte Zeile, die unter den Links positioniert wird. Ich werde es hier, hier, ins Visier nehmen und von oben nach links und von links nach unten wechseln. Dann ändere ich auch den Transformationsursprung nach unten. Wenn ich den Mauszeiger bewege, wechsle ich von links nach unten skaliere X auf Y. Jetzt können Sie sehen, dass alle vier Linien erstellt wurden und wir jetzt genau den Effekt haben , den wir wollten Jetzt ist es an der Zeit, den Hintergrund zu erstellen, nach dem Verkleinern der Linien erscheint , um die Links zu verdecken Und das machen wir mit dem Before-Pseudoelement. Ich gehe hierher und ziele auf das Pseudo-Element vor, den Link Und füge leere Zeichenketten zum Inhalt hinzu, positioniere absolut, um ihn relativ zu den Links zu positionieren Dann füge ich die obere Null und linke Null hinzu, da wir wollen, dass die Links vollständig verdeckt werden. Ich füge Breite 100% Höhe 100% hinzu. Dann füge ich Hintergrund hinzu, unsere blaue Farbe. Jetzt können Sie sehen, dass wir den blauen Hintergrund haben. Jetzt gehen wir zurück und fahren fort. Ich werde hier hingehen und Transform Scale Zero hinzufügen. Dann der Übergang 0,5 Sekunden, ein negativer Index. Dann werde ich hierher gehen. Wenn ich mit dem Mauszeiger über den Link fahre, wähle ich das Pseudoelement vor und füge Übergangsverzögerung um 0,5 Sekunden für die Transformationsskala hinzu, da der Hintergrund erscheinen soll Nachdem die vier Linien zusammengekommen sind, fügen wir, um diesen leuchtenden Effekt zu erzielen, Box Shadow 0010 Pixel hinzu, Dann kopiere ich es, füge es zweimal ein und erhöhe den Unschärfewert entsprechend. Ich werde es auf 30 Pixel ändern, dann auf 60 Pixel. Wenn Sie jetzt mit der Maus über den Link fahren, können Sie sehen, dass wir, nachdem die vier Linien zusammengekommen sind, diesen schönen leuchtenden Hintergrund haben , der sich vergrößert und die Schaltfläche verdeckt Und das ist genau der Effekt, den wir anstrebten. 133. Kreative 4 Kreise-Animation: Hallo zusammen, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese coolen Kreise und Animationen erstellen. Sie können sehen, dass wir diese Formen haben und sie sind auf wirklich nette Weise animiert. Wir haben diesen weißen Kreis, der sich horizontal von rechts nach links bewegt horizontal von rechts nach links und dann wieder in einer Endlosschleife endet. Darüber haben wir diesen blauen Halbkreis, der rotiert. Und darüber haben wir diese kleine weiße Kugel, die perfekt darüber gleitet Das wird ein cooles Animationsbeispiel sein. Mal sehen, wie wir es erstellen können. Ich werde in meinem HTML-Code hierher gehen und ein Div hinzufügen. Gib ihm eine Containerklasse. Dann werde ich darin ein weiteres Div mit einer Loader-Klasse hinzufügen . Dann füge ich das letzte Div hinzu und gebe ihm die Klasse Ball. Dann gehe ich zu meinem CSS und füge zunächst einige allgemeine Reset-Stile hinzu. Ich füge Rand Null, Polsterung Null, dann Boxgröße und Rahmenfeld hinzu Darunter werde ich den Hauptteil anvisieren und Display-Flex hinzufügen, den Inhalt zentrieren , Elemente ausrichten, in der Höhe zentrieren, 100 VH-Hintergrund, diese Farbe Marineblau, schließlich den Überlauf verdeckt Dann wähle ich das Div mit der Loader-Klasse aus und füge der Position eine relative Breite von 200 Höhe ebenfalls 200 Pixel. Dann füge ich einen temporären roten Hintergrund hinzu. Jetzt können Sie sehen, dass wir diesen roten Hintergrund haben , der sich in der Mitte des Körpers befindet. Wir werden diese Loader-ID verwenden, um den blauen Teil zu erzeugen , der sich in unserem Beispiel genau hier gedreht hat. Ordnung, jetzt erstellen wir diesen blauen Hintergrund mit dem Before-Pseudoelement Ich werde auf das Before-Pseudoelement des Loader-Divs abzielen und den Inhalt hinzufügen : leere Zeichenketten, Position, absolute Breite 200 Pixel, Höhe 100 Hintergrundieren Sie dann unsere blaue Farbe. Jetzt können Sie sehen, dass wir diesen blauen Hintergrund haben, aber wir möchten diesen Hintergrund in einen Halbkreis ändern . Lass uns das machen. Ich gehe hier hin und füge den unteren linken Rand mit einem Radius von 100 Pixeln hinzu, genau wie die Höhe des blauen Hintergrunds. Dann der Rand unten rechts ebenfalls mit einem Radius von 100 Pixeln. Jetzt können Sie sehen, dass der blaue Hintergrund genau so aussieht, wie wir es wollen. Ordnung, jetzt erstellen wir den zweiten Teil unserer Zeichnung. Dieser weiße Kreis hier, der sich horizontal hin und her bewegt. Ich werde hierher zurückkehren und das Container-Div ins Visier nehmen. Dann füge ich Position Relative hinzu. Danach werde ich auf das Before-Pseudoelement des Container-Divs zielen Before-Pseudoelement des , um den weißen Kreis zu erstellen Dann füge ich leere Inhaltszeichenfolgen hinzu, positioniere die absolute Breite 200 Pixel und Höhe 200 Pixel Dann weißer Hintergrund. Um einen Kreis daraus zu machen, füge ich einen Randradius 50% hinzu. Um diesen weißen Hintergrund zu sehen, gehe ich hier nach oben in den Loader und füge einen negativen Z-Index hinzu. Sie können sehen, dass wir diesen weißen Kreis haben , der genau so aussieht, wie wir es wollen. Da wir den weißen Kreis unter dem blauen finden wollen , gehen wir zurück und fügen 200 Pixel hinzu. Jetzt können Sie sehen, dass es an den unteren Rand des roten Hintergrunds verschoben wurde . Jetzt möchten wir, dass der blaue Hintergrund genau über dem weißen Kreis liegt. können wir tun, indem wir hier in das Pseudo-Element vor dem Loader-Tauchgang gehen und die untere Null hinzufügen Fantastisch, lassen Sie uns diesen roten Hintergrund entfernen. Wir wollen es nicht mehr. Ich werde hier in das Loader-Div gehen und den roten Hintergrund entfernen. Okay, lassen Sie uns den dritten Teil erstellen , der dieser große rosa Kreis ist. Ich werde das tun, indem das After-Pseudoelement des Containers Ich werde das After-Pseudoelement des Containers anvisieren und leere Inhaltszeichenfolgen hinzufügen, Position absolut Dann füge ich die Breite 800 Pixel hinzu. Höhe 800 Pixel sowie Hintergrund, diese schöne rosa Farbe. Um einen Kreis daraus zu machen, füge ich den Randradius 50% hinzu. Jetzt können Sie sehen, dass wir diesen riesigen rosa Kreis haben. Lass uns ihn horizontal zentrieren. Ich gehe hier hin und füge links 50% hinzu und transformiere dann translate x negativ 50% Jetzt kannst du sehen, dass der rosafarbene Kreis in der Mitte der Seite ist und jetzt den weißen Hintergrund verdeckt. Wir wollen ihn unter dem weißen Hintergrund positionieren. Ich werde hierher zurückkehren und die oberen 400 Pixel hinzufügen. Jetzt befindet sich der Ping-Hintergrund unter dem weißen Kreis, aber wie Sie sehen können, befindet sich die gesamte Zeichnung unten. Es wäre schöner, wenn wir es ein bisschen nach oben verschieben könnten es ein bisschen nach oben verschieben Ich werde das tun, indem ich in das Container-Div gehe und transform translate y negative 100 Pixel hinzufüge transform translate y negative 100 , um es nach oben zu verschieben, wie Sie hier sehen. In Ordnung, wir sind fast fertig. Alles, was hier noch übrig ist, ist die kleine weiße Kugel oben. Ich werde es zunächst ins Visier nehmen und seine Position auf absolut setzen. Dann füge ich Breite 40 Pixel, Höhe 40 Pixel, Hintergrund weiß und Randradius 50% hinzu. Jetzt können Sie sehen, und Randradius 50% dass es relativ zum Loader-Div positioniert ist . Um es klar zu sehen, gehe ich hier nach oben in das Loader-Div und füge wieder einen roten Hintergrund hinzu. Jetzt können Sie sehen, dass der weiße Ball hier in der oberen linken Ecke des Laders positioniert ist . Ordnung, lassen Sie uns seine Position so ändern, dass wir genau oben auf dem weißen Kreis sitzen . Ich gehe zurück in das Ball-Div und addiere zu 50% Transform Translate y negative 100% Jetzt haben wir alle unsere Teile zusammen und das Einzige, was übrig bleibt, ist, sie eins nach dem anderen zu animieren Wir werden mit der kleinen weißen Kugel beginnen. Wir wollen es horizontal oben auf dem blauen Halbkreis bewegen oben auf dem blauen Halbkreis Es sollte sich in einer Endlosschleife von rechts nach links, hin und her bewegen Zuerst gehe ich hierher und füge Translate x Negative 40 Pixel hinzu. Damit bewegt sich die kleine weiße Kugel nach links und befindet sich am Anfang des blauen Halbkreises, wie Sie Lassen Sie uns nun die Animation erstellen. Ich werde hierher gehen und eine neue Animation erstellen. Nennen Sie es, Animate Ball Inside. Ich werde drei Stufen für die Animation hinzufügen. Bei 0% füge ich Transform Translate Y negativ 100% , sodass es seine vertikale Position beibehält. Dann übersetze x negativ 40 Pixel. Bei 50% der Animationsdauer kopiere ich das, füge es und ändere Translate x auf 200 Pixel. Das ist die Breite des blauen Halbkreises. Der Ball bewegt sich bei 100% ganz nach rechts. Wir wollen, dass er wieder zurückgeht, also lasse ich ihn stehen, da er minus 40 Pixel hat Dann gehe ich hier hoch in das Ball-Div und füge Animation hinzu. Animiere den Ball 4 Sekunden. Leichtigkeit ins Unendliche. Großartig. Jetzt können Sie sehen, dass sich der weiße Ball unendlich von rechts nach links bewegt Genau über dem blauen Halbkreis. Licht wollen wir Alles klar, schauen wir uns kurz den blauen Halbkreis an , um zu sehen, wie wir ihn animieren können Sie können hier sehen, dass er sich von links nach rechts und wieder zurück dreht von links nach rechts und wieder zurück Okay, lass uns zurückgehen und die Animation erstellen. Ich werde hierher gehen und eine neue Animation erstellen. Nennen Sie es Halbkreis. Dann erstelle ich drei Stufen für diese Animation. Bei 0% der Animationsdauer füge ich eine Transformationsdrehung um 50 Grad hinzu. Dann füge ich zwei weitere Stufen hinzu. Ich werde das kopieren und zweimal erneut einfügen. Die zweite Stufe wird bei 50% liegen. Ich werde den Rotationswert auf negative 50 Grad ändern. Am Ende der Animationsdauer lasse ich dann die Rotationsgrade unverändert. Dann gehe ich hier hoch in den Loader und füge einen Animationshalbkreis Animationshalbkreis Einfach ins Unendliche. Jetzt können Sie sehen, dass sich der rote Hintergrund in seiner Mitte dreht und der blaue Halbkreis sich mit ihm dreht Gehen wir jetzt zurück und entfernen den roten Hintergrund. Wir brauchen es nicht mehr. Das werde ich schnell tun. Jetzt ist nur noch eins übrig und das ist das Animieren des weißen Kreises Ich werde hier unter den weißen Kreis gehen und eine neue Animation erstellen Nennen Sie es, animieren Sie den Kreis. Bei 0% der Animationsdauer füge ich Transform Translate x 15 Pixel Dann kopiere ich das und erstelle zwei weitere Stufen. Der erste Wert liegt bei 50%, dann ändere ich Translate X auf negative 15 Pixel bei 100% Ich lasse den Wert für Translate x unverändert. Dann gehe ich hier hoch und füge Animation Animate Circle 4 Sekunden Einfach ins Unendliche. Jetzt können Sie sehen, dass sich der weiße Kreis horizontal zwischen dem blauen und dem rosafarbenen Halbkreis bewegt horizontal zwischen dem , wodurch wir genau den gewünschten Effekt erzielen Okay Leute, das ist es für diese Lektion. Es hat wirklich Spaß gemacht und ich hoffe, es hat euch gefallen. Wir sehen uns im nächsten. 134. Bunte Flüssigglasanimation: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diese nette Animation erstellen. Sie können sehen, dass wir dieses Glas Wasser haben. Und das Wasser darin fließt nach unten , um das Glas zu leeren, dann nach oben, um es wieder zu füllen. Und das passiert immer wieder. Fangen wir an, dieses Beispiel zu erstellen. Ich werde hier in meinem HTML-Code beginnen, indem darin einen Abschnitt hinzufüge. Ich werde ein hinzufügen, ihm eine Klasse von Glas geben. Dann noch ein Tauchgang mit einer inneren Klasse drin, unser letzter Tauchgang mit einer Flüssigkeitsklasse. Dann kopiere ich das Div mit einer Klasse Glas und füge es wieder ein. Dann gehe ich zu meinem CSS und ziele auf den Abschnitt ab. Dann füge Display Flex hinzu, begründe den Inhalt, zentriere eine Zeile, Mittenhöhe, 100 VH-Hintergrund, diese dunkelgraue Farbe Danach werde ich auf die Glasscheibe zielen und die relative Position hinzufügen Im Folgenden werde ich auf das innere Div innerhalb des Glas-Divs zielen und die relative Breite 200 Pixel, Höhe 400 Pixel, Hintergrund und diese graue Farbe hinzufügen die relative Breite 200 Pixel, . Dann gehe ich hier nach oben in den Abschnitt und füge Lücke von 40 Pixeln hinzu, um die beiden Gläser voneinander zu trennen, also lass uns weitermachen. Ich werde hier hingehen und einen Randradius von 40 Pixeln hinzufügen. Dann Rand acht Pixel, durchgehend weiß. In Ordnung, schauen wir uns unser Beispiel an. Wir wollen diesen kreisförmigen oberen Teil hier oben auf dem Glas erstellen . Und das machen wir mit dem Before-Pseudoelement des inneren Divs. Also werde ich es ins Visier nehmen und Inhalt hinzufügen leere Zeichenketten, Position, absolute Breite 175 Pixel, Höhe 30 Pixel Dann umranden zehn Pixel durchgehend. Sie können sehen, dass wir dieses graue Rechteck haben. Lass uns weitermachen. Ich gehe zurück und füge Randradius von 50% hinzu. Um ihn horizontal zu zentrieren, füge ich links 50% hinzu. Dann transformiere ich x negativ um 50%. Jetzt können Sie sehen, dass wir diese kreisförmige Form haben. Okay, jetzt wollen wir es ein wenig nach oben verschieben. Ich werde hierher zurückkehren und die oberen negativen 15 Pixel hinzufügen. Gehen wir auch hier hoch und ändern die Randfarbe auf transparent statt auf weiß. Unglaublich. Jetzt sieht die Oberseite des Glases genau so aus, wie wir es wollen. Eine letzte Sache, lassen Sie uns unten etwas Boxschatten hinzufügen. Ich gehe zurück und füge Boxschatten, einen horizontalen Wert von Null und einen vertikalen Wert von 15 Pixeln hinzu. Dann Null Unschärfewert und eine dunkelgraue Farbe als Schattenfarbe Jetzt haben wir diesen schönen Schatten unten. Okay, wenn wir uns unser Beispiel ansehen, können Sie sehen, dass wir diesen halbtransparenten Teil haben , der dem Glas ein realistisches Aussehen verleiht. Gehen wir zurück und machen das. Ich werde das mit dem After-Pseudoelement des inneren Divs Ich werde es als Ziel anvisieren und Inhalt hinzufügen, leere Zeichenketten (Position), absolute obere 70 Pixel links, 30 Pixel Breite 50 Pixel und Höhe 250 Pixel. Hinterlegen Sie dann endlich diese halbtransparente graue Farbe. Jetzt können Sie sehen, dass wir diesen halbtransparenten grauen Hintergrund haben , den wir wollen. Ordnung, lass uns gehen und die Flüssigkeit im Glas herstellen. Wir werden das mit der Flüssigkeit machen. Ich werde es als Ziel anvisieren und die Position absolut oben 50 Pixel links, fünf Pixel, fünf Pixel unten hinzufügen absolut oben 50 Pixel links, . Hintergrundieren Sie dann diese hellblaue Farbe. Jetzt können Sie sehen, dass wir diesen blauen Hintergrund haben , der das Glas verdeckt. Aber jetzt wollen wir hier unten einige Kurven hinzufügen , damit sie zum Glas passen. Ich werde hierher zurückkehren und einen Randradius von 30 Pixeln hinzufügen. Der untere Randradius beträgt ebenfalls 30 Pixel. Jetzt können Sie sehen, dass das flüssige Div genau so aussieht, wie wir es wollen. In Ordnung, gehen wir zurück und schauen uns unser Beispiel an. Sie können sehen, dass wir diesen oberen kreisförmigen Teil genau hier haben. Lass es uns ganz schnell erstellen. Ich werde auf das Before-Pseudoelement des Liquid-Divs abzielen und Inhalt hinzufügen Leere Zeichenketten, absolute Breite 100%, Höhe 20, Randradius 50%, Hintergrund dann diese dunklere blaue Farbe Sie können sehen, dass wir diesen kreisförmigen blauen Hintergrund haben. Aber lass es uns ein wenig nach oben verschieben. Ich werde hier hingehen und zum Minus zehn Pixel hinzufügen. Unglaublich. Das Glas sieht genau so aus, wie wir es wollen. Und wir haben die Zeichnung abgeschlossen. Aber jetzt müssen wir es animieren. Gehen wir zurück und machen das. Ich werde eine neue Animation Namen Animate Liquid erstellen Dann füge ich zu Beginn der Animationsdauer bei 0% bei 20% der Animationsdauer 50 Pixel vom Beginn der Animation bis zu Beginn der Animation bis zu 20% Die blaue Flüssigkeit bleibt so wie sie ist. Sie bewegt sich nicht, weil wir ihren höchsten Wert nicht geändert haben. Bei 50% der Animationsdauer setzen wir dann bei 70% die oberste Eigenschaft auf 320 Pixel. Die oberste Eigenschaft ändert sich bei einer Animationsdauer von 20 bis 50% der Animationsdauer von 50 Pixeln auf 320 Pixel der Animationsdauer von . Bei einer Animationsdauer von 50 bis 70% bleibt sie dann eine Weile bei 320 Pixeln stehen Animationsdauer . Danach, am Ende der Animationsdauer bei 100%, setzen wir den oberen Wert wieder auf 50 Pixel zurück. Ordnung, gehen wir hier hoch in das flüssige Div und fügen die Animation Animate Liquid hinzu, 5 Sekunden linear, unendlich Jetzt können Sie sehen, dass nach dem erneuten Laden der Seite die Flüssigkeit im Glas eine Weile wartet sich dann nach unten bewegt Wartet unten ein wenig und geht dann wieder nach oben zurück Das setzt sich in einer Endlosschleife fort. Gehen wir zurück und ändern die Farbe der zweiten Flüssigkeit. Ich werde auf das zweite Glas zielen und die Flüssigkeit darin anvisieren und den Hintergrund hinzufügen, diese gelbe Farbe. Ich werde auch eine Animationsverzögerung von 2,5 Sekunden hinzufügen. Ich kopiere das, wähle „Einfügen“ und wähle das vorherige Pseudoelement aus, das hier der obere Teil ist Dann füge ich den Hintergrund hinzu, diese dunklere gelbe Farbe Jetzt können Sie die Farbänderungen sehen , die uns diese gelbe Farbe geben. Und wie Sie sehen können, wird, wenn eine Tasse gefüllt wird, die andere leer, was uns genau den Effekt gibt, den wir wollen. 135. ausgefallene Bordüren laden-Animation: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Ladeeffekt erzeugen. Sie können sehen, dass wir diese elastischen Kreise haben , die rotieren und uns diesen schönen Welleneffekt verleihen Wir werden lernen, wie das geht, indem die Eigenschaft Grenzradius Also lass uns anfangen. Ich werde direkt hier in meinen HTML-Code gehen und ein Div mit einer Loader-Klasse hinzufügen . Darin füge ich drei Spans hinzu, dann füge ich darunter ein H zwei hinzu und füge Ladungen hinzu Dann gehe ich zu meinem CSS und ziele auf den Körper ab. Fügen Sie Display, Flex und Justify Content Center hinzu, um den Loader horizontal zu zentrieren. Und richten Sie die Objekte mittig so aus , dass sie vertikal zentriert werden. Dann füge ich die Höhe 100 VH hinzu und den Hintergrund mit dieser dunkelgrauen Farbe Dann nehme ich den Lader ins Visier und füge die relative Breite der Position, 200 Pixel und die Höhe 200 Pixel Zeigen Sie dann Flex an, richten Sie den Inhalt zentriert aus und richten Sie die Elemente zentriert aus. Dann nehme ich die Spannweiten innerhalb des Laders ins Visier. Füge Position absolut hinzu, dann obere Null links Null Breite 100% Höhe 100% Randradius 50% dann Rand zwei Pixel durchgehend weiß Jetzt können Sie sehen, dass wir die drei Felder als weiße Kreise haben , die übereinander liegen Ordnung, lassen Sie uns nun jede Spannweite als Ziel anvisieren und den Randradius jeder einzelnen Fläche ändern , um ihr ein schönes elastisches Aussehen zu verleihen Ich werde hier die erste Spanne anvisieren, indem ich sage, Loader Span nth Child One Dann füge ich darin den Grenzradius hinzu. Um vollständig kontrollieren zu können, wie dieser Rand aussieht, werden wir eine Website namens Fancy Border Radius Generator verwenden . Sie können sehen, dass wir diese Form haben, die wir leicht steuern können, um die gewünschte Form zu erhalten. Lass uns ein bisschen damit spielen. Nehmen wir an, wir wollen diesen Radius. Ich werde ihn kopieren und hier einfügen. Jetzt kannst du sehen, dass die erste Spanne jetzt diesen schönen elastischen Rand hat. Okay, jetzt kopiere ich den ersten Selektor, füge ihn ein und wähle den zweiten Wählen Sie es aus, fügen Sie es noch einmal ein und zielen Sie auf den dritten. Dann gehe ich zurück zur Fancy Border Generator-Website und generiere einen neuen Grenzradius, nur einen zufälligen. Dann füge ich ihn hier innerhalb der zweiten Spanne ein. Okay, ich gehe zurück und generiere einen weiteren Wert und füge ihn hier in der dritten Spanne ein. Jetzt können Sie sehen, dass wir drei verschiedene Grenzen haben, die einen unterschiedlichen Grenzradius haben. In Ordnung, jetzt erstellen wir die Animation. Ich werde eine neue erstellen. Nennen Sie es Rotation. Und darin, zu Beginn der Animationsdauer bei 0%, füge ich Transform Rotation um Null Grad hinzu. Dann füge ich bei 100% der Animationsdauer die Option Transformation und Drehung um 360 Grad hinzu. Dann gehe ich in die Span-Auswahl und füge Animation rotieren, Animationsdauer von 5 Sekunden, dann linear, unendlich Jetzt können Sie sehen, dass sich die drei Grenzen zusammen mit den drei Bereichen drehen. In Ordnung, um den gewünschten elastischen Welleneffekt zu erzielen , können wir zum Beispiel ein wenig mit den Rändern spielen Wir können einen Rand in umgekehrter Richtung drehen lassen. Lass uns das versuchen. Ich werde innerhalb der zweiten Zeitspanne hierher zurückkehren und die Animationsrichtung umgekehrt hinzufügen. Ich denke, Sie können sehen, dass wir bereits den schönen Effekt erzielen. Wir können es so lassen wie es ist oder wir können etwas anderes versuchen. Ich gehe in den dritten Selektor und füge Animationsdauer 3 Sekunden statt fünf hinzu, damit sie schneller rotiert Jetzt können Sie sehen, dass es sich schneller bewegt, was uns diesen schönen Effekt verleiht Sehr cool. Wir haben noch eine Sache übrig und das ist, dem H Two einige einfache Stile hinzuzufügen. Ich werde es ins Visier nehmen und Farbe Weiß und Schriftstärke 500 hinzufügen . Jetzt sieht es viel schöner aus. Und das war's, Leute, für dieses einfache, aber schöne Beispiel Ich werde dich in den kommenden Videos sehen. 136. rotierender leuchtender Lader: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Ladeeffekt erzeugen. Wir haben auch diesen Lader mit diesem leuchtenden Kreis , der sich dreht. Das ist unser schönes Beispiel Mal sehen, wie wir ihn erstellen können. Ich beginne hier in meinem HTML-Code, indem ich einen Abschnitt Dann füge ich darin ein Div gebe ihm eine Loader-Klasse. Dann gehe ich zu meinem CSS und ziele auf den Abschnitt ab. Fügen Sie dann auch Display, Flex, Justify Content Center und Align Items Center hinzu. Dann Mindesthöhe, 100 VH und Hintergrund diese Marineblaufarbe. Ordnung, dann nehme ich das Loader-Div als Ziel und füge Position hinzu, absolute Breite 150 Pixel , 150 Pixel, Hintergrund vorerst rot, dann Randradius 50% In Ordnung, jetzt können Sie sehen, dass wir diesen roten Kreis in der Mitte des Browsers positioniert haben in der Mitte des Browsers positioniert In dieser Lektion werden wir etwas Neues lernen, nämlich den CSS-Gradient. Wir möchten den Hintergrund dieses Kreises in einen Farbverlauf mit zwei blauen Farben ändern . Anstelle dieser roten Farbe werden wir diese Website verwenden, um den Farbverlauf zu generieren. Diese Website hilft uns dabei, einen Farbverlauf zu erstellen. Sie können sehen, dass wir diese beiden Farben haben , mit denen wir den Farbverlauf erzeugen können. Ich werde diese erste Farbe in diese Marinefarbe ändern. Das ist die Farbe unserer Sektion. Und die zweite Farbe, die wir wollen, ist hellblau. Ich werde es hier hinstellen. Ich werde hier auch mit diesem Slider spielen. Um die Gradientenintensität zu ändern, möchte ich diese Verlaufsform verwenden. Wir können hierher gehen und diesen Code kopieren. Gehen Sie dann zurück zu meinem CSS im Loader-Dive und ändern die Hintergrundfarbe von Rot auf diesen neuen Wert, den wir von unserer Website kopiert haben. Jetzt kannst du sehen, dass die Hintergrundfarbe des Kreises jetzt auf diesen coolen Farbverlauf geändert wurde. In Ordnung, jetzt lass uns weitermachen. Wir gehen hierher und zielen auf das Before-Pseudoelement des Loader-Divs ab und fügen leere Inhaltszeichenfolgen hinzu, Position absolut Dann wollen wir hier einen Teil dieser Form verstecken. Um die gewünschte endgültige Form zu erhalten, gehe ich zurück und füge 20 Pixel von oben, 20 Pixel von rechts, dann Null unten und Null auch links Dann füge ich vorerst wieder Rot hinzu. Ich werde auch einen Grenzradius von 50% hinzufügen . Jetzt können Sie sehen , dass wir diesen roten Kreis haben, der unsere Form verdeckt. Ordnung, gehen wir zurück und ändern die Hintergrundfarbe in dieselbe Marinefarbe, die wir für den Abschnittshintergrund verwendet haben. Jetzt können Sie sehen, dass wir diese kreisförmige Form haben , genau so, wie wir gewonnen haben. Ordnung, lassen Sie uns den kleinen leuchtenden Kreis erstellen , der hier positioniert wird Ich gehe zurück und ziele auf das After-Pseudoelement des Loader-Divs und füge Inhalt hinzu leere Zeichenketten, Position, absolute Breite 40 Pixel Höhe ebenfalls 40 Pixel. Hintergrundieren Sie dann unsere hellblaue Farbe und den Randradius 50%. Jetzt können Sie sehen, dass wir genau hier diesen blauen Kreis haben. Jetzt wollen wir ihn hier positionieren. Ich gehe zurück und oben 50 Pixel, richtig, minus acht Pixel. Jetzt können Sie sehen, dass es genau an der gewünschten Stelle positioniert ist . Gehen wir zurück und verleihen ihm diesen schönen Leuchteffekt. Wir werden das mit der Box-Shadow-Eigenschaft tun. Ich werde Box Shadow Zero als horizontalen Offset hinzufügen, eine weitere Null als vertikaler Offset. Dann ein Unschärfewert von fünf Pixeln. Endlich diese hellblaue Farbe. Jetzt können Sie sehen, dass wir diesen sehr kleinen Schatten haben. Um den gewünschten Leuchteffekt zu erzielen, können wir einen einfachen Trick anwenden Wir kopieren diesen Boxschattenwert fügen ihn ein paar Mal ein, sagen wir dreimal. Jedes Mal erhöhen wir den Unschärfewert Allmählich werden wir ihn hier auf 25 Pixel, dann auf 50 Pixel und 75 Pixel ändern dann auf 50 Pixel und 75 Pixel Auf diese Weise können Sie sehen, dass wir diesen schönen Leuchteffekt haben Jedes Mal, wenn Sie einen Leuchteffekt erzielen möchten, können Sie die Eigenschaft Boxschatten verwenden und den Unschärfewert schrittweise erhöhen, wie wir In Ordnung, jetzt erstellen wir die Rotationsanimation. Ich werde eine neue Animation erstellen. nenne sie um 100% drehen. Ich füge eine Transformation hinzu, drehe sie 100% drehen. Ich füge eine Transformation hinzu um 360 Grad. Dann werde ich hier im Loader-Div eine Animation hinzufügen. Drehe 2 Sekunden, linear, unendlich. Jetzt können Sie sehen, dass sich der Lader einer Endlosschleife dreht. 137. Kreative Textanimation mit der Clipfad-Eigenschaft: Hallo zusammen, willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion lernen wir, wie man diese nette Textanimation erstellt. Sie können sehen, dass der Bildschirm horizontal in zwei Hälften aufgeteilt ist horizontal in zwei Hälften Die obere Hälfte hat einen grünen Hintergrund und die untere hat einen weißen Hintergrund Auch der Text hier bewegt sich vom oberen Teil zum unteren Teil und ändert sich von Happy New Year 2031 zu Bye Bye 2030 Außerdem ändert sich die Farbe von Weiß zu Grün. Wir werden die Clip-Path-Eigenschaft verwenden , um dieses Browser-Splitting zu erstellen Lass uns anfangen und das jetzt machen. Ich werde hier in meinem HTML-Code beginnen, indem ich einen Abschnitt hinzufüge. Dann werde ich darin ein Div hinzufügen. Gib ihm eine Klasse von Box und eine weitere Klasse von Box One. Dann füge ich in diesem Div ein H zwei hinzu. Darin füge ich eine Spanne hinzu und sage Tschüss. Dann eine weitere Spanne daneben, sagen wir 2030. Dann kopiere ich das Div, füge es erneut ein und ändere Feld eins in Feld zwei. Innerhalb der ersten Zeitspanne werde ich „Frohes neues Jahr“ hinzufügen. In der zweiten Spanne werde ich 2031 hinzufügen In Ordnung, jetzt gehe ich zu meinem CSS und nehme den Körper ins Visier. Dann füge ich Overflow Hidden hinzu. Dann werde ich auf den Abschnitt abzielen, der die beiden Divs enthält. Ich werde die Position relative Breite, 100% Höhe 100 VH hinzufügen 100% Höhe 100 VH Dann nehme ich das Feld div als Ziel und füge Position absolut oben Null hinzu, links Null, dann Breite 100% Höhe ebenfalls 100% Die beiden Divs werden die volle Höhe und Breite des Abschnitts haben und Breite des Abschnitts Lass uns jetzt gehen und die Seite neu laden. Sie können sehen, dass der Text in der oberen linken Ecke des Abschnitts übereinander gestapelt ist, weil wir die Position der Boxen divs auf absolut gesetzt der Text in der oberen linken Ecke des Abschnitts übereinander gestapelt ist, weil wir die Position der Boxen divs auf absolut Text in der oberen linken Ecke des Abschnitts übereinander gestapelt ist, weil wir die Position der Boxen divs auf Gehen wir zurück und zentrieren den Text auf der Seite. Ich gehe zurück und füge auch Display Flex, Justify, Content Center und Align items Center hinzu. Jetzt können Sie sehen, dass der Text auf der Seite zentriert ist. Okay, gehen wir zurück und zielen auf das zweite Feld , das die Klasse von Feld zwei hat , und fügen den Hintergrund hinzu, diese grüne Farbe. Jetzt können Sie sehen, dass das zweite Feld diese grüne Farbe hat und dass es das erste Feld darunter versteckt weil es in unserem HTML-Code danach kam. Okay, jetzt wollen wir, dass nur die obere Hälfte der zweiten Box angezeigt wird, was bedeutet, dass wir sie in zwei Hälften aufteilen und nur die obere Hälfte sichtbar machen wollen zwei Hälften aufteilen und nur die obere Hälfte sichtbar machen Das können wir ganz einfach tun, indem wir die Clip-Pfad-Eigenschaft verwenden. Ich gehe zum Website-Clip und wähle die Trapezform Da wir dann die untere Hälfte abschneiden wollen, werde ich das schnell tun Dann kopiere ich den Code hierher, gehe zurück und füge ihn in das zweite Feld div ein. Jetzt können Sie sehen, dass das zweite Feld perfekt zugeschnitten ist . Da der Text darin perfekt zentriert ist, ist er auch in zwei Hälften geschnitten. In Ordnung, jetzt fügen wir der H-Two einige Stile hinzu. Ich werde es ins Visier nehmen und Schriftgröße von 45 Pixeln hinzufügen. Wir möchten, dass die beiden Bereiche innerhalb jeder Überschrift in zwei Zeilen angeordnet sind, wie wir es hier in unserem Beispiel sehen In einer Zeile steht Frohes Neues Jahr und 2031 steht darunter Dies gilt auch für die zweite Überschrift. Aus diesem Grund haben wir zwei Spannen innerhalb der H-Zwei hinzugefügt. Gehen wir zurück und machen das. Ich gehe hier in die H Two und füge Display-Flex hinzu. Dann Flex-Richtungsspalte. Jetzt sind sie in zwei Zeilen aufgeteilt. Wir können deutlich erkennen, dass, wenn wir hierher zurückgehen und Transform Translate Y minus 70% hinzufügen . Jetzt können Sie sehen, dass wir, da wir die H2 nach oben verschoben haben, jetzt die zweite H-Zwei sehen und die erste ist darunter versteckt. Wenn wir die ersten H2 sehen wollen, können wir zurückgehen und den Wert auf 70% statt auf negative 70% ändern. Jetzt können Sie sehen, dass wir das bis 2030 erreicht haben. Und das zweite H zwei ist ausgeblendet, da wir das zweite Feld abgeschnitten haben, sodass es nicht angezeigt Ordnung, gehen wir zurück und setzen die Übersetzungseigenschaft wieder auf negative 70%. Ich werde auch Text hinzufügen, eine Linienmitte, um den Text zu zentrieren Okay, lassen Sie uns die Farbe der H-2 ändern , die hier erscheint. Ich werde die H-Zwei in der zweiten Box anvisieren und Farbe Weiß hinzufügen. In Ordnung, jetzt wollen wir die zweite Spanne der H-Zwei ins Visier nehmen. Das ist das Jahr, um dem Ganzen ein paar Styles hinzuzufügen. Ich sage Span nth Child Two und füge Zeilenhöhe eins und Schriftgröße zwei Ordnung, lassen Sie uns die Animation erstellen , die den Text nach oben und unten bewegt Die Idee der Animation besteht darin Y-Funktion animierend zu übersetzen um die H2 vertikal zu bewegen Wie wir gesehen haben, als wir mit dem Wert H zwei gespielt haben. Ich werde hierher gehen und eine neue Animation erstellen. Benennen Sie es, animieren Sie es darin. Wir wollen, dass sich der Text von oben nach unten bewegt Aber wir möchten, dass es für eine Weile in der oberen Hälfte bleibt und dann in die untere Hälfte verschoben wird. Setzen Sie sich für eine Weile in der unteren Hälfte und gehen Sie zurück zur oberen Hälfte und so weiter. Ich sage bei 0% der Animationsdauer, bei 45% füge ich Transform Translate y negative 70% hinzu, sodass der Text vom Beginn der Animationsdauer bis zu 45% an seiner Position bleibt vom Beginn der Animationsdauer bis zu 45% an seiner Position , bevor er sich bewegt. Unter dem Wert von 55% 90% füge ich dann transform translate Y 70% Das bedeutet, dass sich die Position von 45% der Animationsdauer bis 55% von den oberen negativen 70% zu den unteren 70% ändert den oberen negativen 70% zu den unteren . Von 55% auf 90% bleibt sie an dieser neuen Position unten. Dann wollen wir es wieder nach oben verschieben. Ich werde sagen, dass ich bei 100% wieder Transform Translate Y negative 70% hinzufügen werde . Dann gehe ich hier hoch in den H-Zwei-Selektor und füge Animationsanimation für 3 Sekunden hinzu Einfach ins Unendliche. Jetzt können Sie sehen, dass sich der Text von oben nach unten, hin und her bewegt , was uns diesen schönen Animationseffekt verleiht. Jetzt müssen Sie nur noch die Farbe des Textes auf Grün ändern. Wenn es nach unten geht, gehe ich zurück und füge im H-Zwei-Selektor Farbe hinzu, unsere grüne Farbe In Ordnung, alle zusammen, das war's für diese Lektion. Ich hoffe, du lernst etwas daraus und wir sehen uns in einer anderen. 138. Zeichne eine Linie mit einem Bleistift-Symbol um einen Button: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Button-Hover-Effekt erzeugen diesen schönen Button-Hover-Effekt Sie können sehen, dass wir diesen Button und diesen Stift in der oberen linken Ecke Und wenn ich mit der Maus über die Schaltfläche fahre, zeichnet der Stift einen Rand um die Schaltfläche und füllt sie dann mit einem dunkelgrauen Hintergrund In Ordnung, schauen wir uns an, wie wir diesen Effekt erzielen können. Ich werde hier in meinem HTML-Code beginnen, indem ich ein Anker-Tag hinzufüge. Ich werde Button sagen. Danach werde ich vier Felder hinzufügen. Jeder Bereich wird eine Linie der vier Linien sein , die die Grenze bilden , die die Verbindung umgibt Dann gehe ich zu meinem CSS und ziele auf den Körper ab. Dann füge Display Flex, Justify, Content Center, A Line Items Center ebenfalls hinzu, dann in Höhe 100 VH. Dann werde ich das Anker-Tag als Ziel auswählen und positionsrelative Polsterung hinzufügen, 20 Pixel von oben und unten und 40 Pixel von links und rechts Dann füge ich die Schriftgröße 24 Pixel, Schriftstärke, die kräftige Farbe und diese dunkelgraue Farbe Dann transformiert der Text die Textdekoration in Großbuchstaben , sodass der Buchstabenabstand zwei Pixel beträgt. Lassen Sie uns nun daran arbeiten, die vier Linien zu erstellen , die den Link umgeben. Wir werden das mit den vier Feldern tun. Ich werde auf die erste Spanne abzielen, indem ich sage, Span n-tes Kind eins. Ich werde auch die dritte Spanne ins Visier nehmen. Dann füge ich Breite, 100% Höhe, drei Pixel Hintergrund und unsere dunkelgraue Farbe hinzu. Dies werden die horizontalen Linien sein, wie Sie hier sehen können. Lassen Sie uns nun diese beiden Linien neu positionieren. Diesmal werde ich nur die erste Spanne ins Visier nehmen. Und füge die obere Null hinzu, linke Null ebenfalls. Jetzt können Sie sehen, dass die erste Zeile oben über dem Link positioniert ist . Animieren wir es nun von links nach rechts. der Maus darüber fahre, gehe ich zurück und füge Transformationsskala x Null Wenn ich dann mit der Maus darüber fahre, wähle ich den ersten Fügen Sie erneut die Transformationsskala x eins Auch hier werde ich einen Übergang von 0,2 Sekunden hinzufügen. Und jetzt können Sie sehen, dass die oberste Zeile jetzt ausgeblendet ist, und wenn Sie den Mauszeiger über den Link bewegen, wird sie vergrößert Aber wir wollen, dass es von links nach rechts hochskaliert wird. Wir können das tun, indem wir hierher zurückkehren und Transformationsursprung links hinzufügen. In Ordnung, lassen Sie uns dasselbe für das Endergebnis tun. Ich werde diese beiden Codeblöcke kopieren, einfügen und den dritten Bereich auswählen. Um es dann unten zu positionieren, gehe ich hierher und wechsle von oben nach unten. Ich werde auch den Ursprung der Transformation nach rechts ändern, weil wir wollen, dass sie von rechts nach links skaliert . Wir werden auch eine Übergangsverzögerung von 0,4 Sekunden hinzufügen. Jetzt können Sie sehen, dass die Zeile unten nach der oberen Zeile von rechts nach links vergrößert wird . Ordnung, jetzt erstellen wir die beiden Linien an den beiden Seiten. Ich gehe hier hoch und kopiere das Ziel, die zweite und vierte. Dann ändere ich die Breite auf drei Pixel. Und ändere die Höhe auf 100% Jetzt kannst du sehen, dass wir die beiden Linien hier haben. Lassen Sie uns diese beiden Linien neu positionieren. Ich werde hierher zurückkehren und diese beiden Codeblöcke kopieren. Fügen Sie sie ein und wählen Sie den zweiten Bereich aus. Dann wechsle ich hier von links nach rechts und transformiere den Ursprung nach oben. Dann ändere hier die Skala X in die Skala Y. Ich werde auch den zweiten Bereich auswählen und die Skala x auf die Skala Y ändern . Außerdem werde ich einen Wert für die Übergangsverzögerung von 0,2 Sekunden hinzufügen . Diese Linie skaliert zwischen der ersten Zeile und der dritten Zeile, wie Sie hier sehen können. Lassen Sie uns schnell die vierte Zeile erstellen. Ich werde den Code kopieren, einfügen und die vierte Zeile hier auswählen. Dann wechsle ich hier von rechts nach links und transformiere den Ursprung nach unten. Ich werde hierher gehen und die Übergangsverzögerung auf 0,6 Sekunden ändern . Jetzt können Sie sehen, wenn ich mit der Maus über den Link fahre, dass die vier Linien nacheinander zusammenkommen, wodurch dieser nette Effekt Lassen Sie uns nun den dunkelgrauen Hintergrund erstellen. Ich werde das mit dem Before-Pseudoelement des Anchor-Tags erstellen dem Before-Pseudoelement des Anchor-Tags Ich werde das auswählen und Inhalt hinzufügen. Leere Zeichenketten, absolute Position, obere Null, linke Null, dann Breite 100% Höhe ebenfalls 100%. Dann diese dunkelgraue Farbe. Jetzt können Sie sehen, dass wir diesen dunkelgrauen Hintergrund haben , der das Ankerschild verdeckt. In Ordnung, lasst uns am Schwebeeffekt arbeiten. Ich gehe zurück und füge Transform Scale Zero hinzu. Dann ein negativer Index. Wenn ich dann mit der Maus über den Link fahre, wähle ich das Pseudoelement vor und füge die erste Transformationsskala Dann Übergang 0,5 Sekunden. Schließlich wird der Übergang um 0,8 Sekunden verzögert , sodass der Hintergrund nach der Animation mit vier Zeilen erscheint. Wenn ich jetzt zurückgehe und den Mauszeiger über den Link bewege, können Sie sehen, dass der dunkelgraue Hintergrund von der Mitte nach oben skaliert , bis er den Link verdeckt Aber wir möchten, dass er von der oberen linken Ecke aus nach oben skaliert wird, nicht von der Mitte Ich gehe zurück und füge oben links den Transformationsursprung Sie können einfach so sehen, dass der Hintergrund von der oberen linken Ecke aus nach oben skaliert wird. Lassen Sie uns auch schnell die Link-Textfarbe auf Weiß ändern. Ich wähle den Link aus , wenn ich mit der Maus darüber fahre, und füge die Farbe Weiß Übergang 0,2 Sekunden, dann Übergangsverzögerung 0,8 Sekunden. Einfach so wird der Text weiß. In Ordnung, jetzt fügen wir das Stiftsymbol zu unserem Link hinzu. Wir werden das mit der Font-Awesome-Bibliothek machen. Ich werde nach Font Awesome D suchen. Dann klicke ich hier. Dann kopiere ich das Link-Tag. Gehe zurück zu meinem HTML-Code und füge ihn hier in meinen HTML-Code ein. Um dann den Code für das Stiftsymbol zu erhalten, gehe ich zurück und klicke auf diesen Link. Um zur Bibliothek der Symbole zu gelangen, wähle ich die Symbole aus und suche nach einem Stift, klicke auf dieses erste Symbol und kopiere den Unicode-Code. Dann gehe ich zurück zu meinem CSS, wähle das After-Pseudoelement des Anker-Tags aus und füge Inhalt hinzu Dann füge ich den Unicode des Stifts ein und füge dann die Schriftfamilie Schrift genial. Auf diese Weise können Sie ein fantastisches Schriftsymbol in Pseudoelemente einfügen ein fantastisches Schriftsymbol in Pseudoelemente Dann füge ich die Position absolut oben Null hinzu, Farbe links Null, diese dunkelgraue Farbe Jetzt können Sie sehen, dass wir hier dieses Stiftsymbol haben, aber wir möchten es ein wenig nach oben verschieben. Ich gehe zurück und ändere den oberen Wert auf negative 22 Pixel. Ordnung, lassen Sie uns jetzt die Animation für diesen Stift erstellen. Ich werde eine neue Animation erstellen, sie benennen und darin zeichnen. Bei 0% der Animationsdauer füge ich zu den negativen 22 verbleibenden Pixeln hinzu, 100%. Dadurch beginnt der Stift in der oberen linken Ecke des Links, dann kopiere ich ihn. Füge es fünfmal ein. Bei 20% der Animationsdauer lasse ich den oberen Teil unverändert und wechsle dann nach links zu 100%. Der Stift bewegt sich in die obere rechte Ecke. Bei 40% der Animationsdauer soll sich der Stift dann in der unteren rechten Ecke befinden. Ich ändere den oberen Wert auf 100% -22 Pixel. Ich ändere den Wert links auf 100%. Bei 60% soll er sich in der unteren linken Ecke befinden. Ich ändere den Wert von oben, um 100% -22 Pixel Ich lasse es links stehen, da es Null ist. Dann wollen wir, dass es bei 80% wieder an seine ursprüngliche Position zurückkehrt. In der oberen linken Ecke lasse ich es so, wie es ist. Schließlich möchten wir, dass es sich bei 100% in der unteren rechten Ecke befindet. Wir ändern oben auf 100% -22 Pixel und links auf 100%. Dann gehe ich hier nach oben und wenn ich mit der Maus über das Anker-Tag fahre, wähle ich das Pseudoelement danach aus, nämlich den Stift Ich füge eine Animation hinzu und zeichne 1 Sekunde linear vorwärts weil wir wollen, dass das nur einmal passiert Wenn ich jetzt den Mauszeiger über den Link halte, können Sie sehen, wie sich der Stift um die Ecken des Links bewegt und sich dann zusammen mit dem grauen Hintergrund durch die untere rechte Ecke bewegt, was uns unseren schönen Effekt verleiht 139. Kreatives Hintergrundfarbmenü Hover-Effekt: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erzeugen diesen schönen Menü-Hover-Effekt Sie können sehen, dass wir dieses vertikale Menü haben. Wenn wir den Mauszeiger über einen Link bewegen, werden die anderen Links halbtransparent Außerdem wird der Text des Links von beiden Seiten zusammengefügt und erscheint im Hintergrund Und schließlich ändert sich die Hintergrundfarbe für jeden Link. Das ist ein wirklich cooler Effekt. Lass uns sehen, wie wir das machen können. Ich beginne hier in meinem HTML-Code, indem ich eine URL hinzufüge, dann füge ich ein L I hinzu. Darin füge ich einen Link hinzu und füge Text hinzu. Ich werde Home in den Linktext einfügen. Dann kopiere ich das LI, füge es viermal ein und füge Informationen zu Services, Team und Kontakt hinzu. Dann gehe ich zu meinem CSS und den Hauptteil aus und füge Display, Flex, Justify Content Center, Align items, Center Height, 100 VH und schließlich Overflow Ich ziele auf die Position U L zum Hinzufügen relativ. Darunter werde ich auf die Listenelemente abzielen, den Listenstil hinzufügen, keinen Text, eine Linienmitte Dann werde ich auf den Link zielen und Farbe hinzufügen. Diese dunkelgraue Textdekoration, keine Schriftgröße, drei EMS-Padding, fünf Pixel von oben und unten und 20 Pixel von links und rechts Zeigen Sie dann die Inline-Flex-Schriftstärke 700 an, Übergang 0,5 Sekunden. Wenn wir dann mit der Maus über einen Link fahren, möchten wir, dass die anderen Links einen transparenten Hintergrund haben Ich gehe hierher und sage, wenn ich mit der Maus über die URL fahre, werde ich das Anker-Tag auswählen und diese transparente Farbe einfärben Wenn Sie jetzt mit der Maus über die URL fahren, haben alle Links diese transparente Farbe Jetzt möchten wir, dass der Link, über den wir den Mauszeiger bewegen, eine schwarze Farbe und einen weißen Hintergrund Ich gehe zurück und ziele auf die UL, dann auf L I, wenn ich mit der Maus über den Link fahre Ich füge die Farbe Schwarz und dann den Hintergrund Wenn ich jetzt mit der Maus über einen Link fahre, haben alle anderen Links einen halbtransparenten Hintergrund, mit Ausnahme des Links, über dem wir den Mauszeiger Okay, fangen wir an, den großen Text zu erstellen , der im Hintergrund erscheint Wir werden das mit dem Before-Pseudoelement tun. Ich werde das Before-Pseudoelement des Anker-Tags auswählen und Inhalt hinzufügen Nehmen wir an, ich bewege den Mauszeiger, dann füge ich die Position hinzu absolut oben links von 50% , dann transformiere Übersetze negative 50% und negative 50% und färbe dann rot Display, Flex, Ausrichtung des Inhaltszentrums, Mitte der Einzelposten, dann Schriftgröße fünf, EMS, dann Z-Index negativ , sodass es unter oder hinter den Menülinks erscheint . Ich werde auch die Schriftstärke hinzufügen. 900 und schließlich Text in Großbuchstaben umwandeln. Jetzt können Sie sehen, dass wir dieses große rote Wort im Hintergrund hatten . Jetzt gehen wir zurück und machen weiter. Ich gehe hierher und ändere die Farbe auf diese halbtransparente graue Farbe. Damit der große Text zusammenkommt und die gewünschte Wirkung erzielt, müssen wir die Buchstaben trennen. Lass uns das machen. Ich werde einen Buchstabenabstand hinzufügen, 500 Pixel. Jetzt können Sie sehen, dass die Buchstaben getrennt sind. Ordnung, ich werde auch hier die Deckkraft Null hinzufügen und dann den Buchstabenabstand 0,5 Sekunden darunter ändern. Wenn wir den Mauszeiger über den Link bewegen, wählen wir das vorherige Pseudoelement aus und fügen den Inhaltsattribut hinzu , sodass wir den Datentext innerhalb des Links aufnehmen, über den wir Dann fügen wir Opazität hinzu, einen Buchstaben mit einem Abstand von nur zehn Pixeln, sodass die Und ich werde hierher gehen und das Hover-Wort aus der Inhaltseigenschaft entfernen das Hover-Wort aus der Inhaltseigenschaft Jetzt können Sie sehen, wenn ich mit der Maus über einen Link fahre. Wir haben diesen Effekt, bei dem der Text des Links im Hintergrund zusammenkommt Okay, lassen Sie uns auch eine Hintergrundfarbe für den Text im Hintergrund hinzufügen auch eine Hintergrundfarbe für den Text im Hintergrund Wir wollen für jeden Link eine andere Hintergrundfarbe. Wir werden jeden Link einzeln ansprechen. Ich werde den ersten Link anvisieren, indem ich sage L, ich bin Kind eins. Dann zielen wir auf das vordere Pseudoelement des Links in diesem ersten LI Darin werde ich den Hintergrund hinzufügen, diese schöne hellblaue Farbe Wenn Sie jetzt mit der Maus über den ersten Link fahren, können Sie sehen, dass wir diesen hellblauen Hintergrund haben , der zusammen mit dem Text angezeigt wird Aber wir möchten, dass es die volle Breite und Höhe des Körpers Ich gehe hier in den Hintergrund und füge Breite 100 V und Höhe 100 H Jetzt nimmt der Hintergrund die gesamte Breite und Höhe des Körpers ein. In Ordnung, machen wir dasselbe für die anderen Links. Ich werde das Video pausieren und das schnell machen. Wie Sie sehen können, habe ich gerade alle anderen Links ausgewählt und für jeden Link eine andere Hintergrundfarbe hinzugefügt . Wenn ich jetzt mit der Maus über einen Link fahre, können Sie sehen, dass verschiedene Hintergrundfarben angezeigt werden . Das ist richtig Genau den Effekt, den wir wollen. 140. Wolken-Regen-Tropfen-Animation: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir eine weitere nette Animation erstellen: Eine Wolke, die regnet Sie können sehen, dass sich diese Wolke zieht und Regentropfen von ihr fallen Das ist eine wirklich coole Animation. Mal sehen, wie wir es erstellen können. Ich werde hier in meinem HTML-Code beginnen, indem ich a hinzufüge ihm eine Containerklasse gebe. Dann werde ich darin ein weiteres Div mit der Cloud-Klasse darunter hinzufügen . Ich werde ein drittes Div mit einer Regenklasse hinzufügen. Darin werde ich eine Spanne hinzufügen. Wir werden die Regentropfen anhand dieser Spanne erzeugen, aber wir werden viele Spannweiten benötigen, um diese Tropfen zu erzeugen Ich werde das ganz schnell machen. Sie können sehen, dass ich hier viele Bereiche hinzugefügt habe. Ich habe 20 Spans für alle Drops hinzugefügt. Jetzt gehe ich zu meinem CSS, wähle den Hauptteil aus und füge Display, Flex, Justify Content Center, Align items, Center, Mindest Height, 100 VH Hintergrund, diese hellblaue Farbe Danach wähle ich den Container als Ziel aus und füge die relative Höhe der Position 400 Pixel mit 320 Pixeln Um die Linie am unteren Rand zu erstellen, füge ich den unteren Rand mit drei durchgehend weißen Pixeln hinzu. Okay, lassen Sie uns die Cloud erstellen. Jetzt werde ich das Div mit der Cloud-Klasse als Ziel markieren und die relative Höhe der Position, 100 Pixel und die Breite von 100% hinzufügen , um die gesamte Breite des Containers einzunehmen. Dann die oberen 50 Pixel und der Hintergrund weiß. Schließlich ein Randradius von 100 Pixeln, um einige Kurven an den Ecken zu haben. Jetzt haben wir diese Form und dies wird die Basis der Wolkenform sein. Okay, lass uns weitermachen. Ich gehe zurück und wähle das vorherige Pseudoelement des Cloud-Divs aus und füge Inhalt hinzu , leere Zeichenketten, Position, absolute Breite 110 Pixel Auch eine Höhe von 110 Pixeln. Dann Grenzradius 50% , sodass es ein Kreis wird. Dann füge ich vorerst einen roten Hintergrund hinzu. Jetzt können Sie sehen, dass wir diesen roten Hintergrund haben , der sich links neben dem Cloud-Div befindet. Ich werde hier negative 50 Pixel hinzufügen, um es in Richtung der oberen 40 Pixel zu verschieben und in Richtung der oberen 40 es ein wenig nach rechts zu verschieben. Jetzt können Sie sehen, dass es sich hier an diese neue Position verschoben hat. Und das wird der zweite Teil der Wolkenform sein. Lass uns am dritten Teil arbeiten. Wir werden es mit einem coolen kleinen Trick mithilfe der Box-Shadow-Eigenschaft erstellen . Ich werde hier Box-Schatten hinzufügen, 90 Pixel als horizontaler Offset, Null als vertikaler Offset weil wir nicht wollen, dass er sich vertikal bewegt. Dann Null als Unschärfewert, da wir nicht wollen, dass er verschwommen Und 30 Pixel als Streuwert. Dieser positive Streuwert erhöht die Größe des Schattens, sodass wir einen größeren Kreis haben. Dann werden wir vorerst eine blaue Farbe hinzufügen. Jetzt können Sie sehen, dass wir diesen großen blauen Kreis haben , der sich rechts vom ersten Kreis befindet, Sie es glauben oder nicht, aber die Wolkenform ist bereits fertig. Jetzt müssen wir nur noch die Farben dieser beiden Kreise auf Weiß ändern dieser beiden Kreise auf Weiß um die Wolkenform zu erhalten , die wir uns vorgenommen haben. Ich werde das schnell machen, jetzt können Sie sehen , dass die Wolkenform genau so aussieht, wie wir es wollen. Okay, lass uns an der Erstellung der Drops arbeiten. Ich wähle den Regen aus und füge Position, relative Anzeige, Flex, Justify, Inhaltszentrum und Z-Index hinzu. Danach wähle ich die Spannweiten innerhalb des Regenbogens aus und füge die Breite und die Höhe von zehn Pixeln Pixel-Hintergrund vorerst rot. Randradius 50% Rand, dann Rand Null von oben und unten und zwei Pixel von links und rechts. Jetzt können Sie sehen, dass wir diese kleinen roten Kreise haben , die die Tropfen der Wolke sein werden. Ordnung, lassen Sie uns die Animation erstellen , mit der diese Tropfen bewegt werden. Ich werde eine neue erstellen. Benennen Sie es, dann bei 0% der Animationsdauer füge ich bei 0% der Animationsdauer Transform Translate Y Null Scale Eins hinzu. Dann kopiere ich das und füge es zweimal ein. Dann ändere ich bei 70% die Übersetzungsfunktion auf 288 Pixel und lasse die Skala unverändert. Dann ändere ich bei 100% auch die Übersetzungsfunktion Y auf 288 Pixel die Skalierungsfunktion auf Null. Ich gehe hier hoch und sage Animation in 5 Sekunden, linear, unendlich und transformiere den Ursprung unten. Jetzt kannst du sehen, wie die Tropfen aus der Wolke fallen, den Boden erreichen und dann herunterklettern, bis sie verschwinden Weil wir die Skalierungsfunktion hier auf Null gesetzt haben. Aber jetzt wollen wir, dass die Tropfen zufällig fallen, einer nach dem anderen. Wir können das tun, indem wir die Animationsdauer für jeden Bereich ändern , aber es wird sehr lange dauern, jeden Bereich einzeln auszuwählen und die Animationsdauer nacheinander zu ändern . Wir können CSS-Variablen verwenden , um uns dabei zu helfen. Ich werde in meinem HTML-Code hierher zurückkehren und innerhalb des ersten Bereichs zwei Bindestriche hinzufügen, und so definieren wir eine Variable in CSS Dann der Variablenname, sagen wir Sekunden. Dann füge ich 11 als Anzahl von Sekunden für die erste Spanne hinzu. Ich werde dasselbe auch für alle anderen Zeitspannen tun und jedes Mal den Wert von Sekunden ändern Jetzt können Sie sehen, dass ich für alle Zeitspannen unterschiedliche Werte für die Sekunden hinzugefügt habe alle Zeitspannen unterschiedliche Werte für die Sekunden Was wir jetzt tun können, ist, zu unserem CSS zurückzukehren. Und in der Span-Auswahl füge ich die Berechnung der Animationsdauer von 15 Sekunden geteilt durch oder die von uns deklarierte Variable hinzu , also Was hier passieren wird, ist, dass für jeden Bereich die Animationsdauer anhand dieser Codezeile berechnet wird , 15 geteilt durch den Wert wir der Spanne in unserem HTML hinzugefügt haben Da wir unterschiedliche Werte hinzugefügt haben, erhalten wir für jede Animationsdauer unterschiedliche Werte. 141. Kreative, leuchtende Loader-Animation: Hallo zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen leuchtenden Loader-Effekt erzeugen diesen schönen leuchtenden Loader-Effekt Sie können sehen, dass wir diese leuchtenden Kreise haben , die leuchten und dann verblassen Dazu werden wir die Box-Shadow-Eigenschaft verwenden. Schauen wir uns das an und schauen wir uns an, wie wir das machen können. Ich beginne hier in meinem HTML-Code, indem ich einen Abschnitt hinzufüge, dann füge ich darin ein Div gebe ihm eine Loader-Klasse. Dann werde ich darin eine Spanne hinzufügen. Wir werden CSS-Variablen verwenden. Hier werde ich Stil hinzufügen, ich werde der Variablen einen Namen geben. Ich setze ihren Wert auf eins, und wir werden diesen Wert benötigen. Später in unseren CSS-Stilen werde ich dasselbe für alle anderen Bereiche tun. Sie können sehen, dass wir jetzt 20 Felder haben und das werden die kleinen Kreise oder Glühbirnen sein, die leuchten Ich habe auch verschiedene Werte für die Variable hinzugefügt. Diese Werte steigen in der letzten Spanne von eins auf 20. In Ordnung, jetzt gehe ich zu meinem CSS. Wählen Sie den Abschnitt aus und fügen Sie Display Flex, Justify Content Center, Align Items, Center in High, 100 VH, und dann den Hintergrund diese dunkelblaue Farbe Dann werde ich das Loader-Div als Ziel auswählen und relative Höhe der Position um 120 Pixel erhöhen Breite ebenfalls 120 Pixel. Darunter werde ich die Spans innerhalb des Loader-Divs anvisieren Spans innerhalb des Loader-Divs anvisieren Fügen Sie die Position absolut oben ebenfalls Null links hinzu, die Breite 100%, sodass die gesamte Breite des Laders und die Höhe ebenfalls 100% berücksichtigt Dann füge ich einen temporären blauen Hintergrund hinzu. Jetzt können Sie sehen, dass wir diesen blauen Hintergrund haben, der eine Breite und eine Höhe von 120 Pixeln hat . Das liegt daran, dass wir die Breite und Höhe auf 100% ihres Containers, des Loader-Divs, gesetzt Höhe auf 100% ihres Containers, des haben, der wiederum eine Breite und eine Höhe von 120 Pixeln hat . Dieser blaue Hintergrund ist eigentlich kein einzelner Hintergrund, sondern 20 Hintergründe, die sich gegenseitig verdecken oder denselben Bereich verdecken, und jeder von ihnen steht für einen Bereich, den wir in unserem HTML-Code hinzugefügt haben. Es macht momentan vielleicht keinen Sinn, aber wir werden gleich alles deutlich sehen. Um unseren Effekt zu erzielen, müssen wir jeden Bereich um einen anderen Grad drehen , sodass alle Bereiche erscheinen Da wir 20 Bereiche haben, können wir 360 Grad durch 20 teilen, und wir erhalten 18. Damit alle Bereiche angezeigt werden, müssen wir den ersten Bereich um 18 Grad drehen, dann den zweiten um 36 und den dritten um 54 Grad und so weiter und so fort Jedes Mal erhöhen wir den Rotationsgrad um 18. Lass uns das ganz schnell machen. Ich gehe hier hin und füge die Variable Transform Rotation 18 Grad mal V hinzu. Was hier passieren wird, ist, dass sie für jede Spanne um einen Grad gedreht wird , der dem 18-fachen des Werts der Variablen entspricht . Zum Beispiel wird die erste Spanne um einen Grad gedreht , der 18 mal eins entspricht, was 18 ist. Der fünfte Bereich wird um einen Wert gedreht , der 18 mal fünf entspricht, was 90 Grad entspricht, und so weiter und so fort. Aber du willst mich nicht einfach darüber reden hören. Mal sehen, was wir am Ende haben werden. Nett. Nun können Sie sehen, dass wir diese Form haben, bei der alle Bereiche sichtbar sind, da sie um einen berechneten Grad gedreht wurden , sodass sie alle angezeigt Lassen Sie uns die kleinen Kreise erstellen , die diesen Bereichen zugeordnet sind. Wir werden sie mit dem Pseudoelement before erstellen. Ich werde es hier auswählen und Inhalt hinzufügen. Leere Zeichenketten, Position absolut oben Null, linke Null mit 15 Pixeln. Höhe, ebenfalls 15 Pixel. Dann Randradius 50% und Hintergrund, diese hellblaue Farbe. Jetzt können Sie sehen, dass wir diese kleinen Kreise haben. Lassen Sie uns diesen blauen Hintergrund entfernen , weil wir ihn nicht mehr benötigen. Jetzt können Sie deutlich alle Kreise sehen , die den 20 Feldern zugeordnet sind. Okay, lass uns sie jetzt ganz schnell zum Leuchten bringen. Ich werde hierher gehen und Box Shadow hinzufügen. diesem Wert habe ich gerade den Unschärfewert für die Box-Shadow-Eigenschaft schrittweise erhöht für die Box-Shadow-Eigenschaft schrittweise Und das verleiht ihm einen glänzenden, leuchtenden Effekt, wie Sie ihn hier sehen Okay, lassen Sie uns jetzt die Animation erstellen , die wir auf diese Kreise anwenden werden Ich werde eine neue Animation erstellen und sie Animate nennen. Dann füge ich darin, und bei 0% der Animationsdauer, die erste Transformationsskala hinzu Dann füge ich bei 80% und 100% die Transformationsskala Null hinzu. Zu Beginn der Animationsdauer. Bei 0% haben die Kreise ihre volle Größe. Dann wird die Größe der Kreise von 0 auf 80% verkleinert, bis sie Null wird. Dann bleibt sie von 80 bis 100% bei Null. Okay, lass uns hier nach oben gehen und diese Animation hinzufügen. Ich werde eine Animation hinzufügen, 2 Sekunden linear, unendlich animieren. Jetzt können Sie sehen, wie die Kreise nach unten skalieren, bis sie verschwinden Und dann skalieren sie wieder geben uns diesen schönen, leuchtenden, glänzenden Effekt, der wie Glühbirnen aussieht Und das ist schon ein netter Effekt , den wir für unsere Projekte nutzen können Aber jetzt lass uns ein paar coole Sachen ausprobieren. Wir können die Eigenschaft Animation Delay verwenden, um zu manipulieren, wann die Animation des Kreises beginnt, und das kann uns einige coole Effekte bescheren. Lass es uns versuchen. Ich werde hier eine Animationsverzögerung von 0,1 Sekunden oder variabel hinzufügen . Jeder Bereich hat nach Variablenwert eine andere Animationsverzögerung . Lass es uns versuchen. Sie können sehen, dass wir diesen schönen coolen Effekt haben , der aussieht, als würden sich die Kreise umeinander drehen. Versuche es mit einem anderen Wert, ich ändere 0,1 Sekunden auf 0,2 Sekunden. Jetzt können Sie sehen, dass wir einen weiteren coolen Effekt haben, der den Kreis in zwei Hälften teilt , die sich nacheinander drehen Hier ist ein Vorschlag. Wie wäre es wenn Sie ein wenig mit den Werten für die Animationsverzögerung und die Animationsdauer herumspielen den Werten für die Animationsverzögerung und die Animationsdauer herumspielen und sehen, welche coolen Effekte Sie erzielen können. 142. Animation des Cursormenüs: Hallo alle zusammen. Willkommen zu einer weiteren neuen Lektion im Kurs. In dieser Lektion werden wir einen weiteren neuen Menü-Hover-Effekt erstellen Sie können sehen, dass wir dieses vertikale Menü haben , dessen Links einen linken Rand haben Und wenn wir den Mauszeiger über den linken Rand bewegen, können Sie sehen, wie er sich auf die rechte Seite des Links bewegt und der Link-Strich mit der Farbe gefüllt wird, was uns diesen coolen Effekt verleiht Ich beginne hier in meinem HTML-Code, indem ich eine URL, dann ein L, ein I und darin ein Anker-Tag Dann füge ich Datentext für den ersten Link hinzu und füge ihn innerhalb des Links hinzu. Dann kopiere ich das und füge es viermal ein. Ich werde den Text für jeden Link ändern. Jetzt können Sie sehen, dass wir über Dienstleistungen, Team und Kontakt verfügen. Okay, jetzt gehen wir zu unserem CSS und zielen auf den Körper ab. Ich werde Display Flex, Justify, Content Center, Align Items, Center, Min., Height, 100 VH Hintergrund in dieser Farbe hinzufügen Align Items, Center, Min., Height, 100 VH Hintergrund in dieser Farbe Dann nehme ich das U-L als Ziel und füge die Position relativ zum Display Flex, die Spalte mit der Flexrichtung und den Abstand von 30 Pixeln Dann nehme ich das L I als Ziel und füge Stil N für die positionsrelative Liste hinzu. Danach wähle ich den Link aus und füge positionsrelative Schriftgröße für EMS, Textdekoration und ohne Buchstabenabstand hinzu. Zwei Pixel, Zeilenhöhe, ein EM-Texttransformator in Großbuchstaben. Um den Text zu einem Umriss zu machen, füge ich transparente Farben hinzu. Der Textstrich, ein Pixel, diese graue Farbe. Jetzt können Sie sehen, dass die Linkfarbe transparent ist und wir einen grauen Umriss um den Text haben. Okay, lassen Sie uns weitermachen. Ich wähle das Pseudoelement vor dem Link aus und füge unseren Datentext als Inhaltsattribut Jetzt können Sie sehen, dass wir den Datentext hier haben. Neben jedem Link gehe ich zurück und füge Position Absolute hinzu. Nachdem wir die Position auf absolut gesetzt haben, befindet sich der Datentext direkt über dem Textlink. Es sieht so aus, als ob sie eine Sache sind, aber lassen Sie uns Farbe hinzufügen, diese blaue Farbe. Jetzt können Sie sehen, dass der Datentext diese blaue Farbe hat und sich der ursprüngliche Linktext dass sich der ursprüngliche Linktext als Gliederung darunter oder darunter befindet . Ich gehe auch zurück und füge den rechten Rand hinzu, acht Pixel durchgehend, unsere blaue Farbe. Ich werde auch einen Textstrich hinzufügen, ein Pixel, unsere blaue Farbe. Jetzt können Sie sehen, dass wir diesen blauen Rand auf der rechten Seite haben. Und der Text hat auch einen blauen statt grauen Strich. Okay, jetzt wollen wir das vorherige Pseudoelement, diesen blauen Text, ausblenden und ihn nur anzeigen lassen, wenn wir den Mauszeiger über den Ich werde hier die Breite 0% hinzufügen und dann Overflow Hidden hinzufügen. Schließlich, Übergang 1 Sekunde. Jetzt können Sie sehen, dass das Pseudoelement „vor “ eine Breite von Null hat und dass es ausgeblendet ist und der ursprüngliche Linktextumriss sichtbar ist. Ich gehe zurück zu meinem CSS und sage, wenn ich mit der Maus über den Link fahre, wähle ich das vorherige Pseudoelement aus und füge die Breite um 100% hinzu. Wenn ich jetzt mit der Maus über einen Link fahre, können Sie sehen, dass die Breite des Pseudoelements vor dem Pseudoelement wieder Ich gehe zurück zu meinem CSS und sage, wenn ich mit der Maus über den Link fahre, wähle ich das vorherige Pseudoelement aus und füge die Breite um 100% hinzu. Wenn ich jetzt mit der Maus über einen Link fahre, können Sie sehen, dass die Breite des Pseudoelements vor dem und dass es ausgeblendet ist und der ursprüngliche Linktextumriss sichtbar ist. Ich gehe zurück zu meinem CSS und sage, wenn ich mit der Maus über den Link fahre, wähle ich das vorherige Pseudoelement aus und füge die Breite um 100% hinzu. Wenn ich jetzt mit der Maus über einen Link fahre, können Sie sehen, dass die Breite des Pseudoelements vor dem Pseudoelement wieder zunimmt um die Gliederung des Links zu verdecken. Während es größer wird, bewegt sich auch der Rand auf der rechten Seite mit, was uns diesen schönen Effekt verleiht. Aber Sie können sehen, dass der Rand sehr nahe am Link ist. Es wäre schöner, wenn zwischen dem Link und der Grenze etwas Platz können wir tun, indem wir sowohl um den Linktext als auch um den Datentext etwas Platz um den Linktext als auch um den Datentext Ich gehe zu meinem HTML-Code und in den Datentext vor dem Linktext ein geschütztes Leerzeichen ein, füge in den Datentext vor dem Linktext ein geschütztes Leerzeichen ein, das ein Sonderzeichen in HTML ist ein Sonderzeichen in HTML , das Leerzeichen im HTML-Text hinzufügt. Ich werde einen weiteren vor dem Linktext und einen weiteren danach hinzufügen . Jetzt können Sie sehen, dass sich der Rand ein wenig nach links verschoben hat, und wenn Sie den Mauszeiger über den Link bewegen, ist rechts auch etwas Platz Und es lässt es viel besser aussehen. Okay, ich mache das ganz schnell für alle anderen Links. Wenn ich jetzt mit der Maus über einen Link fahre, können Sie sehen, dass sich der Rand von rechts nach links bewegt Zusammen mit dem Wachstum des Pseudo-Elements vor uns, uns unseren wirklich coolen Effekt verleiht 143. CSS-Ladeanimation für kreative Punkte: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Ladeeffekt erzeugen. Sie können sehen, dass wir diesen Effekt haben, wenn wir acht Kreise Vier davon sind fest, und die anderen vier drehen sich um sie herum, was uns diesen coolen Effekt verleiht. Ich fange hier in meinem HTML-Code an, indem ich ein Div ihm eine Box-Klasse gebe. Dann werde ich darin ein weiteres Div mit einer Loader-Klasse hinzufügen . Dann füge ich darin eine Spanne hinzu und füge Stil hinzu. Dann werden wir hier CSS-Variablen verwenden. Ich werde I als Variablennamen hinzufügen und ihm den Wert eins geben. Dann kopiere ich diese Spanne und füge weitere sieben Felder , sodass wir insgesamt acht Bereiche haben, wie Sie hier sehen Jedes Mal, wenn der Wert der Variablen um eins steigt, 1—8 Dann füge ich unter diesem Lader eine H-Drei hinzu und sage Laden Dann gehe ich zu meinem CSS und wähle den Hauptteil, A Display Flex, Justify, Content Center, Align Items Center, dann in Höhe 100 VH und schließlich Overflow und schließlich Overflow Dann werde ich den Lader ins Visier nehmen. Position hinzufügen: relative Breite 20 Pixel, Höhe 20 Pixel. Dann ein temporärer roter Hintergrund. Jetzt können Sie sehen, dass wir diesen roten Hintergrund haben , der sich in der Mitte des Körpers befindet. In Ordnung, jetzt stylen wir die H Two. Ich wähle es aus und füge die Position hinzu absolut oben 50% links 50% transformiere es um negative 50% und negative 50%, um es vertikal und horizontal zu zentrieren. Dann füge ich die Schriftgröße 18 Pixel färbe diese marineblaue Farbe. Jetzt können Sie sehen, dass sich die H-Drei Mitte des Ladertauchgangs befindet. Okay, lass uns weitermachen. Ich werde die acht Felder im Lader ins Visier nehmen. Position hinzufügen, absolut oben Null links Null, Breite 100%, Höhe ebenfalls 100% Dann füge ich einen temporären blauen Hintergrund hinzu. Jetzt können Sie sehen, dass dieser blaue Hintergrund über dem roten liegt. Tatsächlich handelt es sich dabei um mehrere Hintergründe auf der Rückseite. Nicht nur einer, sondern sie sitzen übereinander. Aber wir wollen sie alle um ein bestimmtes Maß drehen , um sie alle sichtbar zu machen. Ich werde Transform Rotation hinzufügen. Da wir acht Bereiche haben, drehe ich den ersten um 45 Grad, dann den zweiten um 90 Grad, dann den dritten um 135 Grad, und so weiter, der letzte wird um genau 360 Grad gedreht, da 360/8 In Ordnung, machen wir das. Ich füge hier 45 Grad mal V hinzu. Ich füge unsere Variable, die diese Werte enthält, in unseren HTML-Code ein. Die erste Spanne wird um eins mal 45 gedreht, was 45 ist. Der zweite Bereich wird zweimal um 45 gedreht , also um 90, usw. für alle anderen Bereiche, bis der letzte um 360 Grad gedreht ist Wie Sie sehen können. Jetzt haben wir diesen Stern mit acht Köpfen, aber machen wir weiter. Wir werden die acht Kreise als Pseudoelement „Vorher“ hinzufügen. Für diese acht Felder wähle ich das vorherige Pseudoelement der Bereiche aus und füge den Inhalt hinzu (leere Zeichenketten ), wobei die Inhalt hinzu (leere Zeichenketten Null links, Null Breite, 20 Pixel, Höhe 20 Pixel, Randradius 50% Dann endlich die Hintergrundfarbe, diese blaue Farbe Dann werde ich diese blaue Hintergrundfarbe und diese rote Hintergrundfarbe entfernen . Jetzt können Sie sehen, dass wir diese acht blauen Punkte haben , die den Lader perfekt umgeben. Ordnung, jetzt wollen wir nur vier der acht Punkte auswählen nur vier der acht Punkte , um ihre Farbe zu ändern und sie zu animieren. Wir wollen den zweiten, den vierten, den sechsten und den achten. Ich werde hierher gehen und das siebte Kind hinzufügen. Dadurch werden nur die Elemente ausgewählt , die eine gerade Zahl haben, die zweite, die vierte usw. Dann füge ich eine Hintergrundfarbe hinzu, diese hellblaue Farbe. Jetzt können Sie sehen, dass diese Elemente eine hellblaue Hintergrundfarbe haben. In Ordnung, lassen Sie uns eine neue Animation erstellen. Nennen Sie es Kreis darin. Bei 0,25% füge ich Transformation hinzu , drehe um null Grad und skaliere eins Dann füge ich bei 50% Transformation Drehung um 90 Grad und Skalierung 1,3 hinzu, sodass es beim Drehen etwas größer wird Unter dem Wert von 75% und 100% füge ich dann Rotation 180 Grad hinzu und skaliere eins, um es wieder auf seine ursprüngliche Größe zu bringen. Dann gehe ich hier hoch und füge Animationskreis hinzu, der 1 Sekunde linear unendlich ist. Jetzt können Sie sehen, dass die Kreise skalieren und rotieren. Aber da sie sich um ihren Mittelpunkt und ihre Kreise drehen , sehen sie nicht wirklich so aus, als würden sie sich drehen. Was wir tun können, damit sie sich um die anderen Kreise drehen , ist, dass wir hier hingehen und dem Transformationsursprung 60 Pixel hinzufügen. Jetzt können Sie sehen, wie sich die Kreise um die anderen bewegen, was uns unseren wirklich coolen Effekt verleiht. 144. Hover-Effekt für das Textverblassendes Menü: Hallo alle zusammen. Willkommen zu dieser neuen Lektion im Kurs. In dieser Lektion werden wir diesen schönen Menü-Hover-Effekt erzeugen diesen schönen Menü-Hover-Effekt Das können Sie sehen, wenn wir den Mauszeiger über einen Link im Menü bewegen. Dieser Effekt tritt ein, wenn die Farbe des Links halbtransparent wird und dieser leuchtend grüne kleine Text den Linktext verdeckt Es ist ein ziemlich einfacher , aber cooler Effekt. Mal sehen, wie wir es erstellen können. Ich werde hier in meinem HTML-Code beginnen, indem einen Abschnitt hinzufüge. Ich füge eine UL, dann ein L I und ein Anker-Tag in dieses L I ein. Dann füge ich ein Datentextattribut hinzu und füge Home hinzu. Dann füge ich home in das Anchor-Tag ein. Also werden wir dieses Datentextattribut verwenden, um es abzurufen und es als überlagernden Text zu verwenden Sie können sehen, dass ich diese Links gerade kopiert und eingefügt und den Text gerade geändert habe In Ordnung, gehen wir zu unserem CSS und wählen den Abschnitt aus. Ich füge Position, relative Breite, 100% Höhe, 100-VH-Anzeige, Flex, Ausrichtung des Inhalts, Mitte einer Linie, Elemente, Mitte, Überlauf, versteckten Hintergrund und diese dunkelgraue Dann werde ich das LI innerhalb der UL als Ziel festlegen und den Listenstil „Keine“ hinzufügen Ich werde das Anker-Tag auch auf die Position ausrichten : relative Anzeige, Block, Textdekoration nicht Text in der Mitte ausrichten, Text in Großbuchstaben umwandeln , Schriftgröße vier, EM-Farbe weiß, Schriftstärke 700, Übergang 0,5 Sekunden. Jetzt können Sie sehen, dass die Links viel besser aussehen. Okay, lass uns weitermachen. Wenn Sie den Mauszeiger über den Link bewegen, soll die Linkfarbe eine halbtransparente Farbe sein Ich sage, wenn ich mit der Maus über das Anker-Tag fahre, füge ich Farbe hinzu, diese Farbe ist einfach weiß, aber mit einer Deckkraft von 0,1 Ordnung, wenn Sie jetzt mit der Maus über den Link fahren, können Sie sehen, wie sich seine Farbe in die gewünschte halbtransparente Farbe ändert die gewünschte halbtransparente Farbe Okay, lass uns jetzt an dem kleinen Text arbeiten. Wir werden das Before-Pseudoelement des Anchor-Tags verwenden. Um das zu tun, werde ich es auswählen. Darin füge ich das Inhaltsattribut und den Datentext hinzu, um den Text im Datentextattribut für jeden Link abzurufen . Dann füge ich die Position hinzu absolut oben, 50% links und färbe dann diese wunderschöne grüne Farbe. Jetzt können Sie sehen, dass der grüne Text die Links verdeckt. Ordnung, gehen wir zurück und fügen die Schriftgröße 0,35 M hinzu, um die Schriftgröße zu verringern. Genau wie in unserem Beispiel, Buchstabenabstand , 40 Pixel, um die Buchstaben voneinander zu trennen Jetzt können Sie sehen, dass die Buchstaben kleiner und voneinander getrennt sind . Lass uns noch ein bisschen weitermachen. Wir möchten den Links einen kleinen Leuchteffekt verleihen. Ich werde Textschatten mit 0010 Pixeln als unscharfen Wert hinzufügen. Dann unsere grüne Farbe, ich werde diesen Wert zweimal kopieren und einfügen und den Unschärfewert jedes Mal erhöhen Dann füge ich die Schriftstärke 500 hinzu. Jetzt können Sie sehen, dass der Text aufgrund des Boxschattens, den wir hinzugefügt haben, leuchtet Ordnung, ich gehe zurück und füge einen Übergang von 0,5 Sekunden und eine Deckkraft von Null hinzu, um den Text auszublenden Wenn ich dann mit der Maus über das LI fahre, wähle ich das Pseudoelement vor und füge Deckkraft eins und einen Buchstabenabstand Wir animieren die Eigenschaft „ Buchstabenabstand“ von 40 Pixeln auf sechs Pixel, um unseren Effekt zu erzielen Wenn Sie mit der Maus über einen Link fahren, wird der kleine Text einfach zusammengefügt und der Linktext wird dann ausgeblendet Wir möchten jedoch eine gewisse Übergangsverzögerung hinzufügen , sodass die Links zuerst ausgeblendet und erst danach der grüne Text erscheint Wenn wir dann den Mauszeiger wegbewegen, verschwindet zuerst der grüne Text, dann wird der ursprüngliche Link wieder weiß Wir können das ganz einfach tun, indem wir hier in das Anchor-Tag gehen und eine Übergangsverzögerung von 0,5 Sekunden hinzufügen Übergangsverzögerung von 0,5 Sekunden Wenn wir dann mit der Maus darüber fahren, fügen wir die Übergangsverzögerung Null das tun, ändert sich der Wert sofort, wenn Sie mit der Maus über den Link fahren Wenn Sie den Mauszeiger jedoch wegbewegen, dauert es 0,5 Sekunden Dann machen wir genau das Gegenteil zum grünen Text. Ich gehe hierher, wenn ich mit der Maus darüber fahre, und füge Übergangsverzögerung von 0,5 Sekunden Wenn Sie den Mauszeiger bewegen, tritt die Verzögerung auf, aber wenn Sie den Mauszeiger wegbewegen, tritt sie nicht Sie können sehen, dass der Link animiert wird, dann der grüne Text, wenn Sie den Mauszeiger wegbewegen Der grüne Text animiert dann den Link, sodass wir genau