CSS-Animationsgrundlagen: Master-Übergänge und Keyframes

1. EINFÜHRUNG: In dieser Klasse werde ich Ihnen die Grundlagen von CSS-Übergängen und Keyframe-Animationen beibringen . Sie werden dann diese Fähigkeiten nutzen und Ihre eigene einseitige Website erstellen, die CSS-Animationen enthält, die nicht nur ein dynamisches Element zu Ihrer Seite hinzufügen , sondern auch die Benutzererfahrung verbessern. Hey, ich bin David und ich bin ein Front-End-Webentwickler aus Norwich in England. Ich habe mehr als sechs Jahre Erfahrung im Aufbau verschiedener digitaler Anwendungen und Websites für eine breite Palette internationaler Kunden. Ich freue mich sehr, anderen dabei zu helfen, ihre Webfähigkeiten zu verbessern und ihnen die Möglichkeit zu geben, heute mehr als je zuvor zu lernen. Diese Klasse ist für jeden Entwickler gedacht, der einige grundlegende Kenntnisse in HTML und CSS hat , aber ihre Websites auf die nächste Ebene bringen möchte. Jetzt in dieser Klasse verwende ich VS Code als meine IDE der Wahl, aber Sie können jede verwenden, mit der Sie vertraut sind. Sie werden auch Ihre Website auf GitHub Pages hosten. Jetzt keine Sorge, wenn Sie noch nie GitHub Pages verwendet haben, es ist absolut in Ordnung, ich werde Sie durch den Prozess als Ganzes bekommen, völlig kostenlos. Mit diesen Fähigkeiten, die Sie aus diesem Kurs gewinnen, werden Sie in der Lage sein, so viel mehr als Webentwickler zu bieten, unabhängig davon, ob Sie ein Freiberufler sind oder nicht, Sie arbeiten für ein Unternehmen, Ihre Websites und Anwendungen werden sich vollständig von der Menge. Neben Websites können CSS-Animationen auf einer Vielzahl von digitalen Produkten verwendet werden, um Anwendungen, Infografiken, Datenvisualisierung und digitale Werbung zu erstellen. Am Ende dieser Klasse werden Sie ein Meister bei CSS-Animationen sein, und Sie werden mehr als komfortabel mit Übergängen und Keyframes arbeiten. Ohne weitere Umschweife, fangen wir an. 2. Das Kursprojekt: Das Projekt, das Sie erstellen werden, ist eine einseitige Website, die eine Kopfzeile mit einem Navigationsmenü, einer Fußzeile, einem Abschnitt für Bilder und einem Abschnitt mit Schaltflächen enthält einem Abschnitt für Bilder . Ich möchte, dass du eine Website zusammenstellst, die darauf basiert wer auch immer dein Lieblingskünstler oder -band ist. Auch wenn Sie sich auf die Animationen konzentrieren, wird es Spaß für Sie machen, ein wenig Inhalt darüber, warum sie Ihre Lieblingskünstler sind. Vielleicht enthalten Sie einen Text über Ihre Lieblingssongs oder Alben. Aber verbringen Sie nicht zu viel Zeit damit, sich um den Inhalt zu kümmern, da die Animationen natürlich im Mittelpunkt des Projekts stehen werden. Dieses Projekt ist eine perfekte Möglichkeit für Sie, Ihre neuen gefundenen CSS-Animationsfähigkeiten auf einer realen Website mit Komponenten anzuwenden , die von Animationsflair profitieren könnten. für ein erfolgreiches Projekt einfach, Versuchen Siefür ein erfolgreiches Projekt einfach,die Animationskonzepte einzubeziehen, die in dieser Klasse behandelt werden. Natürlich erhalten Sie Bonuspunkte für das Experimentieren mit dem, was gelehrt wird, also fühlen Sie sich frei, kreativ zu werden. Schüler sollten ihren bevorzugten Code-Editor verwenden, um ihr Klassenprojekt zu erstellen. Ich werde VS-Code verwenden, aber alle anderen Code-Editoren werden genauso gut funktionieren. Sie werden Ihr endgültiges Projekt auf GitHub-Seiten bereitstellen. Daher ist ein GitHub-Konto erforderlich. Aber keine Sorge, ich zeige Ihnen, wie einfach es ist, dies einzurichten und Ihre Arbeit auf eine Live-Webseite zu schieben, die alle sehen können. 3. Warum Animationen verwenden?: Warum sollten Sie Web-Animationen überhaupt verwenden? Nun, Animationen können helfen, die Benutzererfahrung zu verbessern, und sie können einige Feedback zu Benutzeraktionen geben. Animationen können dem Benutzer helfen, sich um die Benutzeroberfläche zu orientieren. Animationen sind auch wirklich gut darin, die Aufmerksamkeit auf einen bestimmten Teil einer Seite zu lenken, so dass sie einem Benutzer visuelle Hinweise geben können, dass eine Aktion erforderlich ist. Animationen können darauf hinweisen, dass es ein Element gibt , das anklickbar ist, oder vielleicht gibt es mehr zu sehen. Natürlich können Animationen einer statischen, leblosen Website Bewegung hinzufügen und ihr einästhetisch ansprechendes Design geben, ästhetisch ansprechendes Design geben, und sie sind wirklich gut darin, eine Bewegung mit dem Benutzer zu etablieren. Sie können auch als Branding Tool verwendet werden, so dass der Benutzer eine unvergessliche und lustige Erfahrung. Nun möchte ich, dass Sie diese Dinge berücksichtigen, wenn Sie Animationen für Ihr Projekt erstellen, und stellen Sie sicher, dass Ihre Animationen einen bestimmten Zweck erfüllen , damit die richtige Balance zwischen Ästhetik und Funktionalität besteht. 4. CSS-Übergänge: Wenn Sie den Mauszeiger über diese Schaltfläche bewegen, können Sie sehen, dass sich die Deckkraft ändert. Die Animation ist jedoch sofort. Lassen Sie uns eine Übergangseigenschaft hinzufügen. Übergang, Eigentum, und es ist die Deckkraft, die wir übergehen möchten. Nun, das allein wird nicht genug sein. Wir müssen die Übergangsdauer angeben. Dies ist die Länge des Übergangs. Ich werde das 0,2 Sekunden machen. Dort können wir sehen, dass die Animation viel glatter ist. Wir können auch die Übergangstiming-Funktion ändern. Jetzt wird es eine Lektion geben, die sich der Timing-Funktion und den verschiedenen Arten der Lockerung widmet , die Sie wählen können. Was dies tut, beeinflusst es den Stil des Übergangs selbst, so dass die Geschwindigkeit, von der er von Anfang bis Ende übergeht. Wir können auch eine Verzögerung zu unserem Übergang hinzufügen. Lasst uns eine Sekunde machen. Wenn ich den Mauszeiger über die Schaltfläche führe, beginnt der Übergang erst nach einer Sekunde. Nun, das ist ein langer Weg, um unsere Übergänge zu schreiben. Wir können das in Kürze auf die gleiche Weise schreiben. Übergang, und dann können Sie Opazität wählen, können wir in unserer Dauer setzen, können wir in unserer Timing-Funktion setzen, und wir können auch unsere Verzögerung hinzufügen. Nun, wenn wir das entfernen, sollte dieser Übergang genau auf die gleiche Weise funktionieren. - Das tut es. Nun, eine Sache zu erinnern, wenn Sie die Übergangskürzel verwenden, müssen Sie die Dauer vor der Verzögerung angeben. Aber wie wäre es, wenn wir mehr als eine Übergangseigenschaft wählen wollen? Nun, sagen wir, wir wollen die Farbe des Textes ändern, sagen wir, blau auf Hover. Wir können einfach schreiben Farbe 0,5 Sekunden, sagen wir ist, und wir werden keine Verzögerung setzen. Um die mehreren Eigenschaften zu trennen, verwenden wir einfach ein Komma wie folgt. Dort gehen wir, mehrere Eigenschaften. Jetzt ist es nützlich, bestimmte Eigenschaften zu kennen, die Sie nicht übergehen können. Ich werde nur die blaue Farbe des Textes und aus unserem Übergang entfernen. Was Sie nicht tun können, wenn Sie die Schaltfläche beim Hover ausblenden möchten, können Sie nicht anzeigen, keine. Es zeigt die Anzeige hier. Das wird einfach nicht funktionieren. Es verschwindet, aber es gibt keinen Zwischenübergang. Das liegt daran, dass wir keine Anzeige und Anzeigeblock haben. Es ist entweder an oder es ist aus, es ist entweder da oder es ist nicht. Es gibt keinen Mittelweg. Deshalb können Sie, wenn Sie die Schaltfläche reibungslos verschwinden lassen möchten, die Opazität einfach so verwenden. Wie wäre es, wenn Sie die Position der Schaltfläche verschieben möchten? Jetzt, anstatt links, oben, rechts, unten zu verwenden , zum Beispiel, empfehle ich dringend, und das ist ein persönlicher Trick, um transformieren zu verwenden, zu übersetzen. Jetzt werde ich das um 10 Pixel nach rechts verschieben, damit wir TranslateX verwenden können. Lassen Sie uns 10 Pixel in unserem Übergang machen. Wir stellen sicher, dass der Transformator ausgewählt ist. Ich werde nur die Verzögerung hier entfernen. Wir können den Übergang sofort sehen. Da gehen wir, schön und glatt. Nun, der Grund, warum ich lieber transformieren, übersetzen beim Verschieben im Element verwenden würde , ist, dass Sie eine bessere Leistung erhalten, als links , unten, oben, rechts usw. Wie wäre es, wenn Sie die Größe der Schaltfläche ändern möchten? Jetzt, anstatt Breite und Höhe zu wählen, werde ich wegen der besseren Leistungwieder wegen der besseren Leistung transformieren, skalieren. Nun, anfangs, werde ich dies 0,8 seiner ursprünglichen Größe machen. Dort kann man sehen, dass es etwas kleiner ist. Dann lassen Sie uns beim Hover die Skala wieder auf eins setzen, wie so. Nun, ein weiterer persönlicher Tipp, wenn Sie die Skala transformieren, wenn Sie es beim Hover vergrößern möchten, besonders wenn es um Bilder geht, versuchen Sie nicht, über eins zu gehen. Dies ist, um sicherzustellen, dass die Klarheit und die Bildqualität wird nie pixelieren. Es ist nicht so schlimm, wenn Sie hier einen HTML-Button verwenden. Aber wenn dies ein Bild wäre und wir sagen, dass die Skala auf zwei gesetzt wird, würde dies jetzt pixelig werden. Deshalb habe ich mit 0,8 oder Abbildung unten angefangen und dann auf eins skaliert. Dies sind nur einige Dinge, die Sie berücksichtigen müssen, wenn Sie Ihr Klassenprojekt starten. 5. Timing: Hier haben wir eine Schaltfläche, wo ich eine maximale Breite von 250 Pixel eingestellt habe, und dann auf Hover, Ich werde die Breite auf 300 Pixel erhöhen. Jetzt wirkt sich unser Übergang natürlich auf die maximale Breite aus. Ich habe das getan, ich habe eine Sekunde, die sehr langsam ist, ist jedoch für dieses Beispiel nützlich. Dann ist die Timing-Funktion auf Erleichterung eingestellt, und Leichtigkeit ist die Timing-Funktionen, über die wir in dieser Lektion sprechen werden. Leichtigkeit wird uns eine schöne Animation geben, wo es in der Mitte beschleunigt und dann am Ende verlangsamt. Was sind die anderen Werte? Nun, schauen wir uns ein paar weitere Beispiele an, und lassen Sie uns versuchen, es zu erleichtern. Jetzt beginnt das Ease-In langsam und beschleunigt sich dann am Ende. Lassen Sie uns Lockerung versuchen, die uns das Gegenteil geben wird. Wir fangen schnell an und verlangsamen uns am Ende. Werfen wir einen Blick auf lineare. Nun, lineare wird uns die exakt gleiche Geschwindigkeit während der Animation geben. Wir haben einen konsequenten Übergang durch raus. Nun, etwas etwas anderes. Werfen wir einen Blick auf die Schritte. In Klammern müssen wir ihm eine Zahl geben, also wie viele Schritte wir wollen und wie wird das aussehen? Sie sehen, dass es drei Schritte gibt, um 300 Pixel zu erreichen und dann wieder zurück. Wenn wir dies auf sechs ändern, wird sechs gleichmäßig verteilte Schritte haben. Da gehen wir hin. Wir sind jedoch nicht auf diese Beschleunigungsfunktionen beschränkt, weil wir unsere eigenen finden können, und dazu können wir die kubischen Bézier-Werte verwenden. Innerhalb der Klammern können wir einige unserer eigenen Werte geben. Ich werfe ein paar Zufallszahlen hier rein, 0,45, lassen Sie uns das hier setzen, 0,9, und sehen, was uns das gibt. Nichts zu Besonderes. Lasst uns noch ein paar weitere Werte herumspielen und sehen, was uns das gibt, und es ging bis zum Ende zurück. Dies ist unsere benutzerdefinierte Übergangs-Beschleunigungsfunktion. Die kubischen Bézierwerte bestehen aus vier Einzelwerten, x1, y1, x2 und y2. Nun können diese Zahlen alles abgesehen von x1 und x2 sein, was eine Zahl zwischen Null und eins sein muss. Nun basieren diese Werte auf einer Kurve, die den Animationsstil gibt. nun die lineare Lockerung betrachten, wissen wir, dass die Geschwindigkeit durchgehend konsistent ist, dargestellt durch diese gerade Linie im Diagramm. Das Ausgabeverhältnis und das Zeitverhältnis sind über 0, 0, 1 und 1 konsistent . Aber was ist mit verschiedenen Timing-Funktionen wie Leichtigkeit? Nun, wir wissen, dass sich die Leichtigkeit in der Mitte beschleunigt , wie diese scharfe Neigung auf der Kurve zeigt, und sich dann am Ende entspannt, wo wir sehen können, dass die Kurve horizontaler wird, wenn sie endet. Nun, wenn Sie mit Ihren eigenen kubischen Bezier-Werten experimentieren möchten, hier ist ein praktischer Tipp, wenn Sie in Google Chrome sind. Ich werde nur die Dev-Tools hier aufrufen und den Knopf markieren. Jetzt im Übergang hier, wenn wir das einfach öffnen, können wir unsere Übergangszeitfunktion sehen und wir haben unsere benutzerdefinierten Werte hier. Wenn wir hier nur den Mauszeiger über dieses Symbol zeigen, können Sie sehen, dass der offene kubische Bezier-Editor steht. Wenn wir darauf klicken, können wir hier eine praktische Kurve sehen, die wir durch Verschieben dieser Griffe ändern können und unsere Werte beginnen sich zu ändern. Dies wirkt sich auf unseren Button hier aus. Es gibt auch einige Voreinstellungen auf der Seite hier. Wir klicken darauf, schnell raus, linear in. Lassen Sie uns auf einige mehr Leichtigkeit klicken, die wir wissen können. Linear und langsam in. Raus und zurück, lasst uns das versuchen. Dies ist ein netter kleiner Spielplatz für Sie, um mit Ihren Übergangs-Timing-Funktionen zu experimentieren , sehr praktisch. 6. CSS Keyframes: Nun sind Übergänge großartig, wenn Sie zwischen zwei verschiedenen Zuständen animieren möchten. Aber was ist, wenn Ihre Animation mehrere Schritte haben muss? Nun, hier kommen CSS-Keyframes ins Spiel. Wie schreiben wir Keyframes? Unter unseren Stilen können wir sie im selben Stylesheet schreiben, und Sie können natürlich Ihre Keyframes in eigene Animation CSS-Datei aufteilen, wenn Sie möchten. Also ist es @keyframes, und dann ist das nächste Wort der Name Ihrer Animation, und das kann alles sein, was Sie möchten. Ich nenne diese Shape-Animation. Innerhalb von Keyframes müssen Sie eine Startposition und eine Endposition angeben, aus animiert wird und wohin animiert wird. In diesem Beispiel werden wir von Rot nach Blau animieren . Das allein wird nicht funktionieren. Sie müssen Ihren Keyframes mitteilen, welches Element Sie animieren möchten. Wir möchten das Quadrat animieren. Innerhalb Quadrat, Animationsname ist der Name, den wir unten gewählt, die Form-Animation ist. Dann, ähnlich wie unsere Übergänge, müssen Sie eine Dauer angeben. Sagen wir zwei Sekunden. Da gehen wir, animiert alle zwei Sekunden. Was passiert nun, wenn Sie weitere Schritte zwischen dem Von und dem Bis animieren möchten. Nun, im Wesentlichen sind diese aus Prozentsätzen gebaut. Wir würden bei Null Prozent beginnen, dann endet die Animation auf 100 Prozent. Fügen wir einen Mittelpunkt hinzu, sagen wir, 50 Prozent. Lassen Sie uns die Hintergrundfarbe zu grün ändern, und ändern Sie die Form unseres Quadrats. Geben wir ihm einen Grenzradius von 50 Prozent. Da gehen wir hin. Ich bin auf halbem Weg zu einem Kreis umgestiegen, dann zu 100 Prozent. Nun werden Sie feststellen, dass das Quadrat nicht blau endet, während die Animation auf Blau endet, aber dann wird es wieder in den ursprünglichen Zustand Rot zurückgesetzt. Wenn Sie dies nun als blau belassen möchten, wenn die Animation endet, lassen Sie uns das tun. Es gibt eine andere Eigenschaft namens animation-fill-mode. Wir möchten, dass dies vorwärts geht, also lasst uns sehen, wie das funktioniert, und da gehen wir, das Quadrat ist auf blau fertig. Lassen Sie uns nun einige weitere Animationseigenschaften hinzufügen. Lassen Sie uns jetzt unsere Form bewegen. Lassen Sie uns das bewegen, drehen Sie die Pixel nach rechts und 200 Pixel nach unten. Da gehen wir, in diagonaler Bewegung. Lassen Sie uns einen weiteren Schritt hinzufügen. Also 25 Prozent, fügen Sie eine andere Farbe hinzu. Speichern wir Gelb, und lassen Sie uns dies um 200 Pixel nach rechts verschieben und sehen, wie das aussieht. Das ist ziemlich schnell, ich werde das auf vier Sekunden ändern müssen. Es wäre schön, einen dritten Schritt zu haben, wo dieses Quadrat, im Grunde, wir möchten, dass es nach rechts, dann nach unten, dann links hier, dann zurück in seine ursprüngliche Position. Was ich tun werde, ist, dass ich das 75 Prozent machen werde, und ich werde transformieren: Übersetzen Sie die Position auf Null, 200 Pixel. Mal sehen, wie das aussieht. Da gehen wir hin. In diesem Beispiel müssen wir nicht 100 Prozent angeben da der ursprüngliche Zustand 100 Prozent beträgt. Es ist im Wesentlichen null und 100 Prozent. Nachdem der Keyframe 75 Prozent erreicht hat, wird er in seinen ursprünglichen Zustand zurückgesetzt, unabhängig davon, ob sich das Quadrat hier unten befindet oder sich die Form hier unten befindet. Es gibt eine andere Eigenschaft, die ich Ihnen zeigen möchte, Animation-Iteration-Count. Wenn wir dies auf unendlich setzen, wie Sie vielleicht erraten können, wird die Animation für immer fortgesetzt. Nun, ich werde das nur aussagen, damit mir das keine Kopfschmerzen bereitet. Da gehen wir, es hat gestoppt. Wie ich Ihnen mit der Übergangseigenschaft gezeigt habe, gibt es eine kurze Art, dies zu schreiben, nur Animation. Wir können Shape-Animation angeben, und dann unsere Dauer und dann unseren Füllmodus. Sie können Timing-Funktionen auf die gleiche Weise einschließen, eine Beschleunigungseigenschaft wie diese. Wenn ich diese einfach lösche, sollte es genau auf die gleiche Weise funktionieren, da gehen wir. Es gibt eine schöne Lockerung Eigenschaft hinzugefügt, um es auch. Nun, ähnlich wie die Übergangseigenschaft wieder, können Sie eine Verzögerungsdauer hinzufügen. Sie können festlegen, wann die Animation beginnt. Sagen wir zwei Sekunden. Nach zwei Sekunden animiert unsere Form, und da hast du sie. Sie können sehen, wie einfach es ist, eine mehrstufige Animation zu erstellen. 7. Projektaufbau: Beginnen wir gemeinsam mit der Arbeit an unserem Projekt. Bevor Sie nun codieren, wir einen Blick auf die Einrichtung des Projekts, so dass Sie alles haben, was Sie brauchen. Ich werde euch Schritt für Schritt zeigen, wie ich meine einseitige Website von meinem Lieblingskünstler zusammenstellen werde . Aber anstatt meinen Code genau zu kopieren, stellen Sie sicher, dass Sie das, was Sie lernen, nehmen und es auf Ihre eigene Website anwenden. Sie können natürlich die Übergänge und Animationen verwenden , die ich Ihnen in meinem Projekt zeigen werde, aber ich fordere Sie auf, sich Ihre eigenen zu entwickeln. Jetzt müssen Sie in einem Projektordner eine Index-HTML-Datei für Ihr Webseitenmarkup erstellen, eine Datei style.css, und dies ist für Ihre jährlichen Stile Animationen und einen Ordner für Ihre Bilder. Nun, in Bezug auf die Bilder, habe ich einfach meine aus dem Internet bezogen, was ich normalerweise nicht empfehlen würde. Da Sie jedoch einem Tutorial folgen und keine Produktionswebsite erstellen, müssen Sie sich keine Gedanken über Urheberrechtsprobleme machen. Um Ihr Projekt auf einer Seite zu hosten, die jeder sehen und damit ich und andere Ihnen Feedback geben können, zeige ich Ihnen, wie Sie Ihr Projekt auf GitHub Pages hosten. Es ist völlig kostenlos und es ist einfach zu tun. Wenn Sie noch kein GitHub-Konto haben, gehen Sie bitte zu github.com und melden Sie sich an. Jetzt habe ich bereits ein Konto, also werde ich nicht den gesamten Prozess durchlaufen, sondern einfach den Anweisungen auf dem Bildschirm folgen und du wirst eingestellt. Die einfachste Möglichkeit, Ihre Arbeit auf GitHub zu übertragen, besteht darin, GitHub Desktop herunterzuladen und zu verwenden. Sie können dies von desktop.github.com herunterladen. Mit GitHub Desktop, werden Sie in der Lage sein, Snapshots von jeder Phase Ihrer Arbeit zu machen, und dann am Ende, haben Sie alle Ihre Arbeit bereit, um auf GitHub Pages hosten. Ich werde Ihnen zeigen, wie Sie dies während des gesamten Projekts tun. Wenn GitHub Desktop aktiviert ist und ausgeführt wird, stellen Sie sicher, dass Sie als GitHub-Konto zugewiesen sind. Wenn Sie nicht sicher sind, dass Sie sind, gehen Sie einfach zu Einstellungen oben hier, und dort kann ich sehen, dass ich in der Tat in meinem Konto angemeldet bin. Lassen Sie uns nun ein neues Repository für Ihr Projekt erstellen. Um dies zu tun, gehen Sie zu Datei und Neues Repository. Jetzt Repository-Name, werde ich diese Deftone Transitions nennen, und Sie müssen den Pfad auswählen, für den Sie Ihr Repo erstellen möchten. Ich werde auf „Projekt erstellen“ klicken. Nun, wenn ich das hier oben schiebe, können Sie sehen, dass es den Ordner Deftone Transitions hier erstellt hat. Nun müssen Sie sicherstellen, dass Ihre Dateien, die wir zu Beginn dieser Lektion erstellt haben , in diesem Repo-Ordner enthalten sind. Ich werde die einfach da drinnen bewegen, und da sind sie. Nun, lasst uns einfach die Größe davon nochmals vergrößern. Jetzt haben wir den Namen unseres Repos hier oben, und Sie können auf der Registerkarte Änderungen sehen, wir haben neue Dateien zu übergeben, und das sind in der Tat unsere Dateien, die wir früher erstellt haben. Nun, um diese zu begehen, müssen wir eine kleine Nachricht schreiben, um mit dem Commit zu gehen, und ich werde nur dieses Initial Commit aufrufen. Ich werde das nur zum Hauptzweig verpflichten, so. Jetzt müssen wir unsere Arbeit bis zu GitHub veröffentlichen, und um das zu tun, können wir einfach auf „Publish Repository“ klicken. Jetzt stellen Sie sicher, dass Sie mit dem Namen zufrieden sind. Ich werde nur auf „Veröffentlichen“ klicken. In ein paar Sekunden sollte es nach oben geschoben werden. Großartig. Um sicherzustellen, dass unsere Arbeit auf GitHub ist, können Sie hier auf „View on GitHub“ klicken. Solange Sie dann in Ihrem GitHub-Konto angemeldet sind, können Sie hier Ihren Benutzernamen, das Repo, das wir gerade erstellt haben, und Ihre Dateien sehen . Großartig. Sie sollten jetzt alles haben, was Sie brauchen, um jetzt mit der Programmierung Ihres Projekts zu beginnen. 8. Projekt – HTML: Nun, wenn Sie Ihre HTML-Datei in Ihrem Lieblings-Code-Editor öffnen, werde ich hier VS Code verwenden, beginnen wir mit der Arbeit an unserem Markup. Nun, offensichtlich, werde ich meine einseitige Website codieren. Aber werfen Sie einen Blick auf das, was ich tue, und sehen Sie, wie Sie die Dinge, die Sie lernen, für Ihre eigene Website anwenden können. In VS Code, um eine HTML-Datei zu erstellen, kann ich nur Ausrufezeichen und Tab drücken. Mit dem Emmet-Plugin in VS Code gibt mir dies eine schöne Basis-HTML-Datei. Meine Seite wird über die Deftones sein, also werde ich den Titel dort ändern. Wir müssen eine Verknüpfung zu einem Stylesheet herstellen. Auch hier, Link zu unserem Stylesheet und die href wird style.css sein , was in der Tat unser Stylesheet hier ist. Erstens werden wir uns mit dem Aufbau einer Kopfzeile beschäftigen. Jetzt werde ich ein div innerhalb des Headers mit einer Klasse von Wrap erstellen. Nun, wickle ich über alle meine Komponenten, so dass sie alle die gleiche Breite haben. Werfen wir einen Blick auf h1. Es ist eine schöne große Kopfzeile mit dem Namen Ihres Lieblingskünstlers. Dann werde ich ein Navigationsmenü aufbauen. Darin wird es eine ungeordnete Liste geben, und es wird einige Listenelemente enthalten sein. Ich werde jedem Anker geben, eine Klasse von nav__anchor. Diese wurden nicht wirklich irgendwo geklickt, da es nur für die Präsentation, also werde ich einfach ein # hinzufügen. Lassen Sie uns eine Fälschung über Seite haben, kopieren und einfügen Sie diese über. Lassen Sie uns einen über Blog haben, und lassen Sie uns eine Kontaktseite haben. Genug bei der Navigation. Nun, außerhalb der Kopfzeile, werde ich einen Bildabschnitt einschließen. Lassen Sie uns tatsächlich einen div oder image-Abschnitt geben. Ich werde diese Abschnitt-Tags machen, und dann im Inneren werden wir den Wrap verwenden. Lassen Sie uns ein div mit Klasse von Bild-Abschnitt Bild-Container erstellen. Dann drinnen werden wir ein schönes Hintergrundbild haben. Da es sich um ein Hintergrundbild handelt, werde ich das Bild-Tag nicht verwenden. Ich werde das in einem div tun. Ich gebe diesem eine Klasse von image-section__image. Nun, für das Hintergrundbild, lassen Sie uns hier mit einem Inline-Style-Tag verknüpfen. Hintergrundbild, URL, und dann müssen wir auf unser erstes Bild verlinken, und ich werde diese innerhalb Bilder Ordner gespeichert haben, so images/image-1.png. Darunter erstellen wir ein Absatz-Tag. Wir können ein bisschen Text erstellen und ich werde diesem eine Klasse image-section__text geben. Was sollen wir hier schreiben? Ich werde über meine Lieblingssongs von ihnen schreiben. Natürlich kann der Inhalt, den Sie einschließen, alles sein, was Sie wollen. Du musst mich nicht kopieren. Wenn ich Song 1 schreibe, lassen Sie dies auf eine neue Zeile setzen, also werde ich dort ein Break-Tag verwenden. Kimdracula ist einer meiner Lieblingslieder von ihnen, also werden wir das einschließen. Jetzt. Ich werde noch ein paar Bilder hinzufügen. Lassen Sie uns dieses div kopieren, fügen Sie es in ein paar mehr Male ein. Was wir hier ändern müssen, ist, dass wir mein zweites Bild einschließen. Dann Lieblingslied Nummer 2, Ich genieße etwas namens Hexagramm. Bild Nummer 3, lassen Sie uns das ändern. Mein Lieblingslied Nummer 3. Wie wär's um das Fell herum. Bevor ich fortfahre, werde ich das in einem Webbrowser öffnen. Du kannst einfach die HTML-Datei finden, doppelklicken darauf, und das wird in deinem Browser geöffnet. Was ich verwenden werde, ist hier in VS Code live zu gehen. Dies ist eine Erweiterung, wenn Sie es noch nicht haben. Wir suchen nach Live-Server, es ist dieser Top-Server hier. Nun, was mir das erlaubt, ist, wenn wir mit der Arbeit an diesem CSS beginnen, werden Sie die Updates sofort im Browser sehen. Ich werde nur einen Live-Server öffnen, und werfen wir einen Blick in den Browser. Schrumpfen Sie das runter. Da gehen wir. Hier gibt es unser erstes bisschen Inhalt. Lass uns weitermachen. Nun möchte ich einen Abschnitt mit einigen weiteren Texten einschließen, aber einige Schaltflächen, damit wir mit einigen Hover-Animationen auf den Schaltflächen herumspielen können. Ich werde hier einen Abschnitt mit einer Klasse von Textgruppe erstellen. Wieder werden wir die Verpackung einschließen. dann innerhalb des Wrap Lassen Sie unsdann innerhalb des Wrapeinen text-group__container erstellen , der alles enthält, und dann denken wir über unsere Texte nach. Wir verwenden einen Absatz, text-group__text. Tippen Sie auf das Kreuz. Dann lassen Sie uns ein paar Informationen über die Band. Ich werde darüber schreiben, wo sie herkommen. Deftone ist eine alternative Metal-Band aus Sacramento in Kalifornien. Das erste bisschen Inhalt. Nun lassen Sie uns eine Schaltfläche einschließen, auf die wir animieren können, schweben. Ich werde hier zwei Abschnitte verwenden. Zwei Textabschnitte, die zwei Schaltflächen haben. Lassen Sie uns diesen Knopf nennen, wir geben ihm eine Klasse von Knopf-Doppel. Lassen Sie uns das einen Href geben. Dies ist nirgends klicken, also verwenden wir einfach ein # dort. Dann kann der Aufruf zur Aktion sein, klicken Sie hier. Wie gesagt, ich werde das zweimal tun, also kopieren wir den Container, fügen Sie ihn unten ein. Was kann ich dann über die Band schreiben? Was ich tun kann, ist vielleicht über die Mitglieder der Band zu reden. Das Mitglied sind Chino, der auf Gesang ist, Stephen, der Leadgitarre ist, Sergio, der am Bass ist, Abe, der ein toller Schlagzeuger ist, und dann Frank, der DJ und auf den Tasten ist. Großartig. Ein bisschen Textinhalt. Der zweite Knopf ist schon gut zu gehen. Wie bereits erwähnt, musst du mir nicht genau folgen. Sie können die Art und Weise ändern, wie das Navigationsgerät funktioniert, ändern Sie die Navigationslinks. Sie müssen keinen Bildabschnitt haben, oder wenn Sie dies tun, muss er nicht vor den Textbereich und die Schaltflächen stehen. Grundsätzlich liegt das Layout an Ihnen. Wenn wir wieder zu den Animationen kommen , liegt es an Ihnen. Ich werde Ihnen verschiedene Stile und Techniken zeigen, die Sie verwenden können. Versuchen Sie also, das, was Sie lernen, auf Ihre eigene Seite auf Ihre eigene Weise anzuwenden. Diese beiden Schaltflächen teilen dieselbe Übergangsanimation. Ich möchte eine dritte Schaltfläche, die eine eigene einzigartige Animation hat, also werde ich hier einen Abschnitt hinzufügen. Ich werde ihm eine Klasse von Textabschnitt geben. Da drinnen werden wir unsere Verpackung haben. Dann wieder, lassen Sie uns einen Absatz text-section__text. Lassen Sie uns noch mehr Inhalte einschließen. Lass uns über mein Lieblingsalbum reden. Sie haben neun Studioalben produziert, wobei White Pony mein Favorit ist. Ich kann das nach oben scrollen, damit du es sehen kannst. Wie gesagt, werde ich einen anderen Knopf hinzufügen. Lassen Sie uns diesem eine Klasse von Button-Main geben, und die Idee für diese eigenständige Schaltfläche ist, dass ich einige Keyframe-Animationen anstelle des Übergangs verwenden werde. Aber wir werden dazu im nächsten Abschnitt oder im folgenden Abschnitt kommen , wenn wir einige Animationen machen. Was ich möchte, dass Sie in Ihre Seite einfügen, ist eine Fußzeile. In Ihrer Fußzeile, in meinem Wrap, möchte ich, dass Sie nur einen Absatz einfügen, um zu sagen, dass die Website von Ihnen gemacht wird. Bitte geben Sie hier Ihren Namen an. Ich werde meins setzen. Website ist von mir. Ausgezeichnet. Ich werde das speichern, und wir können den Inhalt auf der rechten Seite hier sehen. Großartig. Eine Sache, bevor ich gehe, ist, dass ich einige benutzerdefinierte Schriftarten in meine Seite einfügen werde, die ich von Google Fonts erhalten werde. Was ich tun kann, ist, diese Größe zu erhöhen. Gehen wir hier zu Google Fonts. Jetzt sind wir in Google Fonts. Sie können einen Blick werfen. Wir können einen Scrollen durchführen und sehen, ob es irgendwelche Schriftarten gibt, die Sie einschließen möchten. Nun, ich weiß bereits, dass ich die alata-Schriftart verwenden möchte. Wenn Sie einen gefunden haben, den Sie mögen, wenn Sie einfach darauf klicken und dann den Stil auswählen, und dann auf der rechten Seite hier, wird es Ihnen einen schönen Link geben, den Sie in Ihre HTML-Datei einfügen können. Ich werde das kopieren und es direkt über dem Stylesheet einfügen. Genau so. Schließlich, bevor wir zu unserem Stylesheet übergehen, werde ich nur meine Arbeit hier begehen. Mit GitHub Desktop können Sie sehen, dass Index der Vater ist, an dem wir gearbeitet hatten, und das ist all unsere neuen Inhalte. Wenn du deine Arbeit vorantreiben möchtest, kannst du dasselbe tun wie ich. Ich werde nur eine Nachricht hier schreiben, Feature Markup. Ich werde das begehen, und dann werde ich das auf GitHub schieben. Nun, gehen wir zu unseren Stilen. 9. Projekt – CSS: Sobald Sie mit Ihrem Markup zufrieden sind, öffnen Sie Ihr Stylesheet style.css und beginnen wir, einige Stile zu einer Seite hinzuzufügen. In meinem werde ich alles auswählen und nur einige Basisstile einschließen. Ich werde Box-Größe, Border-Box und ich werde die Schriftfamilie einschließen, die die Google-Schriftart enthält, die ich ausgewählt habe. Lassen Sie uns alle Ränder entfernen. Lassen Sie uns alle Polsterungen entfernen. Jetzt möchte ich meine Wrap-Klasse jetzt meine maximale Breite aller Komponenten auf 940 Pixel setzen. Lassen Sie uns etwas Seitenauffüllung von 20 Pixeln hinzufügen. Ich werde alle meine Komponenten anzeigen, flexen. Lassen Sie uns die Elemente ausrichten, die zentriert werden sollen. Rechtfertigungsinhalt, der Abstand zwischen sein soll. Natürlich der Rand, lassen Sie uns Null auf der Oberseite und dann automatisch auf der linken und rechten, so dass alles zentriert ist. Wir können sehen, wie unsere Schriften dort gut funktionieren. Jetzt fangen wir an, die Seite runter zu gehen. Zuerst werde ich den Header einschließen. Ich werde diesem eine Hintergrundfarbe einer goldenen Farbe geben. Ich werde Sie ermutigen, Ihre Farben auszuwählen, also kopieren Sie meine nicht. Polsterung oben und unten von 20 und dann Null links und rechts. Lassen Sie uns zuerst einen Blick auf dieses Navi werfen. Ich werde Flex die Kinder und Rechtfertigungsinhalte anzeigen, lassen Sie uns etwas Raum dazwischen hinzufügen. Lassen Sie uns nun jedes Listenelement anvisieren. Lassen Sie uns die Aufzählungspunkte entfernen. List-Stil Typ, keine und dann geben wir ihnen allen einen Rand links von 50 Pixeln. Da gehen wir. Sie können sehen, dass jetzt alles abgeteilt ist. Jetzt für die Anker selbst. Für alle Anker werde ich die Unterstreichung entfernen, also Textdekoration, keine. Dann für das nav verankert sich selbst. Lassen Sie mich einfach überprüfen, dass die richtige Klasse ist. Ja, das ist es. Nav Anker, machen wir diese schwarz. Geben wir ihm eine Schriftgröße von etwa 20 Pixeln. Unsere Position, relativ. Wir gestalten uns schön. Gehen wir nach unten zu unserem Bildbereich. Bildabschnittsklasse. Stellen Sie sicher, dass es eine Hintergrundfarbe von Schwarz gibt. Image-Abschnitt und dann haben wir die Image-Container-Klasse, die sich im Inneren befindet. Du wirst ihnen einen Überlauf von Verborgenen geben. Dies wird offensichtlich, wenn wir anfangen, an dem Übergang oder der Hover-Animation auf diesen Bildern zuarbeiten der Hover-Animation auf diesen Bildern zu warum ich Überlauf versteckt einschließe. Darauf kommen wir zurück. Da ich drei Bilder habe, stellen wir sicher, dass sie alle ein Drittel sind, also 33,3 Prozent Breite. Jetzt für die Bilder selbst, Bildabschnitt__ Bild. Lassen Sie uns anzeigen, biegen Sie diese Bilder, richten Sie Elemente aus. Stellen wir sicher, dass sie in der Mitte sind und das gleiche für Rechtfertigungs-Inhalt, stellen Sie sicher, dass sie in der Mitte sind. Lassen Sie uns ihnen einige Dimensionen geben. Höhe, ich mache das 400 Pixel. Dann lassen Sie uns ihnen eine Polsterung geben. Nichts oben und unten, aber 20 Pixel links und rechts. Nun, der Hintergrund selbst zum Hintergrundbild. Ich will sie nicht wiederholen. wir sicher, dass sie zentriert sind, also 50 Prozent. Dann für die Größe möchte ich, dass das Bild diesen Raum so bedeckt. Nicht alle Bilder erscheinen. Lassen Sie mich nur überprüfen, ob alles korrekt ist. Bild zwei und drei. Das ist der Grund. Wir haben PNG für eins, JPEG, JPEG für zwei und drei, deshalb sind sie nicht paarbar. JPG und es gibt unsere anderen Bilder. Jetzt der Plan für den Bildtext. Mein Lieblingslied hier. Meine Idee ist, wenn wir den Mauszeiger über die Bilder bewegen, möchte ich, dass der Text erscheint. Momentan ist es nicht da. Dann bewegen wir uns darüber, es scheint. Lassen Sie uns diesem Text einige anfängliche Stile geben , aber wir werden uns erst später um die Animationen kümmern. Ich werde dem Text eine Hintergrundfarbe von leicht schwarz, aber mit halber Deckkraft geben. Es ist durchsichtig. Null, Null, Null für Schwarz und dann 0,5 für 50 Prozent Deckkraft und dann machen wir den Text selbst weiß f f f f f Schriftgröße, lassen Sie uns diese 20 Pixel machen, Text ausrichten, um zentriert zu werden und dann können Sie es dort sehen. Zunächst werden wir die Deckkraft Null machen und wir erhöhen die Deckkraft auf eins, wenn wir den Übergang hinzufügen. kommen wir zurück. Der Text unten, ein weiterer Text Gruppentext. Lassen Sie uns ihnen einen unteren Rand von 25 Pixeln geben. Der Textgruppencontainer, den ich vergessen habe. Der [unhörbare] Container geben wir, dass einige Polsterung von 50 Pixeln rundum. Das ist besser. Jetzt die Knöpfe selbst. Alle Tasten halten einige ähnliche Stile. Hintergrund, wir werden das entfernen und dann fügen wir unseren eigenen Rahmen der Grenze fest zwei Pixel und dann schwarz. Stellen Sie sicher, dass der Cursor tatsächlich ein Zeiger ist. Erhöhen wir die Schriftgröße auf 18 Pixel. Lassen Sie uns den Schaltflächen eine Polsterung von fünf Pixeln oben und unten, 20 Pixel links und rechts geben und ich werde sicherstellen, dass die Position relativ ist. Sie sehen gut aus. Wieder kehren wir zu den Hover-Animationen für diese Schaltflächen zurück. Gehen wir zu diesem Textabschnitt. Textabschnitt, Hintergrundfarbe von, geben wir es ein Grau von e e e e e Polsterung oben und unten von 50 Pixel und Null links und rechts. Ich muss den Dickdarm dort entfernen. Das ist besser. Lassen Sie uns nun einige Stile für den Umbruch innerhalb dieses Textabschnitts geben. Es ist etwas anders, also zeigen Sie Flex an. Der Grund, warum es anders ist, ist, dass ich möchte, dass die Flexrichtung in einer Spalte und nicht in einer Zeile liegt. Jetzt sind sie übereinander, der Text und der Knopf. Lassen Sie uns nun die Elemente ausrichten, die zentriert werden sollen und wir werden dasselbe tun, damit Inhalte auch zentriert sind. Der Text selbst, Textabschnitt__ Text. Lassen Sie uns unseren Rand unten von 25 Pixel geben und Text ausrichten zentriert werden. Das sieht gut aus. Nun, die Schaltfläche als Teil dieses Textabschnitts, so Taste main, Ich glaube, wir gaben dies eine Klasse von. Ich möchte das Grau hinter den Knöpfen nicht sehen, also lassen Sie uns diesem eine Hintergrundfarbe von Weiß geben. Dann schließlich, wenn wir nach unten scrollen. Werfen wir einen Blick auf diese Fußzeile. Die Fußzeile, Ich werde dieses schwarz machen, um in das Design passen, aber [unhörbar] von Schwarz. Dann wieder, ähnlich wie unser Navi, werde ich die Farbe dieser schönen Goldfarbe geben. Das stimmt überein. Blättern Sie nach unten. Ja, jetzt ist das hier der Stil. Sie können rundum etwas Polsterung hinzufügen. Lassen Sie uns Polsterung von 20 Pixeln geben. Ich werde sicherstellen, dass der Text ausrichten in der Mitte ist. Lassen Sie uns einfach die Breite erhöhen. Mal sehen, wie sich das formt. Ja, das sieht gut aus. Das sind die Basisstile oder die statischen Stile für meine einzelne Seite Website. Wenn Sie nun die Lektionen durchlaufen, werden wir einige Übergänge und einige Key-Frame-Animationen hinzufügen , um dies wirklich ein wenig zu würzen. Ich möchte natürlich nur meine Arbeit zu GitHub verpflichten. Das werde ich jetzt tun. Wir können in der Indexdatei sehen, hier habe ich die Bilder von PNG zu JPEG geändert und dann ist unser Stylesheet natürlich alle unsere Stile. Ich werde eine Commit-Nachricht der Funktion hinzufügen, Stile hinzufügen, Commit und Push. 10. Projekt – Nav Bar: Ich werde beginnen, einige Übergangsanimationen zu meinen Elementen hinzuzufügen. Kopieren Sie jetzt vielleicht nicht genau das, was ich Ihnen in den nächsten Lektionen zeigen werde. Aber denken Sie an die Techniken, die ich Ihnen zeige, und entwickeln Sie einige Ihrer Ideen, Ihre eigenen Ideen für Ihre einseitige Website. Erstens werde ich darüber nachdenken, diese Navigationselemente zu animieren. Ich denke, was ich gerne tun würde, ist, wenn Sie den Mauszeiger über diese Menüpunkte bewegen, eine schwarze Linie zieht unter jedem Wort. Um dies zu tun, werde ich zuerst ein Pseudo-Element auf dem nav_anchor erstellen. Dies wird unser zugrundeliegendes Element sein. Also nav_anchor nach. Jetzt möchte ich die Farbe schwarz machen. Lassen Sie uns die Höhe zwei Pixel machen. Stellen wir sicher, dass die Breite 100 Prozent des übergeordneten Elements beträgt, was das obige Wort sein wird. Da es sich um ein Pseudo-Element handelt, müssen Sie immer Inhalte einschließen, wobei dies eine leere Zeichenfolge sein kann. Nun müssen wir dieses absolute positionieren, was wir tun können, weil das Elternteil relativ positioniert ist und Sie jetzt die Linien sehen können, die dort gezeichnet werden. Lassen Sie uns nun darüber nachdenken, wo wir es platzieren möchten. Unten minus fünf Pixel, so dass es unten ist, und dann links, wir wollen sicherstellen, dass dies Null ist also ganz links vom Wort. Das sieht gut aus. Ich denke, jetzt können wir anfangen, über unsere Hover-Animation nachzudenken. Jetzt unter all unseren statischen Stilen werde ich hier nur einen Kommentar schreiben, der schweben kann und dann alle unsere Animationen und Übergänge hier unten sitzen können. Auf dem nav_anchor, wenn wir den Mauszeiger darüber bewegen, wollen wir auf das achter-Element abzielen. Nun, um dies in zu bohren, verwende ich Transformationsskala x, was horizontal bedeutet, also links und rechts, und wir wollen dies auf die volle Breite setzen, die eins sein wird. Was das bedeutet, ist, wenn wir zu unseren statischen Stilen zurückkehren, müssen wir sicherstellen, dass das nachher-Element, die Skala x anfänglich auf Null gesetzt ist, und sie verschwinden. Wenn es nun um unseren Übergang geht, wollen wir Transformation gezielt anvisieren, denn das ist es, was wir hier anvisieren. Ich werde das über 0,2 Sekunden tun und ich werde die Lockerung der Ease-in-out verwenden. Sehen wir uns nun an, wie dies in animiert wird. Großartig, aus der Mitte. Wenn Sie nun animieren möchten, sagen wir von links nach rechts, sagen wir von links nach rechts, hier können Sie den Transformationsursprung verwenden da dies anzeigt, wo sich die Ausgangsposition befindet. Wenn ich dies auf 0, 0, also x und y setze , können Sie sehen, dass die Linie von links nach rechts gezogen wird. Aber ich mag es, von der Mitte nach außen zu bewegen. Also werde ich das einfach löschen. Großartig. Wenn Sie jetzt mit Ihren Animationen zufrieden sind, vergessen Sie bitte nicht, Ihre Arbeit auf GitHub Desktop zu übernehmen und Ihre Arbeit auf Ihrem GitHub-Konto zu übertragen. 11. Projekt – Bilder: Jetzt werde ich darüber nachdenken, wie ich diese Bilder animieren möchte, die einen Text haben sollten, der vor ihnen erscheint, sobald Sie den Mauszeiger über die Bilder bewegen. Nun, im Bildtext, ist die Deckkraft momentan auf Null gesetzt. Wenn wir dies nur auf eins setzen, können Sie den Text dort sehen. Nun, aus irgendeinem Grund, dass der Text nicht dort sitzt, wo ich ihn will, sollte er hier in der Mitte sein. Ich stelle mir vor, dass etwas nicht mit unserem Markup stimmt, und tatsächlich gibt es, dieser Text sollte innerhalb des Bild-div sein. Lassen Sie mich das aktualisieren, und das letzte. Wenn wir das speichern, gehen wir, viel besser, da sollte der Text sein. Großartig. Ich werde die Deckkraft wieder auf Null setzen, weil das ist, was wir animieren werden. Sobald wir hier sind, machen wir den Übergang, und es ist die Deckkraft, die wir anvisieren, auch die 2,2 Sekunden und unsere Leichtigkeit in out. Nun, lasst uns das Bild ins Visier nehmen. Image-section_image, also das ist, was wir verwenden, um den Text zu bewegen und zu bringen. Dann sind in der Tat die Bildabschnitts-Texte, die animiert werden. Wir müssen nur die Deckkraft auf eins zurücksetzen. Da kommt Smoothie rein. Was ich mit dem Text machen möchte, ist vielleicht die Größe des Textes sowie die Deckkraft zu erhöhen. Was ich tun werde, ist auf dem Hover, nächsten Übergangsskala, und setzen Sie dies auf eins. Wenn wir dann zum Text kommen, setzen wir die anfängliche Skala auf 0,8. Kleiner und nimmt dann in der Größe zu. Der Grund, der nicht animiert, wie ich möchte, ist, dass dies eine Transformation sein sollte, nicht Übergang. Dann müssen wir auch den Übergang hier selbst hinzufügen. Verwandeln Sie 0,2 Sekunden, erleichtern Sie das Eindringen. Sowohl Deckkraft als auch Transformation werden gezielt angestrebt. Stellen Sie sich vor, das funktioniert immer noch nicht, weil ich das hier denke. Ja, ich sagte Übergang statt Transformation. Das ist ein einfacher Fehler zu machen, also mach nicht den gleichen Fehler. Übergang und Transformation sind beide sehr unterschiedlich. Da gehen wir hin. Da ist unsere Transformation, der Übergang in. Ich denke, ich möchte diesen Bildern etwas Bewegung hinzufügen. Auch hier werde ich die Skala auf diesem Bild beeinflussen. Beim Übergang werde ich die Transformationsskala anvisieren. Verwandeln Sie 0,2 Sekunden, und lassen Sie uns einfach ein- und ausschalten. Dann für das Bild selbst, wenn wir den Mauszeiger darüber bewegen, also werde ich das einfach kopieren. Wir können die Skalierung transformieren, da der Standardwert eins ist. Ich setze dies auf 1.1 und sehe dann, wie die Bilder aussehen. Großartig. Funktioniert einwandfrei. Nun, ich habe jetzt gesagt, in einer früheren Lektion, dass Sie sollten nicht transformieren Maßstab über 1.0 vor allem, wenn es um Bilder geht. Nun, der Grund, warum ich es hier mache, ist, weil ich weiß, dass die volle Größe dieser Bilder viel größer ist als diese anfänglichen eingestellten Dimensionen, und deshalb werden die Bilder nicht pixelig. Es sieht immer noch gut aus. Nun, nachdem Sie Ihre Arbeit engagiert haben, gehen wir zum nächsten Übergang über. 12. Projekt – Buttons: Jetzt werde ich darüber nachdenken, wie ich diese beiden Schaltflächen beim Hover animieren möchte. Mein erster Gedanke ist auf Hover, ich möchte, dass ein goldener Hintergrund von unten nach oben in einem schönen glatten Übergang erscheint. Damit das funktioniert, werde ich ein Pseudoelement auf beiden Knöpfen erstellen und das wird unseren goldenen Hintergrund bilden. Um diese beiden Tasten und nur diese beiden Tasten zu zielen, nicht die dritte, muss ich mich daran erinnern, welche Klasse wir ihnen gegeben haben. Es war Knopfzettel. Wir werden das benutzen. Direkt unter unserer Button-Klasse, lassen Sie uns dieses Pseudo nach Element erstellen. Ich weiß, ich will, dass der Hintergrund meine schöne Goldfarbe ist. Wir müssen Inhalte einschließen, wenn es sich um ein Pseudo-Element handelt. Ich möchte, dass die Höhe irgendwann 100 Prozent beträgt und da ist ein Semikolon. Lassen Sie uns sicherstellen, dass es den Raum der Tasten füllt, links muss Null sein. Um dies zu tun, müssen wir sicherstellen, dass die Position auf absolut gesetzt ist, dann top Null sein kann. Die Breite sollte 100 Prozent betragen, weil wir den Raum ausfüllen. Da gehen wir, und wir können sehen, wie der Hintergrund dort erscheint. Allerdings können wir unseren Text nicht mehr sehen. Daher müssen wir den Z-Index auf minus eins setzen, also sitzt er hinter. Das sieht gut aus. Was wird es sein, dass wir übergehen werden? Es wird Transformation Maßstab dieses Mal sein. - Warum? Weil es die vertikale Bewegung sein wird. Ich setze das auf Null, und es verschwindet. In Bezug auf den Übergang können wir die Transformation 0,2 Sekunden Ease-in-out anvisieren. Sie können sehen, dass es hier ein gemeinsames Thema gibt, wenn es um die Übergangsdauer geht. Ich benutze gerne 200 Millisekunden, das ist nur eine Präferenz, und ich verwende gerne Ease-in-out als Lockerung. Aber ich fordere Sie auf, einfach mit Ihren eigenen Zahlen und Ihren eigenen Timing-Funktionen zu experimentieren und zu sehen, was gut für Sie funktioniert. Scrollen Sie nach unten zu unserem Hover-Bereich. Die Schaltfläche Doppelklasse auf Hover, wir werden das After-Element Ziel und wir werden Transformationsskala y setzen, um eins zu sein. Wie sieht das aus? Es sieht ziemlich cool aus. Aber wie gesagt, ich wollte nicht wirklich, dass es von der Mitte nach außen erscheint, ich wollte, dass es von unten erscheint. Auch hier kann der Ursprung der Transformation ins Spiel kommen. Versatz-Transformationsursprung auf Null und Null. Beachten Sie, dass von oben nach unten erscheint, wir kommen näher. Was ich wirklich setzen muss, ist der y-Teil oder transformieren Ursprünge. Übertragungsursprung x ist Null, y ist derzeit Null, dies sollte 100 Prozent sein, so dass es von unten beginnt. Da gehen wir hin. Da sind meine zwei Knöpfe komplett. Wenn Sie Schaltflächen selbst animieren möchten, müssen Sie vielleicht darüber nachdenken, wie Sie möglicherweise den Rahmen animieren können. Sie können die Breite ändern, die Farbe, oder vielleicht auf dem Mauszeiger, Sie können einen Schatten hinzufügen, oder Sie können die Textfarbe ändern oder die Deckkraft beeinflussen. Es gibt viele Aspekte der Schaltfläche, die Sie beim Hover übergehen können. Spielen Sie herum und sehen Sie, was gut für Ihre Tasten funktioniert. Ich werde nur meine Arbeit zu GitHub verpflichten. In GitHub Desktop können wir sehen, dass Stile, hier ist unsere Schaltfläche nach Stilen verdoppelt, und der Mauszeiger hier unten. Also schreibe einfach Commit-Nachricht, Feature, Doppelpunkt, Schaltflächenübergänge, ich werde dies begehen und dann das hochschieben. 13. Projekt – Keyframes: In dieser Lektion zeige ich Ihnen, wie ich Keyframe-Animationen verwenden werde , um die endgültige Schaltfläche zu animieren. Nun, meine Idee für meine Keyframe-Animation ist, wenn Sie den Mauszeiger über hier bewegen, nimmt die Breite des Rahmens an Größe zu, und ich werde das tun, bis Sie die Maus weg bewegen. Lassen Sie uns diese Keyframe-Animation aufbauen. Während wir im Hover-Bereich sind, machen wir @keyframes und ich werde dieses BorderGrow nennen und das kann alles benannt werden, was wir wollen. Bei null Prozent hat der Startstil einen Rahmen, zwei durchgezogene Pixel, und das ist schwarz. So 000. Es wird nicht wirklich die Grenze sein, die ich animieren werde, aber es wird in der Tat der Kastenschatten sein. Dies wird die Illusion geben, dass die Grenze an Größe wächst. Box-Schatten wird 000 sein, also Pixel wird nicht da sein, und das wird schwarz sein. Dann das endgültige Schlüsselbild, also ein 100 Prozent. Also der letzte Keyframe-Schritt. Der Rahmen bleibt unverändert, aber der Boxschatten wird 00 sein, aber dann wird er zwei Pixel um zwei Pixel verteilt und wird immer noch schwarz sein. Dann, wenn wir auf Schaltfläche Haupt bewegen, so Taste Bindestrich Haupt Doppelpunkt schweben. Lassen Sie uns die Animation hinzufügen, die BorderGrow genannt wird. Ich werde das in einer Sekunde ziemlich langsam machen. Ich möchte nur, dass die Timing-Funktion linear ist, also werde ich nicht Ease-in-Out verwenden und ich möchte, dass dies für immer animiert wird. Nun, bis wir die Maus von der Schaltfläche entfernen, lassen Sie uns sehen, wie das aussieht. Es ist fast da, aber wie Sie sehen können, wenn der Kastenschatten seine volle Breite hat, rastet er wieder in seinen ursprünglichen Zustand ein, was wir nicht wollen. Was ich gerne passieren möchte, ist es, in der Größe zu wachsen und dann rückwärts zu übergehen, nicht zurückzuschnappen. Wir können das tun, indem wir das Wort alternate verwenden. Dies wechselt vorwärts und rückwärts zwischen der Animation. Genau so, das ist großartig. Während ich hier bin, möchte ich die Hintergrundfarbe zu Gold machen. Das bedeutet, dass wir hier nur einen schönen Übergang für die Hintergrundfarbe 0,2 Sekunden hinzufügen müssen , einfach-in-out. Schön. Das sieht gut aus. Endlich, lassen Sie uns unsere Arbeit begehen. Funktion. Taste, Keyframe, Animation, und ich werde eine Nachricht machen, und wir werden diese Arbeit begehen und dann drücken Sie diese Arbeit nach oben. Werfen wir einen letzten Blick darauf, wie meine einseitige Website aussieht. Dies ist unsere Navigationsübergänge, ich habe einige schöne Bilder und Text, einige Schaltflächen-Hover-Übergänge und eine letzte Keyframe-Animation. Wie in früheren Lektionen werde ich Sie ermutigen, mit Ihren eigenen Stilen, Ihren eigenen Übergängen und Ihren eigenen Keyframe-Animationen zu experimentieren . Versuchen Sie nicht, genau das zu kopieren, was ich getan habe, und sehen Sie, was Sie sich einfallen können. In der Tat, wenn es um Ihre Keyframe-Animationen geht, möchten Sie vielleicht viele weitere Schritte einschließen, als ich hier getan habe. Ich habe nur einen Startschritt Art und Weise Fertigschritt, aber Sie möchten vielleicht einige Zwischenschritte mit Ihrer Keyframe-Animation haben. Aber spielen Sie ein Spiel um und sehen, was Sie zufrieden sind. 14. Dein Projekt teilen: Sobald Sie Ihre letzte Arbeit auf GitHub Desktop festgeschrieben und weitergegeben haben, gehen Sie in Ihr Konto auf github.com und klicken Sie dann in Ihr Repository. Also meine nennt man deftones-transitions. Dann werden Sie Ihre Quelldateien sehen. Ich habe meinen Bilderordner, wir haben meine Indexdatei, meine Stile hier unten. Rechts hier können wir sehen, dass es acht Commits gab. Wenn ich darauf klicke, können Sie die Liste der Commits aus früheren Lektionen sehen, und die letzte war die Tasten-Keyframe-Animation. Das ist alles gut. Das ist alles anwesend und gut. Wenn es darum geht, Ihre Seite auf GitHub Pages zu veröffentlichen, müssen Sie in die Einstellungen gehen. Dann scrollen wir nach unten bis zum Ende der Seite. Sie werden sehen, dass GitHub Pages hier ist. Aber es heißt, ich kann dies noch nicht veröffentlichen, weil ich sicherstellen muss , dass das Repository öffentlich ist und es derzeit auf privat eingestellt ist. Unten unten steht, ändern Sie die Sichtbarkeit des Repositorys. Dieses Repository ist derzeit privat. Ich werde das ändern, und ich werde das öffentlich machen. Um dies zu bestätigen, ist es, was ich tun möchte, es heißt, bitte geben Sie und dann meinen Repository-Namen, also meinen vollständigen Namen, und dann deftones-Übergänge. Zur Bestätigung, ich verstehe, und ich möchte die Sichtbarkeit des Projektarchivs ändern. Lasst uns das machen. Jetzt ist dies auf die Öffentlichkeit eingestellt. Wenn wir zurück nach unten zu GitHub Pages scrollen, können Sie hier einige Optionen sehen. Erstens, die Quelle. Wir müssen GitHub sagen, welchen Zweignamen wir GitHub Pages betrachten wollen. Wir haben unsere Arbeit auf den Hauptzweig gedrängt, also werde ich das hier auswählen. Dann ist in der Wurzel des Verzeichnisses, so können wir das so lassen, wie es ist und ich werde auf Speichern klicken. Sobald dies zulässt, lassen Sie uns zurück in den Bereich scrollen und es sagt, Ihre Website ist bereit, veröffentlicht zu werden, und es gibt uns eine schöne URL hier. Wenn wir dies überprüfen, ist es vielleicht noch nicht fertig, aber das liegt daran, dass GitHub Pages einige Minuten dauern wird , um Ihre letzte Arbeit zu veröffentlichen. Lassen Sie uns dies öffnen, öffnen Sie eine neue Seite in einer neuen Registerkarte, sorry, lasst uns darauf klicken. Eigentlich ist alles veröffentlicht und bereit zu gehen. Alle unsere Animationen sind hier, alle unsere Übergänge sind hier, und das ist die URL für meine veröffentlichte einseitige Website. Ich ermutige Sie, die URL zu Ihrer veröffentlichten GitHub Pages Website zu teilen und vielleicht über die Übergänge zu schreiben , die Sie hinzugefügt haben, indem Sie dies alles zum Projektabschnitt der Klasse hinzufügen. Nun, dies wird mir erlauben, Ihnen Feedback und Anregungen zu geben. Ich ermutige Sie auch, mit den anderen Schülern zu interagieren, damit Sie sich gegenseitig etwas unterstützen können. Natürlich, wenn Sie irgendwelche Fragen haben oder irgendwelche Tipps benötigen, dann lassen Sie es mich wissen. Ich bin offensichtlich glücklich, Ihnen zu helfen. 15. Zusammenfassung: Herzlichen Glückwunsch zum Abschluss dieses Kurses. Sie haben es geschafft, mit mir zu folgen und Ihre ganz eigene einseitige Website voller Übergänge und Animationen zu erstellen . Sie sollten nun ein ziemlich anständiges Verständnis der verschiedenen Aspekte von CSS-Animationen und Übergängen haben , die Sie jetzt in Ihren zukünftigen Webprojekten nutzen können. Hoffentlich wirst du genau das tun. Sie können jetzt viel mehr als Webentwickler anbieten und Ihre neuen gefundenen Fähigkeiten bei der Erstellung dynamischer Websites demonstrieren. Abschließend möchte ich Ihnen ein großes Dankeschön sagen, dass Sie sich für diesen Kurs angemeldet haben. Es bedeutet wirklich viel. Ohne Ihre Unterstützung wäre ich nicht in der Lage, solche Inhalte zu machen. Ich hoffe wirklich, Sie haben etwas aus diesen Lektionen gelernt. Ich hoffe wirklich, dass Ihnen dieser Kurs gefallen hat, und wenn Sie es getan haben, nehmen Sie sich bitte die Zeit, eine Kursübersicht zu hinterlassen, es macht wirklich einen großen Unterschied. Mit diesem Gesagten, vielen Dank, jetzt gehen Sie fort und Code.