Beherrschen von CSS-Animationsprojekten (12 reale Projekte)

1. Einführung: Schön, dass ihr wieder da seid, Leute. Ich bin wieder mit einem neuen klassenbezogenen CSS-Animationsprojekt zurück. Heute werden wir uns in diesem Kurs mit dem Animationsprojekt Cotter 12 befassen Wir beginnen mit dem rotierenden Ladeeffekt unter Verwendung einer reinen CSS-Animation Dann werden wir einfache Animationen zum Fahren von Autos lernen. Danach werden wir diese einfache Text-Rotar-Animation erstellen diese einfache Text-Rotar-Animation Dann werden wir diese Herm-Tastenanimation erstellen, wenn ich mit der Maus darüber fahre , da Sie sehen können, wie sie den Knopf schüttelt Damit werde ich auch eine weitere Button-Hover-Animation, einen Textbeleuchtungseffekt mit POCSS-Animation und eine Animation mit Mondrotation um die Umlaufbahn erstellen Textbeleuchtungseffekt mit POCSS-Animation und eine Animation mit Mondrotation um die Umlaufbahn Dann lernen wir Itable, reflektierenden Animationstext Dieser Text ist auch geeignet. Wenn ich versuche, diesen Text zu entfernen können Sie hier neuen Text einfügen, z. B. Hallo Welt. Dann lernen wir das Laden von Drei-D-Wellenkreis-Animationen , das Laden von Drei-D-Rotationsanimationen und das Animationsprojekt Rainy Drei-D-Rotationsanimationen und das Animationsprojekt Cloud Außerdem werde ich mich mit dieser Ladetextanimation befassen. Dies sind die Projekte, die ich in diesem Kurs behandeln werde. Ich hoffe, Ihnen werden all diese Projekte gefallen . Lass uns anfangen. 2. Rotationg Ladeeffekt mit CSS-Animation: Hallo, alle zusammen. Ich bin wieder mit einer neuen projektbezogenen CSS-Animation zurück. Heute werden wir in diesem Projekt diese wunderschöne Ladeanimation mit den Werten „X drehen“ und „Y drehen“ in einer 3-D-Umgebung erstellen diese wunderschöne Ladeanimation mit . Mal sehen, wie wir diese Animation erstellen können. Wie Sie sehen können, dreht es zuerst die Animation um YXS um 180 Grad, dann dreht es die Animation XXS und YXS um und YXS Mal sehen, wie wir bauen können. Wie Sie nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit Live Server-Erweiterung und erstelle bereits ein HTML-Dokument mit dem Namen IndexOTETML Damit erstelle ich bereits eine formatierte CSS-Datei und verknüpfe die Style-CSS-Datei mit diesem Dokument Zuerst nehme ich innerhalb des Body-Tags ein tiefes Etikett, Beef, und ich weise eine Klasse zu und unser Klassenname ist Lodi Dann springe ich in die Style-CSS-Datei und gestalte zuerst den Hauptteil Körper, dann werde ich in der CalibrasF die Höhe zuweisen Höhe, ich weise der Höhe 100 Viewport zu und dann verwende ich die Eigenschaft, also Flex Dieser Flex, dann verwende ich Eigenschaft „Inhalt ausrichten“ und „Inhalt zentrieren“, weil ich die Ausrichtung auf dieser Seite in der Mitte platzieren möchte Dann verwende ich Align Align Items Center. Danach verwende ich Hintergrundfarbe, Hintergrundfarbe. Ich möchte einen dunkelgrauen Hintergrund verwenden. Also verwende ich diesen Farbcode, hat Spur 222, und ich werde diese Datei so einstellen , dass diese Datei so aussah. Lassen Sie uns nun das Element anhand seines Klassennamens als Ziel verwenden. Geben Sie also Dot Loading ein. Beim Laden im Calibra steht, dass ich hier die Eigenschaft nutzen werde, die Eigenschaft Wi Wi 100 Pixel Dann verwende ich die Höheneigenschaft, Höhe ebenfalls 100 Pixel und die Hintergrundfarbe, Hintergrundfarbe und ich verwende Farbe Daground Weiß Danach werde ich einen kleinen Grenzradius zuweisen. Grenzradius, ich möchte einen Randradius von 12 Pixeln von jeder Ecke. Nun zu dieser Datei, Sie können das Ergebnis sehen. QuellPixel-Randradius bietet einen schönen, abgerundeten Rand schönen, abgerundeten Lassen Sie uns nun am Animations-Keyframe arbeiten. Es ist bei der Geschwindigkeit Keyframes. Und unser Animationsname ist zum Beispiel Loading. Dann füge ich innerhalb dieses Keyframes die erste Stufe 0% an der Position 0% zu 0% der Zeit hinzu, innerhalb der coolen Resis Hier verwende ich Transform Property, Transform und Transform Rotate X Zero Dann drehe Y, rotiere, Y. Außerdem werde ich Null DG überschreiten Animation wird von ihrer ursprünglichen Position aus gestartet ihrer ursprünglichen Position aus Dann springe ich in die zweite Phase der Animation, also dupliziere ich diese Linie und bei 50% der Zeit möchte ich diese Animation um Xs bei Null Grad drehen, möchte ich diese Animation um Xs bei Null Grad drehen aber ich möchte diese Animation drehen, YX um 180 Grad 18 DG Bei 50% der Animationsdauer wird dieses Element um YxS um 180 Grad gedreht dann in der Endphase bei 100% der Animation Lassen Sie mich Ihnen dann in der Endphase bei 100% der Animation zeigen, dass ich dieses Element bei 100% der Dauer bei XX um 180 Grad drehen möchte Außerdem möchte ich dasselbe Element bei YX um 180 Grad drehen . Ich werde diese Datei einrichten. Dann werde ich diese Animation in meiner Auswahl nennen. Ich werde Animation eingeben. Zuerst gebe ich den Namen der Animation an , die geladen wird. Dann gebe ich die Animationsdauer an, die zwei Sekunden hinter einer Sekunde liegt. Als Nächstes müssen wir die Animations-Timing-Funktion angeben , die linear ist. Schließlich müssen wir die Anzahl der Animations-Iterationen übergeben. Ich möchte diese Animation unendlich lang laufen lassen. Ich werde die Unendlichkeit überschreiten. Wie Sie feststellen können, arbeiten wir hier mit X-Wert drehen und Y-Wert drehen Diese beiden Funktionen funktionieren und sie funktionieren in drei Umgebungen. Deshalb müssen wir es aus der Perspektive betrachten, um es besser zu verstehen. Ich werde in den Körperbereich springen und hier werde ich die Perspektive hinzufügen. Perspektivische Perspektive, und ich werde prospektiv 200 Pixel sagen. Nachdem ich diese Datei eingerichtet und meinen Browser neu geladen habe, sieht unsere Animation so aus So dreht es das Element. Zuerst dreht es das Element um YXS um 180 Grad, dann wird es das Element drehen, XX ist 180 Grad, XX ist 180 Grad, auch YXS 180 Deshalb erzeugt es diesen schönen Ladeeffekt. Ich hoffe, jetzt ist dir klar, wie wir es bauen können. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 3. Fahrende Autoanimation: Hallo zusammen. In dieser Lektion werden wir diese wunderschöne, schöne unendliche Animation erstellen . Wie Sie sehen können, fahren auf dieser Strecke ein Auto und ein Motorrad. Die Idee hinter diesem Beispiel ist sehr einfach. Wir haben ein Hintergrundbild, das diese Fahrt zeigt, wir haben zwei Bilder, eines für das Auto und eines für das Motorrad, und das Auto und die Motorradbilder bewegen sich nicht Wir bewegen den Hintergrund von links nach rechts und das gibt uns diesen schönen Fahreffekt Mal sehen, wie wir diese Animation erstellen können. Wie Sie sehen können, bin ich endlich in meinem Visual Studio-Koordinator und habe bereits ein HTML-Dokument mit Indexpunkt erstellt Damit erstelle ich bereits diese Style-Punkt-CSS-Datei. Und wie Sie in meinem aktuellen Arbeitsverzeichnis sehen können, haben wir mehrere Bilder. Wir haben ein Bild des Hintergrundbildes. Dies ist unser Haupthintergrundbild, und ich füge dieses Hintergrundbild mehrmals und erstelle ein neues Hintergrundbild. Und hier füge ich dieses Hintergrundbild mehrmals zusammen und erweitere die Breite dieses Bildes. So können wir unsere Fahrzeuge auf dieser Straße fahren lassen. Lassen Sie uns zu einem anderen Bild springen, nämlich dem Autobild. Ich werde dieses Auto-PNG-Bild verwenden. Außerdem habe ich ein anderes Fahrzeug , dieses Motorrad. Ich werde das Motorrad- und Autobild auf dieser Straße hinzufügen und wir werden nur das Hintergrundbild verschieben Kehren wir zur Indexpunktdatei zurück. Zuerst erstelle ich in meinem Body-Tag ein tiefes Tag, webe es ein und weise mir einen Klassenhintergrund zu Im Inneren dieses Dip-Tags werde ich ein IMG-Bild mit zwei Bildern aufnehmen Als Quelle werde ich die Cimag-Karte weitergeben und außerdem werde ich eine Klasse zuweisen und unser Klassenname ist Karte Dann dupliziere ich diese Zeile und füge hier das Motorrad-Bild Motorrad hinzu Und es ist ein Motorrad. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, wenn ich Ihnen meinen Browser zeige und meinen Browser bereits über meinen Live-Server öffne. Wenn ich Ihnen also meinen Browser zeige, sieht er so aus. Jetzt müssen wir in unserem Hintergrundelement das Hintergrundbild hinzufügen. Kehren wir zu den Benutzern Ihres Codes zurück, und ich werde in die Style-Dot-CSS-Datei springen und mit unserem Styling beginnen. Zuerst wähle ich den Body-Tag body aus. Bei Cariss, der ersten Echtheit, verwende ich Margin, Margin Null Beim zweiten Probit werde ich Pairing verwenden. Die Polsterung ist ebenfalls Null. Ich werde diese Datei einrichten Danach werde ich am Hintergrund arbeiten. Ich werde an dem Deep Background-Element arbeiten, also kopiere ich den Klassennamen, den Hintergrund und zurück in die Styler-CSS-Datei Ich werde diesen Hintergrund anhand seines Klassennamens tiefgründig auswählen anhand seines Klassennamens tiefgründig Dann weise ich Höhe und Höhe zu und weise dem Viewport eine Höhe von 100 zu Dann weise ich Hintergrund und Hintergrund zu und verwende URL URL und darin übergebe ich das Hintergrundbild. Welches Hintergrundbild ist dieses Hintergrundbild? Dieses lange Hintergrundbild. Hintergrund vom Typ Ham, drei BG, drei bis JPG. Dann müssen wir diesen Hintergrund positionieren. Hintergrundposition, und ich möchte ihn von unten positionieren, von unten beleuchtet. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, kommen wir zum Browser. So sieht unser Hintergrund aus. Jetzt müssen wir das Motorrad und das Auto an der richtigen Stelle platzieren und das Auto an der richtigen Stelle Dafür müssen wir das Auto stylen. Zuerst werde ich das Karrenauto stylen. Ich werde seinen Klassennamen verwenden. Im Inneren des Kalibers steht dann, dass ich zuerst die Position definiere Position, ich werde sie absolut machen. Dann definiere ich ab dem Ende, ich möchte es auf 300 Pixel platzieren. Von unten möchte ich es mit 250 Pixeln platzieren. Außerdem werde ich die Breite dieses Autos definieren. Hier werde ich die Breite dieses Autobildes definieren, und ich werde 500 Pixel sagen. Auf die gleiche Weise werde ich das Motorrad positionieren. Dafür werde ich seinen Klassennamen verwenden. Ich kopiere den Klassennamen und füge ihn der CSS-Datei im Stil hinzu, und ich wähle das Motorrad-Bild Dann möchte ich innerhalb der CalibrSSF die Positionsposition definieren, die absolute Position ist Hier verwenden wir die absolute Position, weil wir ein Auto - und Motorradbild nicht verschieben Deshalb verwenden wir die absolute Position und von links und von links möchte ich sie mit 1.100 Pixeln platzieren und von unten möchte ich sie mit 360 Pixeln platzieren Außerdem werde ich die Breite dieses Bildes definieren. Breite, ich werde 250 Pixel daraus machen. Ich werde diese Datei einrichten. Wenn ich nach dem Einrichten dieser Datei zu meinem Browser zurückkehre, sah sie so aus. Ich glaube, ich muss dieses Autobild ein wenig anpassen. Kehren wir noch einmal zum Code zurück und von unten mache ich 250 , nicht 150. Ich werde diese Datei einrichten. Wenn ich nach dem Einrichten dieser Datei wieder zu meinem Browser zurückkehre, sieht es so aus. Jetzt platzieren wir unser Auto und das Motorrad an der richtigen Position Jetzt müssen wir die Animation ausführen. Wir müssen die untere Runde nach unten rechts laufen. Ich möchte sagen, dass wir diesen Hintergrund von der unteren Runde in die untere rechte Position verschieben müssen , damit wir diesen schönen Animationseffekt haben. Lass mich dir zeigen, wie. Wie Sie sehen können, definieren wir hier die Hintergrundposition, den unteren Lift. In unserer Animation müssen wir sie nach unten rechts verschieben. Definieren wir einen Keyframe. Also bei den roten Keyframes und unser Keyframe-Name ist Driving Driving und innerhalb der Klasse werde ich In der CL-Pause möchte ich nur die Position des Hintergrunds ändern Hintergrundposition, und wir beginnen mit der Ausgangsposition, also verwende ich denselben Wert unten links. Kopiere diesen Wert und ich werde ihn hier einfügen. Und dann dupliziere ich diese Zeile, und ich möchte nach oben gehen, also werde ich zwei Qard verwenden, und dieses Mal möchte ich zur unteren rechten Ecke gehen Unten rechts. Ich werde diesen Stapel untergraben. Nachdem wir diese Datei eingestellt haben, müssen wir diese Animation in unserer Auswahl aufrufen . In unserem Hintergrund möchte ich diese Animation ausführen. Ich werde die Animationseigenschaft Animation verwenden und unser Animationsname lautet Driving. Dann müssen wir die Animationsdauer angeben , die zehn Sekunden beträgt. Dann müssen wir die Animationsrichtung angeben , die linear ist. Und wir müssen auch die Animationszeit angeben. Wie oft wollen wir diese Animation ausführen und ich möchte diese Animation unendlich lang ausführen, also werde ich Infinite verwenden. Ich werde diese Datei einrichten. Wenn ich nach dem Einstellen dieser Datei zu meinem Browser zurückkehre, meine Animation ausgeführt, wie Sie sehen können. So können wir jede Fahranimation ausführen. Wir müssen nur den Hintergrund bewegen, und wir müssen unsere Objekte wie das Auto, sonst das Motorrad nicht bewegen wie das Auto, sonst das Motorrad Wir müssen nur den Hintergrund von einer anderen Seite auf eine andere Seite verschieben von einer anderen Seite auf eine andere Seite Hier verschieben wir diesen Hintergrund einfach von links nach rechts und das gibt uns diesen schönen Fahreffekt. Ich hoffe also, dass es dir jetzt klar ist. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 4. Textdrehanimation: Hallo, alle zusammen. Ich bin wieder mit einem anderen CSS-Projekt zurück. In diesem Projekt werden wir diese Takes to Rotator-Animation erstellen diese Takes to Rotator-Animation Wie Sie sehen können, geben Sie den ersten Typ Ich liebe CSS-Transformationen, Übergänge und CSS-Animationen Lassen Sie uns nun sehen, wie wir den Text mithilfe der Hl Op-CSS-Animation ändern können , nicht mithilfe von JavaScript. Lassen Sie uns in den isults Studio-Code-Editor springen. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studo-Code-Editor und meinen Browser mit Lip-Servererweiterung und habe bereits ein HTML-Dokument mit Indexpunkt als HTML-Dokument erstellt ein HTML-Dokument mit Indexpunkt als HTML-Dokument Damit erstelle ich diese Stildatei im CSS-Stil. Zuerst nehme ich innerhalb des Body-Tags H eine Tag-Überschrift W und den Typ Hebru, ich liebe CSS Und dann nehme ich ein Tag, Span. Dann innerhalb des Span-Tags, verdammt, ich werde nichts eingeben. Im Moment ist es leer, aber es wird Animation, Übergang und Transformation enthalten . Aber wir werden sie mithilfe von CSS hinzufügen, nicht mithilfe von TML Nun, um diese Datei einzustellen, so sieht sie aus Und jetzt müssen wir in die CSS-Datei mit dem Tile-Dot springen. Zuerst werde ich das Body-Tag stylen. Körper, dann innerhalb der Flüche, weise ich zuerst Höhe und Höhe zu, und ich werde Höhe , 100 Viewport height, festlegen Dann werde ich auf diese Weise zuweisen. Display-Bewegungen rechtfertigen die Inhaltsmitte , weil ich diesen Geschmack horizontal und vertikal in der Mitte dieser Seite ausrichten möchte diesen Geschmack horizontal und vertikal in der Mitte dieser Seite Dann werde ich versuchen, die Elemente auch mittig auszurichten. Danach definiere ich hier die Hintergrundfarbe und die Hintergrundfarbe und stelle sie dunkelgrau ein, markiere 222, diese und ich stelle diese Datei ein. Ich habe diese Datei so eingerichtet , wie sie aussah. Jetzt werde ich die Farbe des Textes ändern. Ich werde das H-One-Tag mit seinem Tag-Namen H one als Ziel verwenden und Herund weist ihm Farbe Und ich möchte die weiße Farbe Weiß verwenden. Damit werde ich auch die Schriftgröße definieren. Schriftgröße, und ich möchte eine etwas größere Schrift, also werde ich sie auf 40 Pixel setzen. Ich denke, 40 Pixel sind gut für mich. Ja. Und dann werde ich auf das Span-Tag abzielen und ein Before-Element vor dem Pseudo-Element erstellen Before-Element vor dem Pseudo-Element Geben Sie also vorher Span Colon ein. Dann hast du die Clivss gesagt . Ich werde den Inhalt weitergeben, den ich hinzufügen möchte Einige Typen enthalten einen Doppelpunkt und ich möchte innerhalb der einzelnen Codes etwas hinzufügen, und ich möchte zuerst Transition hinzufügen, also tippe Dann präzipiere diese Datei, hier ist sie. Ich liebe den CSS-Übergang. Als Nächstes werde ich Texttransformation, Text, Transformation in Großbuchstaben zuweisen Texttransformation, Text, Transformation in Großbuchstaben Außerdem werde ich den Schriftfamilienbereich definieren den Schriftfamilienbereich Ich werde in dieser Datei die Farbe des Textes festlegen, ich werde diesen Hexa-Wert verwenden, diesen blauen Wert verwenden und ich werde diese Datei einstellen Jetzt möchte ich das Wort Übergang ändern. Das können wir mithilfe von Animationen machen. Ich werde eine Animation mit dem roten Keyframe erstellen , unser Animationswort Switch Der Wortwechsel im Auto ist unwiderstehlich. Jetzt gebe ich innerhalb des Keyframes bei 0% der Animationszeit 0% in der Auto-Resis Ich würde den Inhalt gerne ändern, aber ich würde gerne den Inhaltsübergang mit demselben Wert verwenden Ich tippe enthaltenen Doppelpunkt und gebe Übergang ein. Also werden wir es in dieser Zeile tun. Danach dupliziere ich diese Zeile bei 50% der Animationszeit, 50% der Dauer, Hämatyp-Animation, und bei 100% der Dauer werde ich die Contag-Hämotyp-Transformation ändern. Anstatt eine Animation zu verwenden, werde ich Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, nenne ich diese Animation Word Switch kopiere den Animationsnamen. Ich nenne diese Animation innerhalb dieses Span-Tags Span vor Pseudoelement Also t Animation und unser Animationsname ist Wordswitch und die Animationsdauer beträgt fünf Sekunden Außerdem möchte ich diese Animation unendlich lang laufen lassen, also verwende ich Infinite Value Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier das Ergebnis sehen. Innerhalb von 5 Sekunden ist die Animation abgeschlossen. Zuerst Tipp-Animation, Übergang, dann Typ-Animation. Ich liebe CSS-Animationen und dann die Transformation der Animation und dann die Tipp-Animationstransformation. Wenn ich die Geschwindigkeit erhöhe, also die Zeit verkürze, mache ich zwei Sekunden und stelle dann diese Datei ein. Jetzt können Sie sehen, dass es sich schnell geändert hat. Übergang zur Animationstransformation. So können wir diesen Effekt erzielen. Ich hoffe, es ist dir klar. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 5. Animierter Button mit CSS-Animation: Hallo, alle zusammen. In diesem Tutorial werden wir dieses Leck erstellen, dieses animierte Leck. Wenn Sie sich das nun ansehen, haben wir einen roten Hintergrund bestimmten Breite und wir verzerren dieses Element ein wenig mit Witz Außerdem bewegt es sich kontinuierlich von links nach rechts. Unendliche Zeit, es wird die Animation ausführen. Aber wenn ich mit dem Cursor über dieses Element fahre, zeige ich Ihnen, ob ich mit dem Mauszeiger über dieses Element fahre. Jetzt können Sie sehen, wie es die Animation stoppt Außerdem war die Schaltfläche mit diesem roten Hintergrund gefüllt. Ich erweitere die Breite dieses schiefen Elements und bedecke den gesamten Button Das werden wir in diesem Projekt erstellen. Ich hoffe es wird dir gefallen. Es ist ein sehr einfaches und unkompliziertes Projekt. Es ist nicht sehr schwierig. Lassen Sie uns also in den Code-Editor von User Studio springen. Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit der Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot TML Damit erstelle ich eine Stylo CSS-Datei. Im Moment ist es leer. Im Body-Tag hier nehme ich ein Anker-Tag, A, und hier gebe ich Hover me Drücke es hoch, um diese Datei einzurichten . Hier kannst du den Link in meinem Browser sehen Aber wir müssen diesen Link stylen. Dafür müssen wir in diese Style-Punkt-CSS-Datei springen . Zuerst fange ich an, mit einem Body-Tag zu stylen , also einem Typ Body. Dort im Cli-Vers befindet sich die erste Eigenschaft, für die ich Höhe verwenden werde. Ich werde eine Höhe definieren, und für die Höhe werde ich 100 VH binden und Höhe eingeben Dann definiere ich Display und mache daraus Flachs Flocken anzeigen und den Inhalt mittig ausrichten, Elemente ebenfalls zentriert ausrichten Welches Element auch immer wir in dieses Body-Tag einfügen, es wird dieses Element vertikal und horizontal zentrieren. Danach werde ich auch eine Hintergrundfarbe mit einer Hintergrundfarbe übergeben einer Hintergrundfarbe hier werde ich eine graue Hintergrundfarbe verwenden Also hat der Typ das Tag 222, und ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet habe, werden Sie das Ergebnis sehen. Wie ich dir gesagt habe, wird es horizontal und vertikal das Element dieser Seite auf dieser Seite zentrieren. Als Nächstes starke ich das Anker-Tag. Geben Sie also A ein, dann entferne ich in der CliraSSF die Unterstreichung aus diesem Text, einigen Texttypen, Dekoration Ich werde es nun zu einer Nonne machen. Ich werde diese Datei einrichten, Sie können sehen, wie sie die Unterstreichung entfernt. Danach werde ich es irgendwann sichtbar machen , Farbe Ich werde es weiß machen. Außerdem, Haare, werde ich Schriftgröße und Schriftgröße definieren , und ich werde 40 Pixel daraus machen, ich denke, 40 Pixel sind genug für das Beispiel. Als Nächstes definiere ich die Schriftfamilie, die Schriftfamilie. Hier werde ich sensorisch vorgehen. Danach werde ich Grenze, Grenze definieren. Ich möchte drei Pixel, durchgehenden Rand, einen durchgehenden Rand, und unsere Rahmenfarbe ist ebenfalls weiß. Dann werde ich diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Button so aus. Danach müssen wir etwas Polsterung hinzufügen. Also das Padding von oben nach unten, ich werde 40 Pixel und von links nach rechts 80 Pixel weitergeben Dann werde ich Position beziehen. Position, ich werde sie relativ machen. Danach werde ich Overflow definieren. Überlauf versteckt. Ich werde diese Datei einrichten Nachdem ich diese Datei eingerichtet habe, sieht unser Button so aus. Als Nächstes werde ich das innere Element mit der Pseudoklasse Before erstellen das innere Element mit der Pseudoklasse Before Hier werde ich eine Before-Pseudoklasse mit dem Anker-Tag A erstellen, vorher Doppelpunkt Dann werde ich innerhalb der Aliase, der ersten Eigenschaft, Inhalt verwenden, um dafür einen leeren Inhalt zu erstellen Inhalt, Inhalt ist ein leerer Inhalt. Danach müssen wir die Position dieses leeren Inhalts definieren. Also von oben, von der obersten Position, werde ich es auf Null setzen. Vom Labor aus werde ich auch im Bett Null anfangen. Danach werde ich eine Hintergrundfarbe definieren , eine Hintergrundfarbe. Ich werde rötliche Farben verwenden, manchmal auch bei AGF vier, vier, drei, sechs Danach definiere ich ID. Breite, Helm, um Breite zu verwenden , 120 Pixel Als Nächstes definiere ich Höhe, Höhe und Saum, sodass Höhe 100%, 100% verwendet wird . Danach definiere ich die Position und möchte sie absolut machen. Und ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Element so aus. Aber das Problem sind Buchstaben darunter. Dafür müssen wir also den Z-Indexwert verwenden. Also hier sind die T-Z-Indizes, und ich übergebe minus eins. Ich werde diese Datei einrichten und das Problem lösen. Jetzt werde ich dieses Element transformieren. Ich möchte dieses Element verzerren. Dafür müssen wir Transform Property, Transform verwenden, und ich werde Skew Value, Skew verwenden Und ich möchte es um bis zu -15 Grad im EG neigen, und ich gehe, um diese Datei einzustellen Nachdem wir diese Datei eingerichtet haben, wird unser Element so aussehen Sie können auch feststellen, dass dieses Element außerhalb des Randbereichs nicht sichtbar ist , da wir hier die versteckte Eigenschaft overflow verwenden Deshalb können wir diesen Teil des Bereichs dieses Que-Elements nicht sehen diesen Teil des Bereichs dieses Que-Elements Jetzt müssen wir an der Animation arbeiten , die dieses Element nach rechts verschiebt. Aber bevor ich mit der Animation beginne, werde ich diesen Zeilenüberlauf als ausgeblendet auskommentieren und hier werde ich die Animation mit dem roten Keyframe deklarieren und unser Animationsname ist, du kannst sie beliebig benennen, ich werde sie move nennen Dann heißt es in der Caira hier, ich werde das Schlüsselwort from verwenden, aus ist die Startposition dieser Animation Im Kaliber steht dann, dass ich hier die Eigenschaft P verwenden werde. Von der Runde aus möchte ich die Animation bei minus 120 Pixeln starten Entschuldigung, 120 nicht 12. Dann werde ich diese Datei einrichten. Ich meine, es wird dieses Element an dieser Stelle platzieren. Ich zeige es dir. Wenn ich den Wert ändere, wenn ich den linken Wert ändere, wenn ich ihn minus 120 Pixel mache und dann diese Datei setze. Wie Sie sehen können, verschieben wir dieses Element an diese Position. In unserer Animation werden wir dieses Element nun von dieser Position aus starten. Im Moment werde ich es auf Null setzen, wieder auf Null, weil dies die Startposition dieses Elements ist . Aber in der Animation werden wir dieses Element an dieser Position beginnen . Und in zwei Schlüsselwörtern ist unser Endziel der linke Wert f, ich werde 100% überschreiten. Ich werde diese Datei einrichten. Außerdem werde ich diese Zeile jetzt wieder auskommentieren Ich werde diese Datei erneut einrichten. Danach werde ich diese Animation in unserem BFCEdelimate aufrufen diese Animation in unserem BFCEdelimate Tipp Animation, zuerst müssen wir den Animationsnamen move angeben, dann müssen wir die Animationsdauer angeben, und ich werde 1,2 Sekunden verwenden Und unser Animations-Derion ist linear Für die Anzahl der Animationsintercons verwende ich hier Infinite Value, Infinite Ich werde diese Datei einrichten. Nachdem ich diese Datei, wie Sie sehen können, unendlich für unendliche Zeit gesetzt habe, wurde dieses Element hinter diesen Boden verschoben. Die Animation wird unendlich lang ausgeführt, aber ich möchte diese Animation beenden, wenn ich den Cursor auf diese Schaltfläche halte. Außerdem möchte ich die Breite dieses schiefen Elements vergrößern. Dafür müssen wir einen Hover-Selektor für dieses Before-Element erstellen Hier gebe ich NCATag colon hover und wende vorher den Her-Selektor auf das Before-Element an ein und wende vorher den Her-Selektor auf das Before-Element an. Dann verwende ich in der CalibrSF-Eigenschaft verwende ich Ich möchte die Breite dieses Elements vergrößern und es auf 100% bringen Dann werde ich das QvLu entfernen. Ich möchte daraus ein Quadrat machen. Ich werde transform eingeben, und ich möchte es zu Qvalu Null DG machen und ich werde auch die Animation entfernen, wenn ich mit dem Cursor über dieses Element Geben Sie also Animation ein, und hier übergebe ich Nn Value. Ich werde diese Datei nach der anderen einstellen, wenn ich mit dem Mauszeiger auf diese Schaltfläche fahre, wie Sie sehen können, wird die Animation sofort gestoppt Außerdem füllt es die Schaltfläche mit diesem Before-Pseudoelement. Aber das Problem ist, dass wir den Übergang darauf nicht erleben können Es bedeckte sofort den gesamten Knopf. Dafür müssen wir hier eine Eigenschaft namens Transition verwenden. Wenn Sie all dieses Element übergehen, beträgt unsere Übergangszeit 0,5 Sekunden. Win Hub zweitens, es wird dieses Element verdecken. Lass es mich dir zeigen Immer wenn ich mit dem Cor auf diesen Button fahre, kannst du diese Animation erleben Sie können diesen Übergang erleben. So können wir mit Hilfe von Keyframes und vor Pseudo-Lemate diesen schönen Animationseffekt auf dieser Schaltfläche erzeugen diesen schönen Animationseffekt auf mit Hilfe von Keyframes und vor Pseudo-Lemate diesen schönen Animationseffekt auf dieser Schaltfläche Keyframes und vor Pseudo-Lemate Vielen Dank, dass Sie sich diesen Videoplan für unser 6. Textbeleuchtungseffekt: Hallo, alle zusammen. Ich bin wieder mit einer neuen projektbezogenen CSS-Animation zurück. Und heute werden wir in diesem Projekt diese beleuchtete Textanimation erstellen, wie Sie sehen können . Hearty Animation Word und alle Charaktere leuchten nacheinander auf. Es blinkt nicht gleichzeitig. Nacheinander zündet es alle Charaktere an. Schauen wir uns also an, wie wir diese Animation ohne JavaScript erstellen können . In den meisten Fällen benötigen wir Java-Skript, um diese Art von Animation zu erstellen . Aber in diesem Tutorial werden wir kein JavaScript verwenden. Wir werden CSS und HTML verwenden . Also lasst uns den Code starten. Wie Sie also nebeneinander sehen können, öffne ich meinen Visor Studio-Code-Editor und meinen Browser mit der Live Server-Erweiterung und habe bereits ein HTML-Dokument mit dem Namen Index Dot HTML erstellt dem Namen Index Dot HTML Damit erstelle ich eine Style Door-CSS-Datei und verknüpfe diese Datei mit diesem Dokument Jetzt, zuerst innerhalb des Body-Tags. Zuerst werde ich in das Body-Tag eine Unterliste aufnehmen, UL. Dann nehme ich innerhalb dieser Knotenliste das Listenelement I und ich nehme mehrere Listenelemente Hier gebe ich Animation , A, N, I, A , T, I, ich dupliziere das mehrfach auf ON und setze diese Datei Nachdem wir diese Datei eingerichtet haben, springen wir zur Stil- oder CSS-Datei. Jetzt fange ich mit einem Body-Tag an, einem Typ, einem Körper. Dann verwende ich in der ersten Eigenschaft Curless die Höhe Ich werde dieser Seite eine Höhe zuweisen, die 100 VH beträgt Danach weise ich Display Flex zu, begründe den Inhalt und begründe das Inhaltszentrum Außerdem richte ich die Elemente mittig aus und ich stelle diese Datei ein. Es wird dieses Element horizontal und vertikal in der Mitte dieser Seite ausrichten . Danach weise ich hier Schriftfamilie und Schriftfamilie zu und verwende Luftschrift Aerial. Ich werde diese Datei einrichten. Als Nächstes füge ich diesem Body-Tag eine Hintergrundfarbe hinzu, eine Art Hintergrund, und hier verwende ich den Hashtag 222, diese dunkelgraue Hintergrundfarbe Danach werde ich das UL-Tag, die UL und die Liste ins Visier nehmen UL-Tag, die UL und die Liste Dann werde ich hier in den Carrivers eine Marge festlegen Margin, Null, Hinzufügen von auch Padding Null. Dann verwende ich die Display-Eigenschaft. Flocken anzeigen und ich werde diese Datei einstellen. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt verschwinden alle Listenelemente nebeneinander. Danach werde ich alle Listenelemente ins Visier nehmen. Hier tippe ich, ULI in der Festplatte. Die erste Eigenschaft, die ich verwenden werde, ist Listenstil, ich mache keinen, weil ich die Punkte entfernen möchte Danach weise ich hier eine Farbe zu, und ich möchte ein wenig gräuliche Farbe verwenden, hellgrau, ein Typ hat ein Tag, ein Typ hat ein Tag, vier, 848, 48. Danach werde ich die Telefongröße zuweisen. Telefongröße Hemon weist der Telefongröße acht Pixel zu. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sehen unsere Einstellungen so aus. Außerdem werde ich etwas später für den Abstand zwischen diesen Zeichen sorgen . Hier gebe ich den späteren Abstand ein, 15 Pixel, ich denke, 15 Pixel sind gut dafür, und ich werde diese Datei einstellen. Nun, so sieht es aus. Danach müssen wir die Animation mit Keyframes erstellen die Animation mit Keyframes Dafür gebe ich hier Gewichtung Keyframes ein, füge Keyframes hinzu und hier gebe ich der Keyframe-Beleuchtung einen Namen Beleuchtung innerhalb der Klasse die erste Wahrscheinlichkeit, bei 0% der Dauer, innerhalb der kleineren, ich verwende die Farbeigenschaft Farbe Ich werde die Farbe ändern. Im Grunde werde ich die Farbe nicht ändern, ich werde sie so lassen, wie sie ist. Ich benutze diesen Weg. Damit verwende ich Textschatten, Textschatten. Im Moment werde ich keinen eingeben. Später werde ich den Wert für den Textschatten ändern. Dann dupliziere ich diese Zeile. Dann dupliziere ich diesen Abschnitt, und hier werde ich hier bestehen, ich werde 90% der Dauer bestehen. Ich möchte dieselbe Farbe verwenden, aber ich werde sie jetzt bei 100% der Dauer erneut duplizieren . Ich werde die Farbe einstellen. Ich werde die Farbe ändern. Hier werde ich diese Farbe verwenden, FS, wenn neun gleich Null ist, diese gelbe Farbe. Jetzt wende ich einen Wert für den Seitenschatten mit einer Dauer von 100% an. Hier werde ich Nano durch diesen Wert ersetzen. Ich habe diesen Wert bereits kopiert, also platziere ich ihn hier und werde diesen Wert setzen. Danach rufe ich diese Beleuchtungsanimation auf, kopiere die Animationsnamen und rufe sie hier in diesem LI-Tag auf, ich rufe die Animation auf. Animation, zuerst gebe ich den Animationsnamen an, der Beleuchtung lautet. Dann müssen wir angeben, nachdem ich den Animationsnamen angegeben habe, müssen wir die Animationsdauer angeben, und die Animationsdauer beträgt 1,4 Sekunden. Damit müssen wir die Animations-Timing-Funktion übergeben , die linear ist. Danach müssen wir den Wert für die Anzahl der Animationsiterationen übergeben , der unendlich ist, weil ich diese Animation unendlich lange ausführen möchte diese Animation unendlich lange ausführen Unendlich und ich werde diese Datei einrichten. Nachdem ich diese Datei eingestellt habe, können Sie die Animation in unserem Text sehen . Das Problem ist jedoch, dass alle Charaktere gleichzeitig blinken Jetzt will ich Verzögerung. Ich will eine Verzögerung zwischen den einzelnen Charakteren. Dafür müssen wir alle Elemente nacheinander auswählen. Ich möchte alle Charaktere sagen. Dafür werden wir nth Child verwenden. Wir werden die Vorabauswahltechnik verwenden. Hern Typ UL, Ali, Colon und zehntes Kind. Es bedeutet, es zu benutzen, wir können das LIE-Mittel mit seiner Indexnummer ins Visier nehmen In den Runden hier werde ich eine bestehen. Zuerst möchte ich den ersten Charakter auswählen. Im Grunde genommen möchte ich sagen, dass es auf A abzielt. Jetzt einer nach dem anderen alle Charaktere für N für I, für M, für A, T, I O N anvisieren. Hier, in der Kalis, befindet sich die haarige Zielfigur A, und ich möchte ihr eine kleine Animationsverzögerung zuweisen Animation. Das ist unser erster Charakter, also werde ich Null bestehen. Dann dupliziere ich diese Zeile und das ist das zweite Kind Ich werde der Animation eine Verzögerung von 0,1 Sekunden zuweisen Danach dupliziere ich diesen Abschnitt und wähle dann anhand der Indexnummer die Figur Dann möchte ich hier eine Verzögerung von 0,2 Sekunden zuweisen. Danach dupliziere ich es erneut und dieses Mal wähle ich hier aus, dass ich eine Verzögerung von 0,3 Sekunden zuweisen werde . Dann dupliziere ich es erneut, und dieses Mal verzögere ich für A A, dieses Zeichen A. Hier werde ich Index Nummer fünf und 0,4 Sekunden bestehen. Dann dupliziere ich es und dann werde ich mit Index Nummer sechs auf T zielen , 0,5 Sekunden. Dann wieder dupliziere ich diese Zahl, dupliziere diese Zeile und dann werde ich Ziel I verwenden, indem ich Index Nummer sieben und den Verzögerungswert 0,6 verwende. Danach dupliziere ich das erneut. Dieses Mal wähle ich das n-te Kind Nummer acht und verzögere 0,7, dupliziere es erneut, das ist für das letzte Charakterziel Ich werde den Index Nummer neun ändern. Und hier werde ich den Wert ändern. Ich werde es um 0,8 Sekunden verzögern. Wenn ich diese Datei eingestellt habe, können Sie jetzt, nachdem Sie diese Datei eingestellt haben, eine nach der anderen sehen , wie die Zeichen wachsen. So können wir diesen Lichteffekt erzielen. Ich hoffe, jetzt ist Ihnen klar, wie wir das erreichen können. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 7. Bearbeitbar, der animierten Text widerspiegelt: Schön, euch Bösewichte zu sehen. Ich bin wieder mit einer neuen projektbezogenen CSS-Animation zurück. Und wie Sie sehen können, erstellen wir heute in diesem Tutorial diese wunderschöne Textanimation. Hier können Sie sehen, wie unser Text wächst, und Sie können auch sehen, wie sich dieser Text widerspiegelt. Nicht nur das, auch unser Text ist irritierend. Lass es mich dir zeigen Angenommen, Sie möchten Ihren Namen eingeben, können den Text von dieser Stelle entfernen und dann Ihren Namen eingeben. Es ist eine sehr gute Praxis und ein Beispiel für CSS-Animation. Sie können diese Animation auf Ihrer Website verwenden. Es kann Ihrer Website ein sehr kreatives Aussehen verleihen. Lassen Sie uns ohne weitere Informationen das Projekt starten und sehen, wie wir es erstellen können. Wie Sie sehen können, öffne ich Seite an Seite mein Visual Studio Codaor und meinen Browser mit der Servererweiterung und erstelle bereits ein HTML-Dokument dem Namen Index Dot Damit verknüpfe ich*** im Dateistil Punkt-CSS. Zuerst werde ich innerhalb des Body-Tags ein Header-Tag erstellen, H zwei Header innerhalb dieses Tags, vorerst werde ich Text eingeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Text. Es ist ein statischer Inhalt. Wir können ihn nicht von unserem Browser aus bearbeiten, und wenn Sie ihn zu einem geeigneten Inhalt machen möchten, müssen wir in diesem Fall ein Attribut verwenden und unser Attributname ist inhaltsfähig. Lass es mich dir zeigen. Hier werde ich Inhalt eingeben. Bearbeitbar. Ich möchte es wahr machen Wenn ich es wahr mache und dann diese Datei festlege, können wir jetzt unseren Inhalt von unserem Browser aus bearbeiten . Lass es mich dir zeigen. Ich möchte Text in Namen umwandeln. Sie können das Ergebnis sehen. Also haben wir unseren Tabellenteil erfolgreich erledigt. Lassen Sie uns zu unserem Designteil springen. Ich werde den CSS-Dateistil oder CSS wechseln. Zuerst verwende ich Universal Selector, ich gebe Star ein Im Caliss möchte ich den Rand festlegen. Marge, Null. Damit möchte ich auch Padding, Padding auf Null setzen. Außerdem möchte ich die Boxgrößeneigenschaften, die Boxgröße und die Rahmenbox für die Boxgröße verwenden Rahmenbox für die Boxgröße Dann werde ich Font Family Font Family verwenden. Schriftfamilie, und ich werde die Schrift Aerial verwenden. Aerial Heldic und sensorisch. Wenn ich diese Datei sage, können Sie das Ergebnis sehen. Als Nächstes möchte ich unser Body-Tag, den Körper, stylen. Stattdessen ist Kalis, ich möchte mit Display-Eigenschaft beginnen, Display-Flex Hey, wenn du dich mit Flex und Read nicht auskennst, kannst du dir meinen Kurs ansehen Dann begründen Sie den Inhalt. Zentrum. Außerdem möchte ich diesen Artikel mittig ausrichten. Ich möchte Align Item Property, Aligned Item Center verwenden. Unsere nächste Eigenschaft ist die Mindesthöhe. Wir müssen eine Mindesthöhe festlegen. Größe des Mannes. Mindesthöhe, ich möchte 100 VH verwenden. Damit möchte ich eine dunkle Hintergrundfarbe einstellen. Hintergrund, und ich werde RGV-Gelb verwenden. Für Rot werde ich fünf verwenden. Für Grün werde ich 30 verwenden. Und für Blau werde ich 71 verwenden. Wenn ich diese Datei einstelle, kannst du die Farbe sehen. Sie können die dunkelbläuliche Hintergrundfarbe sehen und auch auf die Mitte unseres Inhalts klicken, und auch auf die Mitte unseres Inhalts klicken da wir Flexbox verwenden, um unseren Inhalt auszurichten Und dann kommt der wichtigste Teil H, das Design von Tags mit zwei Überschriften H zwei entspricht dem Kalibrator, so dass die erste Eigenschaft die Position, die Position relativ ist und unsere zweite Eigenschaft die Schriftgröße ist Schriftgröße 6:00 Uhr Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen Damit möchte ich den Buchstabenabstand sagen. Buchstabenabstand, Buchstabenabstand, 15 Pixel. Unsere nächste Eigenschaft ist Farbe bedeutet Schriftfarbe, Farbe, und ich werde den RGVa-Wert verwenden Für Rot verwende ich vier. Für Grün werde ich 50 verwenden. Und für Blau werde ich 124 verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Diese Farbe ist ziemlich identisch mit der Hintergrundfarbe, und jetzt werde ich diese Einstellungen in Großbuchstaben umwandeln diese Einstellungen in Großbuchstaben umwandeln Erfordert die Transformation in Großbuchstaben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dann werde ich hundertprozentig nass machen. Text ausrichten, zentrieren und dann kommt der sehr wichtige Teil dieses Videos. Jetzt müssen wir diesen Text reflektieren. Ich möchte eine Spiegelreflexion erzeugen. Dafür müssen wir ein neues Eigenschaftsnamen-Feld Reflect verwenden . Lass es mich dir zeigen. Hey, wie Sie sehen können, arbeite ich mit dem Chrome-Browser. Deshalb müssen wir ein Präfix verwenden. Dash-Internetschlüssel. Unser Feld mit dem Namen unserer Immobilie spiegelt wider. Gedankenstrich reflektieren. müssen wir die Richtung unserer Reflexion angeben, die unten steht, und dann müssen wir die Länge dieser Reflexion angeben, die ein Pixel beträgt. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Es schafft ein perfektes Spiegelbild unseres Textes. Unser erster Wert ist der Reflexionsrichtungswert. Unser zweiter Wert ist der entgegengesetzte Wert. Und drittens müssen wir den Mag-Wert angeben. Und für den Mag-Wert verwende ich einen linearen Gradienten. Also hier werde ich linearen Gradienten eingeben. Innerhalb der Klammer ist der erste Wert transparent. Unser zweiter Wert ist RGVA in der Klammer, wir müssen Aber zuerst werde ich den Wasserwickel einschalten. Jetzt übergebe ich den Wert oder der erste Wert ist ein roter Wert. Für Rot verwende ich 11 für Grün, ich werde 70 für Blau verwenden, ich werde 138 verwenden. Endlich müssen wir den Alpha-Wert übergeben. Und wie Sie wissen, dient der Alpha-Wert der Transparenz. Für den Alpha-Wert verwende ich also 0,267 Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dann werde ich Semikolon verwenden, um diese Zeile zu beenden. Unsere nächste Eigenschaft ist die Zeilenhöhe. Zeilenhöhe. Für die Linienhöhe verwende ich 0,70 EM Und als Nächstes möchte ich mich der Gliederung der Einsätze zuwenden. Ich werde Outline Property verwenden. Gliederung, keine. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Nachdem wir die Gliederung entfernt haben, werden unsere Überlegungen mit unserem Inhalt verknüpft. Jetzt sieht unser Spiegelbild realistisch aus. Daher kommt unser letzter Teil, die Animation. Also möchte ich zunächst einen Keyframe mit der Geschwindigkeit Keyframes erstellen einen Keyframe mit der Geschwindigkeit Keyframes Unser Animationsname ist animate. Dann müssen wir im Cali-Resist, wie Sie wissen, zwei Arten von Keyframe-Selektrod zwei Arten von Keyframe-Selektrod Sie können das Schlüsselwort from oder two verwenden, andernfalls können Sie Für dieses Beispiel müssen wir den Perzentis-Wert verwenden. Wir müssen nicht nur mit mehreren Prozentwerten arbeiten, und ich habe den Prozentwert für dieses Beispiel bereits vorbereitet für Ich werde es kopieren und ich möchte es hier einfügen, einfügen. Dann müssen wir im Caliss unser Eigentum nutzen. Zuerst möchte ich die Textfarbe ändern. Ich werde den Farbwert verwenden. Farbe und ich werde den Wert argv verwenden. Und ich verwende dieselbe Farbe, die ich in unserem Überschriften-Tag verwende. Unser nächstes Anwesen ist Take Shadow. Der Sonu-Typ nimmt Schatten an. Nimm Schatten, keiner. Wie Sie sehen können, wende ich diese Eigenschaft 0% der Animation, 18% der Animation, 20% der Animation, 50,1% der Animation, 60% der Animation, 65,1% der Animation, 80% der Animation, 90,1% der Animation und 92% Animation Rufen wir nun die Animation auf und versuchen herauszufinden, ob sie richtig funktioniert hat oder Also möchte ich die Animationseigenschaft verwenden. Animation. Und unser Animationsname ist animate. Und unsere Animationsdauer beträgt 1 Sekunde. Und unsere Animationsrichtung ist linear. Und für die Dauer unserer Animation verwende ich Infinite Value. Unendlich. Wenn ich diese Datei speichere, schauen wir mal, was passiert ist. Wie Sie sehen, passiert nichts, denn um den wachsenden Effekt zu erzielen, müssen wir mit dem Schattenwert spielen. Dafür müssen wir also einen Selektor mit mehr Prozentwerten verwenden. Ich habe die Prozentauswahl bereits kopiert und werde sie hier einfügen Dann werde ich innerhalb des Colrass die Farbeigenschaft verwenden. Farbe, Farbe weiß, Haz-Tag, falls ja. Und jetzt müssen wir mit dem Eigentum von Tee Shadow spielen. Der Typ nimmt also Schatten an. Nimm Schatten. Zuerst müssen Sie den XXS-Wert übergeben, Null ist , dann müssen Sie Y X vero übergeben Ich werde Null verwenden . Drittens müssen Sie den Wert für Unschärfe übergeben. Also hier werde ich zehn Pixel verwenden. Endlich musst du die Schattenfarbe übergeben. Für die Schattenfarbe verwende ich RGV Vo RGB. In der Klammer gebe ich den roten Wert sechs, den grünen Wert 149 und den blauen Wert 231 Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie können sehen, wie es blinkt. Sie können auch das Spiegelbild sehen. Und jetzt möchte ich diesen Effekt attraktiver machen. Ich werde diese Zeile duplizieren, kopieren. Auf der nächsten Folie möchte ich diese Zeile duplizieren. Und jetzt möchte ich nur den Unschärfewert auf 20 Pixel erhöhen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt können Sie einen leuchtenden Lichteffektrand dieses Textes sehen. Danach möchte ich diese Linie duplizieren und Wert der Unschärfe erneut um 40 Pixel erhöhen Unschärfe erneut um 40 Dann möchte ich diese Linie noch einmal duplizieren, und jetzt werde ich 80 Pixel verwenden Endlich werde ich 160 Pixel verwenden. Wenn ich das letzte Komma entferne und diese Datei setze, können Sie den Effekt sehen Wie Sie sehen können, sieht unser wachsender Effekt jetzt attraktiver aus Nicht nur das, es ist auch geeignet. Angenommen, Sie möchten Ihren Namen eingeben. Ich werde diesen entfernen und Smith eingeben. Sie können hier jeden beliebigen Text eingeben , da wir reizbare Inhalte verwenden Wie Sie sehen können, ist der Inhalt wahr. Ich hoffe, Ihnen ist jetzt klar wie wir diesen wachsenden Effekt erzielen können. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 8. CSS 3D Wellenkreislader-Animationseffekte: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einer neuen projektbezogenen CSS-Animation zurück , und heute werden wir diesen wunderschönen CSS-Wavy Circle Loader mit drei D-Wellen erstellen diesen wunderschönen CSS-Wavy Circle Loader mit drei D-Wellen Wie Sie sehen können, haben wir mehrere Kreise mit unterschiedlicher Größe und wie sie eine wunderschöne wellenförmige Animation ergeben Mal sehen, wie wir es erstellen können. Lass uns in den Studio-Code-Editor springen. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio Creator und meinen Browser mit der Lip-Servererweiterung und erstelle bereits ein ETML-Dokument mit dem Namen Index Dot TML Außerdem verlinke ich dieses Dokument mit Tyler CSS Five. Also nehme ich zuerst in meinem Body-Tag ein Deep-Tag, Dev, und ich werde diesem Deep-Klassenlader auch eine Klasse zuweisen Dann nehme ich innerhalb des Dip-Tags mehrere Span-Tags als Span. Im Grunde genommen nehme ich leeren Spentag, um ein paar Kreise zu erstellen Für dieses Projekt nehme ich den Pipten Span Tag, also werde ich diese Zeile 14 mal duplizieren Wir haben insgesamt 15 Span-Tags für 15 Kreise, wir haben unseren TML-Teil erfolgreich erledigt Lassen Sie uns nun in die CSS-Datei mit dem Stil von Dot CSS springen. Hier wähle ich zunächst Universal Selector aus, was Star ist Dann verwende ich innerhalb der Kaliber die Margin-Eigenschaft Margin, Null, dann verwende ich die Padding-Eigenschaft. Polsterung Null. Dann habe ich diese Datei eingestellt Als Nächstes wähle ich das Body-Tag aus. Hier bin ich vom Typ Körper. Dann verwende ich innerhalb der Aliase zunächst Display Property, Display Flex, Justify content, Center Unsere nächste Eigenschaft ist Align item. Es ist auch das Zentrum. Und dann werde ich Mindesthöhe für unsere Webseite sagen. Dafür verwende ich die Eigenschaft Mean Height IN height. Männliche Größe, 100 VH. Ich möchte eine ganze Seite für dieses Projekt auswählen. Deshalb verwende ich 100 VH. Unsere nächste Immobilie ist Background. Hintergrund und als Hintergrund verwende ich den RGV-Wert RGB Für Rot gebe ich 70 ein. Ähnlich wie bei Grün werde ich auch Banty eingeben. Und für unseren Blauwert gebe ich 70 ein. Wenn ich diese Datei einstelle, können Sie hier sehen, dass unsere Hintergrundfarbe dunkelgrau ist, und jetzt werde ich die Loader-Klasse stylen. Also, um Dot Loader auszuwählen. Im Calirass verwende ich zunächst die Positionseigenschaft Position beziehend. Außerdem werde ich das Haydn-Gewicht auf diesen Lader einstellen , mit 300 Pixeln Höhe, ebenfalls 300 Pixel. Jetzt verwende ich die wichtigste Eigenschaft, Transformierungsstil, Transformierungsstil. In unserer Eigenschaft „Transformationsstil verwende ich den Wert „ Drei D beibehalten “, weil ich unserem Kreis drei D L geben möchte . Unsere nächste Eigenschaft ist Transformation. Transformieren. Unser erster Wert ist Perspektive. Voraussichtlich 500 Pixel, und unser nächster Wert ist X drehen, X drehen. Hier werde ich den Winkel 60 Grad überschreiten. Als Nächstes werde ich den gesamten Spentag innerhalb der Oder-Klasse stylen gesamten Spentag innerhalb der Oder-Klasse Also hier möchte ich Punktlader und Leertaste verknüpfen , ich werde alles Theta und Span auswählen Dann ist innerhalb der Cali-Resis unsere erste Eigenschaft Position, Position absolut Unsere nächste Eigenschaft ist Display, Display Block. Und jetzt setze ich einen Rahmen für unser Span-Tag. Grenze. Fünf Pixel. Ich werde einen Rahmen mit fünf Pixeln festlegen, und ich möchte einen festen Rand. Und unsere Rahmenfarbe ist weiß. Sm Typ FFF. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier siehst du, wie du einfach mehrere Boxen an derselben Stelle erstellen kannst. Im Moment ist es uns nicht klar. Unsere nächste Immobilie ist also Box Shadow Box Shadow. Und ich werde diesen Schatten positionieren. Null Pixel, fünf Pixel und Null Pixel. Und ich werde auch eine Farbe für diesen Boxschatten verwenden. Hass-Tag, CCC. Es verleiht unserem Schatten eine hellgraue Farbe. Mit diesem Wert möchte ich jetzt einen anderen Wert verwenden, nämlich Inset Außerdem möchte ich einen Schatten in einen Teil dieser Ringe legen. Deshalb verwende ich den eingefügten Wert. Und dann kopiere ich den Wert und füge ihn hier Ich werde diese Datei einrichten. Unsere nächste Immobilie ist Box Sizing, Box Sizing. Und hier werde ich den Wert Border Works verwenden. Außerdem werde ich eine andere Eigenschaft verwenden , nämlich Grenzradius, Grenzradius, Grenzradius, 50%. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Ich weiß, dass es dir immer noch nicht klar ist, und jetzt werde ich die Kreisgröße nacheinander erhöhen. Dazu müssen wir alle Spen-Tags nacheinander auswählen. Lassen Sie uns also nacheinander alle verbrauchten Tags auswählen. Geben Sie Punkt, Loader oder Spen-Tag, Span ein. Doppelpunkt, und jetzt verwende ich den n-ten Child-Selektor , NH Child Zuerst wähle ich unseren ersten Spentag aus. Ich werde hier Dann müssen wir innerhalb der Alives unseren ersten Ausgaben-Tag positionieren Zuerst verwende ich Top Property, Top Zero. Unsere nächste Eigenschaft ist lipped, p, ebenfalls Null. Und dann kommt unsere andere Eigenschaft, die unten, unten, ebenfalls Null ist Und unsere letzte Positionierungseigenschaft ist richtig, richtig, ebenfalls Null. Damit werde ich eine weitere Eigenschaft verwenden, nämlich die Animationsverzögerung. Verzögerung der Animation. Vorerst lasse ich es leer. Ich werde Ihnen später sagen, warum ich diese Immobilie nutze. Wenn ich diese Datei einstelle, entsteht, wie Sie sehen können , unser erster Kreis, und das ist der größte Kreis in unserer Gruppe. Und um unseren zweiten Kreis zu erstellen, werde ich diesen ganzen Abschnitt duplizieren. Zuerst ändere ich den Selektor, das zweite Kind. Damit ändere ich den oberen Wert, den linken Wert, den unteren Wert und den rechten Lassen Sie mich Ihnen oben zehn b, zehn, unterste Position, zehn, rechte Position, zehn zeigen . Wenn ich diese Datei einstelle, können Sie hier sehen, dass hier nichts passiert. Ich erstelle keinen weiteren Kreis , weil wir keine Einheit zur Verfügung stellen. Hier müssen wir eine Einheit bereitstellen. Ich möchte die Pixelhölle mit zehn Pixeln, zehn Pixeln und zehn Pixeln bereitstellen . Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. In diesem Kreis befindet sich ein weiterer Kreis. Dann werde ich einen nach dem anderen diesen Kreis erstellen. Also werde ich diesen Abschnitt duplizieren und hier werde ich Kind drei auswählen. Außerdem werde ich die Positionswerte erhöhen, 20 Pixel, 20 Pixel für unten und 20 Pixel für rechts. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Es fügt einen dritten Kreis zu dieser Gruppe hinzu, und jetzt werde ich diesen Abschnitt schnell vorspulen, um den Vorgang abzuschließen. Wie Sie sehen können, schließen wir den Erstellungsprozess ab. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie können sehen, dass all diese Kreise perfekt ausgerichtet sind, und hier können Sie sehen, und hier können Sie jedes Mal sehen , wenn ich unserem vorherigen Wert zehn Pixel hinzufüge. In unserem 13-Selektor verwenden wir den höchsten Wert von 120 Pixeln Aber in unserem nächsten Selektor, also in unserem 14-Selektor, verwenden wir 130 Vale verwenden wir 130 Vale Auf diese Weise fügen wir in unserem 15-Selektor zehn Pixel hinzu und wir passieren So haben wir erfolgreich unseren Kreis erstellt. Jetzt müssen wir ihn animieren. Wir müssen nur mit dem Zatdex-Wert spielen, um die Welle zu erzeugen Lassen Sie uns also einen Keyframe für diese Animation erstellen. Ich bin also zurück zum oberen Bereich, und hier werde ich den Keyframe erstellen Beim roten Keyframe. Und dann müssen wir den Keyframe-Namen eingeben und unser Keyframe-Name Dann müssen wir in den Kelchen müssen wir Um die Position der Animation auszuwählen, verwende ich den Prozentwert Zuerst wähle ich zwei Positionen aus: 0% Position und 100% Position. Dann möchte ich innerhalb der lebendigen Resis an dieser Position diese Kreise transformieren Also verwende ich hier den Eigenschaftsnamen Transform, Transform , und ich werde Translate Z value verwenden . Übersetze Z. Und ich möchte es auf -100 Pixel in Z x-Richtung übersetzen Als Nächstes wähle ich 50% Position, 50%. Dann sagst du im Cali, ich werde wieder Transform Probity, Transform, Translate Z 100 Pixel verwenden , Translate Z 100 Und jetzt müssen wir diese Animation in unserem Spentag nennen. Hier werde ich Animation eingeben. Unser Animationsname ist animate. Und ich möchte diese Animation 3 Sekunden lang laufen lassen. Damit möchte ich auch sagen, es sich im Animationsmodus befindet. Endlich übergebe ich den Wert für die Anzahl der Animationsiterationen, der unendlich ist Wenn ich diese Datei einstelle, bewegen sich all diese Kreise zusammen nach oben und unten, bewegen sich all diese Kreise zusammen nach oben und weil wir den Z-Index in verwenden Hier können Sie sehen, wie der gesamte Kreis gleichzeitig bewegt wird. Jetzt müssen wir die Eigenschaft delay, Animation Delay, verwenden. Mit dieser Eigenschaft können wir unsere Animation verzögern, und es ist sehr wichtig, den wellenförmigen Kreis zu erzeugen Also werde ich hier zunächst eine Verzögerung von 1,4 Sekunden verwenden. Wenn ich diese Datei, wie Sie sehen, auf 1,4 Sekunden hochsetze, wird die Animation für unser erstes Kind gestartet . Ähnlich werde ich für unser zweites Kind 1.3 bestehen. Zweiter. Und für unser drittes Kind werde ich 1,2 Sekunden durchhalten. Und für unser viertes werde ich 1,1 Sekunden überstehen. Und für unser fünftes Kind werde ich eine Sekunde verstreichen lassen. Und für unser sechstes Kind werde ich 0,9 Sekunden überschreiten. Bei unseren sieben Kindern werde ich 0,8 Sekunden durchhalten. Und für unsere acht Kinder werde ich 0,7 Sekunden überschreiten. Und für unsere neun Kinder werde ich 0,6 Sekunden durchhalten. Für unsere zehn werde ich 0,5 Sekunden verstreichen. Für unser elfjähriges Kind werde ich 0,4 Sekunden durchhalten. Bei unserem 12. Kind werde ich 0,3 Sekunden durchhalten. Für unser 13-Kind werde ich 0,2 Sekunden überschreiten, und für den 14. Span-Selektor werde ich 0,1 Sekunden überschreiten, und für unser letztes werde ich eine Verzögerung von 0 Sekunden überschreiten Ich habe erfolgreich die Eigenschaft für die Animationsverzögerung eingestellt, das ganze Span-Tag Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Wie Sie sehen können, geht es jetzt darum, perfekte Web-Kreise zu erstellen. Und jetzt sieht es ziemlich toll aus. Es hat tatsächlich eine sehr schöne Welle erzeugt. Ich hoffe, Ihnen ist jetzt klar, wie wir diese Web-Kreis-Animation erstellen können Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 9. Animierter Button mit CSS-Animation: Hallo zusammen. In diesem Tutorial werden wir diese nette, zitternde O-Animation für unseren Button erstellen zitternde O-Animation für unseren Button Wie Sie sehen können, wenn ich meine Karte auf dieses Element bewege , wackelt es am Um diese Schaltfläche zu erstellen, werden wir eine CSS-Animation verwenden Ich möchte CSS-Keyframe-Animation sagen. Mal sehen, wie wir diesen Wackeleffekt erzeugen können. Lass uns in den Studio-Code springen. Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit Live Server-Erweiterung und erstelle bereits ein STMA-Dokument mit dem Namen Index Dot TML Zunächst erstelle ich in meinem Body-Tag ein Anker-Tag, A, und hier gebe ich Hober me Ihr ich. Und wie Sie sehen können, verlinke ich bereits mit CSS im Stylefile-Stil. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, bis Sie diese Datei eingerichtet haben, können Sie das Anker-Tag in meinem Browser sehen . Als Nächstes werde ich auf die CSS-Seite springen. Hier werde ich zuerst den Körperteil, den Körper, stylen. Dann heißt es in der CLI, dass ich zuerst unserer Körpergröße eine Höhe von Hermon zuweisen werde, um die Viewport-Höhe von 100 zu verwenden Dann definiere ich auf diese Weise Flocken anzeigen, weil ich die Schaltfläche in der Mitte dieser Seite platzieren möchte Deshalb verwende ich diese Flocken. Rechtfertige Inhalte, begründe Inhalte zentriert. Außerdem ein Einzelpostenzentrum. Nachdem Sie diese Datei eingerichtet haben, wird, wie Sie sehen können , dieses Anker-Tag besonders und horizontal in der Mitte dieser Seite wiedergegeben . Als Nächstes füge ich diesem Körper einen dunkelgrauen Hintergrund hinzu. Hier gebe ich Hintergrund ein, und ich werde sagen, dass Hintergrund das Tag 222 hat. Es wird dunkelgrau sein. Dann werde ich das Anker-Tag ins Visier nehmen. A, und in den Cali-Versen werde ich zuerst die unterstrichene Textdekoration entfernen Ich werde keinen daraus machen. Danach werde ich Farbe und Farben definieren, und hier möchte ich die weiße Farbe verwenden, Weiß. Wie Sie sehen können, deutet mir das bereits auf Anstand und Wert Als Nächstes werde ich die Schriftfamilie definieren. Schriftfamilie, und hier werde ich Sensai verwenden Danach werde ich die Schriftgröße definieren. Schriftgröße, ich werde 40 Pixel verwenden. Dann definiere ich Rahmen, Rahmen und hier verwende ich einen durchgehenden Rahmen mit drei Pixeln. Danach definiere ich Aquarell, Weiß, und ich werde diese Datei einrichten Dann definiere ich ein gewisses Maß an Polsterung von oben und unten Polsterung von oben und unten, ich verwende 40 Pixel und links und rechts, ich werde 80 Pixel verwenden und ich werde diese Datei einstellen Stellen Sie diese Datei ein , so sieht unser Button aus. Als Nächstes verwende ich Transition Propriety. Transition und hier möchte ich den Übergang zu all dieser Eigenschaft ausführen und ich werde die Zeit festlegen Die Übergangszeit beträgt 0,3 Sekunden. Ich werde das auf fünf einstellen . Als Nächstes erstelle ich einen Hover-Selektor für dieses Anker-Tag Hier werde ich Anker A, Colon, Hovl binden. Dann werde ich in der CaribaSF-Immobilie werde ich Bei der ersten Eigenschaft werde ich Border verwenden. Ich möchte den festen Rahmen mit drei Pixeln ändern, durchgehend. Und hier werde ich Farbe definieren, andere Farbe. Also hier setze ich die Farbe A auf vier, vier, A vier, vier, 336, diesen Farbcode. Diese Art von oranger Farbe orangerot. Ich werde diese Datei einrichten. möchte ich auch die Textfarbe ändern. Jemand verwendet dieselbe Textfarbe. Also kopiere ich den Farbcode und gebe Farbeigenschaft, Farbe ein. Ich füge diese Syn-Textfarbe ein. Ich werde diese Datei einrichten Nachdem ich diese Datei eingerichtet habe, kannst du die Sünde sehen, wenn ich den Mauszeiger So hat es die Rahmenfarbe geändert, auch die Schriftfarbe Lassen Sie uns nun den Animations-Keyframe für die Animation erstellen Animations-Keyframe für die Animation Geben Sie also Keyframes mit der Geschwindigkeit ein und unser Keyframe-Name ist Shake , weil wir diese Taste mit dieser Animation schütteln werden diese Taste mit dieser Animation schütteln Dann möchte ich innerhalb der Aliase, den ersten 33% der Dauer, in den ersten 33% der Dauer, das ganze Element um zehn Grad drehen Ich möchte Transform Property, Transform eingeben und ich werde Rotate Value, Rotate verwenden Ich möchte dieses Element um zehn Grad und zehn Grad drehen, um die Folie zu beenden Bei 33% der Dauer wird das Element um zehn Grad gedreht Dann dubiere ich diesen Abschnitt und hier sage ich 66%, 66% der Dauer Ich möchte dieses Element um minus zehn Grad drehen. Ich möchte sagen, entgegengesetzte Richtung, Lippenseite. Dann, bei 100% der Dauer, möchte ich dieses Element wieder auf die rechte Seite drehen , also verwende ich positive zehn Grad und stelle diese Datei ein. Wenn ich jetzt mit meinem Auto über diese Taste fahre, möchte ich das als Animation bezeichnen Ich werde diese Animation in Hobart Selector aufrufen. Also, wir geben Animation ein und unser Animationsname ist Form. Als Nächstes werde ich die Animationsdauer angeben , die 0,3 Sekunden beträgt. Dann ist die Animationsrichtung linear. Danach müssen wir uns die Animationszeit vertreiben. Wie oft wollen wir diese Animation ausführen? Ich gebe Animation Introduction Count Value One ein. Das ist es. Wenn ich nun diese Datei einstelle und mit dem Mauszeiger auf diese Schaltfläche fahre, können Sie diesen schönen Animationseffekt sehen Das ist eine wunderschöne Wackelanimation. Wenn ich mit dem Cursor auf diese Taste fahre, wackelt sie, wie Sie sehen können , innerhalb von 0,3 Sekunden Zuerst wurde die Taste auf der rechten Seite, dann die Taste auf der linken Seite und dann wieder die Taste auf der rechten Seite weitergeleitet Wenn ich die Dauer verlängere, fünf Sekunden daraus mache und dann diese Datei und wer auch immer meine Karten sind, darauf setze, können Sie jetzt feststellen , dass die Taste zuerst nach rechts geneigt wird Taste zuerst nach rechts geneigt Dann, nach zehn Grad, wird sie nach links gedreht, dann wieder nach rechts gedreht und die Animation ist innerhalb von 5 Sekunden abgeschlossen. Für eine bessere Erfahrung verwende ich den vorherigen Wert 0,3 Sekunden. Ich hoffe, jetzt ist Ihnen klar , wie wir Animations-Keyframes in unseren Schaltflächen anwenden können Animations-Keyframes in unseren Schaltflächen anwenden Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt 10. CSS3 3D-Animationseffekte für Rotation: Hallo Leute. Schön, dich wieder zu sehen. Ich bin wieder mit einer neuen projektbezogenen CSS-Animation zurück. In diesem Projekt werden wir eine CD-Rotationsanimation erstellen. Und hier können Sie die Demonstration sehen, wie es rotiert und wie es sich verschiebt. also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, praktisch lernen und sehen, wie wir diese Art von Drei-D-Animation erstellen können Hier können Sie nebeneinander sehen, ich meinen Visual Studio-Koordinator und meinen Browser mit der Lip-Servererweiterung öffne und meinen Browser mit der Lip-Servererweiterung und bereits eine TMLFle mit dem Namen Index Dot E stim erstelle Und ich verlinke diese Datei auch mit unserer Datei Style Dot CSS. Also werde ich zuerst innerhalb des Body-Tags ein DevTef erstellen und außerdem werde ich eine Klasse festlegen Klassenbox. Dann setze ich dieses Dip-Tag, ich werde das Dip-Tag D erstellen und dann eine beliebige Klasse für dieses Dip-Tag festlegen. Dann erstelle ich in diesem Dip-Tag insgesamt vier Span-Tags, Span. Und ich werde dieses Span-Tag dreimal duplizieren. Jetzt sind wir PlotLF Span Tag. Wenn ich diese Datei einstelle, können Sie in meinem Browser nichts sehen. Also haben wir unseren TML-Teil erfolgreich erledigt. Lassen Sie uns nun in die Styler-CSS-Datei springen und mit dem Stylen unserer Elemente beginnen Zuerst fange ich mit dem Bodytag an. Also hier werde ich Körper eingeben. Dann sagtest du, die CalSSF, ich werde Margin Property verwenden , Margin Zero Dann werde ich die Padding-Eigenschaft verwenden. Polsterung, Null. Unsere zweite Eigenschaft ist der Hintergrund. Hintergrund, und ich werde eine Hintergrundfarbe festlegen. Dafür werde ich RGV do RGB verwenden. Für Rot werde ich 66 verwenden. Außerdem werde ich für Grün 66 verwenden und für unser Blau werde ich 66 verwenden. Wenn ich diese Datei einstelle, füllt sie, wie Sie sehen können, unsere Seite mit dunkelgrauer Farbe. Sie können jede Farbe verwenden, wie Sie möchten. Und jetzt werde ich diesen Box-Bereich stylen. Dafür wähle ich Punkt oder Klassenname ist Box. Dann ist die erste Eigenschaft von AlisSo Position, Position absolut Unser nächstes Objekt ist top top. Ich möchte es in der Mitte der Rede positionieren. Deshalb werde ich 50 , 50% bestehen. Unser nächstes Eigentum ist es, es ist auch zu 50%. Dann verwende ich die Transform-Eigenschaft Transform. Hier werde ich Prospective Perspective verwenden. Perspektive 1.000 Pixel. Ohne Perspektive funktioniert unser Drei-D-Modell nicht richtig. Als Nächstes sage ich Dan mit einer Breite von 200 Pixeln, dann Höhe und Höhe von 300 Pixeln. Außerdem müssen wir eine andere Eigenschaft verwenden, bei der es sich um einen transformierten Stil handelt. Transformieren Sie den Stil, ich werde Preserve Three D verwenden. Und jetzt müssen wir diesen Stil anpassen, tief in diesem übergeordneten D also wähle ich den Punkt Box Space D. Dann innerhalb AlivSo ist die erste Eigenschaft Position, Position absolut, Position absolut, und unsere zweite Eigenschaft ist top top, Null Und ich werde auch P Null verwenden. Dann werde ich Höhe und Breite zu diesem Div-Element sagen . Mit 100%. Auch Höhe, 100%. Lassen Sie uns nun eine Hintergrundfarbe festlegen und sehen, wie sie aussieht. Hintergrund Ich werde weiße Farbe verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier kannst du sehen, dass es eine Box erzeugt, aber sie ist nicht in der Mitte dieser Seite ausgerichtet. Jetzt müssen wir dieses Feld in der Mitte dieser Seite ausrichten. Dafür verwende ich hier Calc Value. Lass es mich dir zeigen Also hier werde ich die Berechnungsfunktion, CALC, eingeben. Dann müssen wir innerhalb der runden Strophen die Position berechnen Wie Sie sehen können, beträgt unsere Höhe 300 Pixel Hier gehe ich auf minus 150 Pixel. Ab 50% des Positionshabens der Höhe, das sind 150 Pixel. In ähnlicher Weise werde ich die Cal-Funktion für unsere Hubposition verwenden . CALC liegt bei einer Umdrehungszahl von 50% minus Hier können Sie sehen, dass unsere Breite 200 Pixel beträgt, also gehe ich auf -100 Wenn ich nun diese Datei einstelle, wie Sie sehen können, befindet sich unser DV jetzt genau in der Mitte dieser Seite . Dann zurück zum DIP-Bereich, und hier verwende ich Eigenschaft transform style, transform, transform style, formed style, pres up drei D. Und jetzt müssen wir unsere Span-Tags, die sich in diesem DIP-Tag befinden, stylen die sich in diesem DIP-Tag befinden Also wähle ich hier Dot Box, Space, Dave Space, Span Dann ist innerhalb von Alibasso die erste Eigenschaft Position, Position absolut Und bei Null ist es auch Null. Unsere nächste Eigenschaft ist Display, Display, und hier werde ich Block verwenden. Da wir mit Höhe bei 100% Höhe einstellen müssen , 100%. Und dann werde ich den Hintergrund einstellen. Hintergrund. Und für den Hintergrund verwende ich einen linearen Farbverlauf und einen linearen Radiant. Zuerst müssen wir den Gradientenwinkel übergeben, und unser Gradientenwinkel ist Null Grad. Und hier werde ich drei Farben anbieten. Unsere erste Farbe ist Dollar, wenn einer, wenn einer, wenn einer. Fangen wir mit dem Krankenband an. Jetzt kannst du es deutlich sehen. Dann hat unsere nächste Farbe Tag B, B B. Es ist eine hellgraue Farbe, und unsere dritte ist auch dass ich diese Farbe wieder verwenden werde. Kopiere die Farbe und füge sie hier ein. Wenn ich diese Datei einstelle, kannst du hier die Verlaufsfarbe sehen. Es beginnt mit hellgrauer Farbe, dann etwas dunkelgrauer Farbe und wieder hellgrauer Farbe. Und dann sage ich Grenzradius zu dieser Verlaufsfarbe. Lass es mich dir zeigen. Grenzradius, 20 Pixel. Wenn ich diese Datei einstelle, siehst du den Randradius an der Ecke. Lassen Sie uns nun die Hintergrundfarbe aus dem übergeordneten Div-Element entfernen . Also, um diese Zeile auszukommentieren und noch einmal festzulegen. Jetzt kannst du dir das Ergebnis ansehen. Jetzt müssen wir alle Senteg nacheinander auswählen. Dafür wähle ich, ich gebe Punkt, Box, Leerzeichen, Bev Leerzeichen, Span Doppelpunkt n-tes Kind n-tes Kind eins. Dann werde ich in der Versus-Runde eine Eigenschaft namens transform verwenden Transformieren. Ich möchte unser erstes Kind in X-Richtung rotieren lassen. Also hier gebe ich Rotate in, Rotate X ein und ich möchte es um Null drehen. Und dann wähle ich den gesamten Abschnitt aus und dupliziere ihn. Und jetzt wähle ich unser zweites Kind aus. Und ich möchte diesen in XS-Richtung um 45 Grad drehen. Dann werde ich noch einmal duplizieren. Und jetzt wähle ich das dritte Kind aus. Hier sage ich Drehwinkel -45 Grad. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Einer nach dem anderen wechseln wir unsere Ersatzartikel ab. Dann wähle ich den ganzen Abschnitt und dupliziere ihn noch einmal und dieses Mal wähle ich das vierte Kind aus. Jetzt stelle ich den Drehwinkel auf 90 Grad ein. Da ich diese Datei einstellen werde. Jetzt werde ich den gesamten Abschnitt in YX-Richtung drehen den gesamten Abschnitt in YX-Richtung Dafür verwende ich nach dem Prospective die Option Y-Rate Y. -45 Grad. -45 Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt sieht es aus wie drei Objekte und Sie können den gesamten Teil des Span-Tags sehen. Jetzt müssen wir mit unserem letzten Teil arbeiten, dem Animationsteil. Hier nenne ich unsere Animationseigenschaft Animation. Oder der Animationsname ist Animate. Und unsere Animationsdauer beträgt fünf Sekunden. Und unsere Animationsrichtung ist linear. Ich möchte diese Animation unendlich lang laufen lassen. Also werde ich hier Animation Iteration Count Infinite verwenden Animation Iteration Count Infinite Und jetzt müssen wir den Keyframe für diese Animation erstellen den Keyframe für diese Also werde ich den Namen der Animation kopieren. Endlich werde ich den Keyframe mit der Geschwindigkeit Keyframe, Keyframes erstellen der Geschwindigkeit Keyframe, und unser Animationsname Dann verwende ich statt der Kaliber hier den Prozentwert bei einer Position von Innerhalb der Aliase werde ich Transform Bbalty Transform verwenden Transformieren. Zuerst sage ich prospektiv. Voraussichtlich 1.000 Pixel. Nach prospektiv werde ich sagen, X-Wert drehen. Drehen, x0t. Dann werde ich diesen Abschnitt duplizieren und bei 100% -Position Drehung um 359 Grad einstellen Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier kannst du sehen, wie es unser Objekt schon rotiert. Diese Drei-D-Rotation sieht sehr nett aus. Ich hoffe, jetzt ist es für Sie klar, wie wir diese Drei-D-Rotations-Animation erstellen können. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 11. Animierte Regenwolke Teil 1: Schön euch zu sehen. Ich bin wieder mit einem neuen CSS-Animationsprojekt zurück. Und in diesem Projekt werden wir Rainy Cloud erstellen. Es ist ein sehr fortgeschrittenes CSS-Animationsprojekt , weil wir Variablen verwenden werden. Schauen wir uns die Demonstration an, wie sie aussieht. Wie Sie auf Ihrem Bildschirm sehen können, fallen Regentropfen aus den Wolken und verschwinden auf dem Boden, und Sie können Regentropfen zufällig wahrnehmen Lassen Sie uns sehen, wie wir dieses Projekt erstellen können, ohne Ihre Zeit zu verschwenden sehen, wie wir dieses Projekt erstellen können Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung, und ich erstelle bereits eine Indexpunkt-TML-Datei, und ich erstelle auch eine Style-Punkt-SASS-Datei Wie Sie sehen können, verknüpfen wir unsere Style-Datei mit diesem ETML-Dokument Und wie Sie wissen, müssen wir mit der HTML-Struktur beginnen. Zuerst werde ich einen Container erstellen , der Cloud und Ring enthalten wird Ich werde einen Punktcontainer der Klasse D erstellen. Wie Sie sehen können, erstellen wir eine Klasse namens Container. Dann werde ich in diesem Container Dev Cloud erstellen. Hier werde ich eine weitere De Dev Cloud erstellen. Ich werde diese Datei einrichten. Jetzt gehe ich in den Style-Bereich, die Style-Dot-CSS-Datei . Zuerst wähle ich die Dokumentseite mit Universal Slip aus, also gebe ich Star ein. Dann verwende ich in der Liss zuerst die Margin-Eigenschaft Marge Null. Damit werde ich auch Padding, Padding, also Zero verwenden Padding, also Zero Dann verwende ich die Boxgrößeneigenschaft, die Boxgröße, und hier verwende ich Bader Box V. Standardmäßig gibt es in diesem Dokument keinen Rand zu spät Jetzt werde ich unseren Bodytag stylen. Hier werde ich den Körper binden. Dann benutze ich in der Cali-Resis zuerst die Spieleigenschaft, das Display. Flex anzeigen Als Nächstes verwende ich Justify content, Justify content center. Außerdem müssen wir eine andere Eigenschaft verwenden, nämlich Elemente ausrichten. IMs mittig ausrichten. Wenn du dich mit Flexbox und Greed nicht auskennst, dann kannst du dir meinen Kurs ansehen Und dann werde ich die Mindesthöhe für diese Seite angeben. Also, um Mean Height, Mean Height, Hundert H einzugeben. Unsere nächste Eigenschaft ist Hintergrund. Hintergrund, und ich werde Hintergrundfarbe sagen. Und hier werde ich etwas Dunkelgraues sagen. Dunkelgrau. Ich möchte etwas dunklere Farbe. Ich wähle Farbe, diese, und ich werde diese Datei einstellen. Diese Farbe ist zum Beispiel gut und Sie können Ihre eigene Farbe wählen. Jetzt müssen wir den Container-Bereich stylen. Ich werde diesen Container-Klassennamen hierher kopieren und Dot Container eingeben. Dann ist innerhalb der Cliras unsere erste Eigenschaft eigentlich die Position Außerdem werde ich Höhe für diesen Container sagen, Höhe etwa 400 Pixel Ich werde diese Seite einstellen. Jetzt müssen wir den Cloud-Teil entwerfen. Also, um den Klassennamen Cloud und dann einen Container, Amsltt Cloud, zu kopieren dann einen Container, Amsltt Cloud, In der Cali-Resis ist dann unsere erste Eigenschaft die Position, die Beziehung zur Position Außerdem werde ich sagen, dass es in der Höhe dieser Wolke mit 320 Und Höhe, 100 Pixel. Dann sage ich Hintergrundfarbe, Hintergrund und ich verwende weißen Hintergrund. Dafür verwende ich Hexadezimal mit dem Tag if if Wenn ich diese Datei einstelle, entsteht, wie Sie sehen können , ein Rechteck und wir müssen ihr eine runde Form geben Deshalb werde ich den Grenzradius Cuperty Border Radius, Border Radius, 100 Pixel verwenden Grenzradius Cuperty Border Radius, Border Radius, 100 Lassen Sie uns die Datei und C einstellen. Außerdem werde ich sie von oben positionieren Hier verwende ich die Top-Eigenschaft, obersten 50 Pixel. Ich werde diesen einstellen. Um ihm die Form einer Wolke zu geben, müssen wir den Posius-Selektor verwenden Hier werde ich vorher einen Posius-Selektor für die Wolke, die Wolke und den Doppelpunkt erstellen Doppelpunkt Dann werde ich in den Kaliven Blank erstellen . Blank enthält im Grunde genommen leer, ich werde eine Kopie dieser Wolke erstellen Die nächste Eigenschaft ist Position Position, und dieses Mal verwende ich Absolute Obsolt Als Nächstes möchte ich diese neue Cloud an diese Position verschieben. Dafür müssen wir die Eigenschaft top -50 Pixel verwenden. Dann werde ich mich in die Höhe dieser Wolke begeben. Wir 110 Pixel. Außerdem werde ich Höhe, Höhe und auch 110 Pixel einstellen . Und dann werde ich die Hintergrundfarbe einstellen. Hintergrund und als Hintergrundfarbe werde ich auch Weiß einstellen. Ich werde diese Datei einstellen. Jetzt müssen wir ihm eine runde Form geben . Dafür müssen wir den Grenzradius verwenden. Grenzradius, 50%. Ich werde diesen einstellen. In die Mitte des müssen wir die Lippenseite des Kreises bewegen. Hier verwende ich die Lift-Eigenschaft, p p 40 Pixel. Wenn ich zufrieden bin, können Sie das Ergebnis sehen. Jetzt müssen wir hier eine weitere Kreisform erstellen , um eine perfekte Wolke zu erstellen. Dafür werde ich einen soliden Boxschatten erstellen . Lass mich dir zeigen, wie. Hier verwende ich Box Shadow Property, Box Shadow. Zuerst müssen wir diesen Schatten positionieren. Von oben gebe ich 90 Pixel an. Von rechts gebe ich Null. Von unten gebe ich ebenfalls Null und von links gebe ich 30 Pixel. Endlich werde ich diesem Boxschatten eine Volltonfarbe geben . Hier werde ich binden, hat ein Etikett, weiße Farbe, wenn wenn wenn. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, erstellen wir mit DML und CSS die perfekte Wolkenform Im nächsten Teil dieses Projekts werden wir erstellen. Vielen Dank, dass Sie sich dieses Video angesehen haben. Wir sehen uns im nächsten Teil. 12. Animierte Regenwolke Teil 2: Was für ein Profi ihr, das ist der zweite Teil dieses Projekts. Im vorherigen Teil haben wir erfolgreich die Cloud erstellt. Aber in diesem Teil werden wir die Regentropfen kreieren. Also, ohne Ihre Zeit zu verschwenden, lassen Sie uns damit beginnen. Zuerst werde ich ein Deep-Tag erstellen, das Regentropfen enthalten wird Tiefer Punkt RL. Wie Sie sehen können, erstellen wir in der Klasse ein tiefes Element. Dann werde ich in diesem tiefen Element mehrere Span-Tags für unsere Regentropfen erstellen Also hier, in diesem Deep-Tag, werde ich ein Span-Tag erstellen Dann werde ich das Style-Attribut in diesem Planstil verwenden. Hier werde ich CSS-Variablen verwenden. Ich weiß, es klingt ein bisschen fortgeschritten, aber es ist ziemlich effektiv, eine CSS-Variable zu löschen, wir müssen Dads Sin verwenden Lassen Sie mich Ihnen zeigen, wie Bindestrich und unser Variablenname I ist, dann müssen wir Doppelpunkt verwenden Dann müssen wir l verwenden, um unsere Variable zu setzen. Nach dem Doppelpunkt müssen wir den Wert angeben. Als Wert gebe ich hier eine Zufallszahl ein, etwas 11. Insgesamt werde ich 20 Regentropfen verwenden, aber Sie können so viel verwenden, wie Sie möchten. Ich werde diese Zeile hier duplizieren, ich werde 12 bestehen. Andererseits werde ich diese Zeile hier duplizieren , ich werde zehn übergeben. Sie können eine Zufallszahl verwenden, jede beliebige Zufallszahl. Es ist ein Pre. Um es noch einmal zu duplizieren, werde ich 14 verwenden. Dann wieder werde ich 18 verwenden. Lassen Sie uns diesen Abschnitt zuerst weiterleiten, um Ihnen Zeit zu sparen. Und dann werde ich diesen Arbeitsabschnitt erneut duplizieren. Ich kreiere 20 Regentropfen mit dem Span-Tag. Wenn ich diesen Stil festlege, wie Sie sehen, ist hier nichts Paradies. Jetzt müssen wir die Regentropfen in unserer SSS-Datei stylen. Ich möchte den Klassennamen Reign in unsere Style-Datei kopieren, ich werde diese Klasse auswählen, Innerhalb der Kalibranzen ist unsere erste Eigenschaft dann Position, Position relativ Unsere zweite Eigenschaft ist Display, Display Flex. Und unsere dritte Eigenschaft ist der Z-Index. Z Index eins. Jetzt müssen wir die Regentropfen stylen. Dazu müssen wir rain und spantag auswählen. Dafür gleichen wir sected SpantaGrg space, span gleich sected Fügen Sie dann die erste Eigenschaft AlibaSo ein, dass sie relativ positioniert ist. Unsere nächste Eigenschaft ist dnwidth height, zehn Pixel, also width zehn Pixel Jetzt stelle ich die Diagrammfarbe für unsere Regentropfen ein. Hier verwende ich die Diagrammeigenschaft, Hintergrund rot. Lassen Sie uns die Datei einrichten und sehen, was passiert ist. Wenn ich diese Datei einstelle, sieht sie, wie eine Staatsgrenze aus, aber das sind alles 20 Regentropfen Nehmen wir etwas Polster gegen unseren Regen. Hier verwende ich die Eigenschaft Padding, Padding. Zuerst verwende ich für oben und unten Null und für links und rechts 20 Pixel Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dann müssen wir einen gewissen Spielraum zwischen den Regentropfen schaffen. Dafür müssen wir die Margin-Eigenschaft verwenden. Marge. Für oben und unten verwende ich Null und von links und rechts verwende ich zwei Pixel. Jetzt können Sie sehen, dass unsere Regengötter perfekt organisiert sind, und jetzt müssen wir die runde Form der Regengötter beibehalten oder dass wir die Eigenschaft Grenzradius verwenden müssen. Hier gebe ich Grenzradius ein. Grenzradius, 50%. Lassen Sie uns die Datei einrichten und Sie können das Ergebnis sehen. Jetzt wird es gesendet, um die Animation zu erstellen. Ich werde die Animationseigenschaft verwenden. Animation. Unser Animationsname ist animate. Und unsere Animationsdauer beträgt fünf Sekunden. Außerdem ist die Richtung linear. Endlich müssen wir die Anzahl der Animationsiterationen angeben, die unendlich ist, weil ich den Bereich unendlich verfolgen möchte Fügen wir nun den Keyframe zu dieser Animation hinzu. Ich gebe bei den roten Keyframes unseren Animationsnamen animate ein Dann verwende ich in den Kelchen zuerst bei einer Position von 0% die Transformationseigenschaft, transformieren und ich möchte diese roten Punkte nach unten bewegen Deshalb müssen wir Translate Y verwenden. Translate Y. Ich möchte unsere Rotpunkt-Animation bei einer Position von 0% starten Deshalb übergebe ich Null. In ähnlicher Weise werde ich diese Linie duplizieren und bei einer Position von 70% möchte ich sie um 300 Pixel nach unten verschieben Deshalb werde ich 300 überschreiten. Auch bei einer Position von 100% möchte ich 300 Pixel verwenden. Lassen Sie uns die Datei unterladen und sehen, ob sie richtig funktioniert hat oder nicht. Wie Sie sehen können, funktionieren Animationen perfekt mit der Eigenschaft Translate Y, ich möchte die Eigenschaft scale verwenden. Bei einer Position von 0% skalieren, ich möchte sie einmal skalieren. Bei einer Position von 70% möchte ich sie noch einmal skalieren, aber bei einer Position von 100% möchte ich sie auf o skalieren. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Wie Sie sehen können, sind unsere Regentropfen verschwunden, wenn sie in den Boden fallen, und sie kehren nicht wieder zur alten Position zurück, da wir den Skalenwert Null bei einer Position von 100% verwenden Deshalb ist es verschwunden wenn es zu Boden gefallen ist Jetzt müssen wir die Ausgangsposition der Transformation ändern. Hier werde ich Transformationen verwenden, und ich werde Bottom Val verwenden dann kommt der wichtigste Teil dieses Projekts Hier kannst du sehen, wie die Regentropfen zusammen fallen, aber ich möchte nicht, dass Regentropfen auf diese Weise fallen Ich möchte, dass die Regentropfen nacheinander zufällig fallen. Und um das zu tun, müssen wir mit der Eigenschaft der Animationsdauer spielen Wenn wir die Animationsdauer ändern, alle Regentropfen nacheinander nach dem Zufallsprinzip Wenn Sie sich erinnern, wie Sie in meiner SML-Datei sehen können, erstellen wir unser Span-Tag mit Variable und unsere Variable lime ist I und wir geben dieser Variablen einen zufälligen Wert , 16, 11, 12 usw. Ich werde diesen Zufallswert verwenden, um einen tatsächlichen Ring zu erstellen. Kehren wir zur CSS-Datei zurück, und hier verwende ich die Eigenschaft Animationsdauer, Animationsdauer. Außerdem werde ich die Cal-Funktion verwenden, eine Funktion von CSS, und ich möchte 15 Sekunden mit oder Variable I teilen. Hier gebe ich ein, wo dann innerhalb der Rundkleider unser Variablenname ist, dass ich unsere Variable nenne, wir müssen Bindestrich verwenden, dann I. Wenn ich diese Datei setze, können Sie jetzt sehen, dass unsere Regentropfen zufällig fallen. Es sieht sehr hübsch aus und jetzt sieht es aus wie echte Regentropfen. Wir müssen die Farbe der Regentropfen ändern, und dafür werde ich weiße Farbe verwenden. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie perfekt funktioniert. Unser Projekt ist fast fertig, wir müssen den Boden anlegen und um einen Teil des Bodens in Death Place anzulegen, müssen wir das Grundstück Border Bottom nutzen. Wir müssen hier einen Container finden, ich gebe Border Bottom ein. Ich werde einen Rahmen mit zwei Pixeln verwenden. Außerdem möchte ich einfarbig für unseren Rand, einfarbig unsere Rahmenfarbe ist weiß, wenn überhaupt. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Da wir die Regentropfen vom Boden entfernen müssen. Hier gebe ich die unteren zehn Pixel ein. Ich habe diese Datei eingestellt, jetzt hat sie perfekt funktioniert. Wir haben unser Cloud- und Regenprojekt erfolgreich abgeschlossen. Ich hoffe dir gefällt dieses Video. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 13. CSS wird geladen: Schön euch zu sehen. Ich bin wieder mit einem neuen Animationsprojekt zurück. Und wie Sie in dieser Animation sehen können, wie die Ladeanimation funktioniert. , ohne Ihre Zeit zu verschwenden Lassen Sie uns also sehen, wie wir es erstellen können Hier können Sie also nebeneinander sehen, ich meinen Visual Studio-Code-Editor und meinen Browser mit der L-Servererweiterung öffne und meinen Browser mit der L-Servererweiterung und bereits ein HTML-Dokument mit dem Namen Index Dot HTML erstellt habe dem Namen Index Dot HTML Damit können Sie auch Ihre CSS-Datei erstellen oder gestalten. Also werde ich zuerst innerhalb des Body-Tags das H-Two-Tag erstellen. H zwei. Und in das HT-Tag werde ich Blod eingeben. Dann Punkt Punkt Punkt Aber in meinem H-Two-Tag werde ich Data Art verwenden. Hier gebe ich Daten, Datentext ein. Dann werde ich, wie im Doppelkurs, den gleichen Text beim Laden bestehen. Kopiere den Text und füge ihn in den Doppelkurs ein. Wenn ich diese Seite eingerichtet habe, kannst du die Takes in meinem Browser sehen . Dies ist unser Schätzungsteil. Jetzt müssen wir in die CSS-Datei springen. Zuerst importiere ich ein Formular. Lass mich schießen. Hier sehen Sie, ich importiere Pop in Sporm und die Schrift ist 700, das ist fett gedruckt, und jetzt wähle ich Universal Selector Star innerhalb der Caliss oder erste Eigenschaften Rand, Null oder zweite Eigenschaften Padding Padding ebenfalls Null oder dritte Eigenschaft ist Boxgröße, Boxgröße, und hier verwende ich Border Box Und dann verwende ich Schriftfamilieneigenschaft, Schriftfamilie, Schriftfamilie, und hier werde ich Pop-Ins verwenden. Diese Schrift ist von Sensory Family. Sopkoma Ich werde Sanseri eingeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier siehst du das Font-Ergebnis. Sie können jede Art von Schrift verwenden. Es liegt an dir. Lassen Sie uns jetzt unseren Körperteil kacheln. Ich benutze Körper. Körper innerhalb des Alias ist unsere erste Eigenschaft, die angezeigt wird, und ich werde Flachs verwenden Ich möchte diesen Text in der Mitte der Rede platzieren. Deshalb werde ich Flex verwenden. Dann ist unsere nächste Eigenschaft Justify Content, Justify Content Center. Außerdem werde ich diesen Artikel ausrichten. Objekt mittig ausrichten. Wenn ich diese Datei eingestellt habe, können Sie den Grund sehen. Dann sage ich Mindesthöhe. Hier gebe ich Mindesthöhe, Mindesthöhe, 100 VH Damit möchte ich auch Hintergrund sagen. Für den Hintergrund werde ich RGV-Farbe, RGB, verwenden. Sie können auch jede dunklere Farbe verwenden, aber hier werde ich etwas Breite drei verwenden, Grünwert ist 40 und der Blauwert ist 53. Wenn ich diese Datei einstelle, können Sie die sehen. Sie können jede schmutzige Hintergrundfarbe verwenden. Es liegt an dir. Als Nächstes werde ich dieses H bis zur Krawatte stylen. Hier werde ich H zwei binden. Dann gebe ich in der Leber Position ein Relative Position. Unsere nächste Eigenschaft ist die Schriftgröße. Schriftgröße. 14 VW. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt sieht es perfekt aus. Und jetzt werde ich die Schriftfarbe einstellen. Hier werde ich Farbe binden und dieselbe RGV-Farbe verwenden Ich kopiere den Wert und füge ihn hier ein. Ich werde diese Datei einstellen, und jetzt können Sie sehen, dass sie mit der Hintergrundfarbe übereinstimmt. Deshalb können Sie die Farbe nicht sehen. Unser nächstes Hotel ist Taketro. Dafür werde ich wieder RGV-Farbe verwenden. Aber dieses Mal werde ich den Schleier wechseln und unser ist zwei, 108, und für Blau werde ich 146 verwenden Wenn ich diese Datei einstelle, kannst du diesen Strich immer noch nicht sehen, weil wir nicht Strich sagen. Deshalb werde ich 0,3 VW bestehen. Wenn ich diese Datei eingestellt habe, können Sie jetzt den Grund sehen. Sie können diesen Hub auch erhöhen. Es liegt an Ihnen, und jetzt müssen wir die Form mit Poseo Select replizieren Dafür gebe ich vorher H mit zwei Doppelpunkten ein. Dann sind die Kalorien oder die ersten Eigenschaften enthalten. Und hier werde ich die Wasserfunktion verwenden. Jetzt müssen wir dieses Attribut, den Datentext, übergeben. Ich kopiere dieses Attribut und hier übergebe ich den Datentext. Wenn Sie es bemerken, können Sie unseren Datentext sehen und unser Inhalt ist ähnlich. Aus diesem Grund wird dasselbe Replikat erstellt. Unsere nächste Immobilie ist Position. Ich möchte sie als absolut positionieren. Dann müssen wir Top Pedal Top Zero benutzen, P ebenfalls Null. Dann würde ich sagen, wir wiegen vorerst, ich werde 30 Pixel überschreiten. Wenn ich diese Datei einstelle, siehst du nichts weil wir für dieses Element keine Farbe und Höhe festlegen . Dafür verwende ich die Höheneigenschaft. Höhe, 100%. Außerdem werde ich Farbe verwenden. Farbe und hier werde ich eine hexadezimale ID verwenden, Hashtag 01 FE 87. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Im Moment setze ich auf Null. Es wird sich auf nichts auswirken. Später werde ich dir zeigen, warum wir es mit Eigentum benutzen müssen. Bevor ich irgendwas mache, möchte ich diesen Text in Großbuchstaben haben. Hier verwende ich die Texttransformationseigenschaft, aber vorher verwende ich Semikolon Dann gebe ich Text Transform Text Transform Und dann müssen wir auch Stroke auf diesen Klon setzen. Hier werde ich diese Eigenschaft und diesen Wert verwenden und nach Farbe werde ich sie einfügen. Aber dieses Mal werde ich den Schleier wechseln. Hier werde ich Null VH überschreiten. Schlag mit Null VH. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Falls du das bemerkt hast, kannst du hier sehen es auf diesem Klon keinen Strich gibt. Unser nächstes Grundstück ist Overflow, Overflow Hidden. Stellen Sie diese Datei ein, jetzt können Sie das Ergebnis sehen. Wie Sie sehen können, ist unsere Breite Null und Überlauf ist Null, weshalb Sie den Text nicht sehen können Aber wenn ich den Breitenwert erhöhe, lasse ich dir 40 Pixel zeigen und dann diese Datei einstelle, kannst du das Ergebnis sehen Wie Sie sehen können, fühlt es sich langsam an, wie der Text mit der Farbe aussieht. Ähnlich verhält es sich, wenn ich den Wert auf 90 Pixel erhöhe und dann diese Datei einstelle, kann man auch das Ergebnis sehen. In der Animation müssen wir mit dieser Eigenschaft W spielen . Im Moment mache ich das W auf Null und setze dann diese Datei. Als Nächstes verwende ich eine weitere Eigenschaft, nämlich border. Grenze, richtig. Rand rechts, und ich werde einen festen Rahmen mit zwei Pixeln verwenden . Solide. Außerdem werde ich eine HA-Dezimalfarbe verwenden. 01 FE 87. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn ich diesmal die Breite erhöhe, werde ich hier also 120 Pixel überschreiten und dann diese Datei einstellen. Wie Sie sehen können, sieht es so aus, als ob diese Linie die Farbe dieses Textes anpasst. Auch hier werde ich Null überschreiten. Und jetzt müssen wir mit der Animation spielen. Ich werde eine Animation erstellen. Animation und unser Animationsname ist Animate. Und ich möchte diese Animation für 6 Sekunden laufen lassen und unsere Animationsrichtung ist linear, und ich möchte diese Animation unendlich lang laufen lassen Hier werde ich Infinite verwenden. Jetzt müssen wir den Keyframe erstellen. Hier die Zeit um die Keyframes. Keyframes und unser Animationsname ist animate. Wie Sie sehen können, habe ich die falsche Schreibweise für Animate eingegeben. Deshalb werde ich es korrigieren. Ich werde den Namen animate eingeben. Dann innerhalb der Caliss bei 0%, wieder innerhalb des Cali-Widerstands, den ich mit Null einstellen werde einstellen Ich werde diesen Abschnitt duplizieren. Jetzt, bei einer Position von 70%, werde ich auf 100% setzen. Wenn ich diese Datei einstelle, können Sie die Animation sehen, wie sie funktioniert hat, sie hat perfekt funktioniert. Wenn ich mit einem Prozentwert von 0% spiele, werde ich 10% überschreiten. Außerdem werde ich bei 10% die 100% -Marke überschreiten. Bei einer Position von 0%, einer Position von 10% und einer Position von 100% möchte ich einen Schlag mit Null erzielen. Aber bei einer Position von 70% und einer Position von 90% dieser Animation möchte ich die Woche zu 100% sehen. Wenn ich diese Datei bearbeite, sieht sie jetzt perfekt aus, wie sie funktioniert. Das ist genau das, was wir wollen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 14. Kreative Mondzeichnung: Hallo, alle zusammen. Ich bin wieder mit spannenden projektbezogenen CSS-Animationen zurück. Heute werden wir einen dynamischen und visuell atemberaubenden Mond-Animationseffekt mit rotierendem Mond erstellen und visuell atemberaubenden Mond-Animationseffekt mit rotierendem Mond . Wie Sie sehen können, haben wir die zentrale Umlaufbahn des Mondes, und wir platzieren die Buchstaben M und N nebeneinander Der Mond kreist kontinuierlich in einer gleichmäßigen kreisförmigen Bewegung und erzeugt einen faszinierenden Effekt Und hier verwenden wir die G-Box, um die Elemente zu positionieren. Hier stylen wir dieses Element kreativ und platzieren es an der richtigen Position Und dann implementieren wir einfach eine 360-Grad-Drehanimation. Lassen Sie uns damit beginnen und sehen, wie wir es erstellen können. Wie Sie Seite an Seite sehen können, öffne ich meinen ISO-Studio-Code-Editor und meinen Browser mit Live-Servererweiterung und erstelle bereits ein STML-Dokument mit Indexpunkt in HTML Damit erstelle ich eine Style-Volkszählungsdatei und verknüpfe diese Datei mit diesem Dokument Jetzt erstelle ich in diesem Body-Tag zunächst ein DV-Element, Dev, und ich werde es benennen Ich werde einen Klassencontainer zuweisen, einen Deep-Dot-Container Deep-Dot-Container Es funktioniert wie ein Wrapper. Dieser Continuer wird alle Elemente enthalten, die für diese Animation benötigt werden Von Zeit zu Zeit werde ich die Elemente hinzufügen, wie Text, Mond usw. Lassen Sie uns nun zu dieser Kachel- oder CSS-Datei springen. Zuerst verwende ich den Universal-Selektor-Sternstern und dann innerhalb des Rundkleides hier verwende ich den Füllwert, die Abstandseigenschaft, die Polsterung Null, den Rand, also auch zo Mit dieser Boxgröße, Boxgröße, wie benutzt man die Eigenschaft Null, den Rand, also auch zo Mit dieser Boxgröße, Boxgröße, Border Box Danach werde ich Font Family verwenden. Schrift, Familie, und hier werde ich die Area-Schrift, Area verwenden. Dann wähle ich Körper aus. Ich werde das Body-Tag stylen, quasi einen engen Körper. Dann verwende ich in der ersten Eigenschaft die Hintergrundfarbe, hintergrundfarben, hintergrundfarben, und ich möchte dunkelgrauen Hintergrund verwenden, andernfalls dunkelblauen Hintergrund Also ich würde gerne dunkelgrau wählen, ein Typ hat das Tag 222 Und ich möchte zufrieden stellen. Nachdem wir diese Datei eingerichtet haben, sieht unsere Webseite so aus. Dann werde ich diesen Weg benutzen, Flix. Auf diese Weise, flix, Inhalt ausrichten, weil wir alle Elemente auf dieser Seite in die Mitte verschieben müssen , manche Art, Inhalt zentrieren, auch Element ausrichten, ausrichten, Elemente auch zentrieren. Jetzt werden alle Elemente horizontal und vertikal zentriert. Danach werde ich dieser Seite eine Höhe zuweisen. Höhe hier, ich werde 100 Viewport-Höhe zuweisen, 100 VH werde ich dieser Datei zuweisen Als Nächstes werde ich den Kontinent tiefgründig stylen . Dafür verwende ich den Klassennamen, kopiere den Klassennamen und springe in den Container für den CSS-Dateityp Punkt in der Lives der ersten Eigenschaft, für die ich Höhe verwenden werde Ich werde eine Höhe von 31 EM zuweisen. Da ich die Breite mit 31 EM zuweisen werde. Das ist es. Im Grunde ist es ein quadratischer Behälter. Damit füge ich einen weißen Rand hinzu. Dafür gebe ich Border Border Property ein, und hier verwende ich einen Pixel-Vollton und unsere Rahmenfarbe ist hataGFFF. Ich werde diese Datei unterteilen Nach dem Untersuchen dieser Datei, nachdem Sie diese Datei festgelegt haben, können Sie hier das quadratische Feld mit einem durchgezogenen Rand von einem Pixel sehen mit einem durchgezogenen Rand von einem Pixel Außerdem werde ich die Position definieren und sie absolut machen. Damit definiere ich die Farbe, ich stelle die Schriftfarbe weiß ein, vollständig sichtbar. Dann definiere ich die Schriftgröße und die Schriftgröße in Pixeln. Ich denke, 20 Pixel sind für jeden großartig. Ich werde diesen Film abonnieren. Jetzt dient der Container als Stilrahmen. Stilrahmen für unsere Animation. Jetzt ist es bereit, den Text und die Orbit-Elemente aufzunehmen. Lassen Sie uns nun in den Index zur Schätzdatei springen und diese Struktur innerhalb des Containers erstellen . Hier nehme ich insgesamt zwei Absätze vom Typ P und weise eine Klasse zu, und ich werde ihr später einen Namen geben. Und ich werde diese Zeile machen. Unser erster Absatz hat Charakter, und unser zweiter Absatz hat Charakter. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Sie können feststellen, dass es in der oberen linken Ecke positioniert ist. Als Nächstes werde ich beide Buchstaben anhand ihrer Klassennamen formatieren. Ich kopiere den Klassennamen später zurück in CSS-Datei im Stil und wähle später Punkt aus. In den Kalibrationen definiere ich zuerst Größe, Schriftgröße, irgendeine Art von Schrift, Größe und ich werde es um 3,5 Uhr, 3,5 Uhr machen es um 3,5 Uhr, 3,5 Uhr Ich werde zufrieden stellen. Nach Satisfle sieht es so aus Sie können auch eine etwas größere Schrift verwenden, es liegt an Ihnen Als Nächstes möchte ich die Buchstaben positionieren. Ich möchte einen Buchstaben auf der linken Seite und einen anderen auf der rechten Seite platzieren . Dafür werden wir Flexbox verwenden. Hier verwende ich die Anzeige der Display-Eigenschaften und mache sie flexibel. Richten Sie danach das Objekt so aus, dass es vertikal ausgerichtet wird. Dann begründen Sie den Inhalt, begründen Sie den Inhalt. Hier werde ich den Raum zwischen dem Raum dazwischen verwenden. Ich werde eine Subifyteri-Datei erstellen, so sieht es aus. Jetzt platzieren wir den Buchstaben erfolgreich auf der rechten Als Nächstes müssen wir die Umlaufbahn erstellen. Dafür müssen wir in die Indexdatei springen und zwischen diesen beiden Ledgern nehme ich ein Deep-Tag, Dev Dot Orbit Ich weise dem Dep Elegant einen Klassennamen Orbit zu. Und in diesem Element, das tief im Orbit liegt, nehme ich ein P-Tag, Absatz und einen Herm-Pass O, und ich werde diese Datei unterschreiben Jetzt können Sie feststellen, dass das O zwischen den beiden Buchstaben steht Im Grunde genommen befindet sich die Umlaufbahn de zwischen diesen beiden Buchstaben. Lassen Sie uns nun dieses Orbit-Div-Element und das P-Element, das sich innerhalb des Orbit-Div-Elements befindet, miteinander verbinden. Jetzt werde ich zu diesem Stil von CSS 5 übergehen. Hier gebe ich Orbit ein und innerhalb des CarbasSF positioniere ich es an der Position und mache es relativ Dann definiere ich Heighten für dieses Orbit-D-Element Geben Sie also Höhe ein. Hier werde ich die Höhe 18 Punkt lm fünf N zuweisen . Und ich werde diese Datei unterschreiben. Außerdem werde ich mit 18.18 0.7 5:00 AM definieren, also werde ich hier ein quadratisches Feld erstellen. also werde ich hier ein quadratisches Feld erstellen Und um dieses quadratische Feld kreisförmig zu machen, verwende ich die Randradius-Eigenschaft, Grenzradius, und ich werde es zu 50% machen Ich möchte diese Datei unterschreiben. Und um den Rand zu verstehen, bin ich gut in einem Rahmen, irgendein Typ, ich möchte einen durchgehenden Rahmen, ein Pixel, einen durchgehenden Rand, durchgehend, die Rahmenfarbe hat das Tag if if if if if F.. Jetzt können Sie sehen die Umlaufbahn die Zirkusform innerhalb dieser tiefen Kontinua ist Lassen Sie uns nun an dem P-Tag arbeiten, das sich innerhalb der Umlaufbahn befindet , irgendein Typ, Punkt, Orbit , P-Absatz dann innerhalb des entsteht. Zuerst definiere ich die Position und ich möchte sie absolut machen. Danach beende Ami den Wert 4,7 M. Ebenfalls später und übergebe, später Wert zwei EM Dann definiere ich auch die Schriftgröße, Schriftgröße, und ich mache es um 3,5 Uhr morgens Ich werde diese Datei einrichten. Nach dieser Datei platzieren wir hier diesen Kreis. Ureca diese Datei, hier platzieren wir später das O. Im Grunde möchte ich sagen, dass der Lügner O jetzt auf dem Orbitkreis positioniert ist und es genau das Aussehen gibt, das wir wollen Lassen Sie uns nun den Move erstellen. Dafür müssen wir in die Estal-Datei springen und jetzt werde ich unter dem P-Tag ein weiteres Dip-Tag erstellen , den Dartmond Mir ist in dieser Datei aufgefallen, dass dieses Element ein kleinerer Kreis wäre, der einen Mond darstellt Außerdem wird es sich zusammen mit der Umlaufbahn drehen. Lassen Sie uns nun dieses Mondelement stylen. Hier in der Style-Datei werde ich auf einen Mond im Clus zielen Zuerst definiere ich Höhe, Höhe dann Höhe acht EM Außerdem werde ich mit EM sagen. Da wir unseren Mond rund machen müssen, verwende ich Grenzradius, Grenzradius, ich mache ihn auf 50%, 50%. Damit müssen wir der Hintergrundfarbe eine Farbe geben . Ich möchte die Hintergrundfarbe sehen, knappe Hintergrundfarbe, und hier gebe ich den Hashtag eine Fünf, eine Fünf, eine Fünf, ich werde diese Datei unterteilen, aber ich möchte den Mondmittelpunkt dieser Umlaufbahn tief positionieren Mondmittelpunkt dieser Umlaufbahn tief Dafür werden wir Flexbox Probity verwenden. In diesem Orbit werde ich tippen, anzeigen, ich werde es flexibel machen, den Inhalt ausrichten, zentrieren , auch Objekte ausrichten, zentrieren und zentrieren, ausrichten und ich werde diese Datei unterteilen Ich unterteile diese Datei, wie Sie sehen können, sie zahlt das Mondelement, Mittelpunkt dieser Umlaufbahn. Nun weisen wir diesem Mond einen kleinen Kastenschatten zu, aber bevor ich ihn positioniere, würde ich ihn absolut machen. Hier werde ich Boxschatten verwenden, um einen wachsenden Effekt zu erzielen. Ein Typ Boxschatten, hier verwende ich einen Vd. Hier verwende ich diesen Box-Shadow-Wert, um diesen wachsenden Effekt dieses Mondes zu erzeugen . Und die Schatten sind gleichmäßig verteilt. Für den ersten Wert verteilen wir ihn hier auf 0,6 Uhr und für den zweiten Wert verwendet sie 1,2 Uhr und für den dritten Wert verwendet sie 1,8 Uhr In jeder Phase verlängern wir diesen Schatten bis 0,6 Uhr und erzeugen so diesen Hallo-Effekt. Schließlich müssen wir an der sich drehenden Animation arbeiten. Wir müssen die Umlaufbahn drehen. Lassen Sie uns nun die Animation erstellen. Hier mache ich das Keyframe an den roten Keyframes und gebe der Animation den Namen Spin. Und innerhalb des Weniger bei 100% der Dauer möchte ich die Transformationseigenschaft „ Transformieren“ anwenden , und hier verwende ich den Wert „Drehen“. Drehe, und ich werde den DAG um 360 Grad drehen. Das ist es. Das werde ich befriedigen. Jetzt müssen wir diese Animation in unserer Umlaufbahn aufrufen. Lassen Sie uns nun in das Orbit-Deep-Element springen, und hier nenne ich die Animation Animation und unser Animationsname ist Spin. Und unsere Animationsdauer beträgt acht Sekunden. Die Animations-Timing-Funktion ist linear. Die Anzahl der Animationsiterationen ist unendlich , weil ich diese Animation unendlich lang laufen lassen möchte Deshalb übergebe ich unendlich und setze diesen Wert Nachdem Sie diesen Wert eingestellt haben, wird, wie Sie sehen können, Animation gestartet und das gesamte Orbitelement innerhalb von acht Sekunden um 360 Grad gedreht das gesamte Orbitelement innerhalb von acht Sekunden um 360 Grad Jetzt müssen wir dieses quadratische Feld und die Umlaufbahn ausblenden. Dafür müssen wir nur den Grenzwert ausblenden. Also um zu tippen, kommentieren einige diese Eigenschaft aus. Also das ist die Umlaufbahn verstecken, den Kreis, und dann werde ich diesen Wasserwert vor dem Behälter verstecken, dieser quadratischen Box. Und ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier diesen wunderschönen Mondrotationseffekt genießen . Ich hoffe, jetzt ist Ihnen klar wie wir diese wunderschöne Animation erstellen können. Also danke, dass du dir dieses Video Stadium für unser nächstes Projekt angesehen hast.