Gestalte ein Kunstwerk und lerne dabei Programmieren: Entwickle deine CSS-Fähigkeiten in CodePen weiter | Christina Gorton | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Gestalte ein Kunstwerk und lerne dabei Programmieren: Entwickle deine CSS-Fähigkeiten in CodePen weiter

teacher avatar Christina Gorton, Teaching Code Through Creativity

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      0:27

    • 2.

      Kursprojekt

      1:25

    • 3.

      Sassy werden

      7:32

    • 4.

      Framing es

      7:03

    • 5.

      Pseudo

      6:21

    • 6.

      Clip-Path und Randradius

      6:35

    • 7.

      Tiefe mit Box-Shadow hinzufügen

      6:06

    • 8.

      Transformationen und Übergänge

      14:36

    • 9.

      SVG verwenden

      4:08

    • 10.

      CSS-Animationen

      12:21

    • 11.

      Das Auffüllen

      0:27

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

741

Teilnehmer:innen

3

Projekte

Über diesen Kurs

In diesem Kurs werden wir dein your auf unterhaltsame und kreative Weise verbessern. Du lernst Fortgeschrittene und fortgeschrittene CSS und erschaffe ein Kunstprojekt mit anderen

Meine CSS Bilderkollektion auf CodePen hat mir dabei geholfen, als Entwickler eine Arbeit zu bekommen. Bei der Erstellung von Kunst geht es mit den Dinge vor, mit Sass, den pseudo und den pseudo den Schatten von Schatten, die Übergänge und den Übergängen.

Dieser Kurs richtet sich an Schüler:innen, die du nach der unterhaltsamen Möglichkeit zur Entwicklung von fortgeschrittenen CSS suchen kannst.

Die Schüler sollten grundlegende HTML und CSS kennen.

Wir werden eine kostenlose Ressource mit dem CodePen


für unser Projekt verwenden. Du kannst den starter den fertigen Code für jedes Video und die benötigte SVG für unser Projekt in der Kurskollektion
verwenden: a

Triff deine:n Kursleiter:in

Teacher Profile Image

Christina Gorton

Teaching Code Through Creativity

Kursleiter:in

I am a stay at home mom to three little ones turned remote front-end developer.
I learned programming best through creative coding. I participated and learned in communities like #dailyCSSimages and #100daysofcode. I hope you enjoy learning in a new and fun way as much as I do.
I am an active member of the Moms Can Code community and soon to be speaker. Most of my creative coding work can be found on CodePen at https://codepen.io/cgorton/#.

Vollständiges Profil ansehen

Skills dieses Kurses

