Baue 10 kreative Webprojekte mit HTML und CSS

1. Einführung: Willkommen zum brandneuen Kurs , in dem Sie lernen können , wie Sie kreative und schöne Webprojekte erstellen. Wir werden zusammen zehn verschiedene kreative Webprojekte mit reinem HTML und CSS erstellen verschiedene kreative Webprojekte . Wenn Sie über Grundkenntnisse dieser Technologien verfügen und immer noch Schwierigkeiten haben Ihre eigenen Webprojekte zu erstellen, oder wenn Sie Ihre Entwickler- und Designfähigkeiten verbessern möchten , dann sind Sie bei uns genau richtig. Wir haben diesen Kurs ins Leben gerufen, um den Schülern die besten Erfahrungen mit HTML und CSS zu vermitteln und ihnen zu ermöglichen, wunderschöne kreative Projekte zu erstellen. Wir werden zehn verschiedene Webprojekte erstellen, und sie werden voll von modernem, nettem und schönem Effektdesign sein. Wir werden mit relativ einfachen Projekten beginnen und auch einige fortgeschrittene Projekte durchgehen. Wir können dir garantieren, dass du nach Abschluss dieses Kurses solide Erfahrungen und Kenntnisse darin sammeln wirst solide Erfahrungen und Kenntnisse darin sammeln , wirklich nette und coole Effekte zu erzeugen . In diesem Kurs können Sie sich Inspirationen holen, die Ihnen helfen , Ihre Projekte zu verbessern und Ihr Portfolio individuell nur diese Kerntechnologien der Front- und Bob-Entwicklung beherrschen , können Sie fantastische und moderne Themes erstellen und einfach weiterkommen Der Kurs wird interessant und nützlich sein. Ich würde Ihnen empfehlen, das Beste aus diesem Kurs herauszuholen , ohne den Code einfach zu kopieren und einzufügen Wenn ich an deiner Stelle wäre, würde ich das auf jeden Fall annehmen . Also schließ dich uns an. 2. Projekte: Hallo und willkommen zum Kurs. Ich hoffe, dass dies Ihr richtiger Kurs ist und dass Ihnen die Projekte, die wir im Laufe des Kurses erstellen werden, gefallen werden. Wie Sie bereits wissen, werden wir zehn verschiedene kreative und wunderschöne Webprojekte erstellen . All diese Projekte werden auf der Grundlage von HTML und CSS erstellt. Ich möchte erwähnen, dass Sie ein grundlegendes Verständnis dieser Technologien haben sollten , um den Vorlesungen zu folgen und sich nicht verwirren zu lassen. Die Projekte werden voller verschiedener moderner Techniken und Tricks sein. Sie werden lernen, wie Sie schöne Effekte und Animationen erstellen können, die Sie dann als Inspiration für die Entwicklung und Anpassung Ihres eigenen Portfolios verwenden können . Wie ich bereits erwähnt habe, werden wir zehn Projekte erstellen. Es handelt sich um unabhängige Vorlagen, sodass Sie sie nicht der Reihe nach durchgehen müssen. Sie können jedes der Projekte, die Sie wollen, aus dem geringsten Aufwand erstellen . Es liegt absolut an dir. Ordnung, jetzt werde ich jedes Projekt durchgehen und es kurz beschreiben. Das erste Projekt , das wir bauen werden, ist ein Sprungbrett. Wie Sie sehen können, haben wir hier ein Quadrat , das auf so etwas wie das Ruber springt Es verändert seine Form und auch die Zecken neigen sich, um den natürlichen Effekt zu erzielen Als Nächstes werden wir diese Landing Page erstellen. Wenn wir die Seite neu laden, wird das Hintergrundbild im Vollbildmodus mit einer schönen Animation angezeigt im Vollbildmodus mit einer schönen Animation Sobald es angezeigt wird, ändert es seine Form so , dass wir danach eine Ballanimation erstellen Wie Sie sehen können, haben wir hier einen animierten Ball, der sich auf und ab bewegt. Er trifft die Quadrate , die von der linken und rechten Seite kommen. Außerdem haben wir hier einen bewegten Hintergrund , der die Illusion erweckt , dass sich der Ball nach oben bewegt. In Ordnung, als Nächstes werden wir die Erde animieren. Wie Sie sehen, haben wir hier zwei verschiedene Teile. Auf der linken Seite, dunkler Teil der Erde. Auf der rechten Seite befindet sich ein heller Teil. Die Erde selbst dreht sich entsprechend ihrer Y-Achse. Als nächstes kommt der Fluss. Die Blume wird nur die normale sein , mit ein paar Blütenblättern und einem Stiel. Denken Sie daran, dass wir es nur mit ML und CSS erstellen werden. Danach werden wir eine Atom-Animation erstellen. Wie Sie sehen können, haben wir hier ein typisches Atom, das Sie vielleicht in Ihrem Chemieunterricht gesehen haben oder auf eines der beliebten Editor-Logos gestoßen sind. Ich meine das Atom. Wir haben hier ein paar Kreise mit Kugeln, die sich um den Hauptball bewegen. In Ordnung, das nächste Projekt wird ein Hubschrauber sein. Wir haben hier einen Flugeffekt. Der Hubschrauber fliegt über die Stadt, die Rotorblätter bewegen sich. Der gesamte Hubschrauber wurde mit H, M und CSS erstellt. Und es ist eigentlich kein Bild. Ich möchte erwähnen, dass der Flugeffekt viel realistischer aussieht , wenn Sie das Projekt im Browser ausführen. sieht es aufgrund der Frames nicht ganz realistisch Video sieht es aufgrund der Frames nicht ganz realistisch aus. Mach dir keine Sorgen, es wird viel besser aussehen , wenn du es selbst baust. Okay, das nächste Projekt wird das Fahrrad sein , das wir hier haben, das typische Fahrrad. Wie Sie sehen können, bewegen sich die Räder und die Pedale, es scheint, dass das Fahrrad fährt Das nächste Projekt wird ein Drei-D-Raum sein. Wir haben hier einen Tisch im Zimmer mit einem Brief. Sobald wir auf die Schaltfläche klicken und den Buchstaben lesen, gelangen wir zur Tabelle und der Buchstabe dreht sich. Danach folgt das letzte Projekt, bei dem es sich um einen Drei-D-Swing handeln wird. Wir haben hier ein paar Schaukeln. Sie bewegen sich im Drei-D-Raum. Außerdem können Sie hier sehen, wie sich der Ball auf diesen Schaukeln bewegt. Ordnung, das ist alles über die Projekte , die wir im Laufe des Kurses erstellen Ich hoffe, sie werden interessant sein, Sie werden Spaß daran haben und neue Dinge lernen. Also lass uns anfangen. 3. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns , dass Sie hier sind, und wir sind zuversichtlich, dass Sie diesen Kurs angenehm finden werden. Bevor wir uns mit unserem Projekt befassen, bereiten wir zunächst unser Arbeitsumfeld vor. Wenn Sie bereits eingerichtet und bereit sind, Code zu schreiben, können Sie dieses Video überspringen und direkt mit dem Projekt beginnen. Wenn Sie jedoch noch nicht vorbereitet sind , ist das völlig in Ordnung. werden wir Sie durch die Einrichtung einiger wichtiger Tools führen diesem Kurs werden wir Sie durch die Einrichtung einiger wichtiger Tools führen. Es gibt zwei Haupttools, die Sie benötigen einen modernen Webbrowser und einen Texteditor. Für unseren Webbrowser werde ich Google Chrome verwenden, aber ich empfehle auch Mozilla, Firefox. Sie haben diese Browser wahrscheinlich schon, aber lassen Sie uns kurz durchgehen, wie Sie sie herunterladen können Falls Sie Google Chrome verwenden möchten, besuchen Sie einfach diese URL und laden Sie den Browser herunter. Der Installationsvorgang ist unkompliziert, sodass wir nicht viel Zeit damit verbringen werden. Für Mozilla, Firefox, können Sie es über diese URL abrufen. Beide Links werden dieser Vorlesung der Einfachheit halber beigefügt . In Ordnung, lassen Sie uns jetzt über den Texteditor sprechen. Wir werden Visual Studio Code verwenden , einen der besten Texteditoren, die heute verfügbar sind. Sie können jedoch gerne Ihren bevorzugten Texteditor verwenden , falls Sie einen haben. Es liegt immer noch ganz bei Ihnen. Ich empfehle, Visual Studio-Code eine zu geben. Versuchen Sie, Visual Studio-Code herunterzuladen Besuchen Sie diese Website und wählen Sie die Version für Ihr Betriebssystem, Windows, Mac oder Linux. Der Installationsvorgang für Visual Studio-Code ist ebenfalls unkompliziert. Sie sollten keine Probleme haben. Sobald Sie diese beiden Tools installiert haben, können Sie mit dem Kurs beginnen. Lass uns gleich eintauchen. 4. Projekt 1 – Springendes Quadrat: In Ordnung, wir sind bereit, mit dem Bau unserer Projekte zu beginnen. In diesem Video werden wir das erste Projekt erstellen, bei dem es sich um ein Sprungbrett handelt. Wie Sie sehen können, haben wir hier ein Quadrat, das auf so etwas wie das Ruber springt Es verändert die Form und auch die Stäbchen neigen sich, um den natürlichen Effekt zu erzielen Okay, das ist alles über das Projekt, lassen Sie uns weitermachen und loslegen Ich habe auf dem Desktop einen neuen Ordner namens Jumping Square erstellt , der momentan leer ist. Lassen Sie uns diesen Ordner als Code öffnen und unsere Arbeitsdateien erstellen. Ich meine Index-HTML und Style-CSS. Öffnen Sie dann die Indexpunkt-HTML-Datei und erstellen Sie ein einfaches HTML-Dokument. Lassen Sie uns hier ein Ausrufezeichen platzieren und dann Top oder Enter drücken Okay. Lassen Sie uns zunächst den Titel ändern. Es wird Jumping Square sein. Verlinken Sie dann die CSS-Datei. Lassen Sie uns hier den Stil SS angeben. Okay, lassen Sie uns das Projekt zum Schluss über den Live-Server im Browser ausführen . Und dann platzieren Sie den Editor und den Browser so nebeneinander. In Ordnung, zuerst werde ich das H-DML-Markup erstellen. Lassen Sie uns das Deep-Tag öffnen , das der Container sein wird Dann öffne ich einen weiteren Deep Tug, der die gesamte Animation umschließt Es wird ein Wrapper sein. Im Wrapper werden wir ein paar verschiedene Elemente haben Das erste wird das Gummi sein. Dann werden wir zwei Stöcke haben. Lass uns die Klassen Stick und Left Stick benutzen. Dann duplizieren Sie diesen Code und wechseln Sie von links nach rechts. Lassen Sie uns zum Schluss noch einen tiefen Zug erstellen , der das Quadrat sein wird In Ordnung, sagen wir über das H-Mal-Markup. Lass uns weitermachen und anfangen, CSS zu schreiben. Zunächst werde ich für jedes Element einige Reset- und Standardstile erstellen . Wählen wir sie mit einem Sternchen aus. Ich werde den Standardrand und die Standardpolsterung loswerden. Lassen Sie uns beide Eigenschaften auf Null setzen. Außerdem werde ich die Größe der Box auf die Rahmenbox setzen. Während dieses Projekts werden wir Ram als Maßeinheit verwenden. Im Moment entspricht ein Ram 16 Pixeln. Standardmäßig möchte ich einen Ram in zehn Pixel umwandeln. Dass wir die Telefongröße des HTML-Elements verringern müssen , und wir müssen es zu 62,5% machen. In Ordnung, als Nächstes möchte ich mich um den Container kümmern Definieren wir, dass es innerhalb der Höhe liegt. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie zu 100% des Viewports machen Im Moment geht es um den Container. Als Nächstes werde ich den Wrapper anpassen. Lassen Sie uns zunächst Breite und Höhe definieren. Die Breite wird 100 Ram betragen. Was die Höhe angeht, werde ich 80 Ram draus machen. Ich ändere auch die Hintergrundfarbe. Lass uns 15 auf fünf draus machen. Eigentlich wird der Wrapper in der Mitte der Seite platziert Dafür werde ich das CSS-Grid verwenden. Lassen Sie uns dem Container-Anzeigeraster zuweisen dann die Elemente in der Mitte platzieren. Okay, lassen Sie uns weitermachen und den Wrapper weiter anpassen Als Nächstes werde ich es etwas abgerundet machen. Verwenden wir den Randradius mit dem Wert fünf Ram und erzeugen auch einen Schatteneffekt. Platzieren wir zwei Ram, zwei Ram, sechs Ram, und als Farbe verwende ich 888. In Ordnung, lassen Sie uns über die Verpackung sprechen. Lass uns weitermachen und anfangen , an den Stöcken zu arbeiten. Wählen wir sie anhand eines gemeinsamen Klassennamens aus. Lassen Sie uns zunächst innerhalb der Höhe definieren. Die Breite wird drei Ram sein, dann wird die Höhe 40 Ram sein. Und ändere auch die Hintergrundfarbe. Ich werde hier eine Farbe namens Koralle verwenden. Hier haben wir beide Stöcke. Lassen Sie uns ihre Top-Seiten leicht abgerundet machen. Verwenden Sie den Grenzradius mit den Werten ein Ram, ein Ram, das sind die Top-Sites. Und dann brauchen wir 0,0. Danach werde ich mich um die Positionen kümmern, die wir brauchen, um ihre Positionen absolut zu machen. Eigentlich benötigen wir für jedes Element, das es ist, eine absolute Position . Kinder von The Wrapper. Also werde ich jede Entwicklung innerhalb des Wrappers auswählen und dann ihre Position auf Absolut setzen Wir werden die Elemente entsprechend dem Wrapper positionieren Elemente entsprechend dem Wrapper Weisen wir ihm eine Position oder einen Relativwert zu. Okay, danach kümmern wir uns um die Positionen der Stöcke. Beide werden den Nullpunkt haben. Als Nächstes werde ich die Positionen für die Sticks separat definieren . Lassen Sie uns den linken Stick auswählen und die linke Position auf 15 Ram setzen. Lassen Sie uns diesen Code duplizieren und links nach rechts wechseln. Außerdem brauchen wir hier rechts, mit dem gleichen Wert. Okay, außerdem werde ich beiden Sticks einen kleinen Schatteneffekt hinzufügen . Fangen wir mit dem linken Stick an. Die Werte werden 0,2 M, 0,5 Ram und die Farbe 555 sein. Für den rechten Stick benötigen wir einen ähnlichen Schatteneffekt, aber der erste Wert ist negativ. Okay, das war's mit den Stöcken. Als nächstes nehmen wir das Gummi ab. Definieren wir mit Höhe. Die Breite wird 67 Ram betragen. Was die Höhe angeht, so wird es 50 Ram sein. Außerdem werde ich eine temporäre Hintergrundfarbe verwenden. Sagen wir rot. Okay, lassen Sie uns als Nächstes hier die Position des Gummis betrachten Definieren wir die linke Position. Es werden 16,5 Ram als Unterteil sein. Es werden 24 Ram sein. Außerdem werde ich unten einen Rand und auch einen Schatten hinzufügen . Der untere Rand wird aus einem Ram bestehen. Und die Farbe wird Koralle sein, so wie der Schatten, den wir hier brauchen. 01 RAM Null. Und die Farbe wird DD sein. In Ordnung, schauen wir uns das mit dem Gummi an. Als Nächstes kümmere ich mich um den Platz. Lassen Sie uns es auswählen und die Breite definieren. Es werden 14 Ram sein. Wir brauchen die gleiche Höhe. Ich werde hier eine Eigenschaft namens Seitenverhältnis mit dem Wert eins verwenden . Dann ändern wir die Hintergrundfarbe, machen wir sie weiß. Außerdem werde ich das Quadrat mit einem Randradius von zwei Ram abrunden. In Ordnung, als Nächstes ändern wir die Position des Quadrats. Definieren wir die linke Position, machen wir daraus 44 Ram. Außerdem werde ich dem Quadrat einen kleinen Schatten hinzufügen. Lassen Sie uns zwischen 00.2 Ram und der Farbe 555 liegen. Okay, alles ist bereit um mit der Arbeit an den Animationen zu beginnen Fangen wir mit dem Gummi an. Während der Animation werden wir den Randradius ändern und uns auch im Ruber selbst nach unten bewegen Lassen Sie uns weitermachen und CSSKeyframes mit dem Namen Ruber erstellen CSSKeyframes mit dem Wir werden ein paar verschiedene Schritte bei 0% und 20% durchführen. Wir werden den Rand ändern, aber wir werden den Ruber nicht verschieben Wir brauchen diese beiden Schritte hier. Der Grenzradius wird Null sein. Dann müssen wir uns transformieren. Übersetzen Sie mit Y-Richtung und mit dem Wert Null. Als Nächstes haben wir 50,60%. Bei diesen Schritten ändern wir den Randradius und bewegen den Regler nach unten. Der Grenzradius wird 0035 Ram und 35 Ram sein. Nochmals, was die Transformation angeht, übersetze Y, es wird 23 Ram sein Schließlich werden die letzten beiden Schritte 65% und 100% betragen. Hier ändern wir den Randradius und verschieben das Element an seine Standardposition. Der Grenzradius wird Null sein. Was die Transformation Translate Y betrifft, so wird sie ebenfalls Null sein. Okay, die Keyframes sind fertig und wir können die Animation ausführen. Wir brauchen den Namen des Animationsrubers Anim. Dann wird die Dauer 2 Sekunden betragen. Außerdem muss die Animation unendlich sein, dann wird sie linear sein. Wie Sie sehen können, bewegt sich das Gummi und die Animation läuft einwandfrei Ab hier können wir dieses temporäre Problem mit der Rückkehr in Farbe loswerden. Ordnung, als Nächstes müssen wir die Animation für das Quadrat erstellen. Wir sollten die Bewegung des Quadrats und des Gummis aufeinander abstimmen. Lassen Sie uns neue Keyframes erstellen und sie Square Anim nennen. Von 0% auf 20% sollten wir das Quadrat bei 0% etwas nach unten verschieben das Quadrat bei 0% etwas nach unten . Wir müssen Translate Y mit dem Wert von five frame transformieren Translate Y mit dem Wert von five frame Dann müssen wir das Quadrat wieder von 20 auf 50% nach unten verschieben. Der Wert wird 40 Ram sein. In diesem Fall ändern wir die Geschwindigkeit. Dann bewegen wir das Element bei 50,60% nach unten, aber mit einer anderen Geschwindigkeit wird der Wert 64,5 Ram sein Als nächstes kommen 62%, wo wir uns quadratisch nach oben bewegen müssen. Der Wert wird 45 Ram sein. Danach haben wir 80% oder wir müssen das Element nach oben verschieben. Und auch gedreht wird der Wert zehn sein. Außerdem müssen wir hier eine Drehung von Z um 90 Grad hinzufügen. Schließlich müssen wir uns bei 100% wieder bewegen, das Element nach oben bewegen und drehen. Der Wert wird fünf Ram sein. Ordnung, lassen Sie uns über die quadratische Animation sprechen. Lass uns weitermachen und es ausführen. Wir müssen den Namen Square Anim hören, dann die Dauer 2 Sekunden, dann wieder unendlich und linear Wie Sie sehen können, war alles in Ordnung. Und das einzige , was wir tun müssen, ist die Animationen für die Sticks zu erstellen. Sie sollten sich neigen, sobald das Quadrat auf das Gummi trifft. Lassen Sie uns die Keyframes für den linken Stick erstellen. Ich nenne es Left Stick Anim. Während der Animation sollten wir den Stick entsprechend der Z-Achse drehen Bei 0,30% drehen wir das Element noch nicht. Wir müssen die Transformation mit dem Wert Null drehen. Dann werden wir bei 50,65% den Stick leicht drehen. Der Wert wird zwei Grad betragen. Schließlich drehen wir den Stick bei 80,100% wieder in seine Standardposition Der Wert wird Null sein. In Ordnung, also ist alles bereit. Lass uns die Animation hier laufen lassen. Der Name ist links Stick Animal. Die Dauer wird 2 Sekunden betragen. Andererseits brauchen wir unendlich und linear. Wie Sie sehen können, dreht sich der Stick. Aber das ist nicht das , was wir hier brauchen. Es dreht sich von der Mitte aus, weil der Ursprung der Transformation standardmäßig auf Mitte gesetzt ist . Wir müssen ihn ändern. Der Ursprung wird unten in der Mitte liegen. In Ordnung, wie Sie jetzt sehen können, sieht alles gut aus. Lass uns die Animation auch für den rechten Stick ausführen. Ich werde diesen Code kopieren und unten einfügen. Lass uns den Namen ändern, den wir brauchen, rechte Stick-Animation. Außerdem müssen wir den Wert der Funktion „Z drehen“ ändern der Funktion „Z drehen Es sollte minus zwei Grad sein. Lassen Sie uns die Animationseigenschaft kopieren und den Namen ändern. In Ordnung, also wie ich sehen kann, funktioniert alles perfekt. Das einzige, was ich tun möchte, ist, dem Wrapper eine Überlaufüberschrift zuzuweisen dem Wrapper eine Überlaufüberschrift weil sich die Sticks leicht außerhalb des Rappers bewegen außerhalb des Rappers In Ordnung, das ist es. Endlich sind wir mit diesem Projekt fertig und ich hoffe, es hat dir gefallen. Bis zum nächsten Mal. 5. Projekt 2 – Landing-Page: In diesem Video werden wir eine animierte Landingpage mit HTML und CSS erstellen . Lassen Sie uns weitermachen und uns das fertige Projekt ansehen. Wenn wir die Seite neu laden, wird das Hintergrundbild im Vollbildmodus mit einer schönen Animation angezeigt im Vollbildmodus mit einer schönen Animation Sobald es angezeigt wird, ändert es seine Form, so dass das Projekt ein kleines Projekt sein wird, aber ich hoffe, es wird interessant sein und es wird Ihnen gefallen In Ordnung, lass uns anfangen. Ich habe auf dem Desktop einen neuen Ordner namens Lending Page Animation erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lass uns weitermachen und diesen Ordner öffnen. Und VS-Code erstellt dann unsere Arbeitsdateien für HTML und CSS. Wir brauchen Index-HTML und StyleTSS. Öffnen Sie dann die Indexpunkt-HTML-Datei und erstellen Sie ein einfaches HTML-Dokument Dafür müssen wir hier ein Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken In Ordnung, zuerst werde ich den Titel ändern. Es wird eine Landingpage-Animation sein. Dann lassen Sie uns die CSS-Datei verknüpfen. Ich werde das Link-Tag öffnen. Und dann müssen wir den Pfad der Datei definieren. Okay, lassen Sie uns endlich weitermachen und das Projekt im Browser mit einem Live-Server ausführen . Und dann platziere den Editor und den Browser wie. Wir sind also bereit zu beginnen. Zuallererst werde ich ein HTML-Markup erstellen. Lassen Sie uns das Tag mit einem Klassencontainer öffnen. Wir werden zwei verschiedene Elemente im Container haben. Die erste wird die Landung sein. Was den zweiten angeht, werde ich ihn PG nennen. In Ordnung, sagen wir über das HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Zuallererst werde ich einige Standard- und Reset-Stile erstellen . Ich werde jedes Element mit einem Sternchen auswählen. Und dann werde ich den Standardrand und das Padding loswerden Standardrand und das Padding Lassen Sie uns beide Eigenschaften auf Null setzen. Danach werde ich mich um den Container kümmern. Lassen Sie uns ihn auswählen und definieren, dass er sich innerhalb der Höhe befindet. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie zu 100% des Ansichtsteils machen. Ändere auch die Hintergrundfarbe. Ich werde den RGB-Wert 184-16-5119 verwenden In Ordnung, hier haben wir den Container mit einer Hintergrundfarbe Setzen wir uns auf den Container, wir weiter und kümmern Lassen Sie uns diese Elemente auswählen. Lassen Sie uns zunächst mit der Höhe definieren. Ich werde beide Eigenschaften auf 100% setzen . Dann definieren wir den Hintergrund. Zuallererst werde ich die lineare Gradientenfunktion verwenden. Ich werde hier zwei RGBA-Werte übergeben. Beide werden schwarze Farben mit einer Opazität von 0,8 sein. Dann definiere ich den Pfad des Bildes Wir brauchen die URL, dann den Ordnernamen images und wir müssen PG auswählen Pg auch. Bleiben wir dran, ohne Wiederholung. Außerdem werde ich die Größe des Hintergrunds definieren. Es wird abgedeckt werden. Hier haben wir also die Landung mit einem Hintergrundbild im Vollbildmodus. Lassen Sie uns weitermachen und uns um das zweite Element kümmern , das ein PG ist. Dieses Element wird die Landung abdecken. Sobald wir die Regeln für die Seite festgelegt haben, verschwindet sie und die Landingpage wird angezeigt. Lassen Sie uns zunächst die Höhe innerhalb der Höhe definieren. Ich mache beide zu 100% und ändere dann die Hintergrundfarbe. Ich werde hier denselben RGB-Wert verwenden , den wir für den Container verwendet haben. Okay, hier haben wir den Hintergrund, aber im Moment ist er unter dem Treppenabsatz platziert, und wie gesagt, wir müssen ihn über dem Treppenabsatz platzieren. Dafür verwende ich Positionen und die Z-Index-Eigenschaft. Zuallererst werde ich die Position auf absolut setzen. Dann definieren wir die Eigenschaften oben und links. Ich werde beide auf Null setzen. Dann benötigen wir eine Indexeigenschaft mit einem höheren Wert als Null. Sagen wir zehn. In Ordnung, wie Sie sehen können, verdeckt der Hintergrund die Landung und jetzt ist es an der Zeit, die Animation zu erstellen, die wir brauchen , um den Hintergrund verschwinden zu lassen. Sobald wir die Seite neu geladen haben, erstellen wir CSS-Frames Ich nenne es BG Anim. Insgesamt werden wir drei verschiedene Schritte haben. Ich werde die Skala des Elements verringern, aber entsprechend der Y-Achse bei 0,50% wird die Skala eins sein Dann müssen wir die Skala Y mit dem Wert eins transformieren. Und dann wird die Skala von 50 bis 100% auf Null reduziert. Bei 100% müssen wir die Skala Y auf Null transformieren, also schon die Keyframes. Und jetzt müssen wir diese Kacheln auf das Element anwenden. Wir brauchen Animationseigenschaften. Dann müssen wir zuerst den Namen der Animation definieren. Es wird G beliebig sein, dann brauchen wir eine Dauer von 2 Sekunden. Wie Sie sehen können, animieren die Elemente. Aber wir haben hier zwei Probleme. Das Element verschwindet in der Mitte der Seite. Das passiert, weil der Ursprung der Transformation standardmäßig im Mittelpunkt liegt und wir ihn für das zweite Problem ändern müssen Sobald das Element verschwindet, wird es wieder angezeigt. Wir müssen die Skala zunächst auf Null belassen. Lassen Sie uns den Ursprung der Transformation ändern. Wir müssen es an die Spitze schaffen. Jetzt ist ein Problem behoben. Was das zweite Problem betrifft, müssen wir zur Animationseigenschaft einen Wert namens forwards hinzufügen Animationseigenschaft einen Wert namens forwards Es behält alle Stile bei, die im letzten Schritt der Animation definiert wurden Wie Sie sehen können, funktioniert jetzt alles einwandfrei. Jetzt müssen wir uns um die zweite Animation kümmern. Wir müssen die Form der Landung ändern. Ich werde das mit einer der CSS-Eigenschaften namens Clip Path tun . Eigentlich kann ich eine der Websites empfehlen. Lass uns nach Clip Path suchen , wo du mit verschiedenen Formen herumspielen kannst. Sie können den richtigen CSS-Code von hier herunterladen. In unserem Fall haben wir eine Form mit sieben verschiedenen Punkten. Um eine Form mit einem Übergangseffekt in eine andere umzuwandeln , sollten beide Formen die gleiche Anzahl von Punkten haben. Ich habe alles vorbereitet, die Werte. Eigentlich kann man mit verschiedenen Formen und Werten herumspielen . Es liegt an dir. Ich werde SK-Frames mit dem Namen Landing A Overall erstellen . Wir haben drei verschiedene Stufen einem Wert von 0,50%, die dieselbe Form haben Lassen Sie uns den Clip-Pfad mit der Polygon-Funktion verwenden. Ich werde hier die folgenden Werte übergeben. Das erste Poly wird 50% Null sein, dann werden wir 70% Null haben Der nächste Wert wird zu 100% Null sein. Dann 100% zweimal Null, 100% dann haben wir Null zweimal 30% und Null. Was die 100% angeht , müssen wir diese Werte ändern. Wir benötigen ein Clip-Path-Polygon. Der erste Punkt wird 50% 4% sein, dann haben wir 70% 10%, dann 95,0 95, 87% dann 5% und 105% 15% Der letzte Punkt wird 31% 10% sein In Ordnung, die Keyframes Lassen Sie uns die Animation ausführen. Lassen Sie uns den Namen der Schlüsselbilder definieren, die eine Dauer von 4 Sekunden verleihen , wie im vorherigen Fall, den wir hier vorwärts benötigen Wenn wir die Seite neu laden, ändert das Element seine Form reibungslos Eigentlich möchte ich hier noch etwas hinzufügen. Wenn wir uns das fertige Projekt ansehen, werden wir feststellen, dass sich das Hintergrundbild reibungslos nach oben bewegt. Lassen Sie uns weitermachen und auch diesen Effekt hinzufügen. Wir müssen die Hintergrundposition definieren. Standardmäßig wird es mittig oben sein. Dann müssen wir es ändern. In der Animation brauchen wir unten in der Mitte. Ordnung, jetzt funktioniert alles perfekt und mit dem Projekt sind wir fertig. Bis zum nächsten Mal. 6. Projekt 3 – Ballanimation: In diesem Video werden wir ein CSS-Animationsprojekt erstellen. Das Projekt wird ein kleines Projekt sein, aber ich denke, es wird interessant sein und Sie werden einige neue Dinge über CSS-Animationen lernen. Lass uns weitermachen und das Projekt beschreiben. Wir haben hier einen animierten Ball , der sich auf und ab bewegt. Er trifft die Quadrate, die von der linken und rechten Seite kommen. Außerdem haben wir hier einen bewegten Hintergrund , der die Illusion erweckt , dass sich der Ball nach oben bewegt. Okay, lassen Sie uns über dieses Projekt sprechen. Lass uns weitermachen und anfangen, es zu erstellen. Ich habe einen neuen Ordner auf dem Desktop namens Ball Animation, in dem ich einen weiteren Ordner für das Hintergrundbild habe. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir werden nur zwei Dateien haben, CSS im Indexstil im HTML-Stil. Lassen Sie uns die Index-HTML-Datei öffnen und ein einfaches HTML-Dokument erstellen. Ich werde ein Ausrufezeichen verwenden und dann müssen wir Top oder Enter drücken Lassen Sie uns zunächst den Titel ändern. Ich werde deine Ballanimation einfügen. Danach werde ich die CSS-Dateien verknüpfen, den Link-Tag öffnen und den Inserter mit einem CSS Okay, lassen Sie uns endlich weitermachen und das Projekt im Browser ausführen Dafür verwende ich eines der VS-Codepakete namens Live Server. Bevor wir anfangen, den Code zu schreiben, werde ich den Editor und den Browser nebeneinander platzieren . Also werde ich zuerst ein HTML-Markup erstellen. Lassen Sie uns das Tag mit dem Klassenwrapper öffnen. Es wird den gesamten Inhalt innerhalb des Wrappers enthalten innerhalb des Wrappers drei verschiedene tiefe Die ersten beiden tiefen Elemente werden für die Quadrate bestimmt sein. Was das dritte tiefe Element betrifft, so wird es der Ball sein. Es ist ein offener Deep-Tag mit dem Klassenblock, es wird der allgemeine Klassenname sein. Aber außerdem brauchen wir eine individuelle Klasse, sagen wir Block eins. Lassen Sie uns diese Codezeile duplizieren und den Klassennamen ändern. Wir brauchen Block zwei. Okay? Lass uns noch einen Deep Tag mit dem Klassenball öffnen. Okay, lassen Sie uns über das HTML-Markup sprechen. Im Moment ist hier nichts sichtbar, weil alle Elemente leer sind Jetzt ist es an der Zeit, etwas CSS zu schreiben. Lassen Sie uns zunächst einige Standard- und Standardstile für jedes Element erstellen . Wählen wir ein Aster Risk aus. Ich werde Standard, Margin und Padding loswerden. Lassen Sie uns beide Eigenschaften auf Null setzen. Außerdem werde ich die Größe der Box wieder auf das Rahmenfeld setzen, sagen wir mal über die Standardstile in diesem Projekt. Wir werden Ram als Maßeinheit verwenden. Standardmäßig entspricht ein m 16 Pixeln. Ich möchte, dass es zehn Pixel sind. Dafür müssen wir die Standardgröße des HTML-Elements verringern . Wir müssen es auf 62,5% setzen Okay. Danach machen wir weiter und stylen die Körperelemente. Ich werde Breite und Höhe definieren. Legen wir 200% fest. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen Stellen wir es auf 200 VH ein. Als Nächstes kümmere ich mich um die Verpackung. Lassen Sie uns dieses Element auswählen und definieren, ich werde auf 270 setzen Okay, ich mache den Wrapper quadratisch. Dafür verwende ich eine der CSS-Eigenschaften namens Seitenverhältnis Wenn ich es auf eins setze, bedeutet das, dass der Wrapper eine Höhe von 70 M erhält . Aber wenn ich die Breite ändere, sagen wir auf ATM, dann wird auch die Höhe ATM sein Ich denke, diese Immobilie ist sehr praktisch. Lassen Sie uns weitermachen und den Hintergrund definieren. Lassen Sie uns die URL des Hintergrundbilds festlegen, und wir benötigen den Pfad des Bildes. Wir haben einen Ordner namens images und müssen Gng auswählen. Wie Sie hier sehen können, haben wir gerade den Hintergrund, das war's mit dem Wrapper Bevor wir weitermachen, möchte ich den Wrapper nur in der Mitte der Seite platzieren Verwenden wir dafür das CSS-Grid. Ich werde Display auf Grid setzen. Und um das Element dann in der Mitte zu platzieren, müssen wir die Elemente in der Mitte platzieren. Okay? Wie Sie sehen können, ist das Element perfekt in der Mitte platziert . Lass uns weitermachen. Antwort auf die Arbeit an den Boxen, ich meine die Quadrate die von links und rechts erscheinen, da Sie wissen, dass sie einen gemeinsamen Klassenblock haben. Lass uns weitermachen und es auswählen und die Breite definieren. Ich werde auf 18 Ram setzen. Ich möchte, dass diese Elemente Quadrate sind. Lassen Sie uns wieder das Seitenverhältnis mit dem Wert eins verwenden und auch die Hintergrundfarbe ändern. Ich werde deinen RGB-Wert verwenden. 501-18-4184, Okay. Wir haben hier die Quadrate. Lassen Sie uns weitermachen und die Positionen definieren. Ich werde die Position auf absolut setzen. Um das Element dann entsprechend dem Wrapper zu positionieren , setzen wir die Position auf einen Relativwert Danach werde ich die Positionen für die Quadrate separat definieren Positionen für die Quadrate separat Lassen Sie uns Block eins auswählen und die Eigenschaften oben und rechts definieren. Ich setze die oberste Position auf 16 Ram. Was die richtige Position angeht, so werden es 44 Ram sein. Dann werde ich diesen Code duplizieren. Lass uns den Schnellnamen ändern. Wir brauchen Block zwei. Die oberste Position wird dieselbe sein wie die rechte Position. Ich werde es auf acht Ram setzen. Ordnung, also wie Sie sehen können, sind die Elemente richtig positioniert. Jetzt ist es Zeit, sich um den Ball zu kümmern. Lass es uns auswählen. Zuallererst werde ich die Breite definieren. Stellen wir es auf 12 Ram ein. Wir brauchen die gleiche Höhe für den Ball. Ich werde wieder eine Eigenschaft namens Seitenverhältnis mit dem Wert eins verwenden . Und dann ändern wir die Hintergrundfarbe. Verwenden wir RGB, 255-11-8118 Okay, lassen Sie uns das mit einem Randradius mit dem Wert 50% abrunden Randradius mit dem Wert . Dann kümmern wir uns Ich werde die Position auf absolut setzen . Dann werde ich Eigenschaften von links oben definieren. Die linke Position wird 29 Ram sein. Was die oberste Position angeht, wird es eine Rampe von 22 sein. In Ordnung, das war's mit dem Ball. Jetzt können wir mit dem lustigen Teil beginnen. Ich meine die Animationen. Fangen wir mit den Quadraten an. Schauen wir uns das fertige Projekt an. Wie Sie sehen können, kommen die Elemente der Reihe nach von oben. Zuerst kommt das linke Quadrat runter und dann das rechte. Außerdem ändert sich die Deckkraft der Quadrate während der Animation Okay, lassen Sie uns weitermachen und die CSS-Keyframes erstellen , in denen wir die CSS-Regeln definieren müssen , die während der Animation auf die Quadrate angewendet werden während der Animation auf die Quadrate angewendet Die Keyframes werden aus verschiedenen Schritten bestehen. Ich nenne es Block eins m von 0 bis 30% Ich meine, zu Beginn der Animation sollte sich das Quadrat von oben nach unten bewegen Außerdem müssen wir die Opazität auf 0% ändern . Ich werde transform mit der Funktion translate y als Wert verwenden transform mit der Funktion translate , den ich hier verwenden werde , -38 Außerdem müssen wir hier eine Funktion mit Null Grad definieren. Wie gesagt, wir brauchen eine Deckkraft von 0,5 In Ordnung, bei 30% bewegt sich das Element an seiner Standardposition nach unten , immer noch ohne Drehung Wir transformieren Y mit Null und drehen Z erneut mit Null Auch hier wird der nächste Schritt bei 40% liegen. In diesem Schritt bleibt das Quadrat an seiner Position, es dreht sich aber. Außerdem werden wir die Opazität um 40% erhöhen. Wir müssen Y mit Null transformieren, also mit dem Wert -180 Grad Außerdem müssen wir die Opazität erhöhen. Machen wir eins von 40% bis zum nächsten Schritt, ich meine, bis 45% brauchen wir dieselben Zellen, weil während dieser Zeit der Ball am Quadrat sein sollte und wir darauf warten sollten Platzieren wir hier und addieren dann 45%. Alles klar, danach sollte sich das Quadrat nach unten bewegen und verschwinden. Der nächste Schritt wird 55% sein. In diesem Schritt müssen wir Translate Y mit dem Wert 38 Ram transformieren. Außerdem brauchen wir die Rotation. Ich drehe C um -180 Grad. Außerdem müssen wir die Opazität verringern. Setzen wir es auf 2,5 Okay, wir brauchen dieses Quadrat, um in dieser Position zu bleiben Am Ende der Animation benötigen wir dieselben Stile von 55% bis 100%. Fügen wir hier 100% hinzu. In Ordnung, die Animation ist tatsächlich fertig. Lassen Sie uns weitermachen und es für das erste Quadrat ausführen, wir benötigen eine Animationseigenschaft, dann müssen wir den Namen der Animation definieren. Ich meine, pflücke einen. Der nächste Wert wird die Dauer von 5 Sekunden sein Als Nächstes müssen wir die Animation unendlich laufen lassen. Also müssen wir unendlich einfügen. Ich werde die Animation linear machen. Wie Sie sehen können, läuft die Animation. Aber das ist eigentlich nicht das, was wir gerade wollen. Das Element dreht sich entsprechend der Mitte, da der Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist. In unserem Fall müssen wir es unten rechts machen. Lassen Sie uns Transform Origin verwenden und es unten rechts platzieren. Wie Sie jetzt sehen können, bewegt sich das Quadrat korrekt. Sobald es sich vom Hintergrund entfernt, muss es versteckt werden. Dafür können wir dem Wrapper overflow hidden zuweisen. Das ist also ungefähr das erste Quadrat. Das Gleiche brauchen wir auch für das zweite. Eigentlich werde ich die gesamten Keyframes duplizieren. Lassen Sie uns den Namen, den wir für den Block benötigen, in einen beliebigen anderen Namen ändern. Ab hier müssen wir die Minuszeichen loswerden, weil wir das zweite Quadrat in die entgegengesetzte Richtung drehen müssen . Außerdem müssen wir den Ursprung der Transformation ändern . In diesem Fall brauchen wir unten links. Lassen Sie uns abschließend die Animationseigenschaft definieren. Wir müssen hier den Namen der Animation ändern. Es wird für jeden Block verwendet , außerdem brauchen wir hier eine Verzögerungszeit für das zweite Quadrat. Machen wir es tatsächlich 2,5 Sekunden, das ist nicht die endgültige Version dieser Animation. Wir werden hier eine kleine Änderung vornehmen sobald wir uns um die Ballanimation gekümmert haben. Lass uns weitermachen und anfangen, daran zu arbeiten. Schauen wir uns das fertige Projekt an. Wie Sie sehen können, bewegt sich der Ball auf und ab und ändert auch leicht seine Form. Lassen Sie uns weitermachen und CSS, Keyframes für den Ball, erstellen . Ich nenne es Ball Ending. In der Ballanimation werden wir fünf verschiedene Schritte von 0 bis 45% haben . Der Ball bewegt sich nach oben und schrumpft leicht bei 0%. Ich verwende Transformation, Translate Y mit dem Wert -20 Ram Um die Elemente leicht zu verkleinern, verwende ich außerdem die Skalierungsfunktion Sie müssen 0,8 als Wert für die X-Richtung übergeben, als Teil der Y-Richtung wird es eins sein Dann sollte sich der Ball von 45% bis zum nächsten Schritt nach unten bewegen. Außerdem sollten wir die Skala auf 45% ändern . Wir müssen Y mit dem Wert Null transformieren und übersetzen. Außerdem müssen wir die Skala ändern. Es wird 0,9 und eins sein. Der nächste Schritt wird bei 50% liegen. Bei diesem Schritt sollte sich der Ball nach unten bewegen. Außerdem müssen wir den Ball verkleinern, aber in diesem Fall vertikal um 50%. Wir müssen y transformieren, mit dem Wert zwei Ram übersetzen Die Skala wird eins und 0,7 sein . Danach müssen wir den Ball nach oben bewegen und ihn horizontal um 60% verkleinern. Ich verwende Transform Translate Y mit dem Wert minus zehn Ram Transform Translate Y mit dem Wert minus zehn Was die Skala angeht, so wird es Punkt 9.1 sein. In Ordnung, danach brauchen wir den letzten Schritt Wir müssen den Ball nach oben bewegen und auch horizontal um 100% schrumpfen . Wir müssen Y mit dem Wert -20 Ram transformieren, übersetzen Was die Skala angeht, wird es Punkt 8.1 sein. Okay, die Keyframes sind fertig Lassen Sie uns weitermachen und diese Regeln auf das Element anwenden. Lassen Sie uns die Animationseigenschaft verwenden. Wir brauchen hier den Namen des Animationsballs. In jedem Fall wird die Dauer 2,5 Sekunden betragen. Außerdem sollte die Animation unendlich laufen und linear sein Wie Sie sehen können, animiert der Ball, trifft aber nicht auf die Wir müssen die Zeiten hier anpassen. Ich werde der Animation eine kleine Verzögerung hinzufügen. Es wird 0,9 Sekunden dauern. Wie Sie sehen können, berührt der Ball jetzt die Quadrate. Auf einen Blick funktioniert alles einwandfrei. Aber wenn wir die Seite neu laden, werden der Ball und das rechte Quadrat wie in einem Postzustand angezeigt, was nicht gut aussieht Wir müssen die gesamte Animation dynamisch machen , egal ob wir die Seite neu laden oder Um das zu tun, können wir die Verzögerungszeit manipulieren. Wenn wir negative Werte verwenden, beschleunigt die Eigenschaft Animationsverzögerung im Allgemeinen Eigenschaft Animationsverzögerung die Animation. Schauen wir uns das fertige Projekt an. Wenn wir die Seite neu laden, werden Sie sehen, wie sich das rechte Quadrat vom Hintergrund entfernt und auch der Ball aus einer schwierigen Position nach oben bewegt Wir müssen die Verzögerungszeiten für das zweite Quadrat ändern. Es werden -2,5 Sekunden sein. Wenn wir nun die Seite neu laden, werden wir sehen, wie sich das rechte Quadrat Wrapper entfernt. Was den Ball betrifft: Wenn wir hier das Minuszeichen hinzufügen, wird der Ball animiert sobald wir die Seite ausrollen Aber jetzt, wie Sie sehen können, trifft er die Quadrate nicht Ich werde die Verzögerungszeit erhöhen. Stellen wir es auf 1,5 Sekunden ein. Ordnung, das war's mit den Animationen des Balls und der Quadrate. Jetzt müssen wir uns um den Hintergrund kümmern Bevor wir mit der Arbeit an der Animation beginnen, werde ich dem Wrapper ein paar Hintergrundstile hinzufügen dem Wrapper ein paar Hintergrundstile hinzufügen Wir müssen die Größe des Hintergrunds definieren. Diese Eigenschaft nimmt zwei Werte an. Die Breite des Hintergrunds wird automatisch eingestellt. Was die Höhe angeht, werde ich sie auf 70 m setzen . Um das zu verdeutlichen, füge ich der Hülle einen Rand hinzu Lass uns einen Widder draus machen, fest und rot. Außerdem werde ich die Hintergrundwiederholung mit dem Wert „Keine Wiederholung“ definieren . Wenn ich nun die Werte der Hintergrundgröße ändere, sagen wir auf 50 Ram und 60 Ram, werden Sie feststellen, dass die Breite und Höhe des Hintergrunds geändert werden. So funktioniert die Eigenschaft „ Hintergrundgröße“. Gehen wir wieder her. 0,70 Ram. Wir verwenden hier, weil wir die Qualität des Bildes beibehalten und es nicht schrumpft Jetzt müssen wir den Hintergrund während der Animation animieren Hintergrund während der Wir müssen den gesamten Hintergrund nach unten verschieben. Und das mache ich mit der Eigenschaft Hintergrundposition. Lassen Sie uns zunächst Keyframes mit dem Namen BG bei 0% erstellen . Ich werde die Hintergrundposition auf Mitte und Null setzen . die 100% angeht, so wird die Hintergrundposition mittig sein und die Position 70 um die Keyframes herum. Wenden wir diese Regeln auf den Wrapper an. Verwenden Sie die Animationseigenschaft mit dem Namen Background Anim. Dann wird die Dauer 5 Sekunden betragen. Auch hier brauchen wir unendlich und linear. Wie Sie jetzt sehen können, bewegt sich der Hintergrund nach unten. Sobald es sich bewegt, verschwindet es. Und das brauchen wir nicht, wir müssen den Hintergrund wiederholen, aber in diesem Fall die Hintergrundwiederholung entsprechend der Y-Achse lautet die Eigenschaft für die Hintergrundwiederholung entsprechend der Y-Achse Wiederholung Y. Nun, wie Sie sehen können, funktioniert alles einwandfrei Lassen Sie uns diese Grenze von hier aus loswerden. Außerdem möchte ich den Quadraten eine Kleinigkeit hinzufügen. Fügen wir ihnen einen kleinen Schatteneffekt hinzu. Verwenden wir den Boxschatten mit den Werten 0,2 bis 0,2 m und dann 0,4 als Farbe. Ich werde AA verwenden. Eigentlich wird der Schatten innerhalb des Elements sein , das wir hier in St. brauchen Ich will den Schatten überall auf dem Platz haben. Wir brauchen hier auch andere Werte. -0,2 Ram, -0,2 Ram, 0,4 Ram, dann die Farbe AA und wieder Inset Okay, endlich mit diesem Projekt sind wir fertig. Ich hoffe es war interessant und es hat dir gefallen. Wir sehen uns beim nächsten Mal. 7. Projekt 4 – Animierte Erde: In diesem Video werden wir eine animierte Erde erstellen, die Sie hier auf der Seite sehen. Wir werden dieses Projekt mit reinem TML und CSS erstellen. Wie Sie sehen können, haben wir hier zwei verschiedene Teile. Auf der linken Seite haben wir den dunklen Teil der Erde. Auf der rechten Seite befindet sich ein heller Teil der Erde. Die Erde selbst dreht sich entsprechend ihrer Y-Achse. In Ordnung, schauen wir uns dieses Projekt an. Lass uns weitermachen und anfangen. Ich habe auf dem Desktop einen neuen Ordner namens Animated Earth erstellt , in dem wir einen weiteren Ordner für die Bilder haben. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen und dann unsere Arbeitsdateien für HTML und CSS erstellen. Okay, lassen Sie uns die indizierte HTML-Datei öffnen und ein einfaches HTML-Dokument erstellen Dafür müssen wir hier ein Ausrufezeichen platzieren und dann Top oder Enter drücken . Los geht's Zuallererst werde ich den Titel ändern. Es wird eine animierte Erde sein. Dann verknüpfen wir die CSS-Datei, öffnen das Link-Tag und geben den Namen der Datei an. Ordnung, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser ausführen . Platzieren Sie dann den Editor und den Browser nebeneinander. Wir sind bereit, mit dem Schreiben des Codes zu beginnen. Zuerst werde ich das HTML-Markup erstellen. Lassen Sie uns ein P-Tag mit einem Klassenwrapper öffnen. Im Wrapper werden wir zwei verschiedene Elemente haben, ich meine den Teil und den Nachtteil Lassen Sie uns Deep Tack mit den Klassen Earth beginnen und dann diese Codezeile duplizieren und den Klassennamen ändern, den wir brauchen In Ordnung, schauen wir uns das mit dem HDML-Markup an. Lassen Sie uns weitermachen und antworten , um etwas CSS zu schreiben. Zuallererst werde ich einige Reset-Stile für jedes Element erstellen . Lassen Sie uns weitermachen und das Sternchen auswählen und den Standardrand und die Polsterung für jedes Element entfernen Ich werde während des gesamten Projekts beide Eigenschaften auf Null setzen gesamten Projekts beide Eigenschaften auf Null Ich werde Ram als Maßeinheit verwenden. Im Moment entspricht ein Ram 16 Pixeln, und ich möchte, dass es zehn Pixeln entspricht Dafür müssen wir die Schriftgröße der HTML-Elemente verringern die Schriftgröße der HTML-Elemente Machen wir 62,5%. In Ordnung, lassen Sie uns weitermachen und die Körperelemente anpassen Ich werde mit der Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie zu 100% des Viewports machen Jetzt ist es an der Zeit, sich um die Verpackung zu kümmern. Lassen Sie uns weitermachen und diese Elemente auswählen. Definieren Sie zunächst die Breite. Ich stelle es auf Straßenbahn. Ich will dieselbe Höhe für die Verpackung, ATM. Dafür können wir eine der Eigenschaften des CS verwenden , die als Seitenverhältnis bezeichnet wird Wenn wir es auf eins setzen, bedeutet das, dass die Höhe des Wrappers Straßenbahn ist Wenn wir jedoch die Breite ändern, wird die Höhe entsprechend geändert Okay. Als Nächstes stelle ich die Hintergrundfarbe ein. Lassen Sie uns einen temporären Hintergrund verwenden. Ich werde BB verwenden und das Element auch mit einem Randradius von 50% abrunden , okay? Danach werde ich den Wrapper perfekt in der Mitte platzieren den Wrapper perfekt in der Mitte Und das werde ich mit Positionen machen. Wir brauchen eine absolute Position. Dann müssen wir die Eigenschaften oben und links definieren. Ich werde beide Positionen auf 50% setzen . Um das Element dann perfekt in der Mitte zu platzieren, müssen wir die Transformationsfunktion mit der Übersetzungsfunktion verwenden. Und wir müssen hier -50% für die X- und Y-Richtung übergeben . Okay, das ist es also Was die Verpackung angeht, so ist sie in der Mitte platziert. Jetzt werde ich mich um die Erde kümmern. Wie du weißt, haben wir zwei verschiedene Elemente, ich meine, den Tag- und den Nachtteil. Lassen Sie uns beide Elemente anhand des gemeinsamen Klassennamens auswählen. Zuallererst werde ich die Breite definieren. Machen wir es zu 100%. Was die Höhe angeht, werde ich wieder die Eigenschaft Seitenverhältnis mit dem Wert eins verwenden . Stellen Sie dann die Position auf absolut ein. Machen Sie das Element außerdem mit einem Randradius von 50% abgerundet . Jetzt werden beide Elemente auf diesem Kreis übereinander platziert. Jetzt können wir die Hintergründe für beide Teile definieren. Wählen wir den ersten aus und definieren Sie das Hintergrundbild. Lassen Sie uns den Pfad des Bildes definieren. Wir haben den Ordner Images und müssen Earth, JPG auswählen. Hier haben wir das Hintergrundbild. Das ist der helle Teil. Lassen Sie uns weitermachen und dasselbe auch für den Teil tun. Eigentlich werde ich diesen Code duplizieren. Lassen Sie uns den Klassennamen ändern, den wir hier benötigen. Und ändern Sie auch den Namen des Bildes, das wir benötigen. Jetzt sehen wir hier das Hintergrundbild des Teils. Das passiert, weil beide Elemente ihre absolute Position haben und der Teil mit dem Tag hinter dem Teil mit der Nacht gelandet ist. Als Nächstes werden wir den halben Teil der Nacht kürzen. Um das zu tun, verwende ich eine der CSS-Eigenschaften namens clip path. Ich werde hier die Werte einfügen und Ihnen dann zeigen, wo Sie die Informationen zu dieser Eigenschaft finden können . Wir brauchen Polygon, die Werte werden die folgenden sein. Wir brauchen zweimal Null, dann 50% Null, dann 50% 100% und dann 0,100% Wie Sie sehen können, ist der halbe Teil davon abgeschnitten Lass uns weitermachen und in Google nach Clip Path suchen. Dies ist die Website, auf der Sie mit verschiedenen Formen herumspielen können. Sobald Sie die gewünschte Form erhalten haben, können Sie von hier aus einfach den richtigen CSS-Code abrufen und ihn in Ihrem Projekt verwenden. Dies ist die sehr nützliche Website und Sie können sie besuchen. Okay, lassen Sie uns weitermachen und mit der Arbeit an der Animation beginnen. Ich werde CSS-Keyframes mit dem Namen Earth erstellen. Jeder, wir werden die Hintergrundpositionen manipulieren. Wir werden nur zwei Schritte machen, von 0% bis 100%. Wir werden die Position des Hintergrunds um genau den gleichen Abstand ändern Hintergrunds um genau den gleichen Abstand , den das Bild hat wie die Breite. Bei 0% wird die Hintergrundposition Null und die Mitte sein. Bei 100% wird die Hintergrundposition dann 192 m betragen, was der Breite des Bildes entspricht, und dann der Mittelpunkt. Ordnung, lassen Sie uns weitermachen und diese Kacheln auf die Elemente auftragen. Beide Teile werden dieselbe Animation haben. Wir benötigen hier den Namen der Animation, gefolgt von der Dauer, die 25 Sekunden betragen wird. Dann möchte ich, dass die Animation unendlich läuft. Wir brauchen unendlich, und auch die Animation wird linear sein, okay? Wie Sie sehen können, funktioniert die Animation perfekt und wir haben einen schönen Tag - und Nachteffekt. Bevor wir dieses Video beenden, werde ich der Erde einige Schatten hinzufügen. Dafür werde ich das Pseudoelement Before verwenden. Lassen Sie uns den Wrapper vor dem Element auswählen. Eigentlich werde ich diesem Element genau die gleiche Form geben , die der Wrapper Lassen Sie uns den Inhalt definieren. Es wird leer sein. Dann setze ich die Position auf absolut. Außerdem werde ich innerhalb von Höhen definieren Lassen Sie uns beide auf 100% setzen und dann eine temporäre Hintergrundfarbe verwenden, BB. Wie Sie sehen können, ist das Element hinter der Hülle gelandet Das brauchen wir nicht, wir müssen es vor der Erde platzieren Dafür verwende ich die Z-Index-Eigenschaft und mache das Element außerdem abgerundet Die Z-Index-Eigenschaft wird zehn sein. Wir brauchen hier einen höheren Wert als Null. Was den Grenzradius angeht, werde ich ihn auf 50% setzen. In Ordnung, lassen Sie uns diesen Hintergrund von hier aus loswerden. Außerdem werde ich den Hintergrund für den Wrapper entfernen . Wir werden ein paar verschiedene Schatten haben, der eine wird sich um die Erde drehen Außerdem werden wir zwei verschiedene Schatten für die Nacht- und Tagesbereiche haben . Verwenden wir Box Shadow mit den Werten minus eins Ram, minus eins Ram, zwei Ram und der Farbe vier. Dann brauchen wir einen Ram zweimal zwei Ram und dieselbe Farbe. Jetzt haben wir den Schatten, der die Erde umgibt. Was die Schatten innerhalb des Elements angeht, fügen wir sie hier ein. Fügen Sie zehn M05 Ram und die schwarze Farbe ein. Dann brauchen wir wieder Minus 1m02m als Farbe. Ich werde 933 verwenden. In Ordnung, das war's also. Endlich ist das Projekt abgeschlossen. Ich hoffe es war interessant und es hat dir gefallen. Wir sehen uns beim nächsten Mal. 8. Projekt 5 – Blume: In diesem Video werden wir die Blume mit reinem HTML und CSS erstellen . Hier haben wir die fertige Version des Projekts, in der Sie eine normale Blume mit ein paar Blütenblättern und einem Stiel sehen können . Okay, lassen Sie uns weitermachen und mit der Erstellung dieses Projekts beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Flower vorbereitet , der momentan leer ist. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen und unsere Arbeitsdateien für HTML und CSS erstellen . Öffnen Sie dann die Index-HTML-Datei und erstellen Sie ein einfaches HTML-Dokument. Dafür müssen wir hier ein Ausrufezeichen platzieren und dann Top oder Enter drücken In Ordnung, lassen Sie uns zuerst den Titel ändern. Es wird eine Blume sein, dann werde ich die CSS-Datei verlinken. Lassen Sie uns den Link öffnen und hier den Namen der CSS-Datei angeben. Okay, endlich werde ich das Projekt über einen Live-Server im Browser ausführen . Lassen Sie uns auch den Editor und den Browser nebeneinander platzieren . Okay, lassen Sie uns weitermachen und mit der Erstellung eines HDML-Markups beginnen . Ich werde einen tiefen Zug mit der Klassenblume öffnen. Es wird den gesamten Inhalt beinhalten. Als nächstes brauchen wir einen weiteren tiefen Zug, die Blütenblätter und auch den Kreis, der sich in der Mitte der Blüte befindet, umwickelt auch den Kreis, der sich in der Mitte der Blüte befindet in der Mitte der Blüte befindet Insgesamt werden wir 12 Blütenblätter haben. Lass uns sie erstellen. brauchen wir den Kreis. Lassen Sie uns einen tiefen Einblick in den Klassenkreis gewinnen. Außerdem brauchen wir noch einen weiteren tiefen Zug außerhalb der Blütenblätter , der zu einem Stängel werden soll In Ordnung, lassen Sie uns über das H-Mel-Markup sprechen. Lass uns weitermachen und anfangen, CSS zu schreiben. Zuallererst werde ich einige Reset- und Standardstile für jedes Element erstellen . Wählen wir sie mit einem Sternchen aus. Dann entfernen Sie den Standardrand und die Polsterung. Lassen Sie uns beide Eigenschaften auf Null setzen. Außerdem werde ich die Größe der Box auf die Rahmenbox setzen. Okay, während des gesamten Projekts werde ich Ram als Maßeinheit verwenden. Standardmäßig entspricht ein M 16 Pixeln, und ich möchte ein M in zehn Pixel umwandeln Dafür müssen wir die Fehlergröße des HM-Elements verringern die Fehlergröße des HM-Elements Wir müssen es auf 62,5% bringen Jetzt ist es an der Zeit, mit der Anpassung des Wrappers zu beginnen . Element entwickeln. Ich bin in der Blume, lass uns die Höhe definieren. Ich werde den Wert auf 100% setzen. Was die Höhe angeht, so wird sie 100% des Viewports ausmachen Ändern Sie auch die Hintergrundfarbe. Ich verwende hier den RGB-Wert 236,232,226 Okay, das war's erstmal mit der Blüte, lass uns weitermachen und uns um die Blütenblätter kümmern Ich bin im Wrapper, lassen Sie uns mit Höhe definieren. Ich werde beide Eigenschaften für zwei Ram auf setzen. Außerdem werde ich hier eine temporäre Hintergrundfarbe verwenden . Sagen wir grün. Eigentlich werde ich das Element in der Mitte platzieren. Und dafür können wir die Flax-Bücher von CS verwenden. Lassen Sie uns Display Flax verwenden und dann das Inhaltszentrum und ein Einzelpostenzentrum angeben Okay. Als Nächstes wähle ich das Paddel selbst Lassen Sie uns seine innere Höhe definieren. Ich setze beide auf 15 Ram. Lassen Sie uns hier eine temporäre Hintergrundfarbe verwenden. Sagen wir gelb. Danach definiere ich die Position für die Blütenblätter. Setzen wir es auf absolut. Wir müssen die Elemente entsprechend den scheinbaren Elementen positionieren . Wir müssen die Blütenblätter relativ zueinander positionieren. Dann definieren wir die oberen und linken Eigenschaften. Ich werde beide auf fünf RAM einstellen. Ordnung, jetzt sehen wir hier nur ein Blütenblatt, aber alle Blütenblätter liegen übereinander Und deshalb sehen wir hier nur eines davon. Danach möchte ich die Form der Blütenblätter mithilfe des Randradius ändern . Ich werde das Element an allen Seiten mit Ausnahme der unteren rechten Ecke abrunden . Lassen Sie uns den Randradius auf 50% setzen, dann wieder auf 50%, dann auf Null , dann auf 50% Alles klar , danach werde ich die Blütenblätter in beide Richtungen neigen Ich meine, X und Y transformieren Schrägstellung. Die Werte werden in beiden Richtungen 23 Grad betragen. Wie Sie sehen können, sind die Blütenblätter schief. Aber außerdem müssen wir sie drehen, wenn wir hier die Drehfunktion mit sagen wir 30 Grad verwenden hier die Drehfunktion mit sagen wir 30 Grad Es wird die Form des Blütenblattes verändern. Und das brauchen wir nicht. Wir müssen diese beiden Funktionen nicht gleichzeitig verwenden. Um dieses Problem zu vermeiden, werde ich ein Before-Pseudoelement verwenden Wir werden Blütenblätter mit dem Before-Element erstellen und sie dann schräg stellen Was die Drehfunktion angeht, werden wir sie für tiefe Elemente verwenden Wählen wir das Blütenblatt mit dem vorherigen Element aus. Definieren wir zunächst den Inhalt, um ihn leer zu machen. Dann müssen wir Breite und Höhe definieren. Ich werde beide Eigenschaften auf 100% setzen, Al die Position auf absolut setzen und dann den Hintergrund erstellen. Verwenden Sie Ihre lineare Verlaufsfunktion mit zwei verschiedenen Farben, ich meine F und F. Als Nächstes nehme ich diese Stile von hier und weise sie dem vorherigen, dem Element, zu. Lassen Sie uns auch diese temporären Hintergrundfarben loswerden. Ordnung. Danach werde ich einen kleinen Schatteneffekt erzeugen. Lassen Sie uns den Boxschatten dreimal mit den Werten 0,3 m und dann die Farbe DD verwenden. Okay, also die Blütenblätter sind personalisiert, und jetzt müssen wir sie drehen. Wir müssen jedes Blütenblatt einzeln auswählen und die Drehfunktion verwenden Lass uns weitermachen und den ersten auswählen. Eigentlich müssen wir das erste Blütenblatt nicht drehen. Aber wie dem auch sei, ich werde die Drehfunktion dafür definieren die Drehfunktion dafür Der Wert wird Null sein. Lassen Sie uns diesen Code duplizieren. Ich werde das zweite Blütenblatt um 30 Grad drehen. Wie Sie sehen können, ist das zweite Blütenblatt gedreht, aber es ist von der Mitte aus gedreht Dies liegt daran, dass der Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist Und wir müssen es ändern, eigentlich müssen wir es für das Pedal selbst und auch für das Beforedo-Element ändern . Der Ursprung der Transformation wird unten rechts liegen. Okay, das Problem ist behoben. Lassen Sie uns weitermachen und eine gedrehte Funktion für die restlichen Pedale definieren eine gedrehte Funktion für die restlichen Pedale Der Unterschied zwischen den Werten der gedrehten Funktion wird 30 Grad betragen. Für das dritte Pedal benötigen wir 60 Grad. Dann wird der nächste 90 Grad sein. Für das fünfte Pedal benötigen wir 120 Grad. Dann wird der nächste 150 Grad haben. Dann wird es beim siebten Pedal 180 Grad sein. Als nächstes werden wir 210 Grad haben. Beim neunten Pedal werden es 240 Grad sein. Dann werden wir 270 Grad haben. Für das 11. Pedal benötigen wir 300 Grad. Für das letzte Element werden es 330 Grad sein. In Ordnung. Nun, wie Sie sehen können, haben wir hier ein viel besseres Ergebnis. Als Nächstes werde ich dich aus dem Kreis holen. Es wird in der Mitte der Blume platziert. Wählen wir es aus und definieren wir, dass es innerhalb der Höhe liegt. Ich mache aus beiden fünf Ram. Dann wird die Farbe weiß sein. Lass uns die Position ändern, sie absolut machen. Um das Element zu erfassen, setze ich die Eigenschaften top und left, beide auf 50%, also müssen wir Translate erneut mit -50% transformieren Translate erneut mit -50% Dann setze ich den Rand, er wird 0,1 Ram solid sein Und mit der Farbe DDD wird das Element mit einem Randradius von 50% abgerundet. Alles klar, lassen Sie uns über den Kreis und bevor wir uns um den Stamm kümmern, werde ich eine Umgebung mit drei D erstellen Und ich möchte die Blume im Drei-D-Raum leicht drehen die Blume im Drei-D-Raum leicht Um eine Drei-D-Umgebung zu erstellen, müssen wir eine Eigenschaft namens Perspektive verwenden. Stellen wir es auf 100 Ram ein. Dann lass uns die Blume drehen. Wir müssen uns transformieren. Drehe X mit einem Wert um 40 Grad. In Ordnung, jetzt können wir weitermachen und den Stiel anpassen. Wählen wir es aus und definieren wir zunächst diese Position. Machen Sie das Absolute, dann müssen wir die Breite definieren. Höhe, Die Breite wird zwei sein. Was die Höhe angeht, werde ich sie auf 60 m setzen . Lassen Sie uns den Hintergrund definieren. Lassen Sie uns die lineare Sortierfunktion verwenden. Die Richtung des Farbübergangs wird von links nach rechts sein Ich werde hier drei Farben verwenden. Die erste wird RGB sein , 14923592. Dann werden wir nur die grüne Farbe verwenden. Was die dritte betrifft, müssen wir hier die erste RGB-Funktion mit den gleichen Werten verwenden . Okay, hier haben wir den Stiel, aber wie Sie sehen können, müssen wir die Position ändern. Lassen Sie uns das mit der Funktion Transform, Translate Y sie auf 50% setzen. Außerdem werde ich den Stiel entsprechend der Z-Achse um sieben Grad drehen . Der Stiel ist gedreht. Aber auch hier müssen wir den Ursprung der Transformation ändern . In diesem Fall müssen wir es an die Spitze bringen. Lassen Sie uns den Transformationsursprung auf oben setzen. Schließlich müssen wir den Stiel hinter den Blütenblättern platzieren. Verwenden wir dafür eine Indexeigenschaft mit minus eins. Okay, eigentlich ist alles erledigt. Sie können hier einige Effekte oder Animationen hinzufügen und dieses Projekt selbst entwickeln . Wir sehen uns beim nächsten Mal. 9. Projekt 6 - Atom-Animation: In diesem Video werden wir Atom-Animationen mit HTML und CSS erstellen . Das Projekt wird ein kleines Projekt sein, aber ich denke, es wird lustig und interessant sein. Sie werden einige neue CSS-Tricks und -Techniken kennenlernen. Wie Sie sehen, haben wir hier ein typisches Atom, das Sie vielleicht in Ihrem Chemieunterricht gesehen haben oder auf eines der beliebten Editor-Logos gestoßen sind . Ich meine das Atom. Wir haben hier ein paar Kreise mit Kugeln, die sich um den Hauptball bewegen. Lassen Sie uns über das Projekt sprechen, machen wir weiter und fangen wir an, daran zu arbeiten. Ich habe auf dem Desktop einen neuen Ordner namens Atom erstellt. Lassen Sie uns es im VS-Code öffnen und unsere Arbeitsdateien für HTML-CSS erstellen . Öffnen Sie dann die Index-HTML-Datei und erstellen Sie ein einfaches HTML-Dokument. Dafür setze ich hier ein Ausrufezeichen und drücke dann Top oder Enter Zuallererst werde ich den Titel ändern. Es wird Atom sein. Dann lassen Sie uns die CSS-Datei verknüpfen. Lassen Sie uns das Link-Tag öffnen, geben Sie hier den Pfad der Datei an. Schließlich werde ich das Projekt über den Live-Server im Browser ausführen . Lassen Sie uns den Editor und den Browser so nebeneinander platzieren und loslegen. Zuallererst werde ich ein HTML-Markup erstellen. Lassen Sie uns das Deep-Tag öffnen, das der Wrapper sein wird. Wir werden drei Kreise haben und jeder Kreis wird einen Ball haben. Lass uns den Klassenkreis öffnen, tief ziehen, einen einkreisen und dann ein weiteres tiefes Etikett öffnen Innerhalb des Kreises brauchen wir dich für den ersten Klassenball. Okay? Lass uns diesen Code duplizieren und die Klassennamen ändern. Wir brauchen Kreise. Ich meine Kreis zwei und Kreis drei und auch Kugel zwei und Kugel drei. Okay, lassen Sie uns über das HD-Markup sprechen. Jetzt können wir anfangen , etwas CSS zu schreiben. Zuallererst werde ich einige Reset- und Standardstile für jedes Element erstellen . Verwenden wir ein Aster-Risiko. Ich werde den Standardrand und die Standardpolsterung loswerden. Lassen Sie uns beide auf Null setzen. Außerdem werde ich die Größe der Box auf Border Box setzen. Während dieses Projekts werden wir Ram als Maßeinheit verwenden. Im Moment entspricht ein Ram 16 Pixeln. Da die Schriftgröße des HTML-Codes 16 Pixeln entspricht, möchte ich einen Ram in zehn Pixel umwandeln Und dafür müssen wir die Schriftgröße des HTML-Elements verringern . Wir müssen es auf 62,5% bringen. In Ordnung, lassen Sie uns weitermachen und die Körperelemente anpassen Wählen wir es aus und definieren es mit der Höhe. Ich setze auf 100%. Was die Höhe angeht, wird sie 100% des Viewports ausmachen Lassen Sie uns auch die Hintergrundfarbe ändern. Verwenden wir Ihren RGB-Wert 46518. Okay. Als Nächstes wähle ich den Wrapper aus und definiere seine Breite Es werden 60 m sein. Dann brauchen wir die gleiche Höhe. Ich werde eine der Eigenschaften verwenden, die als Seitenverhältnis bezeichnet wird. Mit dem Wert bedeutet eins , dass, wenn wir die Breite der Hülle erhöhen, auch die Höhe erhöht wird Lassen Sie uns außerdem eine temporäre Packer-Farbe verwenden, sagen wir CC Hier haben wir den Wrapper, ich werde ihn in der Mitte der Seite platzieren Verwenden wir dafür das CSS-Grid. Wir brauchen das Raster anzeigen und die Elemente in der Mitte platzieren. Ordnung, danach werde ich die Kreise erstellen. Lassen Sie uns sie anhand eines gemeinsamen Klassennamens auswählen. Definieren wir zunächst die Position. Ich werde es absolut machen. Lass uns 40 Ram haben, wir brauchen die gleiche Höhe. Lassen Sie uns wieder das Seitenverhältnis mit dem Wert eins verwenden. Dann verwende ich jetzt einen Rahmen mit einer höheren Breite, sagen wir 0,5 Ram. Dann wird dieser Stil gestrichen. Das ist die Farbe. Lass uns Null verwenden. Machen Sie das Element außerdem mit einem Randradius von 50% abgerundet . Okay, hier haben wir die Kreise. Sie sind übereinander angeordnet, deshalb sehen wir hier nur einen Kreis. Eigentlich brauchen wir diesen temporären Hintergrund nicht mehr Lassen Sie uns ihn loswerden und dann diese Kreise platzieren. Die Mitte der Verpackung. Ich verwende wieder das Grid von C. Wir müssen das Raster anzeigen und die Elemente in der Mitte platzieren. Ordnung, jetzt müssen wir jeden Kreis an dieser Position platzieren. Ich meine, wir sollten sie rotieren. Wir müssen sie in einer Drei-D-Umgebung platzieren. Und dafür werde ich eine der CSS-Eigenschaften namens Perspektive verwenden . Stellen wir es auf 100 Ram ein. Ordnung, danach wählen wir den ersten Kreis und drehen ihn entsprechend der Y- und X-Achse. Wir müssen den ersten Kreis nach Y, x um 70 Grad drehen . Was die X-Richtung angeht, so wird es 40 Grad sein. Wie Sie sehen können, ist der erste Kreis gedreht. Machen wir dasselbe für den Rest der Kreise. Lassen Sie uns diesen Code duplizieren. Ändern Sie hier den Klassennamen, den wir brauchen. Dreht x mit dem negativen Wert um -40 Grad. Dann duplizieren Sie diesen Code erneut für den dritten Kreis, wir benötigen unterschiedliche Werte Die Y-Drehung erfolgt um 180 Grad. Was die Drehung X angeht, so wird sie um 90 Grad sein. Alle drei Kreise sind gedreht, aber der dritte ist momentan nicht sichtbar. Um es sichtbar zu machen, müssen wir den Raum mit den drei D aus einem anderen Blickwinkel betrachten. Dazu können wir eine der Eigenschaften des CS verwenden, die als perspektivischer Ursprung bezeichnet wird. Wir müssen es entsprechend der X- und Y-Richtung ändern. Der erste Wert wird bei 76% liegen . Für den zweiten Wert werde ich 27% verwenden. Ich denke, es ist ein guter Blickwinkel, um 27% verwenden. Ich denke das Projekt zu betrachten , und ein dritter Kreis ist sichtbar. Ordnung, jetzt ist es an der Zeit, weiterzumachen und mit der Arbeit an Bällen zu beginnen. Jeder Kreis wird eine Kugel haben. Zuallererst, um die Drei-D-Umgebung auch für die Bälle gemeinsam zu nutzen, müssen wir den Transformationsstil verwenden, bei dem der Wert drei D beibehält. Jetzt können wir die Bälle erstellen Wählen wir sie mit einem gemeinsamen Klassennamen Ball aus. Ich definiere die Breite, machen wir daraus sechs Ram. Dann brauchen wir die gleiche Höhe. Verwenden wir wieder das Seitenverhältnis mit dem Wert eins. Ich werde den Hintergrund ändern. In diesem Fall verwende ich den radialen Farbverlauf. Es mischt die Farben von der Mitte aus. Die erste Farbe wird RGB 13521424 sein. Dann wird die zweite Farbe RGB 44 sein , wieder Wir müssen diese Farben nach 70% mischen Verwenden wir hier 70%, ändern wir auch den Radius, damit das Element abgerundet Das sind 72, 50% Okay, also wir haben hier die Eier. Und jetzt werde ich sie wechseln , weil sie momentan nicht besonders gut aussehen. Wir brauchen dieselbe Rotation für den ersten und zweiten Ball. Wählen wir sie gleichzeitig aus. Und drehe sie entsprechend der weißen Richtung um -90 Grad. Was die dritte Kugel angeht, müssen wir sie in beide Richtungen drehen, Y und X. Drehe Y wird um 90 Grad gedreht, X dreht sich ebenfalls um 90 Grad Ordnung, jetzt haben wir also viel bessere Ergebnisse, aber die Bälle sind nicht richtig platziert. Wir müssen die Positionen ändern. Setzen wir die Position auf absolut, dann wird die oberste Position minus drei Rampen sein. Eigentlich sollten die Kreise in der Mitte der Kugeln liegen. Wir benötigen einige Berechnungen für die linke Position. Lassen Sie uns die Calc-Funktion verwenden. Wir brauchen 50% minus drei Ram, was der Hälfte der Breite des Balls entspricht Okay, die Bälle sind positioniert und jetzt können wir mit der Arbeit an den Animationen beginnen. Wir werden den gesamten Kreis bewegen und nicht den Ball. Lassen Sie uns weitermachen und CSS-Keyframes verwenden. Ich werde CS-Keyframes für den ersten Kreis erstellen. Nennen wir den Animationskreis eins. Wir werden zwei verschiedene Schritte haben. Bei 0% benötigen wir die Standardposition, die wir transformieren müssen, Y. um sieben Grad drehen und um x 40 Grad drehen Bei 100% benötigen wir die gleichen Drehungen. Drehen Sie außerdem Z um 360 Grad. Okay, lassen Sie uns weitermachen und diese Stile mithilfe der Animationseigenschaften anwenden . Wir brauchen den Namen Circle One. Die Dauer wird 2 Sekunden betragen. Außerdem müssen wir die Animation unendlich laufen lassen. Es wird linear sein. Wie Sie sehen können, bewegt sich der Kreis und der Ball bewegt sich auch mit dem Kreis. Aber das ist eigentlich nicht das, was wir an dem Ball brauchen. Ich werde die Animationen auch für die restlichen Kreise ausführen , und dann werden wir das Problem beheben. Lass uns weitermachen und diesen Code von hier kopieren und für den zweiten Kreis einfügen. Lass uns den Namen ändern. In diesem Fall müssen wir nur die Werte der Rotate X-Funktionen negativ machen und dann die Animation aufnehmen. Ändern Sie den Namen. In Ordnung, wir weiter und machen dasselbe auch für den dritten Kreis. In diesem Fall benötigen wir hier andere Werte. Lass uns dann den Namen ändern. Bei einer Drehung von 0% wird Y 180 Grad sein. Was die Drehung X betrifft, so wird sie 90 Grad betragen. Auch bei 100% benötigen wir die gleichen Umdrehungen I, drehen Y und drehen X. Außerdem müssen wir hier Rotation Z mit demselben Wert hinzufügen Okay, wir benötigen also die Animationseigenschaft mit Kreis drei Ordnung, all diese Kreise animieren sich und jetzt können wir uns um die Bälle kümmern Wir brauchen auch die Animationen für sie. Während der Animation müssen die Bälle mit ihrer Vorderseite angezeigt werden. Wir müssen sie drehen, wir müssen sie während der Animation gegen die Kreise drehen . Die ersten beiden Bälle werden dieselbe Animation haben. Lass uns SSKEFrames verwenden. Für den Namensball werden wir zwei Schritte haben Bei 0% benötigen wir eine Drehung um -90 Grad um Y-X Bei 100% benötigen wir dieselbe Drehung. Drehen Sie außerdem x um -360 Grad. Dann lassen wir den Animationsball m 2 Sekunden lang laufen , unendlich und linear Wie Sie sehen können, haben wir hier ein viel besseres Ergebnis. Wir haben hier die Funktion Rotate X mit -360 Grad verwendet. Eigentlich wird sie immer die Bewegung des Kreises ausgleichen Okay, machen wir dasselbe auch für den dritten Ball. Holen wir uns diesen Code von hier und nehmen einige Änderungen vor. Ich werde den Namen ändern, es wird beides sein. Dann müssen wir Y um 90 Grad drehen. Außerdem benötigen wir die Drehung entsprechend der X-Achse. Bei demselben Wert müssen wir bei 100% Y um 90 Grad drehen. Dann drehe X , um den Ball um den gesamten Kreis zu bewegen und gleichzeitig die richtige Position beizubehalten, müssen wir ihn um 450 Grad drehen , da er bereits um 90 Grad gedreht ist. 90 Grad plus 360 Grad ergeben 450 Grad. Okay, verwenden wir Animation. Wir brauchen beide 2 Sekunden, unendlich und linear. Okay, jetzt funktioniert alles gut. Wir müssen uns nur um den Hauptball kümmern. Wir werden es mit dem Pseudoelement Before erstellen. Ich meine vor dem dritten Kreis. Wir werden das Pseudoelement before verwenden, weil es uns hilft , die richtige Reihenfolge der Elemente zu verwalten Zuallererst werde ich die Animation für den dritten Kreis und auch für den Ball beenden die Animation für den dritten Kreis und auch für den Ball , um den Arbeitsprozess zu vereinfachen Wählen Sie dann vorher Kreis drei aus. Definieren wir den Inhalt, machen wir ihn leer. Die Breite wird 12 Ram betragen. Da wir die gleiche Höhe benötigen. Wir verwenden wieder das Seitenverhältnis mit dem Wert eins. Der Hintergrund wird wieder ein radialer Farbverlauf sein. Die erste Farbe wird weiß sein. Wir brauchen RGB 25053 mal. Dann wird die zweite Farbe wieder der RGB-Wert 55132146 sein wieder der RGB-Wert 55132146 Wir müssen diese Farben nach 50% mischen , um das Element sichtbar zu machen Definieren wir die Position, machen wir sie absolut. Hier haben wir das Before-Suit-Element. Eigentlich müssen wir es abgerundet machen. Verwenden wir den Grenzradius von 50%. Wir müssen seine Position ändern. Platzieren wir es in der Mitte. Wir benötigen die linke Position von 50% der oberen 50% Um das Element perfekt in der Mitte zu platzieren, benötigen wir die Transformationsfunktion -50% und -50%. Jetzt ist das Element korrekt positioniert und wir müssen es nur noch drehen Ich werde das Element entsprechend der X-Achse um 90 Grad drehen X-Achse um 90 In Ordnung, setzen wir uns auf den Hauptball. Gehen wir die Animation des dritten Kreises nochmal durch. Wie Sie sehen können, dreht sich auch die Hauptkugel . Und das brauchen wir nicht. Wir müssen es so halten, als ob es repariert ist. Lassen Sie uns dafür eine neue Animation mit dem Namen Main Ball erstellen . Und wir werden zwei Schritte haben. Bei 0% benötigen wir die Standardposition. Wir müssen -50% -50% übersetzen und um x 90 Grad drehen. Für die 100% benötigen wir hier dieselben Werte plus Drehung um -360 Wir verwenden hier dieselbe Technik , die wir in den vorherigen Fällen verwendet haben Lassen Sie uns den Hauptplan der Animation ausführen, 2 Sekunden, unendlich und linear. In Ordnung, jetzt funktioniert alles gut. Bevor wir dieses Video beenden, werde ich ein paar Dinge tun. Verkleinern wir die Breite der Ränder 0,1. Außerdem werde ich eine Verzögerungszeit für die erste Kreisanimation verwenden . Verwenden wir -1 Sekunde. Tatsächlich bedeutet dieser negative Wert , dass die Animation die erste Sekunde verpasst und beim ersten Lauf direkt ab der zweiten Sekunde ausgeführt wird . In Ordnung, endlich sind wir mit diesem Projekt fertig. Ich hoffe es hat dir gefallen und du hast ein paar neue Dinge gelernt . Wir sehen uns beim nächsten Mal. 10. Projekt 7 - Hubschrauber: In diesem Video werden wir einen Hubschrauber mit HTML und CSS bauen . Wie Sie sehen können, haben wir hier einen Flugeffekt. Der Hubschrauber fliegt über die Stadt, die Rotorblätter bewegen sich. Der gesamte Hubschrauber wurde mit HTML und CSS erstellt, und eigentlich ist es kein Bild. Okay, das ist alles über das Projekt. Lass uns weitermachen und anfangen, es zu erstellen. Ich habe auf dem Desktop einen neuen Ordner namens Helicopter vorbereitet , in dem wir einen weiteren Ordner für die Bilder haben. Lassen Sie uns weitermachen und diesen Ordner und den BS-Code öffnen und unsere Arbeitsdateien für HTML und CSS erstellen. Öffnen Sie dann die Index-HTML-Datei und erstellen Sie ein einfaches HTML-Dokument. Lassen Sie uns hier ein Ausrufezeichen platzieren und dann nach oben oder Enter drücken In Ordnung, zuerst werde ich den Titel ändern. Es wird Helicopter sein. Dann verlinken wir die CSS-Datei, öffnen das Link-Tag und geben hier den Namen der Datei an. Ordnung, endlich werde ich dieses Projekt über den Live-Server im Browser ausführen . Platzieren wir den Editor und den Browser. Ordnung, lassen Sie uns weitermachen und mit der Erstellung des HDML-Markups beginnen Lassen Sie uns den Deep-Tag öffnen , der der Container sein wird Dann brauchen wir noch einen Tauchschlepper mit dem Klassenhubschrauber. Er wird alle Teile des Hubschraubers beinhalten. Der erste wird ein Teller sein, den Hauptteil enthalten wird. Als nächstes werden wir Most haben, als nächstes kommt das Cockpit. Dann werden wir Landeski haben. Wir werden zwei Landekufen haben und sie werden gemeinsame Klassennamen haben Landing Skid und auch die einzelnen Klassen Landing Skid One und Landing Skid In Ordnung, danach haben wir Tail Comb. Dann wird der nächste Teil Schwanzflosse sein. Endlich brauchen wir hier Tail Rotter. Okay, lassen Sie uns über das HTML-Markup sprechen. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Zuallererst werde ich anfangen, einige Reset - und Standardstile zu schreiben. Lassen Sie uns jedes Element anhand eines Risikos auswählen. Ich werde den Standardrand und die Standardpolsterung loswerden. Lassen Sie uns beide Eigenschaften auf Null setzen. Dann werde ich auch die Größe der Box auf die Rahmenbox setzen. Während dieses Projekts werden wir Ram als Maßeinheit verwenden. Im Moment entspricht ein Ram 16 Pixeln. Und ich möchte einen Ram in zehn Pixel umwandeln. Dafür müssen wir die Schriftgröße des H-Demil-Elements verringern , und wir müssen es auf 62,5% setzen. In Ordnung, lassen Sie uns weitermachen und uns um die Körperelemente kümmern Ich werde seine Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich 100% des Viewports ausmachen und auch die Hintergrundfarbe ändern Ich werde hier hellgrün verwenden. Ordnung, danach werde ich den Container personalisieren. Lassen Sie uns ihn auswählen und seine Höhe definieren. Die Breite wird 150 Rams hoch sein. Ich werde 80 Rams draus machen. Ändere die Hintergrundfarbe. Ich werde hier den RGB-Wert 88179253 verwenden. Ordnung, wir müssen den Container in der Mitte der Seite platzieren, und dafür verwenden wir ein CSS-Raster Wir benötigen eine Display-Eigenschaft mit dem Werteraster. Platzieren Sie dann die Artikel in der Mitte. Okay, das war's vorerst mit dem Container, wir werden uns später darum kümmern. Als Nächstes fange ich an, den Hubschrauber zu bauen. Lassen Sie uns das Wrapper-Entwicklungselement auswählen und definieren, dass es sich innerhalb der Höhe Die Breite wird 80 Ram betragen. Was die Höhe angeht, werde ich 60 Ram draus machen. Und ändere auch die Hintergrundfarbe, mach sie weiß. Als nächstes platziere ich den Hubschrauber in der Mitte des Containers. Auch hier werde ich das CSS-Grid verwenden. Wir müssen das Raster anzeigen und die Elemente in der Mitte platzieren. Okay, der erste Teil , den ich erstellen werde, ist eine Klinge. Lass es uns auswählen. Definiere es mit der Höhe. Die Breite wird 40 Ram betragen. Was die Höhe angeht, werde ich zwei Ram draus machen. Und ändere auch die Hintergrundfarbe, mach sie schwarz. Hier haben wir den Teller. Lass uns weitermachen und seine Position ändern. Dafür verwende ich Position Absolute. Eigentlich benötigen wir Position Absolute für jeden Teil. Lassen Sie uns alle Entwicklungen im Hubschrauber auswählen. Stellen Sie Position zwei absolut ein. Wir werden die Elemente entsprechend der Wrapper-Entwicklung positionieren entsprechend der Wrapper-Entwicklung Ich meine den Hubschrauber, wir brauchen die relative Position für dieses Element Okay, lassen Sie uns die Position der Klinge ändern. Ich setze das linke Grundstück auf 20 Ram. Was die oberste Position angeht , werden 15 Ram sein. Okay, lassen Sie uns vorerst etwas über die Klinge sagen. Eigentlich werden wir drei D-Effekte für einige Teile des Hubschraubers verwenden drei D-Effekte für . Wir werden später auf die Klinge zurückkommen. Als nächstes haben wir den Hauptrotor. Definieren wir seine Höhe innerhalb der Höhe. Die Breite wird fünf Ram betragen. Was die Höhe angeht, werde ich zwei Ram draus machen. Lass uns die Hintergrundfarbe ändern. Im Moment werde ich rote Farbe verwenden, aber dann werden wir sie auch ändern. Definieren wir die linke Position, machen wir daraus 17,5 Ram Okay, lassen Sie uns weitermachen und den nächsten Teil anpassen , der das Cockpit sein wird Eigentlich wird dieses Element die gesamte Kabine des Hubschraubers sein und nicht nur das Fenster. Definieren wir mit der Höhe. Ich werde die Breite auf 20 Ram setzen. Dann wird die Höhe zehn Ram betragen. Dann ändern wir die Position. Lassen Sie uns die Top-Eigenschaft auf 18,5 Ram setzen. Dann wird die linke Position 30 Ram sein. Ändern Sie auch die Hintergrundfarbe, machen Sie sie schwarz. Okay, jetzt müssen wir uns um die Form des Cockpits kümmern. Es wird abgerundet und das machen wir mit dem Grenzradius. Die obere linke Ecke wird 50% sein, dann die obere rechte Ecke 40%, die rechte Ecke wird 40% sein . Das Gleiche benötigen wir für die untere Ecke. Ordnung, danach werde ich das eigentliche Cockpit, in dem ich mich befinde, abnehmen. Das Fenster erstellt es mit einem zuvor eingestellten Element. Lassen Sie uns das Cockpit mit auswählen, bevor wir das Element verwenden. Zunächst müssen wir den Inhalt definieren. Lass es uns leer machen. Als Nächstes definiere ich mit und Höhe. Die Breite wird acht Ram betragen. Dann brauchen wir Größe, es werden fünf Ram sein. Lassen Sie uns auch die Hintergrundfarbe ändern, sie ebenfalls ändern, lassen Sie uns die Position auf absolut setzen. Okay, jetzt müssen wir die Position des Elements leicht ändern und es abrunden, damit es in die Kabine passt. Lassen Sie uns die Top-Eigenschaft auf 0,2 Ram setzen. Und um das Element abzurunden, verwende ich wieder den Randradius. Wir brauchen 100%, dann Null, dann wieder 40% Null. Okay. Das war's mit dem Cockpit. Als Nächstes werde ich die Lande-Sketche anpassen. Wie du weißt, haben wir zwei Lande-Sketche, sie haben einen gemeinsamen Klassennamen Verwenden wir es und wählen beide Elemente aus. Zuallererst werde ich die gewonnene Höhe definieren. Nehmen wir 223 Ram an, dann wird die Höhe zehn Ram sein. Ändern Sie auch die Hintergrundfarbe. Ich werde rote Farbe verwenden. Dann werden wir es ändern. Wir werden die eigentlichen Landeplätze anhand von Grenzen erstellen. Wir benötigen den unteren Rand mit den Werten eins Ram Solid, die Farbe wird schwarz sein Dann brauchen wir den linken Rand mit den Werten eins Ram Solid. Durchsichtig. Außerdem brauchen wir Border Right, das die gleichen Werte haben wird. Um die Form des Elements zu ändern, verwenden wir abschließend wieder den Grenzradius. Die Werte werden 002,5 Ram und fünf sein. Okay, jetzt haben wir ein viel besseres Ergebnis. Eigentlich brauchen wir diese rote Hintergrundfarbe nicht mehr. Lass es uns entfernen. Danach müssen wir die Elemente am Boden der Kabine positionieren . Wählen wir also Landing, Ski One. Definieren Sie die Eigenschaften oben und links. Die oberste Position wird 22 Ram sein. Was die linke Position angeht, wird es 26 Ram sein. Lass uns diesen Code duplizieren, den Namen ändern. Die oberste Position wird 20,5 Ram sein. Was die linke Position angeht, wird es 26,5 Ram sein. Ordnung, die Landekits sind positioniert und jetzt müssen wir sie mit der Kabine verbinden Dafür verwende ich die Elemente vor und nach den Elementen. Lassen Sie uns beide zusammen auswählen. Zuallererst müssen wir den Inhalt definieren. Es wird leer sein. Dann brauchen wir Breite und Höhe. Die Breite wird ein RAM betragen. Was die Höhe angeht, werde ich sie auf fünf Ram setzen. Lassen Sie uns auch die Hintergrundfarbe ändern, sie schwarz machen und die Position auf absolut setzen. In Ordnung, jetzt müssen wir die Positionen ändern. Eigentlich wird bei beiden die unterste Position auf Null gesetzt sein. Aber außerdem müssen wir für jedes Element separat eine linke Position definieren . Wählen wir den Lande-Sketch aus, bevor wir die linke Position auf acht Ram setzen Dann kopiere ich diesen Code. Wir brauchen einen, wir müssen die linke Position auf 18 Ram setzen . In Ordnung, mit den Lande-Sketchen sind wir fertig. Und der nächste Teil , den wir anpassen werden , ist ein Schwanzkamm Auch hier werde ich Breite und Höhe definieren. Die Breite wird 25 Ram sein, dann wird die Höhe zwei Ram sein. Und ändere auch die Hintergrundfarbe, mach sie schwarz. Okay, hier haben wir den Schwanzkegel. Lass uns weitermachen und seine Position ändern. Ich setze das Top Property auf 22 Ram. Dann wird die linke Position 47 Ram sein. Schließlich werde ich die Form der Elemente ändern , indem ich erneut den Randradius verwende. Wir benötigen hier die Werte Null, 100%, 100% und Null. Ordnung, lassen Sie uns über die Schwanzflosse sprechen, als nächstes haben wir die Schwanzflosse. Wählen wir es aus und definieren es zuerst mit der Höhe. Die Breite wird zwei Ram sein, dann wird die Höhe acht Ram sein. Auch hier benötigen wir eine schwarze Hintergrundfarbe. Okay, hier haben wir also die Schwanzflosse. Lass uns weitermachen und seine Position ändern. Lassen Sie uns die Eigenschaften oben und rechts definieren. Die oberste Position wird 19 Ram sein. Was die richtige Position angeht, machen wir 7,5 Ram daraus. Lassen Sie uns abschließend die Form des Elements mithilfe des Randradius ändern . Die Werte werden 100% 00.100% sein. Okay, die Heckflosse ist fertig und jetzt müssen wir uns um den letzten Teil des Hubschraubers kümmern , den Heckrotor Definieren wir Breite und Höhe. Die Breite wird ein Ram sein. Was die Höhe angeht, werde ich daraus neun Ram machen. Außerdem müssen wir die Hintergrundfarbe ändern. Lass es uns schwarz machen. Dann müssen wir die Position ändern. Definieren wir die oberen und rechten Eigenschaften. Die oberste Position wird 18,5 Ram sein. Was die richtige Eigenschaft angeht, setzen wir sie auf 6,5 Ram Okay, bevor wir den Hubschrauber fliegen lassen, müssen wir den Mast anpassen , der die Kabine mit der Klinge verbindet. Lassen Sie uns dieses Element auswählen. Lassen Sie uns zunächst seine Innenhöhe definieren. Ich setze mit einem Widder, dann beträgt die Höhe zwei Widder. Dann ändere die Hintergrundfarbe, mach sie schwarz. Dann ändern wir die Position, die wir brauchen. Linke Eigenschaft mit dem Wert 39,5 Ram, dann obere Position mit dem Wert 17 Ram Okay, alle Teile sind maßgeschneidert und jetzt müssen wir den Hubschrauber zum Fliegen bringen Fangen wir mit der Klinge an. Wie gesagt, wir benötigen etwa drei D-Effekte für die Klinge. Dafür müssen wir eine Drei-D-Umgebung schaffen. Um das zu tun, müssen wir eine der Eigenschaften des CS verwenden , die Perspektive genannt wird. Stellen wir es auf 100 Ram ein. Ordnung, danach müssen wir die Klinge drehen. Dafür werde ich mit der Funktion „X drehen“ transformieren . Wir müssen das Element entsprechend der X-Richtung drehen . Der Wert wird 90 Grad betragen. Das Blatt ist gedreht und jetzt müssen wir den Hauptrotor drehen. Aber vorher müssen wir uns die Drei-D-Umgebung für den Hauptrotor teilen . Um das zu tun, müssen wir dem Blade Transformationsstil den Wert Preserve Three D zuweisen dem Blade Transformationsstil den Wert Preserve Three . Jetzt können wir den Hauptrotor drehen. Lassen Sie uns den Dreh x mit dem Wert -90 Grad nach rechts transformieren dem Wert -90 Grad nach rechts Danach füge ich dem Hauptrotor einen kleinen Teil hinzu Um eine viel bessere Wirkung zu erzielen, müssen wir den Hauptrotor wie ein Kreuz aussehen lassen. Und ich werde das mit dem Before-Element machen. Wählen wir den Hauptrotor mit dem vorherigen Element aus. Zuallererst werde ich den Inhalt definieren. Lassen Sie uns ihn leer machen. Dann müssen wir mit und Höhe definieren. Ich werde beide Eigenschaften auf 100% einstellen . Dann ändern wir die Hintergrundfarbe. Ich werde hier eine temporäre Hintergrundfarbe verwenden. Sagen wir auch blau. Lassen Sie uns die Position auf absolut setzen. Hier haben wir die vier Elemente und ich werde sie drehen. Lassen Sie uns Rotation Y transformieren Der Wert wird 80 Grad sein, okay? Außerdem benötigen wir auch für dieses Element eine Drei-D-Umgebung . Dafür müssen wir den Transformationsstil für den Hauptrotor mit dem Wert Preserve Three D verwenden den Hauptrotor mit dem Wert Preserve Three D Außerdem werde ich diesen weißen Hintergrund von hier aus entfernen . Außerdem werde ich die Farben für den Hauptrotor ändern. Lass es uns schwarz machen. In Ordnung, jetzt ist es an der Zeit , die Platte zu animieren. Wir müssen dieses Element drehen. Lassen Sie uns CSS-Keyframes erstellen. Der Name wird Blade lauten. Insgesamt werden wir zwei Schritte haben, 0% und 100%. Bei 0% müssen wir X-Funktion transformieren und mit einem Wert von 90 Grad drehen. Außerdem drehen Sie Z während der gesamten Animation mit Null. Wir müssen die Elemente entsprechend der Z-Richtung, 0-360 Grad, bei 100% drehen der Z-Richtung, 0-360 Grad, . Wir müssen X um 90 Grad drehen und Z um 360 Grad drehen Okay, die Keyframes sind fertig. Lass uns weitermachen und die Animation ausführen. Zuallererst benötigen wir hier den Namen der Keyframes. Klinge beliebig, dann beträgt die Dauer Punkt 1 Sekunde. Die Animation sollte unendlich laufen, also brauchen wir hier unendlich. Auch die Animation wird linear sein. Okay? Wie Sie sehen können, bewegt sich das Blatt mit dem Hauptrotor. Jetzt brauchen wir dasselbe auch für den Heckrotor. Lassen Sie uns Schlüsselbilder innerhalb eines Heckrotors erstellen. Anim, wir müssen das Element entsprechend der X-Richtung drehen , 0-360 Grad Bei 0% müssen wir Rotation x mit Null transformieren. Dann müssen wir bei 100% rotieren x um 360 Grad transformieren. Lassen Sie uns weitermachen und die Animation ausführen. Der Name wird Heckrotor Anim sein. Dann benötigen wir einen Dauerpunkt von 1 Sekunde. Auch hier unendlich und linear. Ordnung, der Hubschrauber fliegt und jetzt müssen wir uns um den Hintergrund des Containers kümmern. Lass uns hier ein Bild hinzufügen, wir brauchen URL. Dann Ordner namens Images, und wir müssen Gng auswählen Hier haben wir den Hintergrund, aber er sieht nicht gut aus Wir müssen die Größe des Hintergrunds ändern. Ich gebe ihm die gleiche Größe wie der Behälter. Die Hintergrundgröße wird zwei Eigenschaften haben 150 Ram und dann Auto. Jetzt haben wir die besseren Ergebnisse. Aber wie Sie sehen können, wiederholt sich das Hintergrundbild. Eigentlich müssen wir es nur horizontal wiederholen. Fügen wir hier die Wiederholung x hinzu. Jetzt wird das Bild nicht mehr wiederholt, sondern wir müssen seine Position ändern. Wir müssen es um 100% nach unten verschieben. Definieren wir Hintergrundposition mit den Werten 0.100%. In Ordnung, jetzt sieht der Hintergrund gut aus und jetzt füge ich ihm eine Animation hinzu Lassen Sie uns Himmelsrahmen mit dem Namen BGN erstellen. Wir werden zwei verschiedene Schritte haben, 0% und 100%. Während der Animation müssen wir die Position des Hintergrunds auf 0% ändern . Wir werden die Standardposition 0,100% haben . Bei den 100% wird die Hintergrundposition 150 me sein , hundertprozentig Lassen Sie uns die Animation ausführen. Wir brauchen den Namen BG Anim. Dann wird die Dauer 10 Sekunden betragen. Auch hier sollte die Animation unendlich laufen. Außerdem sollte es linear sein, okay? Wie Sie sehen können, bewegt sich der Hintergrund und wir haben hier einen schönen Flugeffekt. Eigentlich sind wir mit diesem Projekt fast fertig. Ich muss nur ein paar Dinge tun. Ich drehe den Helikopter leicht. Ich werde ihn entsprechend der Y-Richtung drehen. Der Wert wird -15 Grad sein. Um das Projekt schöner zu gestalten, werde ich die Form des Containers ändern Lassen Sie uns das mit dem Grenzradius machen. Wir brauchen hier 0,5 Ram und 100 Ram. Ordnung, das war's also, endlich mit diesem Projekt sind wir fertig. Ich hoffe es hat dir gefallen und es war hilfreich. Wir sehen uns beim nächsten Mal. 11. Projekt 8 – Fahrrad: Ordnung, in diesem Video werden wir ein nächstes Projekt bauen , nämlich ein Fahrrad. Wie Sie sehen können, haben wir hier ein typisches Fahrrad. Es bewegt die Räder und die Pedale drehen sich mithilfe von CSS-Animationen Alle Teile werden mit HTML erstellt. Wir verwenden hier keines der Bilder. In Ordnung, lassen Sie uns weitermachen und mit dem Aufbau des Projekts beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Bicycle erstellt , der momentan leer ist. Lassen Sie uns es im VS-Code öffnen und unsere Arbeitsdateien für HTML und CSS erstellen . Öffnen Sie dann die Index-Mail-Datei und erstellen Sie ein einfaches Ml-Dokument Dafür müssen wir hier ein Ausrufezeichen platzieren und dann Top oder Enter drücken Zuallererst werde ich den Titel ändern. Es wird Fahrrad sein. Dann lassen Sie uns die CSS-Datei verknüpfen. Öffnen Sie den Link und geben Sie hier den Namen der CSS-Datei an. Schließlich werde ich das Projekt über den Live-Server im Browser ausführen . Platzieren Sie dann den Editor und den Browser so, okay, wir können mit der Erstellung des Projekts beginnen . Ich fange mit dem HTML-Markup an. Lass uns den tiefen Schlepper mit dem Klassenfahrrad öffnen. Es wird all die verschiedenen Teile des Fahrrads beinhalten. Fangen wir mit dem Vorderrad von Deep Tug an. Dieses Element wird zwei verschiedene Klassen haben, eine für die gemeinsamen Stile und die nächste für die einzelnen Stile Wir brauchen Rad und Vorderrad. Außerdem werden wir Hinterrad haben. Lassen Sie uns diese Codezeile duplizieren und den Klassennamen ändern. Als nächstes kommt die Vordergabel. Dieses Element wird als Nächstes einen Lenker und dann eine Querstange beinhalten Nächstes einen Lenker und dann eine Querstange Danach haben wir Frames, Frame eins, Frame zwei Der nächste Teil wird Set Tube sein , der weitere Entwicklungen beinhalten wird. Dann haben wir dann Kettenpedale und Hinternebel Wir können das so machen, dass alle Teile erstellt sind und jetzt müssen wir anfangen , sie zu stylen. Lassen Sie uns zunächst einige Reset- und Standardstile erstellen. Ich werde jedes Element mit einem Sternchen auswählen. Lassen Sie uns den Standardrand loswerden und setzen, ich werde beide Eigenschaften auf Null setzen Außerdem werde ich die Größe der Box auf Border Box setzen. Während dieses Projekts werden wir Ram als Maßeinheit verwenden. Standardmäßig entspricht ein Ram 16 Pixeln, und ich möchte einen Ram in zehn Pixel umwandeln Dafür müssen wir die Schriftgröße des HTML-Elements verringern die Schriftgröße des HTML-Elements Lass es uns auf 62,5% setzen Okay, lass uns weitermachen. Antwort: Um am Körperelement zu arbeiten, definiere ich seine innere Höhe Die Breite wird zu 100% der Körpergröße entsprechen. Ich werde es zu 100% aus dem Sichtfenster machen. Als Nächstes werde ich das Fahrrad anpassen. Definieren wir seine Breite und Höhe. Die Breite wird 85 Ram sein, dann wird die Höhe 60 Ram sein. Außerdem werde ich die Hintergrundfarbe ändern. Lassen Sie uns hier eine temporäre Farbe verwenden. Okay. Jetzt stimme ich dem Fahrrad und der Seite zu Lassen Sie uns dafür das CSS-Grid verwenden. Wir müssen dem Körperelement ein Anzeigeraster zuweisen und die Elemente in der Mitte platzieren. Alles klar, das Fahrrad ist zentriert und jetzt fange ich an, die verschiedenen Teile des Fahrrads zu personalisieren . Lass uns weitermachen und mit den Rädern beginnen. Lassen Sie uns die Breite definieren, es werden 30 Ram sein. Dann setze ich die Höhe auf den gleichen Wert und verwende daher eine der Eigenschaften, die als Seitenverhältnis bezeichnet werden. Wir müssen es auf eins setzen. Wenn wir in diesem Fall die Breite erhöhen oder verringern, wird die Höhe automatisch erhöht oder verringert. Okay, lass uns die Hintergrundfarbe ändern, sie schwarz machen. Außerdem werde ich das Element mit einem Randradius von 50% abrunden Als Nächstes werde ich mich um die Position kümmern. Eigentlich müssen wir alle Teile einzeln positionieren. Ich meine, wir müssen für jedes Element im Fahrrad eine absolute Position angeben. Deshalb wählen wir jede Entwicklung und weisen ihnen die absolute Position zu. Außerdem müssen wir die Elemente entsprechend dem Fahrrad positionieren . Ich meine das übergeordnete Element, weisen wir ihm eine relative Position zu. Ordnung, als Nächstes definieren wir eine untere Position für die Räder. Ich setze es auf Null, dann definiere ich die Grenze. Stellen wir die Breite ein, machen wir 0,5 Ram daraus. Die Grenze wird gestrichelt. Lassen Sie uns auch schwarze Farbe verwenden. Wie Sie sehen können, ist der Rand nicht sichtbar, die schwarze Farbe bedeckt ihn. Um das zu beheben, müssen wir eine der Eigenschaften namens Hintergrundclip mit einem Wertinhaltsfeld verwenden . In Ordnung, lassen Sie uns jetzt am Steuer sitzen. Als Nächstes müssen wir diesen grauen Teil im Rad erstellen. Wir werden das mit einem After-Pseudoelement tun. Wählen wir Wheel mit dem Pseudoelement After aus. Zuallererst werde ich den Inhalt definieren. Es wird leer sein. Lass uns mit 224 Ram beginnen. Auch hier verwende ich das Seitenverhältnis mit dem Wert eins und verwende dann eine temporäre Hintergrundfarbe. Nehmen wir an, Rot setzt die Position auch auf absolut. Als Nächstes werde ich das umliegende Element mit einem Randradius von 50% erstellen . Außerdem werde ich es in der Mitte des Rades platzieren. Dafür können wir das CSS-Raster verwenden, Raster anzeigen und die Elemente in der Mitte platzieren. Ordnung, danach fügen wir dem After-Element einen Rahmen hinzu . Die Breite wird 9,5 Ram betragen. Der Rand wird durchgehend sein und Sie können auch die Farbe DDD sehen Wie Sie sehen können, wurde das Element durch den Rand vergrößert. Um das zu beheben, müssen wir die Größe von Boxen verwenden. Border Box Eigentlich haben wir diese Eigenschaft bereits in den Standardstilen definiert, aber sie wird nicht auf Pseudoelemente angewendet, also müssen wir sie erneut verwenden Okay, endlich werde ich diese rote Hintergrundfarbe loswerden diese rote Hintergrundfarbe Okay, jetzt sind beide Räder zusammengelegt und ich werde das Hinterrad auf die rechte Seite bewegen. Wählen wir das Hinterrad und setzen wir die rechte Position auf Null. Ich werde die Hintergrundfarbe vom Fahrrad entfernen . In Ordnung. Als Nächstes werde ich die Vordergabel stylen. Lassen Sie uns zunächst Breite und Höhe definieren. Die Breite wird drei Ram betragen. Was die Höhe angeht, werde ich 17 Ram draus machen. Und dann ändere die Hintergrundfarbe, mach sie schwarz. Definieren wir die Position der Elemente. Lassen Sie uns die untere Eigenschaft auf 15 Ram setzen. Was die linke Position angeht, wird es 16,5 sein. Okay, danach müssen wir die Gabel drehen Wir müssen es entsprechend der Z-Richtung drehen. Wir müssen Z transformieren und mit dem Wert von 20 Grad drehen . Eigentlich ist die Gabel gedreht, aber das wollen wir nicht. Sie wird von der Mitte aus gedreht, weil der Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist. Wir müssen den Ursprung der Transformation ändern. Und wir müssen es links unten machen. Ordnung, lassen Sie uns weitermachen und uns das fertige Projekt ansehen. Wie Sie sehen können, hat die Gabel unten ein kleines zusätzliches Teil. Ich werde diesen Teil mit dem Before-Suit-Element erstellen. Wählen wir die Vorderradgabel, gefolgt vom Before-Suit-Element. Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann definiere ich Breite und Höhe. Lassen Sie uns mit 22 m beginnen. Die Höhe wird fünf Ram betragen. Außerdem werde ich hier eine temporäre Hintergrundfarbe verwenden . Lassen Sie uns wieder Rot verwenden und dann die Position auf absolut setzen. Hier haben wir die Elemente, wir müssen ihre Position ändern. Lassen Sie uns die untere Eigenschaft auf Null setzen. Dann definieren wir die linke Position, machen sie auf 0,5 Alles klar, schließlich müssen wir die Elemente drehen. Außerdem müssen wir es ein wenig nach links verschieben. Lass uns dann transformieren. Drehe Z um 30 Grad. Wir müssen die X-Funktion mit dem Wert minus einem m übersetzen . Schließlich ändern wir die Hintergrundfarbe, machen wir sie schwarz. Der nächste Teil, den wir anpassen werden, wird eine Röhre sein. Wählen wir es aus und definieren wir seine Breite und Höhe. Die Breite wird zwei RAM betragen. Was die Höhe angeht, machen wir daraus 12 Ram. Ändere die Hintergrundfarbe, mach sie schwarz. Definieren Sie dann die Eigenschaften links und oben. Die linke Position wird 0,5 Ram sein. Was die oberste Position angeht, werde ich es auf -12 Ram schaffen Wie bei der Vorderradgabel wird auch das Rohr ein kleines zusätzliches Teil haben Ich meine diesen Teil hier. Lassen Sie uns es mit dem Pseudoelement Before erstellen. Wählen wir Tube gefolgt vom Before-Pseudoelement aus. Definieren Sie zunächst den Inhalt und machen Sie ihn leer. Dann stelle ich die Höhe ein, beide laufen zu dritt, ändere die Hintergrundfarbe, mache es schwarz. Dann werde ich die Position des Elements ändern. Lassen Sie uns die Position auf absolut setzen dann die Eigenschaften left und top verwenden. Die linke Position wird -0,5 Run sein. Was die oberste Position angeht, werde ich dafür sorgen, dass sie 0,5 nach rechts läuft Sagen wir über die Röhre. Lassen Sie uns weitermachen und den nächsten Teil des Fahrrads anpassen , nämlich den Lenker Zuallererst werde ich mit der Höhe definieren. Geben wir 28 Ram an, dann beträgt die Höhe zwei Ram. Lassen Sie uns die Hintergrundfarbe ändern, verwenden Sie wieder schwarze Farbe. Dann definiere ich die obere und linke Position. Das oberste Grundstück wird 18 Ram sein. Was die linke Position angeht, werde ich daraus 19 Ram machen. Okay, lassen Sie uns als Nächstes die Elemente drehen, transformieren. Drehe die Z-Funktion mit dem Wert 15 Grad. In Ordnung, schauen wir uns das fertige Projekt an. Wie Sie sehen können, haben die Lenker einige zusätzliche Teile, die ich vor und nach den Cd-Elementen wieder verwenden werde. Wählen wir die Griffleisten gefolgt vom Element vor dem Cd aus. Ich definiere den Inhalt, machen wir ihn leer. Dann werde ich mit zwei Formularen beginnen. Wir brauchen die gleiche Höhe. Ich werde wieder das Seitenverhältnis mit dem Wert eins verwenden. Dann ändere die Hintergrundfarbe, mach sie schwarz. Als Nächstes definieren wir die Position und machen sie absolut. Dann ändere ich die Position der Elemente und mache sie auch abgerundet. Lassen Sie uns die oberste Eigenschaft auf minus einen Ram setzen. Dann wird die linke Position minus ein Ram sein. Und außerdem brauchen wir hier einen Grenzradius mit dem Wert 50%. Okay, lassen Sie uns über die vorherigen Elemente sprechen. Kümmern wir uns um den zweiten Teil. Ich wähle Handlebars aus, gefolgt vom After-Element Lassen Sie uns den Inhalt leer machen. Dann definiere ich Breite und Höhe. Die Breite wird 30 Ram sein, dann wird die Höhe zwei Ram sein. Lass uns die Hintergrundfarbe ändern, sie schwarz machen. Außerdem müssen wir die Position auf absolut setzen. Als Nächstes definieren wir die linke Position und setzen sie auf -15,5 Ram. Danach drehe ich das Element und wir müssen es leicht abgerundet machen Verwenden wir transform rotate y. In diesem Fall müssen wir das Element entsprechend der Y-Achse drehen . Der Wert wird -70 Grad sein. Außerdem werde ich Border Radius Two Ram verwenden. Ordnung, das Einzige, was wir in Bezug auf den Lenker tun müssen , ist, das After S-Element in einem Raum von drei D zu drehen Dafür verwende ich eine der Eigenschaften namens Perspektive Es ermöglicht uns, die Drei-D-Umgebung zu erstellen. Lassen Sie uns diese Eigenschaft auf 250 Ram setzen. Wie Sie sehen können, geht es hier nur um den Lenker. Als nächstes werde ich mich um die Querlatte kümmern. Lassen Sie uns dieses Element auswählen und zunächst mit der Höhe definieren Ich werde mit 227 Ram beginnen. Dann wird die Höhe 3,5 Ram betragen. Ändern Sie auch die Hintergrundfarbe, machen Sie sie schwarz. Dann müssen wir die Eigenschaften oben und links definieren. Die oberste Position wird 22 Ram sein. Was die linke Position angeht, werde ich 26 Ram daraus machen. Danach müssen wir die Elemente drehen. Lassen Sie uns Transform Rotate mit dem Wert 20 Grad verwenden. Auch hier wird das Element von der Mitte aus gedreht und wir müssen den Transformationsursprung ändern. In diesem Fall müssen wir es links oben platzieren. Okay, lasst uns endlich die Form der Elemente ändern. Es sollte auf der rechten Seite abgerundet sein. Ich werde den Grenzradius verwenden. Die Werte werden die folgenden sein. Wir brauchen Null, 50% 50% und wieder Null. In Ordnung, mit dem Kreuzteil sind wir fertig. Als Nächstes müssen wir hier die Frames nehmen. Wählen wir den ersten Rahmen aus, definieren wir Breite und Höhe. Die Breite wird 32 Ram betragen. Dann mache ich eine Höhe von 3,5 Ram. Ändere die Hintergrundfarbe, mach sie schwarz. Also werde ich die Positionen definieren. Das oberste Grundstück wird 25 Ram sein. Was die linke Position angeht, machen wir 26 Ram daraus. Als Nächstes werde ich das Element drehen. Lassen Sie uns transformieren, drehen. Der Wert wird 45 Grad betragen. Auch hier müssen wir den Ursprung der Transformation ändern . Lassen Sie uns den Ursprung transformieren und ihn links oben platzieren. Lassen Sie uns abschließend die Form des Elements ändern. Verwenden Sie erneut den Grenzradius mit dem Wert 0% 50% und erneut Null. In Ordnung, schauen wir uns das erste Bild an. Lassen Sie uns weitermachen und den zweiten anpassen. Wählen Sie Frame zwei aus und definieren Sie erneut Breite und Höhe. In diesem Fall wird die Breite 25 RAM betragen. Dann wird die Höhe zwei m betragen. Lass uns die Hintergrundfarbe ändern, sie schwarz machen. Dann definiere ich die Positionen oben und links. Das oberste Grundstück wird 44 m lang sein . Was die linke Position angeht, werde ich 45 Ram daraus machen. Wie eingeräumt, ist der Teil des Elements nicht sichtbar, er befindet sich hinter dem Lenkrad Also lass uns weitermachen und das beheben. Mithilfe der Z-Index-Eigenschaft werde ich sie auf einen höheren Wert als Null setzen . Sagen wir zehn. Ordnung, lassen Sie uns weitermachen und uns um den nächsten Teil kümmern , der eine Röhre sein wird. Lassen Sie uns mit in der Höhe definieren. Die Breite wird drei Ram betragen. Dann werde ich eine Höhe von 18,5 Ram erreichen. Lass uns die Hintergrundfarbe ändern, sie schwarz machen. Ich werde die Positionen des Elements ändern. Das oberste Grundstück wird 30 Ram sein. Dann brauchen wir die linke Position, es werden 47 Ram sein. Außerdem werde ich das Element drehen. Lassen Sie uns Rotation Z mit einem Wert von 15 Grad transformieren, siehe oben auf der Röhre. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass die Röhre aus zwei zusätzlichen Teilen besteht. Auch hier werde ich Vorher - und Nachher-Pseudoelemente verwenden. Lassen Sie uns die Röhre auswählen, gefolgt vom Pseudoelement „Vorher“. Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann definiere ich die Breite. Es werden zwei Ram sein. Dann brauchen wir eine Körpergröße, die 11 Ram sein wird. Dann ändern wir die Position, machen wir sie absolut. Dann setze ich die Hintergrundfarbe auf Schwarz. Dann definieren wir die obere und linke Position. Die oberste Eigenschaft wird -11 Ram sein. Was die linke Position angeht, werde ich 0,5 Ram daraus machen Okay, schauen wir uns den ersten Teil an. Lass uns weitermachen und uns um den zweiten kümmern. Eigentlich werde ich diesen Code duplizieren. Lass uns vorher in nachher wechseln. Dann werde ich die Breite ändern. Es wird 2,5 Ram sein. Die Höhe wird 1,5 Ram betragen. Die Farbe muss hier wieder schwarz sein. Wir ändern die obere und linke Position. Die oberste Position wird minus drei Ram sein. Was die linke Position angeht, werde ich 0,25 Ram daraus machen In Ordnung, lassen Sie uns weitermachen und den Sitz anpassen. Lassen Sie uns mit der Höhe definieren. Ich werde Breite 12 Ram machen. Jetzt wird die Höhe drei Ram betragen. Ändere auch die Hintergrundfarbe, mache Schwarz. Dann müssen wir die oberen und linken Eigenschaften ändern. Die oberste Position wird -12 Ram sein. Dann wird die linke Position minus sechs Ram sein. Als nächstes werde ich den Sitz drehen. Lass uns transformieren. Dreht mit dem Wert -12 Grad. Außerdem müssen wir die Form des Sitzes ändern. Verwenden wir den Grenzradius mit den Werten 20%, dann zweimal ein Ram und 80%. In Ordnung, setzen wir uns als Nächstes auf den Sitz. Ich kümmere mich um die Packgabel. Definieren wir mit der Höhe. Ich mache mit zwei Ram, dann wird die Höhe 25 Ram sein. Lass uns die Hintergrundfarbe ändern, sie schwarz machen. Außerdem müssen wir die linke und obere Position ändern. Die linke Position wird 60 Ram sein. Dann wird das oberste Grundstück 26 Ram sein. Außerdem müssen wir die Elemente drehen. Lassen Sie uns einfach Rotate Z mit dem Wert -55 Grad transformieren , wie es in Betracht gezogen wurde Der Teil der Hinterradgabel ist nicht sichtbar, er befindet sich hinter dem Lenkrad Wir müssen wieder die Z-Index-Eigenschaft verwenden. Setzen wir es auf zehn. Okay, wie eingeräumt, ist der größte Teil des Fahrrads gebaut. Als nächstes müssen wir uns um die Kurbel kümmern. Definieren wir mit und Höhe. Ich werde beide Eigenschaften auf zehn Ram setzen. Dann ändere die Hintergrundfarbe, mach sie schwarz. Außerdem müssen wir das Element mithilfe des Randradius in Prozent abrunden. Dann ändern wir die Position der Kurbel. Lassen Sie uns die Eigenschaften oben und links definieren. Die oberste Position wird 40 Ram sein. Was die linke Position angeht, werde ich auch 40 Ram daraus machen. Als Nächstes fügen wir den Rand zur Kurbel hinzu. Die Breite wird 0,3 Ram betragen. Der Rand wird gestrichelt und definiert auch die Farbe Machen Sie ihn wieder schwarz Wie Sie sehen können, bedeckt die Hintergrundfarbe den Rand Wir müssen es wieder verwenden. Hintergrundclip mit Wertinhaltsfeld. In Ordnung, setzen wir uns an die Kurbel. Lass uns weitermachen und uns um die Blütenblätter kümmern. Wählen Sie dieses Element aus, das innerhalb der Höhe definiert ist. Die Breite wird 1,5 Ram betragen. Dann wird die Höhe 17 Ram betragen. Lass uns die Hintergrundfarbe ändern, sie schwarz machen. Ändern Sie auch die Position des Elements. Wir müssen die Eigenschaften oben und links verwenden. Die oberste Position wird 37 Ram sein. Was die linke Position angeht, werde ich 44 Ram daraus machen. Okay, als nächstes drehen wir das Element. Ich werde es leicht abgerundet machen. Lassen Sie uns die Transformation Rotate Z mit dem Wert -12 Grad verwenden. Außerdem müssen wir den Radius auf 0,5 Ram begrenzen. Ordnung, wie Sie dem fertigen Projekt entnehmen können, müssen wir die eigentlichen Blütenblätter, diese beiden Teile, zusammenkleben. Nochmals, lassen Sie uns vorher und nachher verwenden. Sieh dir die Elemente an. Beide Elemente werden einige gemeinsame Stile haben. Ich werde beide zusammen auswählen. Definieren wir den Inhalt, machen wir ihn leer. Dann müssen wir W und Höhe definieren. Die Breite wird fünf sein, dann wird die Höhe 1,7 Ram betragen. Ändere die Hintergrundfarbe, mach sie schwarz. Außerdem müssen wir die Position auf absolut setzen. Dann definieren wir die linke Position. Es wird -1,8 Ram sein. Zuletzt werde ich die Elemente abrunden. Verwenden Sie den Grenzradius mit dem Wert 0,3 m. Im Moment werden beide Elemente zusammen platziert. Wir müssen die Positionen separat definieren. Lassen Sie uns vorher Blütenblätter auswählen und die oberste Position definieren. Lass es 0.2 laufen. Was die Pedale angeht, müssen wir, nachdem wir die untere Eigenschaft, 2.2, eingestellt haben, ausgeführt werden In Ordnung, das war's mit den Blütenblättern, wir sind fertig. Und der letzte Teil, den wir anpassen müssen, ist eine Kette. Definieren wir mit der Höhe. Die Breite wird 31,5 Ram betragen. Dann wird die Höhe 8,5 Ram betragen. Außerdem brauchen wir eine Grenze. Machen wir 0,5 Ram draus, durchgehend schwarz. Und dann definiere die Position der Kette. Die oberste Position wird 41 Ram sein. Was die linke Position angeht, werde ich 40,5 Ram daraus machen Okay, als Nächstes müssen wir die Kette abrunden. Verwenden wir also den Grenzradius mit den Werten fünf Ram, 50%, 50%, wieder fünf Ram. Schließlich müssen wir die gesamte Kette sichtbar machen , da sie momentan teilweise ausgeblendet ist. Verwenden wir es gegen den Index mit dem Wert zehn. Ordnung, endlich sind wir mit dem Bau des Fahrrads fertig und jetzt müssen wir uns um die Animationen kümmern. Lass uns weitermachen und mit den Rädern beginnen. Wir müssen sie um 360 Grad drehen. Lassen Sie uns Schlüsselbilder erstellen. Ich nenne es Fahrrad Anim. Eigentlich benötigen wir dieselben Keyframes für alle Teile, die sich bewegen werden In diesem Fall haben wir zwei Schritte. Bei 0% müssen wir die Transformationseigenschaft mit der Drehfunktion definieren Transformationseigenschaft mit der Drehfunktion und der Wert wird Null sein. Bei 100% müssen wir das Element um -360 Grad drehen. Lass uns weitermachen und die Animation ausführen. Wir brauchen den Namen der Keyframes. Bicycle Anim, dann wird die Dauer 5 Sekunden betragen. Die Animation sollte unendlich laufen. Außerdem wird es linear sein, oder? Außerdem drehen sich die Räder und jetzt müssen wir die Kurbel und die Blütenblätter zum Laufen bringen Eigentlich werden wir, wie ich schon sagte, dieselben Keyframes benötigen Wir müssen nur die Animationseigenschaft definieren. Das einzige, was wir hier ändern müssen, ist die Dauer. Für beide Elemente werden es 10 Sekunden sein. Ich meine, die Kurbel und die Pedale. Wie Sie sehen können, drehen sich die Kurbel und die Pedale. Das einzige, was wir tun müssen, ist, die Animation für die Elemente vor und nach der Farbe auszuführen Animation für die Elemente vor und nach der Farbe In diesem Fall sollten sie jedoch in die entgegengesetzte Richtung gedreht werden . Dafür müssen wir hier einen zusätzlichen Wert hinzufügen , umgekehrt. Ordnung, das war's, wir haben die Arbeit am Fahrrad beendet, ich hoffe, es war interessant und hilfreich. Lass uns mit dem nächsten Projekt weitermachen. 12. Projekt 9 - 3D-Raum: Ordnung, es ist Zeit, unser nächstes Projekt zu bauen, das ein Drei-D-Raum sein wird. Wie Sie sehen können, haben wir hier einen Raum im Drei-D-Raum. In der Mitte des Raumes steht ein Tisch und auf dem Tisch liegt ein Brief. Wenn wir auf die Schaltfläche klicken und später lesen, gelangen wir zum Tisch und der Buchstabe dreht sich. Wenn wir erneut auf die Schaltfläche klicken, gehen wir zurück. Okay, lassen Sie uns über dieses Projekt sprechen. Lass uns weitermachen und anfangen, es zu erstellen. Ich habe auf dem Desktop einen neuen Ordner namens Three D Room vorbereitet , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen und unseren Index für Arbeitsdateien mit CSS und Skripten im HTML-Stil erstellen . Dieses Projekt wird ein bisschen Java-Skript verwenden. Lassen Sie uns den Index der HDL-Datei öffnen und ein einfaches HDML-Dokument erstellen Dafür setze ich hier ein Ausrufezeichen und drücke dann Lassen Sie uns zunächst den Titel ändern. Es wird ein 3-D-Raum sein und dann die CSS - und Java-Dateien verknüpfen. Öffnen Sie das Link-Tag und geben Sie hier den Namen der Datei an. Was die Skriptdatei betrifft, werde ich das Skript öffnen und Namen der Gels-Datei im Quellattribut angeben. Ordnung, jetzt werde ich das Projekt über den Live-Server im Browser ausführen . Lassen Sie uns auch den Editor und den Browser so platzieren, okay, zuerst werde ich das H-ML-Markup erstellen Lassen Sie uns den tiefen Zug öffnen , der der Raum im Raum sein wird der der Raum im Raum Wir werden zwei verschiedene Elemente haben Der erste wird der Button sein. Öffnen wir das Button-Tag mit der Klasse BTN mit dem Text „Gelesener Buchstabe Was den zweiten betrifft, so wird es der Tisch sein. In der Tabelle werden wir ein paar verschiedene Elemente haben. Der erste wird der Brief sein. Öffnen wir das Etikett H, drei Überschriften, mit dem Klassenbuchstaben. Lassen Sie uns hier etwas Dummy-Text einfügen. Als nächstes werden wir drei Tischbeine haben. Öffnen wir den Tag mit dem Tabellenbein der Klasse. Außerdem brauchen wir hier noch einen Tisch. Lassen Sie uns diese Codezeile zweimal duplizieren und dann die Klassennamen ändern. Okay, endlich brauchen wir diesen Boden. Öffnen wir den Tag mit der Klassenebene. Alles klar, das HD-Mal-Markup ist fertig und jetzt ist es an der Zeit, mit dem Schreiben von CSS zu beginnen Zuallererst werde ich einige Reset- und Standardstile erstellen einige Reset- und Standardstile Lassen Sie uns jedes Element mit einem Sternchen auswählen. Ich werde den Standardrand und die Standardpolsterung loswerden. Lassen Sie uns beide Eigenschaften auf Null setzen. Außerdem werde ich die Größe der Box auf die Rahmenbox setzen. An dieser Stelle werden wir Ram als Maßeinheit verwenden. Standardmäßig entspricht ein Ram 16 Pixeln, und ich möchte ihn in zehn Pixel umrechnen Dass wir die Schriftgröße des HTML-Elements verringern die Schriftgröße des HTML-Elements Machen wir 62,5%. In Ordnung, wir sind bereit, den Raum individuell zu gestalten Eigentlich denke ich, dass es besser ist, wenn wir den Button im Brief für eine Weile verstecken , weil ich die Tabelle erstellen werde Kommentieren wir beide Elemente, dann wähle ich einen Raum aus. Lassen Sie uns zunächst mit der Höhe definieren. Ich werde die Breite auf 100% setzen da die Höhe 100% des Viewports betragen wird Dann ändere die Hintergrundfarbe und mache sie schwarz. Okay, als Nächstes kümmere ich mich um den Tisch. Lassen Sie uns zunächst die Höhe innerhalb der Höhe definieren. Ich werde beide Eigenschaften auf 60 setzen dann werde ich den Hintergrund ändern. In diesem Fall verwenden wir eine radiale Gradientenfunktion. Es ermöglicht uns, einen Farbübergang von der Mitte des Elements aus zu erzeugen . Ich werde zwei verschiedene Farben einfügen, beide sind RGBA-Werte Die erste Zeile wird weiß sein. Wir benötigen 25053 mal, dann die Deckkraft 0,9 Was die zweite Farbe betrifft, wird 3819123 sein, und die Deckkraft wird 0,9 sein Okay, Nächstes machen wir die Tabelle abgerundet und erstellen auch den abgerundet und Lassen Sie uns den Randradius auf 50% setzen und dann den unteren Rand mit zwei durchgehenden Werten erstellen Die Farbe wird RGB 153.233.253 sein Danach werde ich die Tabelle in der Mitte der Seite platzieren Tabelle in der Mitte der Seite Verwenden wir dafür ein CSS-Raster. Wir müssen das Raster anzeigen und die Elemente in der Mitte platzieren. Okay, der Tisch ist zentriert. Und jetzt werde ich es rotieren lassen. Außerdem möchte ich den Tisch im Raum tiefer platzieren. Bevor wir das tun, müssen wir dafür eine Drei-D-Umgebung erstellen . Ich werde die Eigenschaft Perspective verwenden. Stellen wir es auf 100 Ram ein. Danach drehe ich den Tisch um. Lassen Sie uns die Transform-Eigenschaft verwenden. Wir müssen den Tisch entsprechend der X-Achse drehen. Der Wert wird 70 Grad betragen. Außerdem müssen wir den Tisch entsprechend der Z-Achse bewegen. Lassen Sie uns Z mit dem Wert zehn Ram übersetzen. Okay, der Tisch ist gedreht. Und jetzt müssen wir uns um die Beine kümmern. Wie Sie wissen, haben alle drei Beine einen gemeinsamen Klassennamen: Tischbein. Wählen wir es aus und definieren es mit und Höhe. Die Breite wird drei Ram betragen. Was die Höhe angeht, werde ich 35 Ram draus machen. Ändere auch die Hintergrundfarbe. Lassen Sie uns Ihren RGBA-Wert 29113116 und die Opazität 0,8 verwenden 29113116 und . Okay, hier haben wir alle drei Beine, aber wie Sie sehen können, müssen wir uns um ihre Positionen kümmern Lassen Sie uns die Position auf absolut setzen. Definieren Sie dann die Eigenschaften oben und links. Die oberste Position wird 30 Ram sein. Was die linke Position angeht, werde ich sie auf 28,5 Ram setzen Ordnung, jetzt müssen wir jedes Bein einzeln anpassen Lass uns weitermachen und mit dem ersten beginnen. Wir müssen das Bein entsprechend den X- und Z-Xs drehen. Bevor wir das Bein drehen, müssen wir uns auch einen Raum mit drei D für das Bein teilen. Dazu müssen wir eine Eigenschaft namens Transformationsstil verwenden, bei der der Wert drei D beibehalten wird. Okay, danach können wir das Bein drehen. Wählen wir das erste Bein der Tabelle aus und verwenden dann Transformation, drehen Sie x mit dem Wert -60 Grad drehen Sie mit dem Wert 40 Grad. In Ordnung, wie Sie sehen können, ist das Bein gedreht. Aber es wird von der Mitte aus gedreht , weil der Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist und wir es ändern und es nach oben machen müssen. Okay, jetzt haben wir ein viel besseres Ergebnis. Als Nächstes werde ich das Bein abrunden, also verwenden wir den Randradius, fünf Ram und einen Ram. Also werde ich auf der rechten Seite und auch am unteren Rand einen Rand hinzufügen . Verwenden wir Border Right mit den Werten 0.3 Ram Solid. Die Farbe RGB, 388587. Lassen Sie uns diese Codezeile duplizieren und den Rand direkt in den unteren Rand ändern direkt in In Ordnung, setzen wir uns auf das Hinspiel. Lass uns weitermachen und uns um den zweiten kümmern. Eigentlich werde ich diesen Code duplizieren. Lass uns den Klassennamen ändern. Es werden zwei sein. Der Wert der Funktion „Z drehen“ wird negativ sein. Außerdem werde ich die Werte des Grenzradius ändern . Wir brauchen einen Ram und fünf Ram. Schließlich brauchen wir statt der Immobilie Border Right hier Border Left. Okay, das Rückspiel ist fertig. Lass uns weitermachen und den dritten anpassen. Lassen Sie uns den Code erneut duplizieren und den Klassennamen ändern. Wir brauchen hier Tischbein drei. In diesem Fall müssen wir nur die Elemente entsprechend x x drehen. Und der Wert wird -140 Grad sein Der Grenzradius wird ein Ram sein. Statt einer unteren Grenze brauchen wir eine Grenze, oder? Ordnung, schauen wir uns die Beine an, und der Tisch ist tatsächlich fertig. Als Nächstes kümmere ich mich um den Boden. Wählen wir dieses Element aus und definieren wir zunächst mit der Höhe. Im Moment werde ich den Boden etwas kleiner machen und dann werden wir diese Werte ändern. Die Breite und Höhe werden 60 Ram betragen. Wie Sie wissen, sieht der Boden aus wie die Truhe. Und wir werden es mit einer der Funktionen namens wiederholender konischer Gradient erstellen Funktionen namens wiederholender konischer Diese Funktion gehört zur Eigenschaft Hintergrundbild. Wir werden zwei verschiedene Farben mischen und die Ausrichtung der Zellen mit einigen Graden regeln. Der erste Wert in dieser Funktion definiert die Richtung der Zellen. Ich werde hier von 90 Grad aus vorbeifahren. Als Nächstes müssen wir die erste Farbe angeben . Es wird schwarz sein. Und wir brauchen hier null Grad und 90 Grad. Tatsächlich wird dadurch eine schwarze Zelle entstehen. Als Nächstes müssen wir die zweite Farbe angeben, die 333 sein wird. Ich meine die graue Farbe. Außerdem brauchen wir hier 90 Grad und 180 Grad. Danach müssen wir die Größe der Zellen angeben. Wir müssen die Hintergrundgröße verwenden, und die Werte werden zehn Ram sein. Wieder zehn Ram. Wie Sie sehen können, haben wir hier die Zellen, und sie sehen aus wie eine Truhe. Wie Sie sehen können, wiederholen sich die Zellen. Dies liegt daran, dass die Eigenschaft für die Hintergrundwiederholung standardmäßig auf Wiederholen eingestellt ist. Wenn wir sie ändern und dafür sorgen, dass sie sich nicht wiederholt, haben wir nur vier Zellen, weil die sich wiederholende Kegelfunktion einmal ausgeführt wird und Zellen auf der X- und Y-Achse erzeugt Okay, lassen Sie uns die Eigenschaft „ Wiederholungen im Hintergrund“ loswerden. Als Nächstes werde ich den Boden abrunden Lassen Sie uns den Randradius mit dem Wert 50% verwenden . Dann setze ich die Position auf absolut. Wir müssen das Stockwerk nach unten verlegen. Lassen Sie uns Transform Translate Z mit dem Wert -23 Ram verwenden. Ordnung, eigentlich können wir den Boden schon vergrößern Lassen Sie uns die Werte für Breite und Höhe ändern und sie auf 160 setzen. Ordnung, danach müssen wir den Boden in die Mitte des Raumes stellen. Dafür verwende ich CSS Flax Box, wir brauchen Display Flax Begründen Sie dann ein Inhaltszentrum und ein Einzelpostenzentrum. In Ordnung, danach fügen wir einen Schatteneffekt hinzu. Außerdem werde ich den Teil des Bodens verstecken , der sich außerhalb des Raums befindet. Lass uns Box Shadow benutzen. Wir brauchen den Schatten innerhalb des Elements, das wir hier in St verwenden müssen , minus fünf, dann zehn Ram. Und die schwarze Farbe brauchen wir auch hier wieder innerhalb von fünf Ram, zehn Ram, und die schwarze Farbe um den Boden zu verstecken , der sich außerhalb des Raumes befindet, müssen wir Overflow Hidden verwenden In Ordnung, das ist es. Der Boden und der Tisch sind fertig und jetzt können wir uns um den Boden und Letzteres kümmern. Im Moment sind sie versteckt. Machen wir weiter und machen sie sichtbar. Wählen wir die Unterseite aus, die die Höhe definiert. Ich werde beide Eigenschaften auf 15 Ram setzen. Dann ändere die Hintergrundfarbe. Es ändert auch die Farbe des Textes. Verwenden wir den RGB-Wert 252357. Okay, als Nächstes werde ich die Position der Unterseite ändern Lassen Sie uns die Position auf relativ setzen dann die Eigenschaften oben und links definieren. Die oberste Position wird zehn Ram sein. Was die linke Position angeht, werde ich sie auf -40 machen. In Ordnung, danach werde ich die Form der Unterseite ändern Außerdem werde ich einen Rand hinzufügen. Lassen Sie uns die Form des Elements ändern, indem wir die Grenzradiuswerte zweimal auf 50% dann auf 0,50% setzen. Was den Rand angeht, werde ich ihn auf 0,3 Ram setzen Die Farbe wird RGB 252357 sein. Ordnung, danach lassen Sie uns weitermachen und den Text auf der Unterseite anpassen Ich werde das Telefon vergrößern, zwei Ram draus machen und dann Text in Großbuchstaben umwandeln. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen, also 0,2 Ram daraus machen. Dann werde ich die Zeilenhöhe erhöhen. Machen wir es 1.5 Zuletzt ändern wir den Typ des Cursors, machen Sie ihn zum Zeiger. In Ordnung, der Button ist personalisiert. Als Nächstes kümmere ich mich um den Brief. Lass es uns auswählen. Und definiert zuallererst innerhalb der Höhe. Ich setze auf 215 Ram, dann wird die Höhe 25 Ram sein. Lass uns die Hintergrundfarbe ändern, sie weiß machen. Als Nächstes werde ich den Raum innerhalb des Briefes erstellen. Lassen Sie uns das mit Polsterung machen. Stellen wir es auf zwei Ram oben, einen Ram auf der rechten Seite, zwei Ram unten und einen Ram auf der linken Seite Ändern wir die Farbe, machen wir 555 draus. Verwenden Sie auch einen kleinen Schatteneffekt. Verwenden Sie Box Shadow mit dem Wert 00.1 Ram und dem Anrufer AAA Ordnung. Jetzt ist es an der Zeit, sich um das Telefon und den Brief zu kümmern. Eigentlich werde ich eines der Google-Telefone benutzen. Lassen Sie uns weitermachen und die Google Phones-Website besuchen. Ich werde nach einem Telefon namens Dancing Script suchen. Wählen wir den ersten Stil aus, klicken dann auf Import, nehmen die URL und fügen sie in die CSS-Datei ein. In Ordnung, jetzt können wir die Telefonfamilie definieren. Weisen wir dem Tanzskript Kursivschrift zu, ändern dann die Telefongröße, machen wir 1,5. Zum Schluss mache ich noch einen kleinen Einzug. Verwenden wir Text in der Delle mit dem Wert 0,5 Ram. In Ordnung, also ist alles bereit. Und jetzt können wir diesen Knopf zum Laufen bringen. Sobald wir darauf geklickt haben, müssen wir uns in den Raum bewegen, den Tisch erreichen und der Buchstabe sollte sich drehen. Dafür werde ich ein bisschen Javascript verwenden. Wir müssen der Schaltfläche mit einem Klickereignis einen Event-Listener hinzufügen Schaltfläche mit einem Klickereignis einen Event-Listener Zuallererst wähle ich unten aus. Lassen Sie uns die Auswahlmethode abfragen. Wir müssen hier den Klassennamen BTN angeben. Dann müssen wir unten mit Click Event den Event-Listener hinzufügen unten mit Click Event den Außerdem müssen wir hier eine Callback-Funktion übergeben , die ausgeführt wird, sobald wir auf die Schaltfläche klicken Ich werde der Tabelle eine neue Klasse hinzufügen. Dann definieren wir mit dieser Klasse neue Stile in CSS, die wir dem Element beim Klicken hinzufügen müssen. Jetzt müssen wir die Tabelle auswählen. Lassen Sie uns erneut die Abfrageselektormethode verwenden. Der Klassenname wird Tabelle sein. Danach müssen wir eine Eigenschaft namens Klassenliste verwenden eine Eigenschaft namens Klassenliste , die uns alle Klassen gibt, die das Element hat. Jetzt werde ich eine der Methoden namens Togal verwenden. Tatsächlich ermöglicht uns diese Methode, dem Element eine Klasse hinzuzufügen , wenn es sie nicht hat, und sie zu entfernen Wenn es sie hat, wird der Name der Klasse, sagen wir, ändern. Okay, lassen Sie uns über das Javascript sprechen. Gehen wir zurück zur CS-Datei und wählen wir eine Tabelle mit einem Klassenwechsel aus. Wir müssen die Tabelle nach x, xs drehen. Außerdem müssen wir es gemäß den hier benötigten Y- und Z-Richtungen bewegen . Drehen Sie den X-Funktionswert um 80 Grad und übersetzen Sie dann Y, der Wert wird 30 Ram sein. Und übersetze auch Z mit dem Wert zehn Ram. Sobald ich auf die Schaltfläche klicke, bewegen wir uns in den Raum, aber wie Sie sehen können, müssen wir diesen Effekt sanfter machen Dafür werde ich Transition verwenden. Wir müssen uns hier transformieren. Und die Dauer 2 Sekunden, jetzt haben wir ein viel besseres Ergebnis. Aber wie Sie beim nächsten Klick sehen können, haben wir keinen reibungslosen Effekt mehr. Wir benötigen einen weiteren Übergang als Standardübergang für die Tabelle. Jetzt funktioniert alles einwandfrei. Eigentlich denke ich, dass wir den Tisch etwas mehr um das X X drehen müssen . Im Moment ist er um 70 Grad gedreht. Lassen Sie uns den Wert ändern und ihn auf 80 Grad setzen. In Ordnung, ich denke, es ist viel besser. Lass uns weitermachen und uns um den Brief kümmern. Wählen wir Class Change gefolgt von dem Buchstaben aus. Ich werde den Buchstaben entsprechend x x drehen. Der angegebene Wert wird also -80 Grad betragen. Letzteres dreht sich, aber es dreht sich von der Mitte aus Wir müssen den Ursprung der Transformation ändern. Es wird der Tiefpunkt sein. Jetzt ist das Problem behoben und wir müssen die Rotation reibungsloser gestalten Lassen Sie uns wieder Transition verwenden. Wir müssen uns transformieren. Die Dauer wird 1 Sekunde betragen. Außerdem brauchen wir hier eine kleine Verzögerungszeit. Es wird 2 Sekunden dauern, genau wie bei der Tabelle. Wir brauchen einen weiteren Übergang als Standardübergang. In Ordnung, jetzt funktioniert alles gut. Das Einzige, was ich tun möchte, ist eine Verzögerungszeit für die Tabelle hinzuzufügen , sobald wir sie verlassen. Fügen wir hier 1 Sekunde hinzu. In Ordnung, das ist es also. Alles funktioniert perfekt mit diesem Projekt, wir sind fertig. Ich hoffe, es war interessant und du hast ein paar neue Dinge gelernt. Wir sehen uns beim nächsten Projekt. 13. Projekt 10 - 3D-Schaukel: Ordnung, es ist Zeit, unser letztes Projekt in diesem Kurs zu erstellen. Es wird ein Drei-D-Swing sein. Wie Sie sehen können, haben wir hier ein paar Schaukeln in einem Drei-D-Raum Sie schwingen. Und wir haben hier auch einen kleinen Ball, der sich von einer Schaukel zur nächsten bewegt Wir werden diese Effekte mit CSS-Animationen und drei D-Transformationen Okay, das war's mit dem Projekt. Lass uns weitermachen und anfangen, es zu bauen. Ich habe auf dem Desktop einen neuen Ordner namens Three D Swing erstellt , der momentan leer ist. Lass es uns im VS-Code öffnen. Erstellen Sie unsere Arbeitsdateien für HTML und CSS. Öffnen Sie dann den Index der HDL-Datei und erstellen Sie ein einfaches HDML-Dokument Lassen Sie uns hier ein Ausrufezeichen platzieren und dann Top oder Enter drücken Lass uns den Titel ändern. Ich werde hier drei D Swing einfügen, dann die CSS-Datei verknüpfen, Link-Tag öffnen und hier den Namen der CSS-Datei angeben. Okay, endlich werde ich das Projekt über einen Live-Server im Browser ausführen . Lassen Sie uns auch den Editor und den Browser so platzieren. In Ordnung, wir sind bereit , das Projekt zu erstellen. Zuallererst werde ich mit dem HTML-Markup beginnen. Lass uns den tiefen Zug öffnen , der der Container sein wird Als Nächstes werde ich die Schaukel erstellen. Lass uns de Tu mit der Klassenschaukel eröffnen. Schaukel eins In der Schaukel werden wir ein paar verschiedene Elemente haben. Wir werden vier Kreise haben. Lassen Sie uns einen tiefen Zug mit dem Kreis der Klasse und dem ersten Kreis öffnen der Klasse und dem ersten Kreis Dann werde ich diese Codezeile dreimal duplizieren und die Klassennamen ändern Außerdem werden wir zwei Seile haben. Öffnen wir das Tag mit der Klasse Rope und Rope One Dann duplizieren wir diese Codezeile und ändern den Klassennamen Okay, insgesamt werden wir sechs Schaukeln haben. Aber im Moment denke ich, dass es uns besser geht, wenn wir nur eine erstellen Sobald wir es angepasst haben, kümmern wir uns um den Rest. Okay, das war's mit dem HDML-Markup. Lassen Sie uns vorerst damit beginnen , CSS zu schreiben. Zunächst werde ich einige Reset- und Standardstile erstellen . Lassen Sie uns jedes Element mit einem Sternchen auswählen. Ich werde den Standardrand und die Polsterung loswerden. Lassen Sie uns beide Eigenschaften auf Null setzen. Außerdem werde ich die Größe der Box auf die Rahmenbox setzen. Während dieses Projekts werden wir Ram als Maßeinheit verwenden. Standardmäßig entspricht ein Ram 16 Pixeln und ich möchte ihn in zehn Pixel umwandeln Dafür müssen wir die Standardgröße des H-Timul-Elements verringern Standardgröße des H-Timul-Elements Lassen Sie uns das auf 62,5% setzen. In Ordnung, als Nächstes nehmen wir den Container ab Ich werde die Wengenhöhe definieren . Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie zu 100% des Viewports machen Dann werde ich den Hintergrund des Containers ändern. In diesem Fall verwende ich eine radiale Gradientenfunktion. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass der Farbübergang von Schwarz zu Blau in der oberen linken Ecke der Seite beginnt Zuallererst müssen wir diesen Ort angeben. Ich werde den nächstgelegenen Standort mit 5% bis 10% verwenden . Tatsächlich sind diese Prozentwerte wie die Koordinaten. Danach legen wir die Farben fest. Der erste wird schwarz sein. Verwenden wir RGB mit Nullen. Was die zweite Farbe angeht, wird sie blau sein Lassen Sie uns RGB 115488 verwenden. Okay. Das Letzte , was wir in Bezug auf den Hintergrund tun müssen , ist den Farbübergang zu erhöhen. Und dafür fügen wir hier 1.000% hinzu. In Ordnung, lassen Sie uns über den Container sitzen Lassen Sie uns vorerst weitermachen und uns um die Schaukel kümmern. Lassen Sie uns zunächst mit der Höhe definieren. Ich setze auf 242 Ram, dann wird die Höhe 20 Ram sein. Ändere auch die Hintergrundfarbe. Ich verwende den RGBA-Wert 2621691 und die Opazität 0,7. Hier haben wir den Swing, und wir müssen ihn in der Mitte der Seite platzieren Dafür werde ich CSS Flexbox verwenden . Wir brauchen Display Flex. Begründen Sie dann ein Inhaltszentrum und ein Einzelpostenzentrum. Dann drehe ich die Schaukel und dann geben wir ihr eine Drei-D-Form. Eigentlich werde ich die Schaukel in alle drei Richtungen drehen . Ich meine X Z und Y X. Wenn Sie also die X-Funktion transformieren und dann drehen, wird der Wert 70 Grad betragen. Dann müssen wir Z drehen, wenn der Wert -40 Grad ist. Schließlich drehen wir um fünf Grad. In Ordnung, das Element ist gedreht. Wie gesagt, ich gebe der Schaukel eine Drei-D-Form. Zuallererst müssen wir dafür eine Drei-D-Umgebung schaffen . Ich werde Perspective mit dem Wert 150 Ram verwenden. Ich werde eine Form mit drei D erstellen , indem ich Elemente vor und nach der CD verwende, und wir müssen uns auch einen Raum mit drei D teilen. Dafür verwende ich Eigenschaft namens transform style mit dem Wert preserve three D. In Ordnung, Nächstes wählen wir einen Swing mit einem Before-Element aus. Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann definiere ich die Breite und Höhe. Die Breite wird ein Ram als Polyhöhe sein. Ich werde es zu 100% machen auch die Hintergrundfarbe ändern Ich werde hier die Farbe B4b 65 verwenden die Position auch auf absolut setzen Okay, hier haben wir das Before-Suit-Element auf der linken Seite der Schaukel Lass uns weitermachen und es drehen. Transformiere, drehe Y mit einem Wert von 90 Grad. Das Element wird gedreht, aber wie Sie sehen können, ist es von der Mitte aus gedreht. Wir müssen den Ursprung der Transformation ändern. Lassen Sie uns den Transformationsursprung verwenden und ihn links machen. Die linke Seite ist fertig. Lass uns weitermachen und uns um die Vorderseite kümmern. Ich wähle Swing With, nachdem ich das Element gesehen habe. Lassen Sie uns den Inhalt definieren und ihn leer machen. Dann setze ich die Höhe auf einen Ram. Dann wird die Breite 100% sein . Ändere die Hintergrundfarbe, ich verwende hier Farbe zwei, C sechs. Ändere auch die Position, mache sie absolut. Okay, hier haben wir die Nachher-Elemente. Wie Sie sehen können, müssen wir die Position ändern. Es sollte vor der Schaukel platziert werden. Lassen Sie uns die untere Eigenschaft definieren und sie auf Null setzen, okay? Als Nächstes werde ich die Elemente drehen. In diesem Fall müssen wir es entsprechend der X-Richtung drehen . Lassen Sie uns die Funktion zum Drehen von X auf 90 Grad einstellen. Wie Sie sehen können, müssen wir wie beim Element vor dem Setzen des Elements den Ursprung der Transformation ändern. Hier wird es unten sein. In Ordnung? Wie Sie sehen können, hat die Schaukel eine Drei-D-Form. Als Nächstes nehme ich hier die Kreise, ich meine die Details , die in den Ecken der Schaukel befinden. Wählen wir den Kreis aus, der innerhalb der Höhe definiert ist. Ich setze beide Eigenschaften auf drei Ram und ändere dann die Hintergrundfarbe. Ich werde hier C5757 verwenden. Als Nächstes werde ich das Element Randradius mit einem Wert von 50% abrunden . Danach werde ich mich um die Positionen der Kreise kümmern Lassen Sie uns die Position auf absolut setzen. Dann werde ich die Positionen für jeden Kreis separat definieren . Fangen wir mit dem ersten an. Ich werde die Eigenschaften oben und links definieren. Lassen Sie uns beide Positionen auf einen Ram setzen. Dann werde ich diesen Code duplizieren und den Klassennamen ändern. Außerdem brauchen wir hier die rechte Position statt die linke. Als nächstes kommt der dritte Kreis als Duplikat wieder der Code ändert den Klassennamen. In diesem Fall benötigen wir Positionen unten rechts. Dann legen wir fest, dass der letzte Kreis der vierte sein soll. Wir brauchen unten und links. In Ordnung, alle vier Elemente sind positioniert. Als Nächstes werde ich die weißen Elemente erstellen , die über den Kreisen platziert werden. Wir werden sie mit dem Before-Suit-Element erstellen. Wählen wir den Kreis gefolgt vom Before-Suit-Element aus. Definieren wir zunächst den Inhalt. Wir müssen es leer haben. Dann setze ich mit der Höhe beide auf 1,8 Ram. Dann ändere die Hintergrundfarbe. Ich werde hier 988 verwenden. Stellen Sie die Position auch auf absolut ein. Hier haben wir die Vorher-Elemente. Lassen Sie uns weitermachen und sie abrunden. Und wir müssen sie auch in der Mitte der Kreise platzieren . Lassen Sie uns den Randradius verwenden ihn auf 50% setzen. Um die Elemente dann in der Mitte zu platzieren, verwende ich das CSS-Raster. Wir müssen das Raster anzeigen und die Elemente in der Mitte platzieren. In Ordnung, um einen schöneren Effekt zu erzielen, verschiebe ich die weißen Kreise in einem Drei-D-Bereich ein wenig nach oben Zuallererst müssen wir uns eine Drei-D-Umgebung mit dem Before-Element teilen eine Drei-D-Umgebung mit dem Before-Element Dafür verwende ich den Transformationsstil mit dem Wert Preserve Three D. Dann, um die Elemente nach oben zu verschieben, transformiere ich die Funktion Translate Z mit dem Wert 0,3 m. In transformiere ich die Funktion Translate Z mit dem Wert Ordnung, sehen wir uns die Out-Kreise an. Lass uns weitermachen und uns um die Seile kümmern. Wählen Sie sie mit einem gemeinsamen Klassennamen aus. Ich werde Breite und Höhe definieren. Lassen Sie uns die Höhe auf 40 Ram setzen und die Breite wird 0,3 Ram sein. Außerdem werde ich die Hintergrundfarbe auf Weiß setzen. Hier haben wir die Seile und wir müssen uns um die Positionen kümmern Lassen Sie uns die Position auf absolut setzen. Dann definiere ich die Positionen für Seil eins und Seil zwei getrennt. Fangen wir mit dem ersten Seil an. Ich werde die Eigenschaften oben und links definieren. Die oberste Position werden zehn Ram sein. Was die linke Position angeht, werde ich 2,5 Ram daraus machen. Lass uns diesen Code duplizieren, den Klassennamen ändern. Wir brauchen Seil zwei statt linker Position. Wir brauchen hier die richtige Position. Okay, die Seile sind positioniert, und als Nächstes werde ich sie drehen und auch ein bisschen nach oben bewegen Lass uns transformieren. Wir übersetzen den Wert der Z-Funktion auf 20 m. Dann drehe ich das Element entsprechend der X- und Y-Achse. Der Wert der Funktion „X drehen wird 90 Grad betragen. Dann müssen wir y mit demselben Wert drehen. Im Moment sind die Seile von der Mitte aus gedreht. Und wir müssen den Ursprung der Transformation ändern. In diesem Fall müssen wir es auf die Spitze setzen. Ordnung, die Seile sind fertig, ich meine die oberen Teile und jetzt müssen wir die zusätzlichen Teile unten herstellen Und ich werde das mit Before - und After-Do-Elementen machen Wählen wir ein Seil aus, bevor Elemente den Inhalt definieren, wir müssen leer sein. Dann definiere ich Breite und Höhe. Die Breite wird 0,3 Ram betragen. Was die Höhe angeht, werde ich 23 Ram draus machen. Ich verwende Jahre auf temporärer Hintergrundfarbe, sagen wir Rot, und setze dann die Position auf Absolut. Hier haben wir die vorherigen Elemente. Wir müssen die Positionen ändern. Ich meine, wir müssen sie nach unten verschieben und wir müssen sie auch rotieren. Lassen Sie uns meine Funktion transformieren und übersetzen. Der Wert wird -23 Ram sein. Außerdem müssen wir die Z-Funktion mit dem Wert 21 Grad drehen. Die Elemente werden von der Mitte aus gedreht. Und wir müssen den Ursprung der Transformation ändern. In diesem Fall sollte es unten sein. Ordnung, das war's, ungefähr vor dem Element. Lass uns die Hintergrundfarbe ändern, sie weiß machen. Um den zweiten Teil zu erstellen, duplizieren wir diesen Code. Wir müssen das Vorher in das Nachher ändern. Außerdem müssen wir den Wert der Drehfunktion ändern . In diesem Fall benötigen wir hier einen negativen Wert. Ordnung, endlich ist die Schaukel fertig und jetzt müssen wir die Animation erstellen. Vorher werde ich die Position der Schaukel leicht ändern . Lassen Sie uns die Position auf absolut setzen. Dann werde ich die oberste Position definieren. Machen wir es während der gesamten Animation auf 50%. Wir bewegen die Schaukel entsprechend der Y-Achse. Ich meine horizontal in einem Raum mit drei D. Lassen Sie uns Himmelsrahmen erstellen. Ich werde es Swing An nennen , wir werden ein paar verschiedene Schritte haben. Bei jedem Schritt werden wir den Wert der Funktion translate y ändern . Außerdem müssen wir bei jedem Schritt die aktuelle Rotation des Elements angeben . Fangen wir mit den 0% an, von hier aus werde ich die aktuelle Rotation abrufen. Fügen wir die Funktion translate y hinzu. Der Wert im ersten Schritt wird 100 m sein. Als nächstes kommen 20%. Kopieren wir nun die Transformationseigenschaft , den Wert der Funktion Translate Y. In diesem Fall füge ich dir 21 Ram ein. Dann kommen 25%, der Wert wird 27 Ram sein. Dann werden wir hier bei 35,40% die gleichen Modelle haben. Fügen wir hier Transform und ändern wir, dass der Wert der Funktion Translate Y auf Null gesetzt wird Bei 50% wird der Wert -60 Ram sein. Dann kommen 55%. Ich werde den Wert ändern und ihn auf -55 Ram Dann wird der Wert bei 65,70% -84 Ram sein. Schließlich müssen wir bei 100% die Schaukel verstecken. Ich nehme einen höheren Wert, sagen wir -800. Alles klar, die Keyframes sind fertig Jetzt können wir die Animation ausführen. Wählen wir Swing One aus. Wir müssen hier den Namen der Animation einfügen. Swing Anim, dann wird die Dauer der Animation 20 Sekunden betragen. Wir müssen die Animation unendlich laufen lassen. Lassen Sie uns auch die Animations-Timing-Funktion definieren. Ich wähle hier ist rein raus. Wie Sie sehen können, bewegt sich die Schaukel und die Animation funktioniert einwandfrei. Ich möchte hier ein paar Dinge tun. Zuallererst möchte ich den Ursprung der Transformation ändern . Stellen wir es auf den Anfang. Außerdem sehen wir hier zu Beginn der Animation die Scrollbalken. Um das zu beheben, müssen wir Overflow Ten verwenden. Okay, die erste Schaukel ist fertig. Es ist animierend. Lassen Sie uns den ersten Schwung in der H-TM-Datei duplizieren den ersten Schwung in der H-TM-Datei Ändere den Klassennamen, den wir hier brauchen, Swing Two, dann werde ich diesen Code in CSS duplizieren . Ändere den Klassennamen. Außerdem füge ich hier eine Verzögerungszeit hinzu, aber bei einem negativen Wert benötigen wir -4 Sekunden. Das bedeutet, dass die ersten 4 Sekunden der Animation beim zweiten Schwung verpasst werden. Okay, alles funktioniert perfekt auf die gleiche Weise. Ich werde auch drei weitere Schaukeln bauen. Lassen Sie uns diesen Code dreimal duplizieren. Ändern Sie die Klassennamen von drei auf fünf. Dann duplizieren Sie auch die Animation in der CS-Datei. Ändern Sie die Klassennamen, und wir müssen auch die Verzögerungszeiten ändern. Wir brauchen -8 Sekunden, dann -12 Sekunden und -16 Sekunden Ordnung, alle Schwünge bewegen sich gut, und jetzt müssen wir uns um den Ball kümmern, wodurch das Projekt für den Ball lustiger Ich werde eine zusätzliche Schaukel erstellen Machen wir weiter und duplizieren den Schwung noch einmal fügen dann hier einen tiefen Zug mit dem Klassenball Hier haben wir eine neue Schaukel , die sich gerade nicht bewegt , weil wir nicht die Animation dafür haben Jetzt werde ich den Ball anpassen. Definieren wir die Breite, machen wir daraus sieben Ram. Dann brauchen wir die gleiche Höhe. Ich werde hier eine Eigenschaft namens Seitenverhältnis mit dem Wert eins verwenden . Und dann lass uns den Hintergrund ändern. In diesem Fall verwende ich eine radiale Gradientenfunktion. Wir müssen zwei Farben mischen. Die erste Farbe wird RGBA 159-23-8156 sein und die Opazität 0,9. Die zweite Farbe wird 3116 sein wird 3116 sein und die Opazität 0,8 Okay. Als Nächstes ändere ich die Position des Balls, und wir müssen ihn und Lassen Sie uns die Position auf relativ setzen dann die Eigenschaften links und oben definieren. Die linke Position wird 15 Ram sein, dann wird die oberste Position zehn Ram sein. Lassen Sie uns auch hier den Grenzradius von 50% verwenden, okay? Danach müssen wir den Ball drehen. Wir müssen es sowohl in X - als auch in Y-Richtung drehen . Die Funktion „X drehen“ wird um 90 Grad eingestellt. Was den Wert der Funktion „Y drehen“ angeht, werde ich ihn auf 40 Grad einstellen. Auch hier müssen wir den Ursprung der Transformation ändern , da die Kugel gerade von der Mitte aus gedreht wird. Lassen Sie uns den Transformationsursprung auf oben setzen. Ordnung, lassen Sie uns dem Ball endlich einen kleinen Schatteneffekt hinzufügen . Verwenden Sie Box Shadow mit den Werten 00.2 Ram beim Aufruf von 333 Ordnung, das war's also, der Ball ist bereit und jetzt müssen wir uns um die Animation kümmern Wir werden die Animation für den sechsten Schwung erstellen. Dann werden wir irgendwann den neu erstellten Schwung ausblenden und nur den Ball anzeigen. Lassen Sie uns S-Keyframes erstellen. Ich nenne es Swing Six und wir haben nur drei Schritte bei 0%, die wir noch einmal benötigen . Bei der aktuellen Drehung des Swings werden, wie bei den vorherigen Keyframes, wie bei den vorherigen Keyframes, die Elemente entsprechend der Y-Achse bewegt. Ich werde hier die Funktion translate y hinzufügen, und der Wert wird Null sein. Dann addieren wir 50%, wir müssen das Element um 30 m verschieben. Was den letzten Schritt angeht, ich meine, 100% müssen wir noch einmal Y auf Null übersetzen. Okay, lassen Sie uns weitermachen und die Animation ausführen. Wählen Sie Swing Six, den Namen der Animation. Swing six, Anum, die Dauer wird 4 Sekunden betragen. Dann brauchen wir hier eine Verzögerungszeit mit wieder negativem Wert -1 Sekunde Die Animation wird unendlich sein. Außerdem müssen wir hier etwas lockern. Okay? Wie Sie sehen können, bewegt sich die Schaukel jetzt. Wir müssen es verstecken. Wir müssen alles verstecken außer dem Ball. Machen wir weiter und verstecken alle Entwicklungen im Sechsschwung außer dem Ball. Lasst uns die Sechs schwingen. Dann müssen wir die Pseudoklasse verwenden. Wir müssen hier den Klassennamen angeben, Paul. Um die Elemente auszublenden, verwende ich Opacity Zero Okay? Als Nächstes werde ich die Vorher-Nachher-Elemente ausblenden. Lassen Sie uns auch Swing Six mit Vorher und Nachher auswählen. Verwenden Sie erneut Opazität Null. Schließlich werde ich die Hintergrundfarbe der Schaukel transparent machen . Das ist es. Wir haben die Arbeit an diesem Projekt abgeschlossen. Alles funktioniert perfekt. Ich hoffe, Ihnen hat dieses Projekt gefallen und es war interessant, dieses Projekt zu beenden Unser Kurs ist vorbei. Ich hoffe, es war der richtige Kurs für dich und du lernst etwas Neues über diese beiden Technologien, ich meine, HTML und CSS. Der Kurs war relativ fortgeschritten. Wenn Sie Probleme hatten die Videos zu verstehen und ihnen zu folgen, empfehle ich, sie erneut anzusehen, den Code zu testen und zu versuchen, ähnliche Projekte selbst zu erstellen. Ordnung. Ich wünsche dir alles Gute. Viel Glück. Tschüss.