Reine CSS-Ladeanimation

1. Einführung: Hallo Mann, es ist schön , dich wieder zu sehen. Heute werden wir dieses wunderschöne Ladeanimationsprojekt mit TML und CSS erstellen wunderschöne Ladeanimationsprojekt mit TML und CSS Mein Name ist John Shortcut und ich bin Ihr Dozent für dieses Projekt Es ist eine sehr schöne Ladeanimation , die mit STML und CSS erstellt wurde Außerdem reagiert es sehr schnell. Wenn ich unsere Browserbreite entsprechend der Browserauflösung reduziere , hat sich die Telefongröße geändert, sodass es ziemlich schnell reagiert. Wir können diese Art von Ladeanimation in unseren Projekten anwenden . Um diese Ladeanimation zu erstellen, werde ich keine Javasceep-Bibliothek und keine CSS-Bibliothek verwenden und keine Wir werden reines Estim und reines CSS verwenden. Und wenn Sie an diesem Animationsprojekt interessiert sind, können wir unsere Reise mit dem nächsten Tutorial beginnen Danke. 2. HTML-Vorlage erstellen: Das ist also die erste Stunde, die mit Videos zu tun hat. Also lass Jung auf den Computerbildschirm und fang an zu programmieren. Wie Sie sehen können, öffne ich Seite an Seite meinen Wiser Studio-Code-Editor und meinen Browser mit der Lifesaver-Erweiterung, und ich erstelle bereits ein Kostenvoranschlagsdokument, und wir erstellen auch eine Style-Dot-CSS-Datei Wie Sie sehen können, ist unser Dokument vorerst völlig leer Jetzt müssen wir also unsere mit HTML gestartete Vorlage erstellen. Wie Sie sehen können, verwenden wir dafür VS-Code. Ich werde das geformte Ausgrabungsschild loben. Dann werde ich Enter loben. Wie Sie sehen können, erstellt es automatisch eine gestartete Vorlage für mich. Dann werde ich dieser Vorlage einen Titel geben. Hier gebe ich den kreativen Textanimationseffekt von CS kreativen Textanimationseffekt Nachdem wir den Titelnamen unserer Webseite eingegeben haben, müssen wir diese Standard-CSS-Datei mit einem stabilen Dokument verknüpfen diese Standard-CSS-Datei mit einem stabilen Dokument Dafür verwenden wir den Link Link für das Ink-Tag und das Referral-Stylesheet. Außerdem müssen wir HRF übergeben Hier müssen wir den Dateipfad dieses Stylesheets angeben . Wie Sie sehen können, befindet es sich in meinem aktuellen Routing-Verzeichnis. Also werde ich den schönen Namensstil Dot CSS verwenden. Dann verwende ich im Body-Tag Überschrift für Tag, H zwei. Dann gebe ich in dieser Überschrift zu Tag Lodi Außerdem werde ich drei Punkte eingeben. Als Nächstes verwende ich ein Attribut, und ich werde dieses Attribut in unserer Überschrift zum Markieren verwenden , und unser Attributname ist Datentext. Datentext entspricht di. Dies ist ein benutzerdefiniertes Datenattribut. In STM ermöglichen Datenattribute das Speichern zusätzlicher Informationen auf einem stabilen Element Dieses Attribut hat keinen Einfluss auf das Layout. Ich ändere das Erscheinungsbild unserer Webseite nicht. Im Grunde verwenden wir es mit Java-Strep, ansonsten mit CSS, um dynamisches Verhalten hinzuzufügen, unser Datentyp ist Test und wir haben diesen Wert beim Laden gespeichert und wir werden diesen Wert später verwenden Das ist es für dieses Video. Im nächsten Video werden wir das CSS starten . Es gibt etwas zum Anschauen. 3. Start-CSS-Code verbessert: Schön euch zu sehen, Leute. Ich bin wieder mit einem weiteren Video zu unserem Ladeanimationsprojekt zurück. Lassen Sie uns also auf den Computerbildschirm springen. Wie Sie auf Ihrem Computerbildschirm sehen können, öffnen wir hier eine Website, Google Forms und suchen nach einer Schriftart namens Pop ins. Für unser Projekt zum Laden von Animationen werden wir Pop in Forms verwenden. Und von hier aus werde ich diese Schriftart auswählen. 700 fett 700. Um diese Schriftart zu erhalten, klicken Sie einfach auf Gate-Fun-Schaltfläche und der eingebettete Gate-Code wird angezeigt. Klicken Sie einfach auf diese Option. Und dann müssen Sie auswählen , für welche Plattform Sie diese Schriftart für Web, Android, IOS Flutter verwenden möchten für Web, Android, IOS Flutter Ich werde es für Webzwecke verwenden und ich möchte diese Schriftart importieren Ich klicke auf die Option Importieren. Und von dort müssen wir den Code kopieren, diesen Importoptionscode. Also kopiere ich die ganze Schrift. Nach dem Kopieren des Codes bin ich wieder auf meinem Computerbildschirm. Um genau das gleiche Ergebnis zu erzielen, benötigen wir diese Schrift. Lassen Sie uns also in den Stil Dot CSS Fun eintauchen. Zuerst werde ich diese Schrift importieren. Also habe ich den Code eingefügt. Danach werde ich diese Schrift auf diesen Text anwenden. Dafür werde ich zunächst ein universelles Selektron-Sternzeichen erstellen Dann sagt die Claira, erste Wahrscheinlichkeit, dass ich Margin verwenden werde Margin, und ich werde Margin Ju zuweisen. Dann werde ich Pan zuweisen. Die Polsterung ist ebenfalls Null. Wie Sie wissen, ist Star ein universeller Selektor Zuerst setzen wir den gesamten Elementrand auf Null. Dann setzen wir den gesamten Elementabstand auf Null. Nachdem wir diese Datei, wie Sie sehen können, unseren Ladetext gesetzt haben, beginnt er jetzt in der oberen rechten Ecke, da unsere Überschrift zum Tag standardmäßig mit Abstand und Rand versehen Und mit dem Universalselektor entfernen wir den gesamten Standardabstand und den Standardrand Danach verwende ich eine weitere Eigenschaft namens Box Sizing, Box Sizing , und ich werde Border Box verwenden Eine andere Frage ist, was ist das? Warum verwenden Sie die Größe von Kartons und die Eigenschaften von Flaschenboxen? Es hat die Art und Weise geändert, wie Breite und Höhe eines Elements berechnet werden. Lassen Sie mich das Konzept der Größe von Boxen klarstellen und erklären, warum wir diese Eigenschaft verwenden. Wie Sie sehen können, hat Hell das DV-Element erstellt und wir haben es auf 200 Pixel festgelegt Aber dieses tiefe Element jeweils einen Rand von zehn Pixeln in der Richtung, links und rechts Nachdem Sie an jeder Seite einen Rand von zehn Pixeln verwendet haben, wird die D-Breite erhöht. Jetzt sind es 220 Pixel. Auf die gleiche Weise, wenn wir links und rechts Polsterung hinzufügen, nehmen wir an, wir sagen, zehn Pixel Abstand an jeder Seite, wird das wiederum die tiefe Breite vergrößern Jetzt sind es 240 Pixel. Aber wir sagten 200 Pixel tiefe Breite. Aufgrund der Polsterung und des Randes verlängert es die Breite. Um das Problem zu lösen, hilft uns die Größe der Kartons Wenn wir die Größe von Boxen anwenden, wird dadurch die tiefe Elementbreite nicht erweitert. Es wird immer den Brunnen beibehalten , den wir bestehen. Im Grunde wird der Inhalt im Container verkleinert , aber es wird den Behälter nicht in der Höhe vergrößern Aus diesem Grund wenden wir in unserem Dokument die Eigenschaft „Boxgröße“ an. Nachdem ich die Größe der Boxen angewendet habe, wende ich jetzt Fonfam an Ich werde die Schriftfamilie binden und die Poppins-Schrift verwenden In dem einzigen Kurs werde ich Poppins binden, und die Schrift stammt von der San-Serif Familie, San Serif und die Schrift stammt von der San-Serif Familie, San Serif. Ich werde diese Datei einrichten Nachdem ich diese Datei eingerichtet habe, können Sie feststellen, welche Überschrift sie annimmt. Es hat den Schriftstil geändert. Ich sah etwas mutiger aus. Das ist es für dieses Video. Im nächsten Video werden wir dieses Body-Tag stylen. 4. Body-Tag und Überschrift-Tag stylen: Schön euch zu sehen. Dies ist das dritte Video dieses Tutorials, und in diesem Video werden wir das Body-Tag stylen. Lassen Sie uns also auf den Computerbildschirm springen. Das werden wir in diesem Tutorial erstellen. Dafür müssen wir das Body-Tag stylen. Lassen Sie uns also in die Style-Dot-CSS-Datei springen und mit dem Stylen des Body-Tags beginnen. Also werde ich zuerst das Body-Tag mit seinem Namen, Tag-Namen, BO, DY-Text als Ziel das Body-Tag mit seinem Namen, Tag-Namen, BO, verwenden und dann innerhalb der Cali RessFS-Eigenschaft Display verwenden Display, und ich mache daraus Flachs. Eine weitere Neuigkeit ist, warum ich Display Property Flakes verwende? Weil es das Flachs-Layout aktiviert. Was können wir also mit Flexlou machen? Was ist der Vorteil der Verwendung von Flex Layout? Weil es einfacher ist, Elemente innerhalb eines Containers auszurichten und zu verteilen Sogar die Größe des Elements ist unbekannt oder dynamisch. Wenn wir die Größe des Browserfensters ändern, wird der Inhalt entsprechend der Auflösung des Browserfensters geändert. Es funktioniert dynamisch. Dann verwende ich eine andere Eigenschaft namens Justify content. Begründen Sie den Inhalt. Und hier werde ich die Mittelwelle passieren. Diese Eigenschaft zentrierte den Inhalt horizontal innerhalb des Körpers Das Kanalelement ist zentriert ausgerichtet. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dadurch wird unsere Überschrift an der Tag-Mitte dieser Seite ausgerichtet. Der Inhalt wurde horizontal zentriert. Außerdem müssen wir diesen Inhalt vertikal zentrieren. Dafür verwende ich eine andere Eigenschaft namens align IN. Elemente ausrichten. Und ich werde es auch in den Mittelpunkt stellen. Wenn ich diese Datei einstelle, zentriert diese Eigenschaft die Vertikale 11. Aber nachdem ich diese Datei eingestellt habe, funktioniert sie nicht. Jetzt haben Sie vielleicht Quotien, warum es nicht funktioniert? Weil wir die Höhe nicht angeben. Dafür verwende ich eine andere Eigenschaft, Mindesthöhe, Durchschnittshöhe , und lege die Mindesthöhe auf 100 Viewportbereich fest Mindesthöhe auf 100 Viewportbereich Hundert VH. Harry hat eine Mindestgröße für diesen Körper festgelegt und Harry hat ihm eine Körpergröße von 100% zugewiesen Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Jetzt auch horizontal zentriertes und vertikal zentriertes H-Zwei-Tag. Als Nächstes weise ich diesem Body-Tag eine Hintergrundfarbe zu. Dazu verknüpfe ich den Hintergrund dem Party-Hintergrund und unseren Farbcodes und verwende die RGB-Farbe RGB und drücke in der Runde für Rot, ich verwende für Grün , ich verwende 40 und für Blau 53, und ich sende diese Datei. Nachdem ich das Body-Tag formatiert habe, werde ich auch die Überschrift zum Tag formatieren. Hier erstelle ich den ausgewählten Trab, H zwei, und innerhalb der Eigenschaft clivsF verwende ich Position Position, und ich werde die relative Position verwenden. Dann definiere ich die Schriftgröße. Schriftgröße, und ich werde die Schriftgröße 14 VW verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt stellt sich die Frage, warum wir eine VW-Einheit verwenden? Wir haben andere Einheiten wie Pixel, PT, Prozent und Minimum. Aber anstatt andere Einheiten zu verwenden, verwenden wir VW. VW steht für V-Anschlusswinde und 14 VW, was 14% der Breite weniger Fuß bedeutet Wenn wir also die Breite dieses Browsers erhöhen, wird die Schriftgröße entsprechend der Browserbreite Als Nächstes stelle ich die Schriftfarbe ein. Geben Sie also Farbe ein, und für Farbe verwende ich RGV Value Sind die Daunenkleider rot, werde ich drei bestehen Für Grün werde ich 40 bestehen. Und für Blau verwende ich 53 und stelle diese Datei ein. Im Grunde verwende ich hier genau dieselbe Hintergrundfarbe. Jetzt ist unser Text nicht sichtbar , weil er der Hintergrundfarbe entspricht. Also werde ich eine weitere Eigenschaft hinzufügen. Hier werde ich eine weitere Eigenschaft namens Textstrich anwenden . Geben Sie Text und Bindestrich ein und um die Eigenschaft zu verwenden, Sie auch Webkeat Dieses Web hat einen bestimmten Stil Fügen Sie dem Text einen Strich oder eine Kontur hinzu. Also ich möchte Strich 0.3 VW, der auch die Strichfarbe definiert. Für die Strichfarbe verwende ich den RGV-Wert RGV. Dann sagtest du , die runden Kleider , für Rot nehme ich zwei, für Grün nehme ich 108 und für Blau 146, und ich setze diese Datei Diese Farbe ist etwas heller als die Hintergrundfarbe. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn Sie diese Aufnahme nun in Großbuchstaben umwandeln möchten, können Sie andernfalls den Text in Kleinbuchstaben verwenden Ich würde gerne Großbuchstaben verwenden, also gebe ich Text Transform in Großbuchstaben ein und setze diese Datei Nun, so sieht es aus. Nun, es passt ziemlich gut zu unserem Ergebnis, und das ist unser Ergebnis, das wir erstellen werden. Im nächsten Teil dieses Tutorials werden wir also ein Pseudoelement erstellen, das einen dynamischen Overlay-Effekt wie diesen hinzufügt Overlay-Effekt wie Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorial. 5. Hinzufügen des Overlay-Effekts: Schön, dass ihr wieder da seid, Leute. Ich bin wieder mit einem weiteren Tutorial zu diesem Ladeanimationsprojekt zurück , und dies ist der wichtigste Teil dieses Tutorials, da wir in diesem Teil diese dynamische Overlay-Passform hinzufügen werden Dafür nehmen wir die Hilfe von Posito vor dem Fangen wir also mit dem Praktischen an. Also hier werde ich ein vorher-positives Element des H-2-Tags erstellen . Also gebe ich zuerst Taut H zwei und ich gebe Doppelpunkt Doppelpunkt BFO T Dann verwende ich in den Kalibraten unsere erste Eigenschaft content, content, und als Inhalt verwende ich die Attributfunktion Ater function, diese Funktion hier innerhalb der runden Rennen, ich übergebe das Attribut, das wir in unserem TimlPage-Datentext mit dem Indexpunkt erstellen Ich kopiere den Datentext des Attributnamens und füge ihn in die Hier übergeben wir den Dateninhalt, und wie Sie wissen, leitet innerhalb dieses Datentextes Henry innerhalb dieses Datentextes Hentype beim Laden weiter Wir werden diesen Text verwenden und die Utter-Funktion ermöglicht es dem positiven Element, den Überschriftentext zu replizieren Jetzt müssen wir die Position dieses Inhalts definieren. Dafür gebe ich Position Property ein. Position und hier werde ich Position Absolute verwenden. Dadurch kann das Poseido-Element direkt über dem Text platziert werden Ich meine den Originaltext, und dann müssen wir die obere Position und die Lippenposition erwähnen Für den Anfang werde ich Null bestehen. Dann werde ich für P auch Null bestehen. Dann definiere ich mit W Hemost mit Null und Höhe Ich werde die Höhe 100% verwenden. Wie du sehen kannst, heist Top und Lip Position Null, weil das ermöglicht, den Inhalt präzise über dem Text zu platzieren Und dann weisen wir zu und dann weisen wir mit Null zu. Warum weisen wir mit Null zu? Weil es es zunächst unsichtbar macht. Durch die Animation wird diese Breite erweitert und es entsteht ein aufschlussreicher Effekt. Dann verwenden wir die Höhe von 100%, Dann verwenden wir die Höhe um sicherzustellen, dass das positive Element volle Höhe des H-2-Elements einnimmt und den Text vertikal bedeckt. Als Nächstes weise ich diesem Text eine Farbe zu. Dafür, für den Overlay-Text. Dafür gebe ich Farbeigenschaft ein. Farbe, Hashtag und unser Farbcode ist Null, Eins, e87. Es ist eine Art grüne, hellgrüne Farbe. Dann müssen wir Stroke zuweisen. kopiere ich diese Dafür kopiere ich diese Eigenschaft von dieser Position und füge sie hier ein. Für Striche weise ich hier Null V W zu und für Strichfarben verwende ich den RGB-Wert RGV Und innerhalb der Rundungen für Rot werde ich zwei verwenden Oder Grün hier verwende ich 108 und für Blau 146 Ich möchte dieselbe Farbe sagen. Hier verwenden wir dieselbe Strichfarbe, die wir für das H-Tag verwenden. Aber Sie können feststellen, dass wir hier einen Strich mit Null VW anwenden. Im Grunde genommen entfernt es effektiv jeden Stricheffekt aus dem Text von vier Elementen. Als Nächstes müssen wir diese horizontale Linie erstellen. Diese Linie. Dafür werden wir Border verwenden. Lass es mich dir zeigen. Hier werde ich die Border Write-Eigenschaft verwenden. Rand, richtig, und ich möchte einen durchgehenden Rahmen mit zwei Pixeln, und unser Boerstyle ist solide und unser Boerstyle ist Dann müssen wir die Rahmenfarbe angeben, und ich werde dieselbe Farbe verwenden Für die Farbe Bur und den Text verwenden wir dieselbe hellgrüne Farbe Als Nächstes müssen wir den Überlaufbereich entfernen irgendeinen Typ Überlauf Dann müssen wir die Animation erstellen. Ich möchte diese Animation im nächsten Teil dieses Tutorials erstellen . Ich werde diese Animation in diesem Teil nicht erstellen. Danke, dass Sie sich dieses Video Seien Sie gespannt auf den nächsten Teil. 6. Die Overlay-Animation verbessert anwenden: Also willkommen zurück, Leute. Dies ist das letzte Tutorial zu unserem Projekt. Und in diesem Tutorial werden wir die Animation erstellen. Also werde ich zuerst einen Keyframe, einen Tate-Keyframe, Keyframes deklarieren , und unser Keyframe-Name , und unser Keyframe-Name Dann heißt es in der Culira: Hier müssen wir den Wert für Breite und Breite vor dem positiven Element animieren. und Breite vor dem positiven Element animieren. Wenn wir den Breitenwert im Laufe der Zeit ändern, entsteht ein aufschlussreicher Also bei einer Position von 0%, einer Position von 10% und einer Position von 100%. Ist das die Klarheit, die ich mit Null setzen werde? 0,0 bei 0,10 und bei 0,10 wird es auf Null gesetzt und bei 70% und 90% werde ich es auf 100% wird es auf Null gesetzt und bei 70% und 90% setzen Bei 0% beginnt die Animation mit den Elementen, die auf Null gesetzt Und das macht es für jeden Winkel unsichtbar. Dann ist die Breite bei 10% immer noch Null, sodass die 11 verborgen geblieben sind. Und bei 70% legen wir hier die Breite 100 fest, sodass es vollständig sichtbar ist oder sich über die gesamte Breite erstreckt, und bei 90% auch mit „remain 100%“, sodass das Element vollständig ausgedehnt bleibt und bei 100 Prozent auch mit zo gesetzt wird. Im Grunde ermöglicht es der Animation , im verborgenen Zustand von vorne zu beginnen. Jetzt werde ich diese Animation auf dieses Posito-Element anwenden Animation auf dieses Posito-Element Dafür müssen wir hier die Animationseigenschaft verknüpfen. Animation. Zuerst müssen wir den Animationsnamen angeben, der animate lautet Dann müssen wir die Animationsdauer angeben. Ich möchte diese Animation sechs Sekunden lang laufen lassen und unsere Animationsrichtung ist linear. Außerdem möchte ich diese Animation unendlich lang laufen lassen , also werde ich die Unendlichkeit überschreiten. Die Dauer der Animation ist unendlich. Bevor ich diese Datei einstelle, werde ich diese Zeile zunächst auskommentieren Dann werde ich diese Datei einrichten. Ich glaube, ich habe einen Fehler gemacht. Ja. Das ist unser Fehler. Das ist kein Kurs. Es ist ein Tag, also möchte ich den Punkt entfernen und werde ihn erneut speichern. Jetzt müssen Sie diese Datei speichern. Das ist es, was es wurzelt. Das ist die Grenze an der richtigen Stelle. Wenn ich es mit 10%, sonst 20% schaffe, diese Datei einzustellen, kannst du das Ergebnis sehen. Man kann den Überlappungseffekt schon erkennen. Und wenn ich es um mehr als 70% erhöhe, ist es so In unserer Animation haben wir hier also dasselbe gemacht. Hier vergrößern wir die Breite dieses Elements vor dem positiven Wert. Deshalb erzeugt es diesen aufschlussreichen Effekt. Also werde ich es vorerst wieder auf Null setzen und diese Datei setzen. Nachdem ich diese Datei gesetzt habe, ist sie, wie Sie sehen können , jetzt unsichtbar. Außerdem werde ich diese Zeile auskommentieren und diese Animation ausführen Jetzt, nachdem ich die Animation angewendet habe, ist sie so niedrig. Wir haben diese Animation, diese Ladeanimation erfolgreich erstellt . Ich hoffe, jetzt ist Ihnen das Konzept klar , wie wir diese Ladeanimation erstellen können. Und wenn Ihnen dieses Projekt gefällt, vergessen Sie nicht, Ihre wertvolle Bewertung abzugeben. Es ist wichtig für uns. Ich danke dir vielmals.