Entwicklung Programmiersprachen CSS
Level: Intermediate

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hey, alle. Mein Name ist Christina Gorton und ich bin eine Remote-Front-End-Entwicklerin. Ich bin auch Autodidakt Entwickler, und eine der Möglichkeiten, die ich gelernt habe, zu programmieren, war durch kreatives Codieren. In diesem Kurs werden wir eine Menge fortgeschrittener und mittlerer CSS-Eigenschaften durchlaufen, aber wir werden sie während des fortgeschrittener und mittlerer CSS-Eigenschaften durchlaufen, Kurses in einem CSS-Image-Projekt auf unterhaltsame Weise anwenden. Wir werden gemeinsam an CodePen arbeiten und am Ende des Kurses haben Sie sowohl ein Bild als auch eine Animation zu teilen. Lasst uns anfangen. 2. Kursprojekt: In diesem Video möchte ich kurz beschreiben, was CSS-Bilder sind und dann werden wir darüber sprechen, was unser Projekt in dieser Klasse sein wird. CSS-Bilder sind jedes Bild, das Sie mit CSS und HTML erstellen. Wie Sie hier auf CodePen sehen können, gibt es viele CSS-Bilder und viele Dinge, die Sie mit CSS tun können. Sie können sogar ein CSS-Bild mit einem einzigen div-Element erstellen, das CSS-Eigenschaften erlaubt, wie Sie hier auf der Lynn Fisher-Site unter singlediv.com sehen. Ich werde mehrere Links zu Websites und CodePen-Profilen mit inspirierenden Bildern in unserem Klassenzimmer-Quelldokument teilen . Jetzt für diesen Kurs werden wir dieses CSS-Bild erstellen. In jeder Lektion werde ich ein neues CSS-Konzept vorstellen, dann wenden wir das, was wir gerade gelernt haben, auf unser Klassenprojekt an. Am Ende des Kurses haben Sie einige neue CSS-Eigenschaften gelernt und angewendet , und wir haben dieses fertige CSS-Bild mit Animation zu teilen. Ich würde mich freuen, wenn ihr eure Arbeit während des Kurses in unserer Klasse Projekte teilt . Für diejenigen von Ihnen, die möchten, werde ich die letzten Projekte in einer Klasse CodePen Sammlung sammeln und teilen . Sie können sogar kreativ werden und Farben, Formen, Kastenschatten ändern, was auch immer Sie tun möchten oder einfach nur ein völlig anderes Bild erstellen und ich würde das immer noch gerne teilen, sowohl in unserer Klasse CodePen Sammlung, und auf meinem Twitter-Account. Lasst uns anfangen. 3. Sassy werden: In diesem Video werden wir eine kurze Einführung in Sass machen. Ich werde nicht in alles auf Sass geraten. Es gibt viel mit Sass zu tun. Aber für unser Projekt werden wir Sass für ein paar Dinge wie Variablen und Verschachtelung verwenden . Also würde ich gerne über die gehen. Sie sind wirklich nützlich. Sie sind eine gute Einführung in Sass, und von dort aus können Sie weitermachen und Partials und Mixins und Loops lernen und alle Arten von lustigen Sachen, die Sass bietet. Ein CSS-Präprozessor ermöglicht es Ihnen, nur eine Sprache zu nehmen und sie in CSS zu kompilieren, so dass Sie die Funktionen verwenden können, die in dieser Sprache sind, in diesem Fall Sass. Es gibt auch weniger Stylisten, aber Sass scheint der beliebtere Präprozessor zu sein, den Sie in der Webentwicklung verwenden können. Sass hat eigentlich zwei verschiedene Syntaxen. Die, die Sie jetzt häufiger sehen werden, ist SCSS, die Sie hier sehen können, und CodePen, Sie können einfach, gehen Sie zu Einstellungen und Sie können Ihren Präprozessor wählen. Das sind Sass, SCSS, Stylus, PostCSS. Wir werden SCSS verwenden und das liegt daran, dass es am ähnlichsten regulären CSS ähnelt. Wenn Sie reguläres Sass und nicht Sassy CSS, das SCSS ist, verwenden, müssen Sie keine Klammern machen, aber Sie müssen sich um Einzug sorgen. Es gibt bestimmte Möglichkeiten, wie Sie einrücken müssen und Sie können nicht einfach jeden CSS-Code, den Sie haben, nehmen und ihn verwenden. Mit Sass müssten Sie zurückgehen und all Ihr CSS neu formatieren. Hier sind einige Beispiele von Sass, die Sie in unserem Projekt sehen könnten. Also gehen wir durch und nur ein paar Minuten in unserem nächsten Video, und wir werden Farben aussuchen und Variablen mit ihnen erstellen. Variablen sind also nützlich, weil Sie den Code einmal hier oben schreiben können, habe ich meine Farbe. Das sind verschiedene Blues, und ich kann es während meines Projekts setzen. In diesem kleinen Projekt scheint es nicht wie eine große Sache zu sein, jedes Mal die Farbe ausschreiben zu müssen. Aber wenn du ein riesiges Projekt machst, wenn du diese Farbe überhaupt änderst, kommt ein Designer zurück und sagt: „Hey, ich möchte, dass diese Farbe rot statt blau ist.“ Es ist so viel einfacher, genau hier zu schreiben, rot, und dann überall dort, wo ich die blaue Farbe gesetzt habe, die sich während meines gesamten Projekts ändern wird. Wenn ich also Titel hätte, [unhörbare] Ränder, wenn ich etwas hätte, das diese Farbe blau war, würden sie jetzt alle zu Rot wechseln. Super nützlich. Sie werden auch sehen, dass Benutzer es für Dinge wie Überschriften oder Haltepunkte verwenden. Überall dort, wo Sie mehrmals etwas schreiben möchten, wo Sie möglicherweise die gleiche Art von Überschriftenschriftart oder die gleichen Haltepunkte für verschiedene Medienabfragen verwenden. Sie möchten das in eine Variable einfügen, so dass Sie nur einen Ort haben, um es zu ändern, und Sie müssen nicht alle Ihre Stylesheets durchlaufen und danach suchen. Eines der anderen Dinge, die Sie in unserem Projekt sehen werden, ist die Verschachtelung. Verschachtelung ist wirklich nützlich. Wenn Sie an HTML denken, haben Sie eine klare verschachtelte und visuelle Hierarchie Ihrer HTML-Elemente. CSS bietet das nicht wirklich an. Aber mit Verschachtelung, so etwas wie ein Nav, wo Sie eine UL und LI und Ankerlink haben würden. Sie können jetzt sehen, dass sie alle zusammen sind, sie machen Sinn. Dies ist sehr einfach zu pflegen, während Sie sich hier wiederholen, nav ul, nav li, nav a. Wenn es wirklich einfacher ist, sie alle zusammen zu halten. Sie können Dinge übernisten, dies kann kompliziert werden, zu überschreiben und zu pflegen, also müssen Sie vorsichtig damit sein, aber mit so etwas wie einem Navi macht es Sinn, all Ihre Sachen im Verschachteln zusammenzuhalten. Eine andere coole Sache, die Sie mit Sass verwenden können, sind Operatoren, und ich benutze oft Operatoren viel. Ich werde etwas Mathematik machen, um meine Breiten herauszufinden, je nachdem, was ich tue, aber ich benutze sie viel mit Farben. Also, wenn ich eine Farbe habe, die die gleiche ist, sind diese beiden Farben beide bei Brown, und ich möchte, dass eine ein bisschen heller und eine etwas dunkler ist. Ich werde sie vermehren. Wenn Sie nach oben gehen, geben Sie eine, die es leichter macht. Wenn Sie unter einer gehen, die es dunkler macht, und das ist nur ein einfacher Weg, und irgendwie nach einer anderen Farbe suchen und diese in setzen, können Sie es einfach multiplizieren. Das ist also ziemlich cool. Im nächsten Video zeige ich Ihnen, wie ich typischerweise Farben erzeuge, wie ich eine Farbpalette finde, und dann werden wir einige unserer Farben mit den Sass-Variablen hinzufügen, und dann während unseres gesamten Projekts werden wir noch mehr Sass, , damit Sie es im Rest des Projekts sehen. Lasst uns anfangen. In diesem Video werde ich darüber sprechen, wie ich Farben erzeugen könnte, wenn ich kein Programm wie Sketch oder Adobe-Produkte habe. Das ist also nur eine kostenlose Seite, die ich sehr viel benutze. Es ist ziemlich cool. Es heißt Coolers dot com, und ich werde einen Link dafür in unseren Klassenressourcen haben. Dies ermöglicht es Ihnen, Farbpaletten zu generieren. Wenn ich nur auf diese Leertaste auf meiner Tastatur klicke, kann ich die Farbpaletten durchsehen. Ich kann sie hineingehen, Farbpaletten finden, die dazu passen. Aber was ich normalerweise mit meinen CSS-Bildern mache, ist dass ich ein Bild finde, das ich online neu erstellen möchte, und dann kann ich hierher gehen, und wenn ich einen Screenshot davon habe oder wenn ich die URL habe, kann ich das einlegen und ich kann die Farbpalette auf diese Weise. Also, wenn ich das hier herumschiebe, habe ich das Blau. Ich kann auf dieses klicken und dann kann ich es dort setzen, wo ich will. Ich kann eine braune Farbe bekommen und klicken Sie auf diese. Ich kann diese kleine Akzentfarbe hier drinnen bekommen. Es ist wirklich cool. An dieser Stelle können Sie dann die Farben generieren, die ich hier meine Farbpalette bekommen habe. Super nützlich. Sie können dies exportieren, wenn Sie möchten. Sie können die Farben greifen, Sie können dies tun. Sie können sie kopieren und die Farben über. Sie können sie sogar exportieren und sie werden sie als Variablen für Sie exportieren. Dies ist eine kostenlose Website. Du musst dich nicht anmelden. Wenn Sie sich anmelden, werden nur Farbpaletten für Sie gespeichert. Ich benutze das die ganze Zeit. Es ist einfach super nützlich und ich wollte das mit euch teilen. Lassen Sie uns also voran gehen und beginnen, einige unserer Farben in unser Projekt mit Sass-Variablen hinzuzufügen . Wenn dies ein Projekt wäre, in dem ich bei der Arbeit arbeitete, würde ich wahrscheinlich keine Dinge Himmel und Holz oder solche Dinge für meine Variablen benennen, ich würde sie wie Haupttext benennen, Dinge, die für andere Entwickler sinnvoll sind und verwenden Sie auch, aber wenn Sie CSS-Bilder erstellen, können Sie sie benennen, was auch immer für Sie sinnvoll ist. Also für uns haben wir unsere Himmelsfarbe. Wir werden hinzufügen, wir haben unsere Holzfarbe. Wir haben eine weiße Farbe. Wir haben hier ein schwarzes Loch. Wir haben die Akzentfarbe, wir haben die Stelle, und dann haben wir eine Grenze, und das werden unsere Farben sein, die wir für alle unsere Projekte verwenden werden . Sie werden sehen, dass wir sie später hinzufügen, und ich kann Ihnen zeigen, wie Sie das tun, wenn Sie mit einer der Farben beginnen möchten, können wir weiter gehen und es unserem Hintergrund hinzufügen, Hintergrundhimmel. Mach dir noch keine Sorgen um das Zeug. Der Rahmen oder der HTML hier, wir werden das in unserem nächsten Video mit Positionierung tun. Skizzieren Sie jetzt einfach Ihre Variablen und setzen Sie dann Ihren Hintergrund als Sky, und dann kommen wir zu unserem Positionierungsvideo als nächstes. 4. Framing es: Immer wenn ich ein neues CSS-Bild starte, ist das erste, was ich normalerweise mache, dass ich einen Rahmen für dieses Bild einrichte. Framing der Bildgebung gibt uns eine gute Gelegenheit, über die Positionierung in CSS zu gehen. Es gibt also sechs Werte für die Positionseigenschaft, sie sind statisch, relativ, absolut, fest, klebrig und erben. Dann werden wir diese Klasse über relative und absolute Positionierung gehen. Einige der kniffligen Dinge, die über die relative und absolute Positionierung zu wissen sind, sind, wenn wir ein untergeordnetes Element mit einer absoluten Position haben, wird das übergeordnete Element es ignorieren. Um das untergeordnete Element basierend auf dem übergeordneten Element absolut positioniert zu machen, müssen wir zuerst die übergeordnete Position auf relativ setzen. Ich zeige Ihnen hier ein Beispiel. In diesem Beispiel haben wir zwei übergeordnete und zwei untergeordnete Elemente. Einer der Eltern hat die Position relativ auf sie angewendet und der andere nicht. Wenn wir also die Positionierung von Top 0 zu diesem untergeordneten Element hinzufügen, es relativ zu seinem übergeordneten Element positioniert, wird es relativ zu seinem übergeordneten Element positioniert, während dieses von seinem übergeordneten Element und seiner Position relativ zum Hauptteil des Dokuments ignoriert wird. Wenn wir also diesen Code hier auskommentieren, werden wir sehen, dass das untergeordnete Element jetzt relativ zu seinem übergeordneten Zuhause positioniert ist. Für unser Projekt möchten wir also, dass der gesamte Inhalt relativ zu dem Frame positioniert wird , den wir hinzugefügt haben, und nicht zum Textkörper des Dokuments. Also fügen wir die Position relativ zum Klassenrahmen hinzu. Also lasst uns das jetzt hier in unserem Projekt machen. Einige der anderen Dinge hier sind nur Dinge, die ich normalerweise in jedem Projekt mache. Ich gebe unserem Rahmen eine Breite und eine Höhe. Ich sagte, Überlauf versteckt, wenn ich nichts außerhalb des Rahmens anzeigen möchte und ich mache Marge 0 auto, so dass es hier in der Mitte ist. Also für unser Projekt, die ersten paar Dinge, die wir tun werden, sind diese Kreise hier. In unserem Projekt genannt border_1, border_2, Grenze drei, und dann ein Loch. Lassen Sie uns fortfahren und fügen Sie die erste border_1 zu unserem Projekt hinzu. Nur eine kurze Notiz zum Codestift. Es gibt ein integriertes Plugin, das Sie auch auf eine Menge von Texteditoren namens emit bekommen können. Ich werde es während des ganzen Kurses benutzen. Es verbessert nur erheblich den HTML- und CSS-Workflow. Es macht es viel einfacher. Wenn Sie also sehen, wie ich ein paar Dinge mache, werde ich es am Anfang darauf hinweisen, aber wir werden es während des gesamten Kurses verwenden. Also mit ihm muss ich überhaupt tun, wenn ich ein anderes div will, ist, dass ich dot tun kann und dann kann ich den Klassennamen bereits boarder_1 setzen und dann kann ich „Tab“ drücken, und dann habe ich div Klasse border_1 bereits hier mit dem schließenden div-Tag. Also werden wir anfangen, den Code für unsere erste Grenze hinzuzufügen und ich beginne normalerweise mit einer Breite und einer Höhe, die Sie erst sehen werden, wenn wir ihm eine Rahmenfarbe geben. Also werden wir Grenze machen. Zwei Pixel Solid und dann unsere Farbrahmen, die wir früher ergriffen haben. Moment ist es ein Quadrat, und wenn wir es wie in unserem Beispiel rund machen wollen, geben wir ihm einen Grenzradius, 50 Prozent, und das wird es perfekt runden. Wenn Sie eine Breite und eine Höhe haben, die in der Größe gleich sind. Dann wollen wir Position absolut zu tun. Wir gehen etwa 30 Prozent nach links und reden über 21. Die CSS-Bilder, diese Positionierung von links und oben, es ist nur etwas, mit dem Sie spielen müssen. Wenn ich es über 50 Prozent verlasse, wäre es nur ein wenig zu weit vorbei und ich möchte, dass alles relativ zum Elternelement zentriert wird, was in diesem Fall der Rahmen ist. Also habe ich die 30 Prozent gemacht. Da wir Position relativ auf dem übergeordneten Element haben, bleibt dies 30 Prozent des nächsten Vorfahren übrig, was unser übergeordnetes Element hier wäre, der Frame. Es geht also um 30 Prozent von unserem Rahmen. Nur um das ein bisschen besser zu zeigen, habe ich einen Rahmen gesetzt, zwei Pixel fest, um unseren Rahmen wirklich schnell zu umgeben und ich kann tatsächlich sehen, dass 30 Prozent nicht wirklich zentriert sind. Es ist ein bisschen vorbei. Also, wenn wir vielleicht 25 Prozent gehen würden, denke ich, wir wären ein bisschen mehr und Zentren. Manchmal ist es also gut, Ihrem Bild einen kleinen Rahmen hinzuzufügen, damit Sie genau sehen können, was mit Ihrer Positionierung hier im Mittelpunkt steht. Also können wir weitermachen und das wieder abnehmen, und wir können daran arbeiten, unser nächstes Quartal hinzuzufügen. Also wieder, wir werden Punkt Reihenfolge zwei Hit „Tab“ tun, und wieder haben wir ein öffnendes und schließendes div mit der Klasse bereits. Diese border_2 wird auch einen Rahmen von zwei Pixeln haben, solid und dann die Rahmenfarbe, und es wird auch einen Rahmenradius von 50 Prozent haben. Anstatt dies zweimal in unserem Code zu tun, können wir unseren Code ein wenig trockener halten, indem .border_1 putting.border_1 dann ein Komma und dann.border_2 setzen und dann einfach unseren Code hier hinzufügen und ihn hier herausnehmen. Dadurch wird der Rahmen sowohl auf die border_1 als auch auf die border_2 angewendet. Also für unsere border_2 werden wir eine Breite haben wollen, die nur ein bisschen kleiner ist als unsere erste Grenze. Also werde ich mit 23rem und Höhe 23rem ausprobieren. Dann wollen wir ihm diese Farbe geben. Das ist unsere Akzentfarbe. Also machen wir Hintergrund-Akzent. Dann wollen wir, dass es nur ein bisschen vorbei ist. Also ging ich voran und machte Marge 0.3rem. Wieder, das spielte nur mit ihm herum und sah, was es innerhalb der border_1 zentrieren würde. Sie können sehen, dass ich ein wenig übersprungen bin, weil border_3 und das Ganze sehr ähnlich sind, was wir gerade mit border_1 und border_2 gemacht haben. Also wieder, wir wollten nur ein bisschen kleinere Breite und Höhe auf beiden haben und dann wollten wir den Rand haben, den ich damit ein wenig spielen musste. Dieser hatte 0.5rem und dieser hatte 0.2, und um unseren Code trocken zu halten, weil wir diesen Rahmen wiederholen müssten, zwei Pixel, feste Grenze und Grenzradius 50 Prozent vier verschiedene Male. Also fügen wir es einfach hier hinzu und setzen jeden Klassennamen hier, um darauf angewendet zu werden. Dann die nächsten zwei Videos werde ich Ihnen zeigen, wie Sie die Pseudo-Elemente vor und nach verwenden, und wie Clip-Pfad und ein wenig mehr über Border-Radius verwenden. Lasst uns anfangen. 5. Pseudo: Jetzt werden wir über Pseudo-Elemente sprechen, die, sobald Sie lernen, werden Sie feststellen, dass Sie tatsächlich die ganze Zeit verwenden können. Ich verwende Pseudo-Elemente so ziemlich jeden Tag, in jedem einzelnen Projekt, das ich verwende, sind sie mehrfach super-nützlich. Pseudo-Elemente vor und nach erstellen ein Pseudo-Element, das sich entweder vor dem Element oder nach dem Zielelement einfügt . Es ist nicht wirklich im DOM. Sie fügen dies nirgendwo in den HTML ein. Das ist alles nur im CSS und ich werde Ihnen zeigen, wie das gemacht wird. In unserem Beispiel haben wir eine Schaltfläche und in unserem HTML haben wir nur ein div, wir haben unsere Schaltfläche und wir haben die Worte, Klicken Sie auf mich. Aber wie Sie sehen werden, wenn wir unseren Over-Knopf haben, haben wir ein Einhorn-Emoji und wir haben einen Pfeil. Diese werden mit kurz nach und vor Pseudo-Elementen angewendet. Wie Sie in unserem Code sehen können, haben wir unseren Button sowohl mit dem Vorher als auch dem Nachher ausgerichtet. Um dies beim Schweben zu tun, ist es ein bisschen knifflig. Ich habe das falsch gemacht, als ich es zum ersten Mal nachschlagen musste. Du basierst es tatsächlich auf dem Hover des Elternteils. Also schweben würde vor dem Vorher hier kommen. Wenn wir dann einen Hover haben, bekommen wir jetzt das Emoji und den Pfeil. Das Emoji ist das Vorher, es ist vor dem Klick mich, und der Pfeil ist der nach dem Text kommt hier. In unserem nächsten Video werden wir das, was wir hier gerade gelernt haben, in unser Klassenprojekt anwenden . Lasst uns damit anfangen. Unser Projekt, wir werden Pseudo-Elemente an zwei Stellen verwenden. Wir werden es für diesen Brücken-Basis weichen Teil verwenden, der hier rauskommt. Dies ist unser Nachher und dann verwenden wir es auch auf unseren Heringen, und dann ist der kleine Punkt, der in unseren Heringen ist der Nachher. Gehen wir weiter und machen das in unserem Projekt. Sie können in unserem HTML sehen, ich habe ein div mit der Klassenbrücke Basis hinzugefügt, und dann habe ich hier einige CSS hinzugefügt. Wir haben Hintergrund und hören, dass wir Holz verwenden. Also hier ist wieder unsere SAS-Klasse oder SAS-Variablen, sorry. Dann haben wir eine Breite und eine Höhe. Das ist nur etwas, mit dem ich rumgespielt und erraten habe. Wir haben absolut positioniert, so dass wir es dort positionieren konnten, wo wir wollten und da es hier unten ist, seine Position relativ zum Rahmen, und dann haben wir oben 60 Prozent des Rahmens, es sind 27 Prozent des Rahmens übrig. Es hat einen Rand oben , um es ein wenig leichter zu machen und tatsächlich müssen die Box Schatten auskommentieren. Das ist etwas, auf das wir in einem anderen Video eingehen werden. Aber jetzt, wo wir diese Basis hier haben, können wir dann unsere hinzufügen, was ich als vorher gesetzt habe, nur um euch zu zeigen, dass wir absolut positionieren. In diesem Fall spielt es keine Rolle, ob es ein Vorher oder ein Nachher ist. Aber da wir später ein Nachher verwenden, ging ich voran und benutzte das vorher. Jedes Mal, wenn Sie die Pseudo-Elemente verwenden, müssen Sie einen Inhalt haben, und dies könnte Inhalte darin enthalten, wenn Sie es möchten. Aber da wir eigentlich nichts hinzufügen müssen, lassen wir es einfach leer. Aber das ist notwendig, dass wir es absolut positionieren und dies relativ zur Brückenbasis positioniert ist, und dann tun wir unten, negativ 48 Prozent, links 10 Prozent, wir machen eine Breite und eine Höhe und einen Hintergrund dunkles Holz. Gehen wir weiter und nehmen das raus, und es wird tatsächlich hier auftauchen. Sie können sehen, dass es unten auftaucht. Moment sieht es nicht wirklich so aus, wie wir es in unserem fertigen Produkt haben, weil wir noch nicht über Clip gegangen sind. Also, jetzt werde ich es einfach so lassen, das ist in Ordnung. Wir gehen zurück und wir werden es reparieren und es wird schöner aussehen, wenn wir über Clip gehen. Lassen Sie uns voran und fügen Sie die Stifte auch hinzu. Okay, ich ging voran und fügte die Pegs in unser HTML. Ich werde nicht hier sitzen und jeden ausprogrammieren, damit ihr es seht. Ich denke, ihr wisst zumindest, wie man HTML in CSS codiert. Also wollen wir zu dem kommen, was wir hier mit ihnen machen. Also für diesen Fall habe ich Peg gemacht und ich gab jeder eine andere Klasse, peg 1, peg 2, peg 3, peg 4, peg 5, peg 6 und ich werde Ihnen zeigen, warum in unserem CSS in nur einer Minute. Also für alle von ihnen überall, um unseren Code Trockner zu machen, gab ich ihnen den Klassenpeg weil sie alle einen Grenzradius von 50 Prozent haben werden, sie werden alle die gleiche Breite haben, die gleiche Höhe, die gleiche Hintergrund unser Hintergrund ist der variable Akzent, die Position absolut, und sie werden alle 50 Prozent von der Spitze dieser Basis hier sein. Wieder kommen wir in einem anderen in den Kastenschatten. Also für jetzt wird alles sehr flach aussehen. Wenn wir unser Nachher machen, ist das alles, was wir tun, den kleinen Punkt hinzuzufügen, den wir auf unserem Bild hatten. Das könnte jetzt seltsam aussehen, und es liegt daran, dass sie alle wirklich übereinander sind. Sie sind alle absolut positioniert. Sie sind alle an der gleichen Stelle. Deshalb habe ich die Extraklasse von Peg 1, Peg 2 usw. gemacht, weil wir jetzt einfach die linke Eigenschaft ausschreiben müssen , die wir hier wollen und wie weit wir wollen, dass es nach links geht. Lassen Sie uns das kommentieren und Sie können sehen, wovon ich rede. Jetzt sind sie alle verschieden voneinander positioniert. Sie sind alle nur ein wenig überlappt, und sie alle haben ihren kleinen Platz hier, was unser Nachher ist. So verwenden wir das Nachher in diesem Fall, wir mussten nicht hineingehen und ein paar weitere Divs schreiben, die am Ende kleine Spots wären , die wir absolut positioniert haben und dann auf die Spots setzen, wir konnten es tun , ohne ein anderes HTML-Element setzen zu müssen. Das ist wirklich genial, deshalb können Vorher und Nachher sehr nützlich sein. Im nächsten Video werde ich über Fußweg Ebene sprechen. Ich werde Ihnen ein Beispiel zeigen, wie Sie es tatsächlich in der Produktion verwenden könnten, und dann werden wir unsere kleine Basis hier ein wenig besser aussehen lassen . Also lasst uns dazu kommen. 6. Clip-Path und Randradius: Clip-Pfad ist eine interessante Eigenschaft, die ich habe, ist hier von Indian, weil sie einen guten Job machen, nur einige Demos hier, um Ihnen zu zeigen. Dies ist ein Beispiel dafür, wie ein Kreis aussehen würde. Sie können einen Clip-Pfadkreis tun, der eine Eigenschaft ist, die sie haben, Clip Pfad Ellipse und dann setzen Sie in einigen Punkten hier oder Sie können Polygon tun und wieder in einigen Punkten setzen , die wir in nur einer Sekunde gehen, was einige von diesen bedeuten. Wenn Sie dies überhaupt anpassen, können Sie sehen, dass die Form dieses Bildes möglicherweise länger war. Fünfzig Prozent, was Sie normalerweise denken würden, wenn Sie Grenzradius machen, desto tiefer Sinus. Wenn etwas die gleiche Breite und Höhe hat, wird ein Kreis zu machen. Aber wenn es nicht die gleiche Breite und Höhe ist, wird das keinen Kreis bilden, also hier waren es 40 Prozent. Das ist etwas, das du weitermachen kannst und mit dem du spielen kannst. Ich werde versuchen, den Link dazu in unseren Klassenressourcen zu entfernen. Die Syntax kann zunächst ein wenig schwer zu gewöhnen sein, aber Sie können entweder tun, wie wir in Indian gesehen haben, Sie können eine Grundform wie Kreis oder Ellipse setzen. Sie können Ellipsenquelle verwenden. Dies kann eine URL sein, wenn Sie bereits ein Bild haben, oder Sie können eine Geometriebox ausführen. Nun, wenn wir hier schauen, mache ich sie oft. Dies ist nur ein Polygon und dann haben Sie alle diese Zahlen. Was sind das für Zahlen? Es wird alle Bilder in der Form einer Raute hier abschneiden. Aber warum? Alles hängt von den Werten der so genannten Scheitelpunkte ab. Im folgenden Diagramm hier macht eine wirklich gute Arbeit, dies zu zeigen, so dass ist, warum ich ging auf diese Seite. Dies ist Vor-Ort-Punkt. Es wird die Einführung von CSS-Clip-Pfadeigenschaft genannt. Hier oben haben wir 50 Prozent, null Prozent unserer ersten beiden Punkte. Wir sind über 50 Prozent auf unserem x und wir sind null Prozent auf unserem y, das ganz oben ist. Wir gingen 100 Prozent auf unser Y, das Sie hier unten sehen, und 50 Prozent, das kommt vorbei. Das sind unsere Punkte hier. Wir sind 100 Prozent auf unserem x hier und nur 50 Prozent hier oben auf unserem y und wieder hier drüben sind wir bei 0 Prozent auf unserem x und 50 Prozent auf unserem y. Das ist etwas, mit dem Sie spielen können. Sie können versuchen, Ihre Zahlen herauszufinden, aber eine großartige Ressource, die viele Leute gerne verwenden, ich benutze es die ganze Zeit, macht es super einfach, es heißt clippy. Lassen Sie mich es Ihnen zeigen. Das ist clippy. Clippy können Sie eine Form auswählen, die Sie möchten. Wenn wir ein Trapez wollten und dann kannst du hierher kommen und es reparieren, wenn du ein paar wirklich seltsame Formen willst, komm runter, komm rüber, was immer du tun willst und dann kannst du den Code hier kopieren. Es hat schon alle Punkte für dich. Sie kopieren es und dann fügen Sie es in das, was Sie verwenden, was auch immer Sie klicken möchten. Es ist so einfach. Es ist wirklich schön zu benutzen. Sie können alle Arten von Formen machen. Viele Leute mögen diese Ressource verwenden, also werde ich sicherstellen, dass ich das in unsere Klassenressourcen für Sie einfüge. Häufiger verwendeter Fall für Clip-Pfad, den Sie im Web überall auf dem Platz jetzt sehen werden , ist dieser kleine Winkel, den Sie in einem Heldenbild aufstehen. Alles, was Sie tun müssen, ist, dass Sie Ihr Bild haben und dann innerhalb des gleichen Bereichs, in dem Sie Ihr Hintergrundbild haben, in diesem Fall ist es in meinem Header, würden Sie Ihren Clip-Pfad hinzufügen und dann würden Sie die Punkte ändern, um dem zu entsprechen. Wenn ich einige dieser Punkte ändere, können Sie sehen, dass sich der Clippfad drastisch ändern kann. Hier habe ich das 100 Prozent auf Null geändert. Sie können sehen, wie sehr sich das verändert hat. Dort könnten wir das vielleicht auf 50 Prozent ändern. Doch in allen Arten von verrückten Bildern, ist es wirklich einfach, mit in Ihrem Inspektor zu spielen oder wie ich auf der Website sagte, clippy. Lassen Sie uns voran gehen und fügen Sie diesem kleinen Clippfad zu unserem Projekt hier hinzu. Wir gehen runter in den Brückenstützpunkt und das Vorher. Dann habe ich hier ein Webkit, weil der Clippfad eigentlich nicht sehr unterstützt wird. Dennoch werden SVG-Clip-Pfade viel mehr unterstützt. Wenn ich Produktionsmaterial verwende, verwende ich tatsächlich oft SVG-Clip-Pfade. Aber um diese Bilder so zu machen, wie die meisten Leute CSS-Bilder auf CodePen erstellen, werden Sie sie mit Clippfad wie folgt sehen. Ich möchte schnell über eine andere Möglichkeit sprechen, Formen zu erstellen , und das ist mit Randradius oder Rahmen. In vielen meiner Bilder verwende ich nicht unbedingt immer clippy. Ich glaube, ich habe hier einen Clippfad benutzt. Ich benutze tatsächlich oft einen Rahmen, um all diese Formen zu erstellen. Wenn wir uns hier ansehen, sind das alles nur quadratische Divs, für die ich einen Grenzradius verwendet habe. Wir können den Finger groß rollen lassen, ihn klein machen. Sie können die Formen in Ihren Bildern drastisch ändern , indem Sie nur einen Rahmenradius oder einen Rahmen verwenden. Für ein gutes Beispiel für einige der Formen, die Sie einfach mit einem Rahmen erstellen können, können Sie CSS TRICKS überprüfen. Sie haben eine Form von CSS und viele dieser Formen erstellt. Dies ist ein Umrandungsradius. Das sind Grenzen. Alle diese Formen werden mit nur unterschiedlichen Rändern erstellt, wo es nur Viertel auf der einen Seite zeigt, aber Sie haben eine ganze Menge von Pixeln oder ein paar Seiten der ganzen Menge von Pixeln und nicht auf anderen Seiten angezeigt, und das ist, wie erstellen Sie diese Dreiecke. Sie sehen eine Menge online, die unter wie Menüs oder verschiedene Flaggen gehen. Sie können alle Arten von Formen mit nur einem Rahmen- oder Rahmenradius erstellen. Es ist ein bisschen langweilig. Viele Leute möchten diese Formen nicht mit einem Rahmenradius oder einem Rahmen erstellen , so dass viele Leute entweder SVG-Clippfad oder Clippy verwenden werden. Im nächsten Video werde ich mit dir über all die Dinge sprechen , die du mit Box-Shadow machen kannst. Es gibt eine Menge Sachen, die man mit Kastenschatten machen kann. Ich freue mich, Ihnen einige Beispiele von Pixeln zu zeigen, die ich mit Kastenschatten erstellt habe. Einige der coolen Effekte, die Sie auf Dinge wie Schaltflächen erstellen können und wie wir ein wenig Tiefe zu unserem Projekt hinzufügen , so dass es nicht so flach ist, indem Sie Box-Shadow verwenden, also lasst uns jetzt dazu kommen. 7. Tiefe mit Box-Shadow hinzufügen: In diesem Video werden wir über Box-Shadow sprechen. Wenn Sie über Box-Shadow nachdenken, denken Sie vielleicht nur daran, ein wenig Schatten unter etwas hinzuzufügen , um es ein wenig Pop zu machen. Es fügt nur ein wenig Tiefe hinzu. Aber es gibt tatsächlich eine Menge Sachen, die man mit Box-Shadow machen kann, das ist wirklich cool. Schauen wir uns Box-Shadow für eine Sekunde an. Mehr gibt es Box-Schatten. In Box-Shadow haben Sie einen horizontalen Versatz, einen vertikalen Versatz, einen Weichzeichnungsradius, und dann haben Sie einen optionalen Streuradius und eine Farbe. Wenn Sie ändern möchten, ist die Farbvorgabe schwarz. Schauen wir uns ein Beispiel wirklich schnell an, das zeigt das wirklich gut. Dies ist nur ein Online-Box-Schatten-Generator. Sie können dies verwenden, um Ihre Box-Schatten zu generieren, wenn Sie hier nicht alle verschiedenen Eigenschaften herausfinden müssen. Nur um Ihnen ein Beispiel zu zeigen, geht unsere horizontale Länge entlang der x-Achse hier, unsere vertikale Länge verläuft entlang der y-Achse. Unschärfe ist, wie verschwommen Sie es wollen. Ob Sie möchten, dass es völlig knackig ist oder Sie möchten, dass es tatsächlich ein bisschen mehr wie ein Schatten aussieht, und dann ausgebreitet, um es auszubreiten. Sie können Ihre Farbe ändern. Es gibt alles, was man mit Box-Shadow machen kann, nur um etwas hinter sich zu haben und ihm ein wenig mehr Tiefe zu geben. Aber schauen wir uns einige andere Möglichkeiten an, wie Sie box-shadow verwenden können. Dies sind einige einfache Hover-Effekte, die Sie mit box-shadow tun können. Sie werden diese online überall sehen. Das hier wird von Giana gemacht. Ich glaube, Sie sehen ihren Namen auf CodePen. Wenn wir uns das ansehen, können Sie sehen, dass es alles macht. Diejenigen, die kommen, diese animieren einen eingelassenen Box-Schatten, und diejenigen, die ausgehen, sind der normale Box-Schatten. Eine weitere coole Sache, die Sie mit Box-shadow machen können, die mit unseren CSS-Bildern hier zusammenhängt, ist, dass Sie Pixelkunst mit Box-shadow erstellen können. Die Prämisse hier ist, dass Sie Pixelbilder innerhalb eines einzelnen Elements zeichnen können , indem Sie einen großen komplizierten Box-Shadow verwenden. Wenn Sie in diesem einfachen Beispiel hier sehen, haben Sie drei kleine Quadrate. Denn wenn Sie einen vertikalen und horizontalen Versatz für den Box-Schatten, aber keine Unschärfe deklarieren , erhalten Sie diese wirklich knackig aussehenden Quadrate, diese schwarzen, den ursprünglichen Kastenschatten. Dann kommen diese von links und rechts ab. Sie können eine ganze Zeichnung wie diese hier mit dem Box-Schatten so machen. Sie können sogar Box-Shadow animieren. Schau, wie cool diese Fledermaus ist. können Sie den großen komplizierten Kastenschatten sehen. Sie haben es in einer Animation, die wir übergehen werden, Keyframe-Animationen, ein wenig später. Dies ist eine schnelle kleine Demo des Unterschieds zwischen regulärem Box-Shadow und eingesetztem Box-Shadow. Ihr regelmäßiger Box-Shadow wird aus dem Element herauskommen, was auch immer Ihr Element ist und der Einsatz wird hineingehen. Im nächsten Video werden wir weitermachen und beginnen, einige der Box-Schatten auf unser Projekt anzuwenden , so dass Sie sehen können, wie es die verschiedenen Elemente erscheinen lässt. Es gibt ihnen viel mehr Tiefe. Im Moment ist unser Bild sehr flach. Wenn wir weitermachen und das Projekt beenden, werden wir weiterhin box-shadow zu unseren verschiedenen Elementen hinzufügen, die wir hinzufügen. Lasst uns dran kommen. Jetzt gehen wir durch und wir werden ein wenig Kastenschatten zu einigen Sachen hinzufügen , die wir hier bereits haben. Wir haben unsere Brückenbasis, und wenn wir ein wenig Kastenschatten hinzufügen, können Sie sehen, dass es ein wenig auftaucht. Es ist nicht so flach. Es sieht tatsächlich so aus, als würde es ein wenig von der Seite fallen, was cool ist. Es sieht so aus, als würde die Brücke von unserer Gitarre herauskommen. Ich möchte Ihnen hier im Inspektor zeigen, wie etwas davon aussehen könnte, wenn ich es etwas ändere. Im Moment habe ich es als ein Pixel, ein Pixel und drei Pixel. Sagen wir, wir haben fünf Pixel das wird viel mehr nach links kommen. Anstatt zentriert zu sein, wie ich es vorher hatte, wo es ein wenig herauskommt, so dass es so aussieht, als ob das Licht von einer Seite kommt , weil es nach links und nicht nach rechts ist, aber es sieht hier nicht so drastisch aus. Es sieht so aus, als ob das Licht ein wenig von der Seite und unten kommt, was wir in unserem Bild wollen. Das hier ist unsere Unschärfe, damit wir es wirklich verschwommen machen können, du könntest fünf, sieben acht machen. Du könntest damit weitermachen und das macht es sogar noch mehr Pop. Aber ich mag es um drei. Ich finde, es sieht gut aus. Ich finde, es sieht gut aus. Das liegt an dir. Sie können sich immer ändern, Sie können damit spielen. Ihr könnt diese Bilder machen, eure eigenen. Jetzt machen wir das gleiche mit den Nachher und mit unseren Stiften, so dass sie aussehen, als würden sie ein wenig auftauchen. Setzen Sie sich in unserem Code, es tut mir leid, das war unser vorher. Wir können jetzt abheben und unseren Box-Schatten hinzufügen. Warten Sie eine Sekunde, bis es geladen ist. Jetzt wirst du sehen, dass es so aussieht, als ob es ein bisschen nach unten lehnt , wie es eine Brücke auf einer Gitarre wäre. Wenn wir es dann zu unseren Heringen hinzufügen, wird es dazu bringen, dass sie auch ein wenig auftauchen und ihnen ein wenig Tiefe geben. Du kannst mit diesen herumspielen. Vielleicht sieht es ein bisschen anders aus. Vielleicht finden Sie hier eine andere Farbe, vielleicht eher braun statt schwarz. Das ist ein bisschen braun. Es ist nur ein dunkles Braun. Es ist die gleiche Farbe wie die Stelle. Ich werde dir eine Sekunde geben, um dir den Code anzusehen. Dann werden wir es an einem weiteren Ort hinzufügen und wir werden dieses Mal tatsächlich inset tun. Hier ist unser Loch, wir werden es hier hinzufügen. Dann nehmen Sie eine Sekunde, damit es geladen werden kann. Jetzt können Sie wegen des Einsatzes sehen, es sieht so aus, als würde das jetzt nach unten gehen. Es sieht eher wie ein tatsächliches Loch aus, anstatt nur ein schwarzer Fleck, der sich in der Mitte der Seite befindet. Das ist der ganze Box-Schatten, den wir jetzt hinzufügen werden. Wir werden noch ein paar weitere und unser Projekt hinzufügen, nachdem wir einige weitere Elemente hinzugefügt haben. 8. Transformationen und Übergänge: In diesem Video werden wir über Transformationen und Übergänge sprechen. Etwas später werden wir über Animationen sprechen, aber um dorthin zu gelangen, werden wir zuerst über Übergänge und Transformationen sprechen. Wenn wir über Animationen sprechen, werde ich mit Ihnen darüber sprechen, wie Transformationen und Deckkraft die leistungsstärksten Möglichkeiten sind, zu animieren. Das mag zunächst ein wenig einschränkend erscheinen, aber sobald Sie alle Dinge verstehen, die Sie mit Transformationen tun können, werden Sie sehen, dass es wirklich nicht einschränkend ist. Lasst uns anfangen, diese ein bisschen zu lernen. Außerdem möchte ich eine kurze Notiz machen und nur sagen, dass ich einige dieser Beispiele im gesamten Kurs erstellt habe , den ich Ihnen allen gezeigt habe, und diese werden in einer Sammlung sein, die ich in unseren Kursressourcen teilen werde , damit Sie können zurückgehen und Sie können mit ihnen spielen und Dinge ändern und ein wenig mehr auf diese Weise lernen. Schauen wir uns die erste Transformation an, die wir hier haben. Wir haben Transformationsskala, und dies wird sowohl auf der x- als auch auf der y-Achse skalieren, wenn wir es auf diese Weise haben. Es skaliert das zweifache seiner Größe. Lassen Sie uns den Mauszeiger hier rüber und sehen, wie groß es ist. Hier geht es und skaliert sowohl das x als auch das y. Wenn wir wollten, dass es nur das x geht, könnten wir es so schreiben, scalex“, und es wird hier zweimal seine Größe durch die x-Achse skalieren. Sie können dasselbe für das y tun, wenn Sie Skalierung verwenden, und dies wird es tatsächlich nach unten skalieren Wenn Sie also über eins gehen, skalieren Sie die Größe nach oben . Dies wird die Hälfte seiner Größe sein, hier 0,5 zu tun. Sie können sehen, dass es jetzt schrumpft. Wenn ich aufgestiegen wäre, wäre es nach oben gewachsen. Der nächste ist Skew. Sie können entweder schief oder schief machen, und Sie verwenden Grade dafür. Auf diese Weise wirst du Skewx 40 Grad machen. Sie können negative oder positive Zahlen verwenden. Wir werden sehen, wie es mit Schräg hier ist, und das neigt negativ 25 Grad auf der Y-Achse. Unsere nächste Transformation ist Drehen. Das dreht sich um 30 Grad. Du könntest negative 30 Grad machen, wenn du willst. Sie können nur auf der Y-Achse drehen, wodurch sie gedreht wird. Als ob Sie Karten jetzt online sehen. Die Leute haben unterschiedliche Karten Verwenden Sie also ein Rückblatt und leisten Sie die Sichtbarkeit des Gesichts, und Sie können die Rückseite einer Karte als das sehen , was sie genannt werden, wenn Sie sie im Internet verwenden. Wir können das gleiche mit dem X machen, und ich werde einfach in die andere Richtung drehen, also rotatex, jetzt dreht es nach oben und unten. Dann gibt es Transformation: rotatez. Das dreht sich um 90 Grad. Unsere letzte Transformation ist übersetzen. Dies wird sich sowohl auf der X- als auch auf der Y-Achse bewegen. Sie werden sehen, dass es über 50 gehen, während auch 20 Pixel nach unten gehen. Wenn du nur rüber gehen wolltest, könntest du einfach Transformx machen. Das geht in die negative Richtung. Sie könnten das Positive tun, wenn Sie wollen, dass ich nur das Y zu tun. Jetzt würde es nach unten gehen, und wenn wir eine negative hier setzen, würde es nach oben gehen. Sie können sehen, obwohl es nur vier Dinge, die Sie transformieren können, könnten Sie tatsächlich tun viel mit jedem. Mit den verschiedenen x und das y und den verschiedenen Möglichkeiten, die Sie auf sie transformieren können, schafft es einfach eine ganze Menge Gelegenheit, verschiedene Transformationen auszuprobieren. Wenn wir hier wieder in unserem Code kommen, werden Sie sehen, dass ich die ganze Zeit über einen Übergang hatte. Ich hatte Übergang alle, und wenn ich keinen Übergang auf sie hatte, mal sehen, was der Effekt ist. Sie können jetzt sehen, wenn ich schwebe, dass alles sofort passiert. Es gibt keine Erleichterung los, die nur eine bessere Benutzererfahrung bietet , wenn Sie ein wenig Zeit dazwischen haben. Das ist irrsinnig. Dafür verwenden wir Übergänge. hier zu CSS-Tricks kommen, können wir uns ansehen, was jede dieser Eigenschaften sind. Sie können sehen, dass ich die Kurzschrifteneigenschaft für den Übergang geschrieben habe. Sie können es tatsächlich schreiben Übergangseigenschaft und dann geben Sie ihm seinen Wert, Übergangsdauer, geben Sie ihm seinen Wert, aber die meiste Zeit, werden Sie sehen, es ist Kurzschrift wie folgt. Lassen Sie uns darüber gehen, was diese Werte sind. Transition Eigenschaft ist alles, was Sie versuchen, zu übergehen. Wenn Sie versuchen, Ihre Hintergrundfarbe zu übergehen, dann würden Sie das hier setzen. Ich hatte Übergang alles, was alles übergehen würde , was ich den Hover-Effekt auf gesetzt hatte, während wir über schweben. Dann haben wir Übergangsdauer. Wie lange Sie wollen, dass es dauert, und hier sind es 0,5 Sekunden. Sie können auch fünf Millisekunden setzen, wenn Sie verwenden möchten, oder 500 Millisekunden, wenn Sie Millisekunden verwenden möchten, dann haben wir Übergangs-Timing-Funktion, und dies erleichtert. Sie können die eingebauten Beschleunigungsfunktionen verwenden, es gibt Leichtigkeit, lineare Leichtigkeit, Leichtigkeit und Leichtigkeit in out, glaube ich, aber Sie können auch Ihre eigenen mit etwas erstellen, die ein cubic-bezier genannt wird. Schauen wir uns die schnell an. Dies ist nur ein Online-Cubic-Bezier Schöpfer. Sie sind überall. Sie können nur cubic-bezier googeln, und Sie werden wahrscheinlich ein Pop-up sehen. Ich werde versuchen, daran zu denken, eine in unsere Klassenressourcen zu stecken, damit Sie auch dort spielen können. In unserem Projekt hatten wir Leichtigkeit, und wenn Sie diesem hier unten folgen, werden Sie sehen, was Leichtigkeit in tut, es verlangsamt sich einfach am Anfang und geht dann schnell. Wenn Sie Ihre eigene Leichtigkeit schaffen wollten, können Sie diese kleinen Griffe bewegen und dann den rosa hier oben beobachten. Sie werden sehen, dass es mehr in der Mitte verlangsamt wird, was passiert, wenn Sie es so haben. Wenn wir es auf den ganzen Weg gebracht haben, werden Sie sehen, dass es wirklich schnell geht. Wenn wir es runterbringen, ändert es es einfach wieder. Du kannst damit herumspielen. Sie können Leichtigkeit tun, Sie können Leichtigkeit in tun, Sie können sehen, wie es aussieht, wenn Sie eine lineare oder Leichtigkeit tun. Du würdest dann einfach diesen Cubic-Bezier kopieren, diese ganze Sache hier, und dann würdest du ihn hineinlegen, also lasst uns kopieren. Ich könnte es anstelle der Leichtigkeit hineinlegen, ich würde es hier setzen. Jetzt haben wir unsere individuelle Leichtigkeit. Ich weiß, das war ein bisschen länger Video, aber ich wollte sicherstellen, dass ich wirklich Transformationen und Übergänge mit euch durchgegangen bin, weil wir sie jetzt auf unser Projekt anwenden und dann ein bisschen mehr später auch, wenn wir einige unserer Animationen machen. Lasst uns das jetzt mit unserem Projekt machen. Leute, also gebt mir ein bisschen in diesem Video mit, denn wir werden eine Menge Code hinzufügen. Ich habe bereits eine Menge davon in meinen hinzugefügt, so dass wir nicht viel Zeit mit mir nehmen, nur den Code einzugeben, aber ich werde es mit dir übergehen, und ich will nicht, dass du dir darüber Sorgen machst, weil ich jedes von diesen in einem Beispiel, das in unserer Klasse Ressourcen sein wird. Es wird eine Sammlung geben, die jedes Video haben wird und wo der Code beginnt und wo der Code endet. Dann wird es ein abschließendes Projekt geben, das Sie durchlaufen können und sicherstellen, dass Ihr ganzer Code in Ordnung ist. Aber lassen Sie uns jetzt über Transformieren und Übersetzen sprechen. In meinem HTML, den ganzen Weg nach meinem letzten Peg, können Sie die Zeichenfolge für jetzt ignorieren, aber etwas, das ich in ein paar Minuten hinzufügen werde. Nach meinem letzten Peg, meinem Peg 6, habe ich diese div-Klassenbrücke hinzugefügt. Die Brücke ist genau hier. Es ist, was deine Saiten in einer Gitarre rüber gehen würden. Wenn man sich normalerweise ein Instrument anschaut, sind diese in der Regel leicht in eine Richtung geneigt. So sind sie nicht ganz gerade. Das werden wir hier mit unserer Transformation machen, und wir werden diese Brücke nur ein wenig übersetzen. Gehen Sie in Ihrem CSS vor und fügen Sie Ihre Bridge-Klasse hinzu. Wir machen den Hintergrund und es ist die Farbe, die Akzent ist. Ich habe es 13,9 Rems gemacht. Ich habe die Höhe, 0,6 Rems, Position, absolut. Ich wollte das absolute Verhältnis zur Basis hier. Dann haben wir die besten 25 Prozent erreicht, es geht um 25 Prozent zurück und es sind 22 Prozent übrig. Dann gab ich ihm ein wenig einen Randradius von 10 Pixeln. Jetzt hier werden wir in unserer Transformation hinzufügen. Ich habe Anbieterpräfixe hinzugefügt, da Transformation nicht unbedingt in allen Browsern unterstützt wird. Für eine gute Maßnahme setzen wir die -webkit- in -ms- Anbieter-Präfixe ein. Wenn wir runtergehen und schauen, werden wir sehen, dass es sehr leicht aussieht. Es ist nur 0,5 Grad. Es ist nicht viel von einer Rotation hier. Ich weiß jetzt, dass ich immer wieder übersetzen gesagt habe. Wir übersetzen nicht, wir drehen es tatsächlich. Wir haben uns um 0,5 Grad gedreht. Wir könnten drastischere Rotation machen. Du könntest zwei Grad negativ machen. Du wirst sehen, dass das noch ein bisschen mehr ist. Ich dachte nur nicht, dass das so nett aussah. Nochmals persönliche Vorliebe. Wenn Sie wollen, dass es mehr oben ist, Sie wollen, dass es mehr schräg ist, können Sie das tun. Ich werde es hier 2,5 Grad zurücklegen. Der nächste Code, den wir hinzufügen werden, sind unsere Strings, die in unserem endgültigen Projekt sind. Wenn wir sie gerade in unserem Projekt machen, werden Sie sie nicht wirklich sehen, weil wir sie Top Null Prozent haben werden. Das ist so, dass wir, wenn wir die Animation tatsächlich machen, sie von unten wachsen lassen können, den ganzen Weg von unten, bis ein ganzes Bündel. Dort erhalten Sie die Animation der Strings, die in animiert werden. Wir machen das in ein bisschen. Aber da wir diesen Code einfügen, sehen Sie möglicherweise die tatsächlichen Strings nicht und das ist in Ordnung. Wir werden sie sehen, wenn wir die Animation hinzufügen. Wenn wir zurück zu unserem HTML gehen hier, in jedem peg div, bitte div class string. Dann können Sie entweder die Verzögerung jetzt hinzufügen oder Sie können das ignorieren. Das ist, was wir verwenden, wenn wir die Animationen machen. Wenn Sie es jetzt hinzufügen möchten, können Sie oder Sie können warten, bis wir die Animationen in ein wenig. Aber wir werden sechs Saiten haben. Sie alle brauchen nur den gleichen Klassennamen. Wir müssen jetzt keine Saite 1,2 oder so etwas machen. Einfach unter jedem Stift hier einreihen. Wenn Sie String in Ihrem CSS dotieren möchten, können Sie diese Verzögerung vorerst ignorieren. Wir werden es wieder Hintergrundakzent nennen. Wir geben ihm eine sehr kleine Breite, also Breite 0,1 rem, es wird Top Null sein. Es ist der ganze Weg hier runter. Es wird Position absolut sein, links 40 Prozent, und das ist alles relativ zu unseren Heringen, weil es in unseren Stiften ist. Es sind 40 Prozent im Inneren unseres Pegels. Dann erkannte ich, als ich das gefilmt habe, dass ich Z-Index 3 habe. Lassen Sie mich Ihnen zeigen, warum ich das getan habe. Hier in unserem abgeschlossenen Projekt sieht man, dass die Saiten so aussehen, als wären sie oben auf der Brücke, als wären sie auf einer Gitarre. Wenn ich den Z-Index 3 abziehen würde, würden sie so unter die Brücke gehen, was nicht der Effekt ist, den ich wollte. Aber dann erkannte ich, dass ich tatsächlich einfach die Positionierung im HTML verwenden könnte, um dies zu tun. Wir brauchen nicht wirklich den Z-Index 3. Wenn wir das nicht hinzufügen möchten, müssen Sie das hinzufügen, wenn wir zu unserem CSS zurückkehren. Aber in deinem HTML, wenn du hierher gehst und die Brücke unter dem letzten Stift nimmst und es dann aufbringe und unter die Brückenbasis legst, ist es jetzt unter dem Z-Index der Stifte sowieso, so dass wir nicht müssen einen Z-Index einfügen. Wenn etwas zuerst kommt, wird die Brücke, was auch immer als nächstes in Ihrem HTML im Z-Index stehen, so dass Sie nicht Z-Index 3 für was immer Sie mit dem Index tun, solange Sie die Brücke vor die Heringe. Wir gehen weiter und nehmen das hier aus unserer Schnur. Unsere Schnur wird einen Kastenschatten haben. Sie werden es jetzt nicht sehen, also müssen wir das jetzt nicht hinzufügen. Wir wollen ein bisschen einen Box-Schatten auf unsere Brücke legen, damit sie nicht so flach aussieht. Wenn Sie zurück zu der Brücke gehen, die wir vor ein wenig hinzugefügt haben, und dann habe ich Box-Schatten ein Pixel, drei Pixel, fünf Pixel, und dann wählte ich wieder bräunliche Farbe. Das lässt es einfach so aussehen, als würde die Brücke tatsächlich von der Brückenbasis hier kommen und nicht so flach aussehen. Dann, wenn unsere Saiten darüber gehen und sie den Kastenschatten auf ihnen haben, werden sie auch wieder so aussehen, als würden sie nur ein wenig davon abspringen. Es sieht realistischer aus, sieht eher wie eine Gitarre aus. Ich weiß, dass wir in diesem speziellen Video nicht zu viele Transformationen durchlaufen haben, aber wir werden mehr in unseren Animationen für unser Flugzeug in nur ein wenig anwenden. Im nächsten Video gehen wir über einige SVGs, und dann machen wir CSS-Animationen. 9. SVG verwenden: Lassen Sie uns über SVG sprechen. SVGs sind skalierbare Vektorgrafiken. Sie sind eine XML-basierte Markup-Sprache, und die netten Dinge über SVG sind, dass sie gesucht, indiziert, skriptgesteuert und komprimiert werden können , und Sie können sie in einem Texteditor oder einer beliebigen Zeichnungssoftware erstellen . Ich mache meine oft in Sketch oder Affinity Designer. Andere Benutzer tun es in Adobe, dann können Sie sie exportieren. Ich optimiere meine normalerweise mit einem Programm namens SVGOMG und lege sie dann in meine Dateien. Es gibt noch andere Gründe, warum Sie SVG verwenden könnten. SVG sind cool, denn egal wie groß Sie Ihr Bild machen oder wie klein Sie Ihren SVG machen, Sie werden immer schön aussehen. Sie sehen immer knackig aus. Sie sehen nie unscharf aus, wie Bilder unterschiedlichen Bildschirmgrößen und da es sich um ein XML-basiertes Bild handelt, können Sie fast jedes Stück eines SVG animieren , das Sie finden und aus dem DOM herausgreifen können. Hier animiere ich mit einer Bibliothek namens GSAP. Unser Projekt wird CSS-Animationen mit dem SVG machen , aber ich möchte Ihnen nur einige der Dinge zeigen, die Sie mit SVG tun können. Hier animiere ich all diese verschiedenen Einzelstücke. Sie ändern ihre Farben und dann übersetzen sie sie. Ein weiterer Grund, warum ich ein SVG verwenden könnte, sagen wir wie in meinen CSS-Bildern, ist, weil ich vielleicht einige coole Formen erstellen möchte, die schwer mit CSS zu tun sind. Ich kann sie vielleicht mit CSS machen, aber sie werden viel Zeit in Anspruch nehmen. Denk daran, dass ich eine Mutter von drei Kleinen bin, also habe ich nicht viel Zeit. Wenn ich etwas Cooles erstellen möchte, mache ich es manchmal mit in SVG. Alles andere hier ist CSS. Es ist alles mit CSS gemacht, aber das hier, besonders mit diesen Winkeln, wird dies mit einem SVG gemacht. Wenn Sie zusammen mit dem Projekt verfolgt haben und Sie dies aus unseren Kursressourcen holen. Wir haben eine SVG, die auskommentiert wird. Jetzt können wir diese SVG verwenden. Ich habe es in eine Klasse namens Jet eingewickelt. Lassen Sie uns fortfahren und beginnen, dies auf unser Projekt anzuwenden. Kurz vor unserem letzten schließenden div hier werden wir anfangen, unsere Jets hinzuzufügen. Es wird einen Jet geben, Jet 1, Jet, Jet 2, wie wir es mit unseren Pegs haben. Wir werden die SVG sechsmal wiederholen. Lassen Sie mich Ihnen hier zeigen, im Moment habe ich das einfach da drin. Also haben wir Jet, Jet 1, Jet, Jet zwei, Jet, Jet drei und so weiter bis Jet sechs. Fahren Sie fort und wiederholen Sie Ihre SVGs innerhalb einer Div-Klasse sechs Mal und dann können Sie den Jet, Jet 1, Jet 2, Jet 3, Jet 4, Jet 5 und Jet 6 hinzufügen Jet 1, Jet 2, Jet 3, Jet 4, . Das erste, was wir tun werden, ist, nur die.jet-Klasse zu verwenden , die auf allen von ihnen ist und wir werden alles absolut positionieren. Das Schöne an der Aufnahme ist, dass ich Dinge finden kann , die ich beim ersten Mal falsch gemacht habe, und ich kann sie herausnehmen. Ich erkannte es gerade wieder, und ich brauche den Z-Index diesmal nicht. Sobald ich den Z-Index von dieser Zeichenfolge entfernt habe, brauchte ich ihn nicht mehr, um die SVG auf die Zeichenfolge zu setzen. können wir rausnehmen. Das brauchen wir eigentlich nicht. Dann werde ich noch einen kleinen Code Dump hier machen, aber wir werden es durchgehen. Jetzt haben wir jedes unserer Jets, Jet 1, Jet 2 und so weiter, und dann positionieren wir sie alle links. Verlassen 36,5 Prozent. Ich weiß, dass das wirklich präzise wird. Das ist eine Menge von mir, nur in die „Dev Tools“ zu gehen und es dann zu inspizieren und zu bewegen, bis ich das Gefühl habe, dass es mit den Stiften aufgereiht ist, und die Saite und die Saite kommen mit Animation. Das war alles, was wir jetzt damit zu tun hatten. In unserem nächsten Video werden wir tatsächlich anfangen zu animieren. Wir animieren unsere Zeichenfolge und animieren unsere SVGs. Dann werden wir es einpacken und so sind wir fast fertig mit dem Projekt. Fangen wir mit dem nächsten an. 10. CSS-Animationen: In Ordnung. Jetzt werden wir über CSS-Animationen sprechen. CSS-Animationen machen eine Menge Spaß. Kommen wir hierher. Es gibt viele Eigenschaften in der Animation, aber sie sind den Übergängen sehr ähnlich, die wir zuvor übergegangen sind. Wir hätten einen Namen, das heißt, dieser nennt sich Stretch. Wir hätten eine Animationsdauer wie in unseren Übergängen, also macht dieser es über eine Sekunde. Timing-Funktion, das ist einfach. Wir könnten den Cubic-Bezier machen, den wir vorher übergegangen sind. Wir haben eine Verzögerung, also wenn ich die Animation verzögern wollte, könnte ich hier eine Zahl größer als 0 setzen. Wir haben eine Animationsrichtung. Das hier wechselt jetzt ab, es geht hin und her. Ich könnte es einfach vorwärts bewegen, oder ich könnte es einfach rückwärts bewegen. Wir haben unendlich. Das geht immer wieder, das ist unsere Iterationszahl. Ich könnte einfach ein oder zwei setzen und die Animation würde nur passieren, egal wie die Zahl ich hier gesetzt habe, 20, 30, was immer Sie tun wollen. Unser Animationsfilm-Modus ist, wenn Sie Ihre Animation nicht ausgeführt haben. Hier, wenn ich 2 setze und es 1, 2 ging, und dann setze ich vorwärts, es fängt wieder an, wo es begonnen hat. Dann rennen wir. Im Moment läuft die Animation. Es lief, als wir die Seite geladen haben. Wenn wir Pause setzen, würde es die Animation nicht ausführen, wenn wir die Seite geladen haben oder wenn Sie manchmal nur Pause setzen möchten, weil Sie versuchen, Ihre Animation ein wenig zu debuggen, so dass Sie Pause setzen können, so dass die Animation geht nicht weiter und Sie können die Dinge ändern. Dann ist dies die lange Hand für die Animation. Wenn wir die Kurzschrift für die Animation machen wollten, genau wie unser Übergang, wie ist die Abkürzung? Du kannst es so machen. Es wäre Animation, Doppelpunkt, und dann hätten wir unseren Animationsnamen, unsere Dauer, unsere Lockerungsfunktion, unsere Verzögerung, unsere Richtung, unsere Zählung, ob es einen Füllmodus hat oder nicht, und dann würden wir es laufen lassen. das nur ausschreiben, wird Ihnen keine Animation geben. Sie müssen Ihren Schlüsselrahmen hier haben. Fügen Sie Schlüsselbilder hinzu und dann haben wir unseren Animationsnamen. Das ist es, was uns sagt, was die Animation sein wird. Hier haben wir es Transformation, übersetzen X, 50 Pixel, den Grenzradius, und dann haben wir es tun die Farbe. Wieder übersetzen wir das Y und dann die Farbe wieder. Sie können zu und von tun. können Eigenschaften sein, die Sie hier haben, und so müssten Sie, und dann würden Sie eine Klammer haben und dann sagen, wohin Sie es wollen. das sage, merke ich, dass das falsch ist würden Sie tatsächlich von und dann zu tun. Sie wollen anfangen, wo Sie anfangen und dann wohin Sie gehen. Oder Sie können Prozentsätze machen, wie hier, wir haben 0 Prozent, 50 Prozent, 100 Prozent. Sie können 0, 10, 20 tun, Sie können den ganzen Weg nach oben gehen, wenn Sie wollen, können Sie 12 Prozent tun. Sie müssen nicht 0, 50 und 100 tun. Dies ist nur ein Beispiel hier. Dann, zwischen diesen Klammern, sagen Sie, was Sie wollen, um die Überstunden hier ändern. Über 0 bis 100 Prozent der einen Sekunde wollen wir diese Dinge ändern. Jetzt werde ich Ihnen einige Beispiele zeigen, wo Sie einige CSS-Animationen sehen könnten. Ein gutes Beispiel ist mit einem Symbol. Dies ist unser Menü-Symbol und es animiert die Transformation, die geschieht. Dann haben wir hier einige Loader, die auch mit CSS animiert werden. Diese werden alle mit Deckkraft oder Transformation animiert. Sie können sehen, dass Sie wirklich nicht begrenzt sind, wenn das sind, was Sie verwenden. Sie können Dinge wie Hintergrund tun, wie wir in unserem ersten Beispiel hatten, aber diese sind nicht gefragt Leistung. Es wird vorgeschlagen, dass Sie versuchen, nur Ihre Deckkraft und dann Ihre Transformationen zu animieren. Aber Sie können sehen, es gibt viel, was Sie mit denen hier tun können. Dieser Typ hier ist nur eine lustige Animation. Sie können sehen, dass Sie, wenn Sie einige CSS-Bilder machen, sie zum Leben erwecken können, nachdem Sie sie nur mit einer Animation erstellt haben. Es tut mir leid, mein Internet ist ein wenig langsam, also ist das hier hinkt, aber Sie können die Animation jetzt sehen. Er ist einfach süß und erweckt sie zum Leben. Dies könnte nur ein Bild sein und keine Animation haben, es wird immer noch süß sein, aber es ist schön, die Animation auch hinzuzufügen. Im nächsten Video sind die Dinge, die wir animieren werden, unsere Saiten und unsere Flugzeuge. Sie werden kommen und es wird eine kleine Verzögerung geben. Diese Saiten werden zuerst kommen als diese auch und dann die Außen zusammen mit den Ebenen, die ihnen folgen. In diesem Video werden wir jetzt unsere Animation hinzufügen und wir werden einfach alles beenden, wo wir vielleicht einen Kastenschatten verpasst haben , den wir vielleicht wollen oder an Orten, wo wir ein wenig mehr Details hinzufügen möchten, wir 'll beenden, dass in diesem Video auch. Unsere Animation, unsere erste, ich nenne sie Schwanz. Es sind unsere Saiten, sie sollen den Schwanz eines Flugzeugs nachahmen, wenn es fliegt. Wie ich bereits im vorherigen Video sagte, wenn Sie bereits dort haben, wo Ihre Position am Anfang ist, wo Sie es wollen, müssen Sie nicht die Null Prozent setzen. Sie können einfach direkt zu den 100 Prozent gehen, weil ich will, dass es von einer Stelle direkt bis zu 100 Prozent geht . Ich muss nicht null Prozent oder 50 Prozent oder so etwas tun. Ich weiß, das sieht aus wie eine verrückte Zahl, Top Negative 3.800 Prozent, aber wenn Sie über unsere Zeichenfolge hier unten nachdenken, ist es in Bezug auf den Stift, also wenn ich einfach Top 100 Prozent setzen würde, würde es nur gehen bis an die Spitze des Stifts hier. Wenn ich es den ganzen Weg nach oben bringen will, muss ich ihm eine große Höhe geben und ich muss ihm diesen wirklich großen Top-Prozentsatz hier geben, negative 3.800 Prozent. Das wird die Saiten bis hierher bringen. Das nächste, was wir tun, ist, dass wir unsere Flugzeuge runterbringen. Sie waren den ganzen Weg hier oben, wir wollen, dass sie unten oben auf den Stiften stehen. Wir haben transformiert, Y übersetzen, wir bewegen uns nur auf der Y-Achse, 500 Pixel. Das ist wieder etwas, das ich gerade getestet habe. Ich schaute in meinem Inspektor hier und ich spielte mit den Zahlen herum, bis ich sah, dass es über die Stifte und 500 Pixel waren über den Stiften hier. Für unsere Animation werden wir es einfach wieder auf Null bringen, wo es gewesen war. Wir brauchen weder die 50 Prozent noch die Nullprozente. Wir gehen einfach von unten, wo wir das Flugzeug den ganzen Weg nach oben setzen, also können wir gerade gehen und einfach 100 Prozent setzen, also werden wir es transformieren, das Y, wieder transformieren Y, null Pixel. Das bedeutet nicht, es Null Pixel zu verschieben, es bedeutet, es auf der Y-Achse von den 500 Pixeln zu bewegen, die es derzeit ist, bis zu Null Pixel. Wenn Sie sich erinnern können, dass ich sagte, wir werden zurückkommen und wir werden in unserem HTML hinzufügen, eine Verzögerung, wenn Sie nicht schon. Auf jedem Flugzeug möchten wir eine Verzögerung hinzufügen, damit sie zu unterschiedlichen Zeiten ansteigen. Flugzeug 1, ich habe hier nichts, und dann habe ich Verzögerung 2 für die zweite, Verzögerung 3 für die dritte, Verzögerung 4, Verzögerung 5 und Verzögerung 6. das durchmache, möchte ich eigentlich für eine Sekunde zurückgehen, weil ich erkannte, dass wir unseren Code tatsächlich ein bisschen trockener machen können. Ich habe das nicht auf meinem ursprünglichen gemacht, aber das ist das Positive, wenn Sie Ihren Code zurückgehen, ist, dass Sie sehen können, wo Sie Verbesserungen vornehmen können. Wo wir gerade das Flugzeug hatten, können wir das behalten. Dann haben wir Verzögerung 2, Verzögerung 3, dann können wir dieses haben auch eine Verzögerung 3. Weil sie mit der gleichen Rate gehen werden, können wir dies zur Verzögerung 2 machen, anstatt Verzögerung 5, weil es mit der gleichen Rate wie die zweite Zeichenfolge gehen wird. Dann müssen wir nichts haben, weil die beiden Flugzeuge nur die letzten sind, und sie haben keine Verzögerung. Was ich dir dort gezeigt habe, habe ich gerade mein ursprüngliches geändert, deshalb hast du die Animation auch mit den Strings gesehen, aber geh weiter und ändere das in deinem Code, damit es etwas trockener sein kann. Du brauchst nicht all die verschiedenen Verzögerungen zu haben, wie ich ursprünglich sagte. Wenn wir es in unser CSS einfügen, können wir unser CSS auch ein wenig trockener machen, was schön ist. Das erste, was wir tun werden, ist die Animation zu unserer Flugzeugklasse hier hinzuzufügen. Unsere Animation, wir nannten es fliegen. Dann wollen wir 1,5 Sekunden gehen, wir lockern uns ein, dann sind 0,6 Sekunden die Verzögerung hier. Es geht voran, also bleibt es einfach oben. Wenn wir unsere Animation sehen, sehen wir, dass sie alle zur gleichen Zeit gehen. Es gibt noch keine Verzögerung. Wir wollen es so machen, dass es so aussieht, als würden diese beiden zuerst gehen, dann diese beiden und dann die letzte. Gehen wir weiter und machen das hier. Wir haben unsere Verzögerung 2, und diese wird den gleichen Animationsnamen haben, 1,5 Sekunden ist, wie lange es dauern wird, die Dauer und es wird die leichtere in haben. Aber dieses Mal warten wir nur 0,5 Sekunden und machen es dann wieder vorwärts. Auf der Verzögerung 3, die diese beiden sind, wollen wir, dass diese noch schneller gehen, also haben wir nur eine Verzögerung von 0,4 Sekunden. Diese Verzögerungsklassen, die wir erstellt haben, können wir diese jetzt auch zu unseren Strings hinzufügen, so dass sie mit den Ebenen übereinstimmen können , die wir hier haben. Unsere erste wird keine spezielle Klasse haben, und wir werden nur Animationen zu der String-Klasse hinzufügen, die bereits da ist, und dann auf unserer zweiten und unserer fünften Saite unter der Peg5 setzen wir eine Verzögerung 2 und dann unter unsere Peg3 und Peg4 Strings, werden wir die Verzögerung 3 setzen. All diese werden mit der gleichen Geschwindigkeit wie die Flugzeuge gehen. Schauen wir uns unseren Code hier an und gehen Sie weiter und fügen Sie unsere Animation zu unserer String-Klasse hinzu. Hier ist unsere String-Klasse, und wir werden den Animationsschwanz dazu hinzufügen. Wir wollen 1,5 Sekunden machen, wir wollen in 0,6 Sekunden und dann vorwärts erleichtern. Jetzt können wir auch diesen Kastenschatten zu unseren Saiten hinzufügen , damit sie so aussehen, als wären sie nur ein wenig oben. Das gibt den Saiten nur ein wenig mehr Tiefe. Sie sehen jetzt etwas dicker aus mit dem Schatten und sie sehen aus, als wären sie hier ein bisschen besser auf der Brücke. Das war's. Wir haben jetzt ein abgeschlossenes CSS-Bild und eine Animation. Von hier aus können Sie dies ändern, wenn Sie wollen. Sie können versuchen, mit den Verzögerungen hier zu spielen, machen Sie dies langsamer oder schneller, Sie können es vollständig wiederholen. Ich habe dieses Bild gesehen, wo es tatsächlich Blätter wachsen. Es ist Vorräte und dann Blätter kommen und Vögel. Sie können sich frei fühlen, das zu tun und das mit der Klasse zu teilen, das wäre wunderbar. 11. Das Auffüllen: Wenn Sie es so weit geschafft haben, bedeutet das, dass Sie jetzt ein tolles CSS-Bild und eine Animation haben. Ich hoffe, Sie haben Spaß beim Lernen von CSS durch kreative Codierung. Ich habe es genossen, Sie auf diese Weise zu unterrichten, und wenn Sie das Projekt abgeschlossen haben, oder Sie das Projekt geändert haben, oder Sie haben ein ganz anderes Bild gemacht, würde ich es lieben, wenn Sie Leute in unseren Klassenprojekten teilen würden, und auch in die Kommentare, lassen Sie mich wissen, ob ich in unserer CodePen-Sammlung und auch auf meinem Twitter-Account teilen kann.