Moderne CSS-Clip-Path-Animationen

1. Einführung: Hallo zusammen und willkommen zu diesem spannenden Kurs über CSS-Kip-Path-Animation Mein Name ist John Shortca und in diesem Kurs werden wir eine der mächtigsten und kreativsten Funktionen des modernen CSS untersuchen mächtigsten und kreativsten Funktionen des modernen Kick-Pfad. Während wir lernen, wie man einfaches Element in ein atemberaubendes animiertes Design verwandelt. Wenn Sie jemals kreative Bildenthüllungen gesehen haben, einzigartige Hover-Effekte, dynamische Schnitttransformationen, animiertes Form-Morphing moderne Portfolio-Animationen, und sich darüber wundern, wie sie übertroffen werden Dann sind Sie hier richtig. Wir werden es vom Grundstück Lipath aus starten. Wie Unterschiede funktionieren wie Kreislippenpolygone. Außerdem werden Sie lernen, wie Koordinatenpunkte Formen steuern Außerdem werden wir lernen, wie man benutzerdefinierte Polygone visualisiert und gestaltet Im Grunde werden wir in diesem Kurs das Konzept durch Handeln erlernen Lass uns anfangen. 2. Zeichnen unterschiedlicher geometrischer Formen mit Clippath: In diesem Tutorial beginnen wir also mit der Clip-Path-Animation, wie wir verschiedene Formen erstellen und wie wir sie animieren können und wie wir Lassen Sie uns, ohne Ihre Zeit zu verschwenden, mit dem Praktischen beginnen und sehen, was wir erstellen werden Wie Sie nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit Live-Servererweiterung und erstelle bereits eine Schätzung des Dokumentnamens, Indexpunkt-HTML Damit erstelle ich eine Style-Dot-CSS-Datei, und hier führe ich einige grundlegende Formatierungen z. B. in unserem Hauptteil, setze ich Zusammenführung, Polsterung, diese Deflex-Ausrichtung von Inhalten, Ausrichten von Elementen usw. Dann legen wir die Bildhöhe und -breite 400 Pixel mal 400 Pixel fest und wir haben nur ein Bild in unserem Body-Tag und wir haben nur ein Bild in Jetzt füge ich diesem G einen kleinen Rahmen hinzu. Im Moment möchte ich einen durchgehenden roten Rahmen, einen Subtyp-Rahmen und einen durchgehenden Rahmen, zwei Pixel, zwei Pixel, einen durchgehenden und einen weißen Rand zuweisen Subtyp-Rahmen und einen durchgehenden Rahmen, zwei Pixel, zwei Pixel, einen durchgehenden und einen weißen Rand Um zu verstehen, was ich hierher bringen werde. Ich werde diese fünf sagen. Lassen Sie uns die Grenze um ein bisschen erhöhen. Ich mache fünf Pixel draus. Jetzt werden wir die CSS-Eigenschaft Clip-Pfad verstehen und erfahren, wie wir diese Eigenschaft verwenden können , um verschiedene geometrische Formen wie Dreiecke, Polygone, Sterne oder jede Art von Form zu erstellen wie Dreiecke, Polygone, Sterne oder jede Art von Form , Sterne oder jede Art von Bevor wir jedoch verstehen müssen, was eine Clip-Path-Eigenschaft ist, ermöglicht uns diese Eigenschaft, einen bestimmten Teil eines Bildes anzuzeigen bestimmten Teil eines Es zeigt genau die Fläche an, die wir angeben, und es wird den Rest des Bildes ausblenden Andernfalls der Rest des Objekts. Wir beginnen das Beispiel mit einem Dreieck. Wir werden eine Dreiecksform erstellen. Wir werden von diesem Punkt aus beginnen, dann werden wir eine Linie von diesem Punkt zu diesem Punkt ziehen , dann zu diesem Punkt, und wieder müssen wir zum ersten Punkt zurückkehren. Es wird eine Dreiecksform entstehen. Hier verwende ich die Eigenschaft clip-path, clip, aber hier in unserem Wert verwende ich Polygonform, eine Art Polygon Jetzt müssen wir die Position definieren, von der aus wir beginnen werden , und von der Stelle aus, an der wir ausrüsten werden Aus den XXs werde ich also 50%, 50% dieses Bildes machen 50% dieses Bildes Ich meine, an diesem Punkt und ab YXS werde ich Null nehmen, es wird von diesem Ort aus beginnen Hier ab XXS werde ich 50% überschreiten und ab XS werde ich 0% überschreiten Das ist für den ersten Wert. Und für den nächsten Wert werde ich an dieser Position einen weiteren Punkt ziehen. Dafür werde ich ab XXs 0% überschreiten. Ich bewege mich um 0% Aber von den YxS von dieser Position zu dieser Position werde ich mich um 100% bewegen Leertaste 100%. Danach werde ich an Stelle noch einen Punkt ziehen. Also werde ich auch von den XXS und YXS 100 zu nehmen, 100 zu 100% Und ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier das Ergebnis sehen. Wir brauchen diesen Rand vorerst nicht, also werde ich diese Zeile auskommentieren und erneut speichern. Jetzt können Sie das perfekte Ergebnis sehen. Wir erstellen nur die Grenze, um die Koordinaten zu verstehen. Mit dem Polygonwerkzeug haben wir hier eine rechteckige Polygonform gezeichnet und der Rest des Teils ist versteckt Es wird nur angezeigt, was sich innerhalb der Polygonform befindet. Es ist wirklich einfach, eine rechteckige Form zu zeichnen, aber die Verwendung von Code zum Zeichnen einer Form ist sehr schwierig Dafür müssen wir ein Tool verwenden , ansonsten eine Website. Hier kannst du den Code der Formen bekommen. Ich werde eine Website namens Clipping vorstellen und sie wird mehrere Polygonformen wie Dreieck, Webel, Stern, Kreuz, Rahmen usw. anbieten Webel, Stern, Kreuz, Rahmen usw. Im Moment werde ich dieses Kreuzzeichen verwenden, also werde ich darauf klicken Es wird diesen Polygoncode bereitstellen. Es ist sehr schwierig, durch Eingabe des Codes eine Kreuzform zu erstellen durch Eingabe des Codes eine Kreuzform Ich werde diesen Polygoncode kopieren und den alten Polygoncode durch den neuen Polygoncode ersetzen , und ich werde diese Datei einrichten Wenn ich nach dem Einrichten dieser Datei zu meinem Browser zurückkehre, können Sie hier das Ergebnis sehen Hier kannst du die Form sehen. So können Sie jede Form anwenden, z. B. wenn ich die Sternform anwende, also wähle ich Stern und kopiere den Polygoncode, und ich werde den Code ersetzen, und ich werde den alten Polygoncode durch den Stern-Polygoncode ersetzen den Stern-Polygoncode ersetzen Ich werde diese Datei einrichten. Wie Sie jetzt sehen können, können Sie dieses Sternbild von Kipath sehen Auf diese Weise können wir also jede schwierige geometrische Form zeichnen und einen Schlüsselpfad erstellen Das ist es also für dieses Tutorial. In unserem nächsten Tutorial werden wir damit beginnen, unsere Formen mit dem Clip-Pfad zu animieren Vielen Dank, dass Sie sich dieses Video angesehen haben. Seien Sie gespannt auf unser nächstes Tutorial 3. Wellenanimation des Pfads mit CSS aufclippen: Hallo alle zusammen. Willkommen zur neuen Lektion in diesem Kurs. In dieser Lektion werden wir diesen schönen, schönen Welleneffekt mithilfe dieser CSS-Animation und der Eigenschaft „Ki-Pfad“ erzeugen schönen Welleneffekt mithilfe dieser CSS-Animation und der Eigenschaft „Ki-Pfad“ Es ist ein sehr cooles Beispiel, und in diesem Tutorial werden wir lernen, wie wir eine Kip-Pfad-Eigenschaft animieren und diese Art von Effekt erzeugen können eine Kip-Pfad-Eigenschaft animieren und diese Art von Effekt erzeugen also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, zum Cditor zurückkehren Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit der Lifesaver-Erweiterung und erstelle bereits ein aussagekräftiges Dokument mit dem Namen Index Dot HTML dem Namen Zuerst nehme ich innerhalb des Body-Tags ein tiefes Tag, Deep Dot, und unser Klassenname ist Dann werde ich in diesem Deep-Tag insgesamt zwei H-Tags von Überschrift zu Tag nehmen. H zwei und innerhalb dieser H zwei Diag-Welle, dann dupliziere ich diese Zeile. Ich habe diese Datei eingestellt Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis in meinem Browser sehen . Sie können den Text sehen. Jetzt müssen wir in die Style-Dot-CSS-Datei springen. Wie Sie sehen können, erstellen wir jetzt keine Style-Dot-CSS-Datei. Jetzt werde ich eine Style-Dot-CSS-Datei, Style-Dot-CSS erstellen . Und ich verlinke diese Datei mit diesem Dokument. Also hier werde ich Link Style Dot Style Dot CSS eingeben und diese Datei erneut einstellen. Lassen Sie uns nun in diese CSS-Datei im Stil springen und mit dem Styling beginnen. Zuerst importiere ich eine Schrift. Ich werde eine Schrift von Google importieren und die Alway-Schrift verwenden Ich importiere die Alway-Schrift von Google Fonts und mache sie zu Wadrap und dann fange ich an zu stylen Zuerst verwende ich Universal Selector, Star. Dann werde ich in den Höhlen Margin Margin Null zuweisen Danach werde ich die Polsterung zuweisen. Die Polsterung ist ebenfalls Null. Als Nächstes die Größe des Kartons, das Rahmenfeld für die Größe des Kartons. Danach werde ich irgendwann allen Schriften eine Schriftfamilie zuweisen , Ralwey Und wenn Ralway nicht verfügbar ist, möchte ich in diesem Fall Area verwenden und diese Datei einrichten Nachdem wir diese Datei eingerichtet haben, sieht unser Text so aus. Als Nächstes müssen wir den Körper stylen. Außerdem müssen wir den Text in die Mitte der Seite setzen. Dafür wähle ich das Body-Tag aus und ordne den Kursen zunächst die Hintergrundfarbe zu. Hintergrundfarbe, Haare, ich werde tippen, HatGFFF. Diese dunkle Hintergrundfarbe. Ich sagte diese Datei. So sah es aus, dunkelgrau. Dann werde ich der Seite eine Höhe zuweisen. Höhe, Höhe entspricht Höhe 100 VH. 100 Fuß Höhe. Dann dieses Spiel, ich mache es flexibel, richte den Inhalt aus, richte den Inhalt zentriert und richte die Elemente aus, richte die Elemente ebenfalls weil ich die Seitenränder vertikal und horizontal in der Mitte der Seite platzieren möchte , und ich stelle diese Datei ein. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Als Nächstes werde ich die Continua D, die Wellenklasse, ins Visier nehmen Wellenklasse, ins Ich kopiere den Klassennamen wave und zurück in die Closs-Datei, und hier bin ich die Punktwelle innerhalb der Carlss, dann füge ich Position hinzu, und ich werde es nach diesem W relativ machen, ich werde 500 Pixel zuweisen Auch Höhe, 500 Pixel. Als Nächstes müssen wir auf das H-Two-Tag abzielen und den Text etwas groß gestalten. Außerdem müssen wir den Text übereinander platzieren. Dafür müssen wir die Position absolut machen . Lass mich dir zeigen, wie. Ich werde auf H zwei Tags und die erste Eigenschaft abzielen, ich werde Position Position verwenden, ich werde es absolut machen. Dann müssen wir die Eigenschaft Text Align Text Align verwenden , hier bin ich gut dabei, Align center auszurichten Außerdem werde ich eine gewisse Zeilenhöhe zuweisen. Zeilenhöhe, Linienhöhe weil wir den Text vertikal und horizontal zentrieren müssen , deshalb verwende ich diese Eigenschaft. Zeilenhöhe 500 Pixel Schriftgröße Schriftgröße. Ich werde es ein bisschen groß machen. Ich werde der Schriftgröße ein Pixel zuweisen. Es liegt an Ihnen, wie große Schrift Sie verwenden möchten. Dann mache ich es in Großbuchstaben. Text, transformieren. Text transformieren, ich werde ihn in Großbuchstaben umwandeln. Ich werde diese Datei einrichten Nachdem ich diese Datei eingerichtet habe, sehen unsere Aufnahmen jetzt so aus. Jetzt können Sie feststellen, dass unsere Überschriften größer sind und es sich übereinander auszahlt Wenn ich sonst irgendeinen Text mit einem Clip-Pfad verlasse, kannst du den dahinter liegenden Text sehen Als Nächstes müssen wir beide H-Elemente ins Visier nehmen. Ich möchte sagen, dass wir dieses und jenes ins Visier nehmen müssen. Dafür werde ich Kindereigentum verwenden. Also tippe H zwei, H zwei, zuerst bin ich Doppelpunkt, und ich werde auf Kind eins zielen. Im krassen Teil verwende ich dann die Farbeigenschaft, Farbe Hier werde ich diese Farbe auftragen, diese blaue Farbe. Ich tippe sieben EF und fünf, es ist eine hellblaue Farbe und ich werde die Datei überspringen. Wenn ich in diese Datei lege, siehst du die Farbe aufgrund des zweiten Textes kaum , weil unser Element mit zwei Zoll den ersten überdeckt. Deshalb sieht man kaum den Hintergrund des ersten Kindes. Aber was? Wenn ich Clip-Path auf den ersten anwende , lass es mich dir zeigen Aber bevor ich auf dieses , das zweite Element, klicke werde ich diese Zeile duplizieren und n-te untergeordnete Element für das Element auswählen und die Farbe des Textes ändern Hier werde ich sagen, dass Farbe das Tag Null 3a9a4 hat . Dieser Farbcode Ich werde eine kleine dunkelblaue Farbe anbieten, diese Farbe. Wenn ich mich nun auf den untergeordneten Text bewirbe, dann seht ihr den vorherigen, den ersten. Lass mich dir zeigen wie. Lass uns auf die Website springen. Ich habe diese Website bereits in unserem vorherigen Tutorial vorgestellt , wie man sie benutzen kann. Von hier aus nehme ich 50% von links von rechts, 50% von links. Das ist gut. Dann kopiere ich den Code. Wählen Sie den Code aus und kopieren Sie den Polygoncode, die Clip-Pfad-Form, und ich werde ihn hier einfügen Im Grunde möchte ich hier den oberen Teil der zweiten Überschrift ausschneiden Ich möchte nur 50% der zweiten Überschrift anzeigen. Also hier, wenn ich die Eigenschaft clippath polygon verwende, wenn ich den zweiten Text abschneide, den zweiten in child und dann diese Datei einstelle, dann du hier Jetzt können Sie feststellen, dass der obere Teil der zweiten Überschrift abgeschnitten ist und der obere Teil hellblau sichtbar ist Es ist vom ersten Zoll an Kind. Weil ich den zweiten abschneide. Jetzt werde ich diese Zeile kommentieren , weil ich sie vorerst nicht will. Ich benutze es nur, um dir zu zeigen, wie es funktioniert, wie wir den Welleneffekt erzielen werden Ich kommentiere die Schlüsselpfadeigenschaft aus. Ich habe diese Datei wieder eingestellt, zweite Überschrift ist sichtbar. Wir müssen die wellenförmige Animation der zweiten Überschrift erstellen. Kehren wir nun zum CSS zurück und erstellen wir eine neue Animation. Geben Sie die ATE-Keyframes ein und fügen Sie sie hinzu. Bei den Keyframes gebe ich Wave ein. Winken Sie bei 0% der Dauer innerhalb der Carlerss und ich werde etwas tun Als Nächstes, bei 50% der Dauer, werde ich etwas tun Ich werde einen anderen Clip-Pfad anwenden, und bei 100% der Dauer werde ich Clip-Pfad anwenden Das sind also drei Animationsstatus , die wir für die Animation erstellen, und wir müssen die Kipath-Eigenschaft hier einfügen Um den Welleneffekt zu erzielen, müssen wir nun zur KiPe-Website zurückkehren Und von hier aus müssen wir Custom Polyer auswählen , damit wir jede gewünschte Form erstellen Durch Hinzufügen der Punkte erstelle ich eine wellenförmige Form. Also werde ich zuerst an diesem Punkt beginnen, dann an diesem Punkt, dann werde ich hier klicken und als Nächstes werde ich an dieser Position klicken Ich denke, es ist gut , um die Kurve zu erstellen. Dann werde ich den Pfad schließen. Also klicke ich hier, hier und hier. Es hat eine Art Welle erzeugt. Und wenn du es reparieren willst, ja, du kannst einfach der Maus ziehen und die Punkte verschieben. Und wenn du es wellenförmiger machen willst, ja, das kannst du, indem du sie anpasst, dann kopiere ich den Wert Ich schneide das gesamte Polygon el mit Kip-Pfadeigenschaft und zurück zur CSS-Datei Und bei 0% der Animationsdauer verwende ich den Kip . Ich werde die Eigenschaft clip-Path verwenden Das ist es. Außerdem werde ich dieselbe Kipeth-Immobilie zu 100% nutzen dieselbe Kipeth-Immobilie zu 100% Das ist gut. Nun, für die 50% der Dauer, müssen wir die Webrichtung ändern. Wir müssen es in den entgegengesetzten Abschnitt verschieben . Nun, wie können wir das machen? Jetzt werde ich eine entgegengesetzte Welle in einem anderen Messgerät erzeugen und die Punkte ziehen. Ich werde es ein wenig nach oben bewegen. Ich werde diesen nach oben bringen. Mm ja, es ist sehr schwer zu reparieren, aber wir haben es fast geschafft. Fast repariere ich und kreiere eine Welle in entgegengesetzter Richtung. Ich werde den Code kopieren und ihn innerhalb der 50% -Dub-Dauer platzieren Das ist gut. Kommen wir nun zum Browser. Danach erstellen wir die Wellenanimation Wir müssen die Animation in unserer untergeordneten Eigenschaft aufrufen . Also hier nenne ich die Animationseigenschaft Animation. Der Name der Animation ist Wave. Dann werde ich die Animationsdauer angeben. Animationsdauer der Animationswelle beträgt zwei Sekunden und die Animationsdauer ist ein- und ausgangsseitig Und ich möchte die Animation unendlich lang laufen lassen , unendlich Und ich werde diese Datei einrichten. Nachdem Sie diese Datei eingestellt haben, können Sie hier das Ergebnis sehen. So animiert es. Es sah aus wie Wasser, Wasser im Text, und es wackelt aufgrund dieser Welle aus der Animation Im Grunde animiert es zur ersten Form, sagen wir in Form, und wieder zurück zur ersten Form Deshalb können wir diesen wunderschönen Wasserwelleneffekt erzeugen . Und wenn Sie eine etwas schnellere Animation wünschen, reduzieren Sie einfach die Dauer Wenn ich es zwei Sekunden lang mache und dann diese Datei untersuche, kannst du jetzt das Ergebnis sehen. Jetzt ist es etwas schneller geworden, und die hellblaue Farbe, die Sie sehen können, stammt aus der ersten Überschrift. Außerdem hat es einen schönen Effekt erzeugt. Wenn ich es transparent mache, lass es mich dir zeigen. Wenn ich diese Zeile dupliziere und die vorherige auskommentiere und diese eine Farbe transparent mache. Transparent, und ich werde etwas Striche hinzufügen. Wenn ich diese Datei einstelle, wird sie jetzt vollständig transparent. Aber wenn ich einigen Typen einen Strich hinzufüge, Webket, Strich, Textstrich, Text, Strich, Strich, Strich, Strich, dann weise ich ihm einen Textstrich zu. Ich weise zwei Pixel zu, zwei Pixel, und unser Stroker ist HTag 03, eine Neun, eine Vier, diese hellblaue Farbe, genau diese hellblaue Farbe, und ich sagte diese Datei Und so erreichen wir diesen schönen WD-Texteffekt mit der Eigenschaft help up and emission und der keypath-Eigenschaft Ich hoffe, jetzt ist Ihnen das Konzept klar, wie Sie das machen können Danke, dass du dir dieses Video angesehen hast. Bleib dran für das nächste Projekt. 4. Text-Hover-Animation für den Pfad des Clips: Hallo, alle zusammen. Willkommen zu dem neuen Projekt in diesem Kurs. Und in diesem Projekt werden wir diesen schönen Text-O-Effekt erzeugen. Wie Sie sehen können, wenn ich meinen Karza auf den weißen Teil bewege , , wie der weiße Text können Sie sehen, wie der weiße Text die Form vervollständigt Ich möchte sagen, dass es den Text vervollständigt. Auf die gleiche Weise vervollständigt es die Form, wenn ich meinen Karza auf den schwarzen vervollständigt es Es versteckt den weißen Text und ersetzt ihn durch schwarzen Text. Wir werden diesen mit Hilfe von Kip Up Property erstellen Hilfe von Kip Up Property Mal sehen, wie wir diesen erstellen können. Wie Sie nebeneinander sehen können, öffne ich meinen Exhautio-Code-Editor und meinen Browser mit Servererweiterung und habe bereits ein HTML-Dokument erstellt , um Indexpunkt-HTML zu benennen Damit erstelle ich eine Style-Dot-CSS-Datei und verknüpfe diese Datei mit diesem Dokument Wenn ich meine Style-CSS-Datei öffne, importiere ich hier eine Schrift. Hier importiere ich eine Schrift und wende diese Schrift auf meine Seite, die ganze Seite an, und unser Schriftname ist Ralway Ich werde diesen anwenden. Kehren wir nun zum Indexpunkt-HTML zurück. Und hier innerhalb des Body-Tags werde ich insgesamt zwei H pro Tag nehmen, aber bevor ich einen Deep-Tag nehme, Dip und das ist unsere wichtigste Tiefenklasse. Geben Sie also Klasse ein, ich weise der Klasse Min zu. Das ist unser Hauptkurs. Dann in diesem Haupt-Dip-Element, hier , werde ich zuerst ein H-One-Tag nehmen und in diesem H-One-Tag werde ich Schwarz eingeben. Dann dupliziere ich dieses und ersetze Schwarz durch Weiß. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, kehren wir zur Stil - oder CSS-Datei zurück und beginnen mit dem Stylen des Hauptteils. Hier werde ich also auf das Body-Tag, den Body und das Body-Tag innerhalb dieses Body-Tags abzielen . Auf dieses Body-Tag werde ich zuerst eine Hintergrundfarbe auftragen. Hintergrundfarbe. Und für diesen Hintergrund nehme ich einen hellen, nehme ich einen bläulichen Hintergrund Dafür werde ich diesen Code weitergeben. Tag, C acht, D sechs, E fünf, und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe , sieht sie so aus. Danach weise ich unserem Body-Tag eine Höhe zu, Höhe werde ich 100 V H zuweisen Danach weise ich Disliberty zu. Display, dieses Spiel, ich werde es flexibel machen, und ich werde es als Mittelpunkt zuweisen, rechtfertigen und rechtfertigen. Richten Sie die Elemente auch in der Mitte aus, und ich stelle diese Datei ein. Nachdem Sie diese Datei eingestellt haben, können Sie sehen , dass sie die Mitte der Seite horizontal und vertikal einnimmt . Lassen Sie uns nun das Hauptelement div stylen. Hier wähle ich das Haupt-Div-Element anhand seiner ID main aus. Ist ein Aufkleberkleid die erste Eigenschaft, die ich verwenden werde, Position , ich werde es relativ machen Danach füge ich die Position hinzu, ich möchte etwas Gras definieren Rot, und ich würde fast 800 Pixel zuweisen. Ich denke, 800 Pixel sind großartig dafür. 800 Pixel. werde ich das G-One-Tag ins Visier nehmen, Seite eins. Dann definiere ich im CSS zuerst die Position. Dieses Mal werde ich es absolut machen. Danach werde ich es von oben platzieren, 50%. Von unten von links von links platziere ich es zu 50% und wende die platziere ich es zu 50% Transformationseigenschaft Transformieren, Transformieren, Übersetzen, Transformieren, Übersetzen, -50%, Komma -50% Ich werde diesen einstellen. Apo das, dann werde ich den Rand Null zuweisen , auch die Polsterung Null und ich werde einige mit Breite definieren, und ich möchte die hundertprozentige Breite verwenden, 100%, nicht die Zehn ist 100 Ich werde diesen Wert einstellen und er wird ihn auf der rechten, linken Seite unserer Seite platzieren linken Seite unserer Seite Lassen Sie uns nun den Text ausrichten. Richten Sie den Text in der Mitte der Seite aus. Geben Sie also Text ausrichten, Text zentriert ausrichten ein. Danach, Schriftgröße, werde ich die Schriftgröße 200 Pixel und Texttransformation, Texttransformation, Texttransformation, Großbuchstaben zuweisen Pixel und Texttransformation, Texttransformation, Texttransformation, und diese Datei einstellen Nachdem Sie diese Datei festgelegt haben, können Sie das Ergebnis sehen. Lassen Sie uns die Größe und Breite dieses Browsers erhöhen. Wie Sie sehen können, sitzen beide Ts übereinander. Als Nächstes möchte ich dieses zweite H-One-Element ins Visier nehmen. Dafür verwende ich den Nth Child Selector. H eins, n-tes Kind NT H Kind und innerhalb der runden Strophen möchte ich zwei Sekunden H zwei Elem auswählen Dann werde ich auf das Kleid von Clive Farbe auftragen, farbig, und dieses Mal möchte ich weiße Farbe Weiß auftragen Danach wende ich die Übergangseigenschaft, den Übergang, und verwende den Übergang 0,5 Sekunden lang Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Als Nächstes müssen wir den Text-Mittelpunkt des Sichtbaren machen. Dafür müssen wir Clip-Path verwenden, also müssen wir auf die Lippy-Website springen Ich öffne ein Fenster und suche nach Lippy Clip-Path Shape. Als Nächstes wähle ich die Trapezform aus, und wir müssen den Mittelpunkt des Sichtbaren bilden und die andere Hälfte ausblenden Ich erstelle diese Form und kopiere den Code und gehe zurück zum Browser Ich werde den Code als erstes einfügen, als zweites, achtes untergeordnetes Element, für das ich dieses festlegen möchte. Jetzt können Sie feststellen, dass es die Mitte des weißen Textes durchtrennt. Also haben wir den weißen Text erfolgreich aufgeteilt. Dieser Teil ist also sichtbar und der andere Teil ist versteckt. Jetzt ist das Problem, dass der schwarze Text hinter dem weißen Text sichtbar ist . Also müssen wir diesen Teil abschneiden. Um diesen Teil zu verstecken, werde ich diesen Teil nicht herausschneiden. Ich werde unserem Text eine Hintergrundfarbe hinzufügen. Wenn ich also kopiere, kopiere ich dieselbe Hintergrundfarbe. Also die eigentliche Hintergrundfarbe T, die ich in unserem Körper anwende, kopiere ich diese und zurück zum n-ten Kind zwei und wende diese auf die Rückseite des weißen Textes Wenn ich diesen versende, kannst du feststellen, dass er das schwarze Hintergrundwort verdeckt Jetzt haben wir fast die exakte Form, die wir wollen. Als Nächstes müssen wir am Hover-Effekt arbeiten. Wenn ich jetzt in Child mit der Maus über den zweiten Punkt fahre, möchte ich den weißen Teil sehen Ich möchte ihn vollständig sichtbar machen Finde das. Wählen wir diesen aus. Ich werde den genauen Code kopieren und eine Hover-Selector-Option erstellen Ich kopiere diesen und füge ihn hier ein und verwende den Doppelpunkt-Hover Mauszeiger, dann innerhalb der Klasse, dann innerhalb der Spalte werde ich eine Clip-Pfad-Form anwenden Kehren wir zur Klippe-Website zurück. Und um es in voller Größe zu machen, ziehe ich einfach dieses und mache es in voller Größe und ich kopiere den Code, und ich werde ihn hier einfügen Gehen wir nun zum Browser und legen die Datei fest. Wenn ich nach dem Einstellen dieser Datei den Cursor auf dieses Element bewege , können Sie den Effekt feststellen der Maus darauf zeigen, wird es wieder den ursprünglichen Zustand versetzt. Wie Sie sehen können, wenden wir eine Hintergrundfarbe an, die der Hintergrundfarbe des Körpers ähnelt Deshalb versteckt es das schwarze Wort, das dahinter steht. Als Nächstes müssen wir dasselbe für den schwarzen Text tun. Dafür müssen wir einen Her-Selektor für das erste Element erstellen einen Her-Selektor für das erste Element Also werde ich diesen Abschnitt duplizieren und ich möchte den ersten als Ziel Danach werde ich diesen Code entfernen und hier verwende ich Her Selector Wenn ich also mit der Maus über den schwarzen Text fahre, möchte ich, dass der weiße Text vollständig verschwindet In entgegengesetzter Richtung. Wir müssen am zweiten Hover-Element arbeiten. Hier würde ich einen erweiterten Selektor verwenden. Wenn ich mit der Maus auf einen schwarzen gehe, möchte ich den weißen anvisieren Ich verwende den unmittelbar nächsten H-One-Selektor. Und zurück zum Clippy. Ich werde diesen Punkt nach oben ziehen und genau das brauche ich Ich möchte den weißen Text verschwinden lassen. Kopiere diesen Code und ich füge ihn hier ein und lass uns zur Dokumentdatei zurückkehren, und ich werde diesen speichern nach dem Einstellen dieser Datei Wenn ich nach dem Einstellen dieser Datei den Mauszeiger auf den schwarzen Bereich bewege, erzielen wir diesen Effekt, funktioniert perfekt Wenn ich mit dem Mauszeiger auf den weißen Text fahre, wird der weiße Text vervollständigt. Wenn ich meine Casa auf den schwarzen Text bewege, wird der weiße Text ausgeblendet und nur der schwarze Text zurückgegeben, sodass wir mit Hilfe der Clip-Path-Eigenschaft das gewünschte Ergebnis erzielen . Ich hoffe, jetzt ist für Sie klar, wie wir dieses Projekt erstellen können Danke, dass du dir dieses Video angesehen hast. Bleib dran für das nächste Projekt. 5. Neujahrstextanimation mit Clippfad-Eigenschaft: Hallo, alle zusammen. Willkommen zur neuen Lektion dieses Kurses. Heute werden wir mit Hilfe von ButtHpperty eine Happy New Year-Animation erstellen eine Happy New Year-Animation mit Hilfe von ButtHpperty Wie Sie sehen können, wird überall dort, wo es nach unten bewegt wird, Tschüss 225 angezeigt, und wann immer es sich nach oben bewegt, es Frohes Neues Jahr 2026 Es ist eine Textanimation. Sie können feststellen, dass unser Bildschirm horizontal in Teile aufgeteilt ist. Die obere Hälfte roten Hintergrund und die untere Hälfte einen weißen Hintergrund. Außerdem bewegt sich unser Text immer wieder von oben nach unten und wechselt von Happy New Year 2026 zu Be by 2025 Außerdem können Sie feststellen, dass sich die Farbe von Weiß zu Rot ändert von Weiß zu Rot Wir werden die Eigenschaft Kipath verwenden, um diesen Effekt zu erzielen. Lassen Sie uns, ohne Ihre Zeit zu verschwenden, mit der Praxis beginnen und sehen, wie wir das erreichen können Wie Sie also nebeneinander sehen können, öffne ich meinen WizOS Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot HTML dem Namen Index Dot Damit erstelle ich eine Style-Dot-CSS-Datei und verknüpfe diese Datei mit diesem Dokument Nun, zuerst werde ich in unserem Body-Tag einen D-Subtyp D innerhalb dieses DV-Elements hier erstellen , ich werde ein H zu Element nehmen, etwas Typ H zwei. Und innerhalb dieses H-to-Elements nehme ich Span-Tag, Span Und innerhalb dieses Span-Tags gebe ich B, B ein, und dann nehme ich wieder ein anderes Span-Tag. Span, und in diesem gebe ich 25 ein. Bis 2025 sein. Damit werde ich dieser iptagsss-Box auch einen Klassennamen zuweisen dieser iptagsss-Box auch einen Klassennamen zuweisen Außerdem möchte ich eine andere Klasse zuweisen. Es ist Box eins, Box eins. Dann dupliziere ich diesen Abschnitt. Nachdem ich es dupliziert habe, mache ich dieses eine Feld zu zwei, und ich werde auch den Text von Tschüss zu Happy New Year ersetzen . Frohes neues Jahr 2026. Ich werde die Datei einrichten. Nicht nur das, ich werde all diese verschieben, das gesamte DE-Tag innerhalb des Abschnitts-Tags, Abschnitt, ich werde den gesamten Code verschieben, ausschneiden und einfügen. Innerhalb dieses Abschnitts-Tags. Lassen Sie uns jetzt mit dem Styling beginnen. Ich werde in die Style-CSS-Datei springen und zuerst die Schrift von Google importieren. Und hier werde ich die Poppins-Schrift importieren. Also importiere ich die Schrift. Nachdem ich die Schrift importiert habe, wähle ich den Stern für die Universalauswahl aus und füge allen Elementen Rand und Innenabstand hinzu Bei einigen Typen setze ich den Rand auf Null und auch den Abstand, auch den Abstand, ich setze ihn auf Null Also entferne ich den Rand und die Polsterung aus dem gesamten Element. Danach werde ich eine Rahmenbox für die Größe von Boxen zur Größe von Boxen erstellen Rahmenbox für die Größe von Boxen zur Größe von Boxen Außerdem werde ich die Schriftfamilie definieren. Schrift, Familie, hier werde ich Poppins anwenden. Im Doppelkurs werde ich also Poppins binden, und es ist aus der Sansa-Schriftfamilie Als Nächstes werde ich die Körpermarke ins Visier nehmen. Also gebe ich hier Body, Body inside the Carliss und ich sage Overflow Danach werde ich mich auf diesen Abschnitt mit dem Tag-Abschnitt konzentrieren Dann, hier in der Carrass , werde ich zuerst die Position definieren Position, ich werde sie relativ machen. Danach definiere ich mit der Höhe Breite 100 V W Vp Breite, 100 Ansicht Stiefelbreite und -höhe, 100 VH. Ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Text so aus weil wir eine Pop-Schrift verwenden dieses Sitzungs-Tag im oberen Bereich , ich wähle das Feld tiefes Element aus, dieses Feld tief, irgendein Typ Punktfeld Da ist Calvisi die erste Eigenschaft, ich werde Position, Position, Position, Position anwenden, ich möchte es zu einer absoluten, absoluten Position machen Dann werde ich mich oben bewerben. Von oben möchte ich es auf Null setzen und von links werde ich es auch auf Null setzen. Als Nächstes definiere ich die Breite und Höhe dieser Box mit 100%, auch Höhe, 100%. Das ist es. Wir müssen zwei kastentiefe Elemente zeichnen, wie Sie in meiner Struktur sehen können. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, überschneiden sie sich, wie Sie sehen können . Unser Text wird aufgrund der absoluten Position übereinander platziert . Wie Sie sehen können, beginnen wir bei Null oben und lassen Null stehen. Deshalb hat es von hier aus angefangen. Jetzt müssen wir es in der Mitte der Seite positionieren. Um es in der Mitte zu positionieren , verwende ich diese Eigenschaft. Anzeige Ich mache es flexibel, Inhaltszentrum aus und richte das Objekt mittig aus. Wenn ich diese Datei nun, wie Sie sehen, vertikal und horizontal einstelle, zentrieren Sie beide Texte. Danach werde ich die zweite Box ins Visier nehmen. Das zweite Feld, Feld zwei, Punktfeld zwei, ich werde es mit dem Klassennamen als Ziel markieren. Dann in den Farben ist jetzt zuerst , auch in diesem Feld werde ich den Hintergrund hinzufügen. Hintergrund, ich werde rote Hintergrundfarbe anwenden, reine rote Farbe, und ich werde diesen speichern. Jetzt hat das zweite Feld diese Farbe, diese rote Farbe, und es versteckt das erste Feld. Jetzt möchte ich nur die Hälfte der zweiten Box zeigen. Ich möchte den H-Teil dieses Felds anzeigen, und das können wir mit der Kippu-Eigenschaft sehr einfach tun Dafür müssen wir auf die KiPe-Website springen. Ich öffne diesen Tab und von hier aus müssen wir die Form erstellen Und dann wähle ich die Trapezform aus. Und wie ich dir schon gesagt habe und wie du weißt, müssen wir die untere Hälfte rausschneiden Ich werde diesen Punkt nach oben bewegen und bei 50% der Position stoppe ich ihn. Ebenfalls bei 50% der Position werde ich diesen Punkt beenden und danach werde ich den genauen Code kopieren und zurück zur Website gehen. Ich werde den genauen Code auch in das Feld einfügen. Ich wende diese Polygonform und werde diese Datei festlegen Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Wie Sie feststellen können, ist unsere zweite Box perfekt ausgestattet Ihr könnt auch feststellen, dass wir in beiden einen Vorgeschmack auf ein frohes neues Jahr haben Danach werde ich das H-2-Element, Überschrift zwei, ins Visier nehmen . Dann definiere ich in der Klasse die Schriftgröße und weise der Schrift eine 40-Pixel-Schrift zu. Ich denke, 40 Pixel sind gut dafür. Lass es uns anwenden. Ja, 40 Pixel sind gut dafür. Ich werde noch ein bisschen mehr erhöhen. Ich werde 43 draus machen und das hier einstellen. Ja. Jetzt müssen wir das frohe neue Jahr in einer Zeile und 2026 in einer anderen Zeile anzeigen in einer Zeile und 2026 in einer anderen Zeile Dazu müssen wir die Display-Eigenschaft verwenden und wie Sie sehen können, verwenden wir hier insgesamt zwei Span-Tags In einer Spanne geben wir Happy New Year und in einer anderen Spanne 2026 Dazu wenden wir die Anzeigeeigenschaft Display an. Ich mache sie flexibel und biege Richtung, Flexrichtung, und ich mache diese eine Spalte Ich werde diese Datei einrichten. Nachdem wir die Datei eingerichtet hatten , sah sie so aus, und wir brauchen genau dasselbe. 6. Neujahrstextanimation mit der Clippfadeeigenschaft Teil 2: Jetzt können Sie feststellen, dass sich die Spalte nach dem Anwenden in eine p-Zeile aufteilt. In einer Zeile steht Frohes neues Jahr und in der zweiten Zeile 2026 Aber Sie können sehen, dass hier 2025 gedruckt wird , weil es mithilfe der Kipath-Eigenschaft die Nabe des zweiten Dip-Elements durchschneidet mithilfe der Kipath-Eigenschaft die Nabe des zweiten Dip-Elements Wenn ich die Höhe erhöhe, wenn ich die Höhe erhöhe, lass mich dir zeigen, ob ich es 70 statt 50 mache. Jetzt kannst du feststellen, dass sich das Jahr ändert Jetzt wird es ein frohes neues Jahr 2026 bedeuten. Lass es mich dir zeigen. Wenn ich die Datei subportiere, kannst du das Ergebnis sehen. Sie können das Ergebnis in der zweiten Zeile sehen 20 frohes neues Jahr 2026, denn dieses Mal hatte es den kompletten ersten DB-Elementtext Kehren wir also zu seiner ursprünglichen Keep-Eigenschaft zurück, 50%, und setzen wir sie erneut 2025 ist aus dem Let Me Show You hervorgegangen 2025 aus der ersten Entwicklung hervorgegangen und Happy New Year kam von der zweiten Entwicklung. Kehren wir nun zur Stylo-CSS-Datei zurück, und hier werde ich Transformationseigenschaft Transform anwenden Transformiere, übersetze, übersetze Y, und hier wenden sie negative 70% Ich werde diese Datei einrichten. Nachdem ich den Text nach oben verschoben habe, können Sie den Text des zweiten Elements, Happy New Y 2026, deutlich erkennen Happy New Y 2026 Außerdem müssen Sie den Text in der Mitte dieser Seite 2026 ausrichten Mitte dieser Seite 2026 Wenn ich den Text nach unten verschiebe, zeige ich dir, ob ich ihn um 70% nach unten verschiebe und dann diese Datei einstelle Jetzt siehst du Be bis 2025 Aufgrund dieser Skripteigenschaft ist unser zweiter Text dieses Mal nicht sichtbar und unser erster Text wird bis 2025 sichtbar Vorerst werde ich mich bewerben. Ich möchte nur den Text des zweiten Dip-Elements anzeigen, Happy New 2026, und außerdem werde ich den Text so ausrichten, dass er den Text Hier verwende ich Text ilinpperty text line center, und ich werde diese Als Nächstes ändere ich die Farbe des HT-Elements und nehme das zweite Deep HT-Element ins Visier Hier t, mach Feld zwei, Feld zwei, ich möchte die Kante auf das Element ausrichten und innerhalb des Carlrass werde ich Farbe und Farbe anwenden , und ich möchte die Schriftfarbe weiß machen, und ich werde diese Datei einstellen Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Als Nächstes müssen wir auf das zweite Span-Tag zielen, also darauf, wie wir das Ohr platzieren. Wir müssen dieses Span-Tag sowohl von der Kante als auch vom Element aus anvisieren . Um das zu erreichen, gebe ich Span, Span, Doppelpunkt, n-tes Kind, n-tes Kind ein, und hier innerhalb der Runde versus werde ich das zweite Kind als Ziel wählen Dann werde ich in der Klasse hier die Zeilenhöhe definieren Zeilenhöhe, und ich werde Zeilenhöhe eins anwenden, auch Schriftgröße Schriftgröße E zwei EM, oder ich werde diese einstellen. So sah es also aus. Danach erstellen wir die Animation, die den Text nach oben und unten bewegt Wenn wir die Funktion „Y übersetzen“ animieren ich den Text vertikal nach oben und unten bewege , wird in diesem Fall der Effekt erzielt Dafür definiere ich Keyframes und unsere Keyframes sind Keyframes hinzufügen und animieren In diesem animierten Animationsreframe möchte ich nun festlegen, dass der Text oben Außerdem müssen wir den Text so einstellen, dass er sich unten befindet. Um dies bei 0% der Dauer zu erreichen, müssen Sie auch bei 45% der Dauer ein Komma Im Carlss möchte ich die Transformationseigenschaft anwenden, transformieren, transformieren, Y übersetzen, Y übersetzen. Y übersetzen , Y übersetzen Wenn ich also meinen Browser neu lade, bleibt der Text vom Beginn der Animation an an seiner Position Wenn ich diese Animation 10 Sekunden lang laufen lasse, dann bleibt sie in diesem Fall vier Punkte für lasse, dann bleibt sie in diesem Fall Sekunde an ihrem eigenen Platz Unterhalb dieser Werte bei 55% und 90%, 90% wende ich Transformation an, übersetze Y. Übersetze Y und innerhalb der Runde heißt es hier, ich gebe positive 70% Gewinnen Sie 10% der Animationsdauer, wird sich die Position des Textes ändern Ich möchte sagen, dass zwischen diesen beiden Zeiträumen 45-55% liegen, dadurch wird sich die Textposition ändern Jetzt, nachdem es sich nach unten bewegt hat, möchte ich es nach einer Dauer von 10% wieder auf den Also bei 100% der Dauer. Also 90-100, ich möchte das Element erneut verschieben, den Text erneut verschieben, also gebe ich transform Transform, translate Y -70% Danach gehe ich hier rauf und in dieses H-to-Element. Nach der Textausrichtung rufe ich die Animationseigenschaft auf. Animation. Unser Animationsname ist animate. Ich möchte diese Animation 3 Sekunden lang laufen lassen und der Modus ist in out in out Außerdem werde ich diese Animation unendlich lang laufen lassen. Die Anzahl der Iterationen ist unendlich, und ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Innerhalb von 3 Sekunden ist die Animation abgeschlossen. Auch bei einer Dauer von 0-45% bleibt es nach oben und bei 55 bis 90% nach unten Es ist also immer noch wild nach aufwärts und abwärts. Und wann immer es die Position geändert hat, hat es aufgrund der Kipath-Eigenschaft auch den Text aufgrund der Kipath-Eigenschaft auch den Und das Einzige, was jetzt noch übrig ist , wir müssen die Farbe ändern Wann immer es also nötig ist, von Feld zwei aus Feld eins zu wechseln , müssen wir die Farbe ändern. Wir müssen es rot machen, nicht schwarz. Dafür füge ich in unserem H-Zwei-Selektor die Farbe der Textfarbe hinzu und mache sie rot Und ich werde diese Datei einrichten. Also werde ich diese Datei einrichten. Immer wenn es sich nach unten bewegt, hat es, wie Sie feststellen können , die Farbe geändert, es wird rot. Und wann immer es sich nach oben bewegt, wird es weiß. So erzielen wir mit Hilfe der Clip-Path-Animation unseren gewünschten Effekt . Vielen Dank, dass Sie sich dieses Videoschema für das bevorstehende Projekt für das 7. Kreativer Button Hover-Effekt mit der CSS-Clippfad-Eigenschaft: Hallo, alle zusammen. Willkommen zu dem neuen Projekt in diesem Kurs. In diesem Projekt werden wir mithilfe der Clip-Path-Eigenschaft einen weiteren Button-Hover-Effekt erzeugen einen weiteren Button-Hover-Effekt mithilfe der Clip-Path-Eigenschaft Wie Sie sehen, wenn ich mit der Maus darüber fahre, befinden sich meine Autos auf der linken Seite im roten Bereich, der weiße Teil schrumpft und verschwindet, und Sie können Aber wenn ich meine Autos auf den weißen Bereich bewege, dehnt er sich aus und deckt die gesamte Schaltfläche und Sie können sehen, dass sich die Hintergrundfarbe geändert Im Grunde ist diese Schaltfläche auf diese Weise in zwei Teile aufgeteilt. Weißer Teil und roter Teil. Und wenn ich den Cursor auf den weißen Teil öffne, dehnt er sich aus. Und wenn ich mit dem Cursor auf den roten Teil fahre, schrumpft er. Das ist genau das Projekt , das ich in dieser Lektion mit der Eigenschaft helpop clip-path behandeln werde Lektion mit der Eigenschaft helpop clip-path also, ohne Ihre Zeit zu verschwenden, Lassen Wie Sie nebeneinander sehen können, öffne ich den Studio-Code-Editor meines Benutzers und meinen Browser mit der Live-Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot HTML Damit erstelle ich eine Style-Dot-CSS-Datei und verknüpfe diese Datei mit diesem Dokument. Lassen Sie uns jetzt mit der Codierung beginnen. Zuerst in meiner Körpermarke. Hier füge ich ein Anker-Tag A hinzu. Dann nehme ich in diesem Anker-Tag insgesamt zwei Span-Tags, span, und ihren Typ-Button. Dann dupliziere ich das Span-Tag und störe dieses Bild, dass Sie die Einstellungen links in der Ecke sehen können die Einstellungen links in der Ecke Lassen Sie uns nun in die Style-CSS-Datei springen und die Zeichenfolge starten. Stylen Sie CSS. starle ich das Body-Tag, hier gebe ich Body ein Dann innerhalb der Kaliber innerhalb der Kaliber die erste Eigenschaft, ich verwende Display Display, ich werde es flix machen. Dann begründen Sie den Inhalt, rechtfertigen Sie das Inhaltszentrum. Auch ein Einzelpostenzentrum. Vertikal und horizontal schreibe ich im Nahen Osten. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem müssen wir unserer Seite die Mindesthöhe vom Typ Mindesthöhe hinzufügen , ich werde e 100 VH setzen Dann füge ich eine Hintergrundfarbe hinzu und möchte eine dunkelgraue Hintergrundfarbe verwenden Hintergrund Haz-Tag 222. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Danach werde ich es dem Anchor-Tag sagen. Sol Typ A. Dann definiere ich innerhalb der Klasse zuerst deren Position. Position, ich werde sie relativ machen. Dann definiere ich Breite und Höhe mit 180 Pixeln. Auch Höhe, 60 Pixel. Danach starte ich das Span-Tag, das sich im Anker-Tag befindet Hier gebe ich Anker Space, Span ein. Dann verwende ich im Auto zuerst die Position, die Position, und hier setze ich die Position absolut. Wir können es relativ zum Anker-Tag positionieren. Als Nächstes bin ich gut darin, den höchsten Wert auf Null zu setzen. Danach links, ebenfalls Null, dann füge ich Gras hinzu. Wir, 100%, 100% und Körpergröße, ebenfalls 100%. Nun, beide Pfannen haben die gleiche Höhe und das Gras. Danach stelle ich vollfarbige weiße Hintergrundfarbe und die Hintergrundfarbe Ich möchte die rote Farbe Rot verwenden. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Dann werde ich den Text in der Mitte dieser Schaltfläche zentrieren. Richten Sie dazu den Text aus und richten Sie den Text auf der Höhe der Mittellinie aus. Außerdem werde ich die Zeilenhöhe zuweisen. Mm fast 60 Pixel. Ich denke, 60 Pixel sind gut dafür. Lassen Sie uns das zertifizieren und sehen, ob das Ergebnis herauskommt, ja. Lassen Sie uns jetzt die Schriftart ändern. Ich möchte Pop in Font anwenden. Also über dem Hauptteil werde ich die Pop-In-Schriften von Google importieren. Also gebe ich die Schrift ein. Außerdem werde ich die Schrift überall auf der Seite anwenden. Deshalb werde ich Universal Selector Star verwenden. Und innerhalb der Klasse werde ich zuerst sagen: Zusammenführen, keine Polsterung, auch keine Boxgröße für Flaschenboxen und Popups aus der Schriftfamilie Ich werde diese Datei erneut einrichten . Und nach dem Einstellen der Datei wurde, wie Sie sehen können , der Schriftstern geändert. Kehren wir jetzt wieder zum Pan-Tag zurück. Als Nächstes werde ich den Text in Großbuchstaben umwandeln. Also hier werde ich Text eingeben und in Großbuchstaben umwandeln. Danach, Buchstabenabstand, Buchstabenabstand, hier werde ich zu Pixeln übergehen Als Nächstes definiere ich die Schriftgröße. Schriftgröße, Schriftgröße 22 Pixel. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt können Sie sehen, dass zwei Span-Tags übereinander liegen. Außerdem nehmen wir die übereinander liegen. Außerdem nehmen wir volle Breite und Höhe der exakten Anker-Tag-Größe, 100% Breite und 100% Höhe. Und jetzt möchte ich das zweite Span-Tag ins Visier nehmen. Dafür werde ich nth Child verwenden. Also Zeit, Span, n-tes Kind und innerhalb der runden Aussparung ziele ich auf das zweite Span-Tag und dann weniger auf das Auto Als erste Eigenschaft verwende ich Hintergrund Hintergrundfarbe und setze sie auf Weiß Danach definiere ich die Farbe für den Text, Farbe , dafür verwende ich die rote Farbe genau die rote Farbe. Danach werde ich Transition anwenden. Übergang 0,5 Sekunden. Das ist gut. Wenn ich nun diese Datei einstelle, können Sie das zweite Span-Tag mit weißer Hintergrundfarbe und roter Schriftfarbe sehen. Aber unter dem Span-Tag haben wir die rote Hintergrundfarbe und das weiße Pan-Tag in der Textfarbe. Wenn ich also die Form des zweiten Span-Tags beibehalte, erscheint es beim ersten wieder. Und genau das müssen wir tun. Lassen Sie uns jetzt auf die Lippy-Website springen. Wie Sie sehen können, befinden wir uns auf der Lippy-Website und von hier aus werden wir die Form, einen Punkt auswählen Dann werde ich die Punkte verschieben, bis Sie die genaue Form Ich werde es zur Hälfte dieses Polygons machen, also werde ich es auf 50% setzen Außerdem werde ich diesen Wert auf 50% 2 setzen. Außerdem werde ich diesen Wert um bis zu 40% reduzieren, und dann kopiere ich den exakten Code hinein und zurück zu meinem Code iTone Dann werde ich den Code einfach hier einblenden und diese Datei einrichten Wenn Sie diese Datei einrichten, sehen Sie bereits das Ergebnis. Jetzt können Sie sehen, dass nur dieser Teil der rechten Form sichtbar ist und der linke Teil der zweiten Form übersprungen wurde Wenn ich jetzt mit der Maus drüber fahre, möchte ich es wieder vergrößern Dafür wähle ich wieder dieses zweite Kind mit ihrem Selektor Geben Sie also Spanned Inch Child Two ein, und hier verwende ich den Colon Hover Dann möchte ich im Cariss jetzt die volle Größe des zweiten Span-Tags anzeigen Gehen wir zurück zur Lippy-Website. Jetzt verschiebe ich die Punkte auf die linke Seite, bis der Arient in voller Größe angezeigt wird Und ich kopiere den Code und gehe wieder zurück zum Editor. Hier werde ich den Code weitergeben. nun nach dem Einstellen dieser Datei Wenn ich nun nach dem Einstellen dieser Datei den Mauszeiger über meine Karten auf diesem weißen Bereich bewege, können Sie das Ergebnis sehen Wie Sie feststellen können, vervollständigt es die Form. Es vervollständigt die zweite Form. Es dehnt sich nach links aus und nimmt innerhalb von 0,5 Sekunden die gesamte Seite ein. Jetzt müssen wir dasselbe für das erste untergeordnete Element tun . Und wenn ich beim ersten untergeordneten Element über mein Auto springe, möchte ich das zweite untergeordnete Element ausblenden, sodass Sie nur das erste untergeordnete Element sehen können. Dieses Mal möchte ich den weißen Teil verkleinern und diesen Teil verschwinden lassen Also lasst uns das erste Kind ins Visier nehmen. Also bin ich hier, um Span Colon und neutes Kind zu überspannen. Und innerhalb der Runde möchte ich das erste Kind ins Visier nehmen. Und wenn ich mit der Maus darüber fahre, also Over selector, Overt, erstelle, möchte ich das zweite Span-Tag als Ziel wählen, das nächste Span-Tag das Jetzt möchte ich direkt auf die nächste Spanne abzielen, die Span Nummer zwei ist Und um auf diese zu zielen, wenn Sie dieses Zeichen verwenden, und direkt danach, möchte ich die Spanne ins Visier nehmen. Dann innerhalb des CSS, dann innerhalb der Carlss hier müssen wir die Polygonform angeben Lass uns zurück zur Website gehen. Jetzt verschiebe ich alle Punkte auf die rechte Seite, links nach rechts, damit sie verschwinden, so etwas in der Art. Jetzt wird der Hintergrund schrumpfen und vollständig verschwinden. Kopieren Sie den Code und kehren Sie erneut zum Editor zurück. Ich werde den Code in diesen Selektor einfügen . Und ich werde diesen einstellen Wenn ich nach dem Einstellen dieses Autos auf der roten Seite mit der Maus über meine Autos fahre, können Sie jetzt sehen, dass der weiße Teil schrumpft und auf der rechten Seite verschwindet Aber wenn ich meine Autos auf der rechten Seite und im weißen Bereich bewege , können Sie jetzt feststellen, dass die Form vollständig ist, dass die Form erweitert wird und den gesamten Tastenbereich können Sie jetzt feststellen, dass die Form vollständig ist, dass die Form bedeckt So erreichen wir erfolgreich unser gewünschtes Ergebnis. Ich hoffe, jetzt ist Ihnen das Konzept klar, wie wir das schaffen können. Vielen Dank, dass Sie sich dieses Video angesehen haben. Bleiben Sie dran für unser nächstes Projekt.