CSS-Regenwolken-Animation

1. Einführung in den Kurs: Also das werden wir heute in diesem Kurs bauen. Wir werden diese wunderschöne Regenwolke bauen. Wie Sie sehen können, erzeugt Harry einen wunderschönen Regenwolkeneffekt. Sie können feststellen, dass Regentropfen aus der Wolke fallen und sie nach dem Fall in den Boden verschwunden sind Wir werden es heute in dieser Klasse bauen. Hallo. Mein Name ist John Sharkar und ich bin Ihr Ausbilder für dieses Projekt Dieses wunderschöne CSS-Animationsprojekt wäre eine großartige Ergänzung für Ihr Portfolio Hier müssen wir eine Wolke mit CSS erstellen und wir müssen auch diese Regentropfen erstellen und wir müssen diese Regentropfen auch rötlich fallen lassen Das werden wir in diesem Projekt erstellen. Wenn Sie daran interessiert sind zu lernen, lassen Sie uns anfangen. 2. Erstellen der Cloud mit CSS: Schön, dass ihr wieder da seid, Leute. Dies ist das erste Tutorial dieses Projekts, und in diesem Tutorial werden wir die Cloud erstellen. Im ersten Teil dieses Tutorials werden wir diese wunderschöne Cloud mit CSS erstellen. Um diese Art von Wolkenform zu erstellen, werden wir Posido-Klassen verwenden, wie vor der Posido-Klasse Lassen Sie uns, ohne zu viel zu reden, in den Code-Editor von Result Studio springen und das Projekt starten Wie Sie sehen können, öffne ich Seite an Seite meinen Result Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung und erstelle bereits eine Indexpunkt-TML-Datei Ich erstelle auch eine Style-Dot-CSS-Datei. Wie Sie sehen können, verknüpfen wir unsere Style-Datei mit diesem HTML-Dokument Wie Sie wissen, müssen wir mit der TMS-Struktur beginnen. Zuerst werde ich einen Container erstellen , der Cloud und Ring enthalten wird Ich werde einen Punktcontainer der Klasse D erstellen. Wie Sie sehen können, erstellen wir eine Klasse namens Container, und dann werde ich in diesem Container Dev Cloud erstellen. Hier werde ich eine weitere De Dev Cloud erstellen. Ich werde diese Datei einrichten. Jetzt gehe ich in den Style-Bereich, die Style-Dot-CSS-Datei . Zuerst wähle ich die Dokumentseite mit Universal Select aus, also gebe ich Stern ein. Dann heißt es in Cali, dass ich zuerst die Margin-Eigenschaft verwenden werde Marge Null. Damit werde ich auch Padding, Padding, also Zero verwenden Padding, also Zero Dann verwende ich die Boxgrößeneigenschaft, Boxgröße, und hier verwende ich Water Box V. Standardmäßig gibt es in diesem Dokument keinen Rand zu spät Jetzt werde ich unseren Bodytag stylen. Hier werde ich den Körper binden. Dann werde ich in der Cali-Resis zuerst diese Eigenschaft verwenden, Display-Flex Und als Nächstes verwende ich Justify content, Justify content center Außerdem müssen wir eine andere Eigenschaft verwenden, nämlich Elemente ausrichten. IMs mittig ausrichten. Wenn du dich mit Flexbox und Greed noch nicht auskennst, dann kannst du dir meinen Kurs ansehen Dann werde ich die Mindesthöhe für diese Seite angeben. Also um Mean Height, Mean Height, 100 VH einzugeben. Unsere nächste Eigenschaft ist Background. Hintergrund, und ich werde Hintergrundfarbe sagen. Ja, ich werde etwas Dunkelgraues sagen. Dunkelgrau. Ich möchte etwas dunklere Farbe. Ich wähle diese Farbe, diese, und ich werde diese Datei einstellen. Diese Farbe ist zum Beispiel gut, und Sie können Ihre eigene Farbe wählen. Und jetzt müssen wir den Container-Bereich gestalten. Ich werde diesen Container-Klassennamen kopieren. Und hier werde ich Dot Container eingeben. Dann ist innerhalb der Coli-Res unsere erste Eigenschaft die Position. Position, wirklich. Außerdem werde ich Höhe für diesen Container sagen, Höhe etwa 400 Pixel. Ich werde diese Seite einstellen. Jetzt müssen wir den Cloud-Teil entwerfen. Um also den Klassennamen Cloud und dann einen Container zu kopieren, bin ich Slate Dot Cloud. Im Inneren der Kelche ist unsere erste Eigenschaft die Position, die Beziehung zur Position. Ich werde es auch in der Höhe zu dieser Wolke mit 320 Pixeln sagen dieser Wolke mit 320 Pixeln Und Höhe, 100 Pixel. Dann stelle ich die Hintergrundfarbe Hintergrund ein und verwende weißen Hintergrund. Dafür verwende ich den Hexadezimalwert mit dem Tag F. Wenn ich diese Datei einstelle, entsteht, wie Sie sehen können, ein Rechteck und wir müssen ihr eine runde Form geben Aus diesem Grund werde ich die Eigenschaft Border Radius verwenden. Grenzradius, Grenzradius, 100 Pixel. Legen wir die Datei und C fest. Außerdem werde ich sie von oben positionieren. Hier verwende ich die Top-Eigenschaft, die obersten 50 Pixel. Ich werde diesen so einstellen, dass er die Form einer Wolke Wir müssen den Posius-Selektor verwenden Hier werde ich vorher einen Posius-Selektor für die Wolke, die Wolke und den Doppelpunkt erstellen Doppelpunkt Dann werde ich innerhalb des Alivs Blank erstellen, der im Grunde genommen bland enthält, ich werde eine Kopie dieser Wolke erstellen Die nächste Eigenschaft ist Position, Position, und dieses Mal verwende ich Absolute Obsolt. Als Nächstes möchte ich diese neue Cloud an diese Position verschieben Dafür müssen wir die Eigenschaft top -50 Pixel verwenden. Dann werde ich mich in die Höhe dieser Wolke begeben. Wir 110 Pixel. Außerdem werde ich Höhe, Höhe und auch 110 Pixel einstellen . Und dann werde ich die Hintergrundfarbe einstellen. Hintergrund und als Hintergrundfarbe werde ich auch Weiß einstellen. Ich werde diese Datei einstellen. Jetzt müssen wir ihm eine runde Form geben. Dafür müssen wir den Grenzradius verwenden. Grenzradius, 50%. Ich werde diesen einstellen. Um es in die Mitte zu legen, müssen wir die Lippenseite des Kreises verschieben. Hier verwende ich die Eigenschaft lit, it, p 40 Pixel. Wenn ich zufrieden bin, können Sie das Ergebnis sehen. Jetzt müssen wir hier eine weitere Kreisform erstellen , um eine perfekte Wolke zu erstellen. Dafür werde ich einen soliden Boxschatten erstellen . Lass mich dir zeigen, wie. Hier verwende ich Box Shadow Property, Box Shadow. Zuerst müssen wir diesen Schatten positionieren. Von oben gebe ich 90 Pixel an. Von rechts gebe ich Null. Von unten gebe ich ebenfalls Null und von links gebe ich 30 Pixel. Und zum Schluss werde ich diesem Boxschatten eine Volltonfarbe geben . Also hier tippe ich , hat Tag, weiße Farbe, wenn wenn ob. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, erstellen wir mit DML und CSS die perfekte Wolkenform Im nächsten Teil dieses Projekts werden wir Folgendes erstellen Also danke, dass du dir dieses Video angesehen hast. Wir sehen uns im nächsten Teil. 3. Regentropfen erstellen und mit CSS animieren: Das ist also der letzte Teil dieses Tutorials. In diesem Abschnitt werden wir die Regentropfen erstellen und um die Regentropfen zu erstellen, werden wir die Hilfe von CSS-Variablen Außerdem werden Sie die Hilfe der CSS-Calc-Funktion in Anspruch nehmen CSS-Calc-Funktion in Anspruch Kehren wir also zum Visual Studio-Code-Editor zurück. Im vorherigen Teil haben wir erfolgreich die Cloud erstellt. Aber in diesem Teil werden wir die Regentropfen erstellen. Also, ohne Ihre Zeit zu verschwenden, lassen Sie uns damit beginnen. Zuerst werde ich ein tiefes Etikett erstellen , das Regentropfen enthalten wird Tiefer Punkt RL. Wie Sie sehen können, erzeugen wir ein tiefes Element mit Regenklasse. Dann werde ich in diesem tiefen Element mehrere Span-Tags für unsere Regentropfen erstellen Hier, in diesem Deep-Tag, werde ich ein Span-Tag erstellen Dann werde ich das Style-Attribut in diesem Planstil verwenden. Hier werde ich CSS-Variablen verwenden. Ich weiß, es klingt etwas fortgeschritten, aber es ist ziemlich effektiv, eine CSS-Variable zu löschen, wir müssen den Sinus von Papa verwenden Lassen Sie mich Ihnen zeigen, wie Bindestrich und unser Variablenname I lautet. Dann müssen wir Doppelpunkt verwenden Dann müssen wir Cold verwenden , um unsere Variable zu setzen. Nach dem Doppelpunkt müssen wir den Wert angeben. Als Wert gebe ich hier eine Zufallszahl ein, etwas 11. Insgesamt werde ich 20 Regentropfen verwenden, aber Sie können so viel verwenden, wie Sie möchten Ich werde diese Zeile duplizieren. Und hier werde ich 12 bestehen. Andererseits werde ich diese Zeile duplizieren , hier werde ich zehn überschreiten. Sie können eine Zufallszahl verwenden, jede beliebige Zufallszahl. Es ist eine Zehn. Da dupliziert es noch einmal. Und hier werde ich 14 verwenden. Dann wieder werde ich 18 verwenden. Lassen Sie uns diesen Abschnitt zuerst weiterleiten, um Ihre Zeit zu sparen. Und dann werde ich diesen Arbeitsabschnitt erneut duplizieren. Ich kreiere 20 Regentropfen mit dem Span-Tag. Wenn ich diese Datei einstelle, wie Sie sehen können, ist hier nichts verloren. Jetzt müssen wir die Regentropfen in unserer SSS-Datei stylen. Ich möchte den Klassennamen Reign in unsere Style-Datei kopieren, ich werde diese Klasse auswählen, Dann ist unsere erste Eigenschaft im Calibra die Position, die relative Position Unsere zweite Eigenschaft ist Display, Display Flex. Und unsere dritte Eigenschaft ist der Z-Index. Z Index eins. Jetzt müssen wir die Regentropfen stylen. Dafür müssen wir den Tag rain und Span auswählen. Dafür müssen wir Span Tag, Punkt, Regen, Space, Span auswählen . Innerhalb der Aliase ist dann unsere erste Eigenschaft die relative Position Unsere nächste Eigenschaft ist Höhe, Höhe, zehn Pixel, ebenfalls Breite, zehn Pixel Jetzt werde ich unseren Tropfen die Farbe des Farbdiagramms zuordnen. Hier verwende ich die Diagrammeigenschaft, Hintergrund rot. Lassen Sie uns die Datei einrichten und sehen, was passiert ist. Wenn ich diese Datei einstelle, sieht sie, wie Sie sehen können, wie eine Staatsgrenze aus. Aber das sind alles 20 Regentropfen. Lassen Sie uns unseren Regen etwas aufpolstern. Hier verwende ich die Eigenschaft Padding, Padding. Zuerst verwende ich für oben und unten Null und für links und rechts 20 Pixel Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dann müssen wir einen gewissen Spielraum zwischen den Regentropfen schaffen. Dafür müssen wir die Margin-Eigenschaft verwenden. Marge. Für oben und unten verwende ich Null und von links und rechts verwende ich zwei Pixel. Jetzt können Sie sehen, dass unsere Regenpunkte perfekt angeordnet sind, und jetzt müssen wir die runde Form der Regenpunkte beibehalten runde Form der Regenpunkte , sodass wir die Eigenschaft Randradius verwenden müssen. Also hier werde ich Grenzradius eingeben. Grenzradius, 50%. Lassen Sie uns die Datei einrichten und Sie können das Ergebnis sehen. Jetzt wird es gesendet, um die Animation zu erstellen. Also werde ich Animation mit Animationseigenschaften verwenden. Und unser Animationsname ist animate. Und unsere Animationsdauer beträgt fünf Sekunden. Außerdem ist die Richtung linear. Endlich müssen wir die Anzahl der Animationsiterationen angeben, die unendlich ist, weil ich den Bereich unendlich verfolgen möchte Fügen wir nun den Keyframe zu dieser Animation hinzu. Ich tippe in die roten Keyframes, unser Animationsname ist Dann verwende ich in den Kelchen zuerst bei einer Position von 0% die Transformationseigenschaft, transformieren und ich möchte diese roten Punkte nach unten bewegen Deshalb müssen wir Translate Y verwenden. Translate Y. Ich möchte unsere Rotpunkt-Animation bei einer Position von 0% starten Deshalb übergebe ich Null. In ähnlicher Weise werde ich diese Linie duplizieren und bei einer Position von 70% möchte ich sie um 300 Pixel nach unten verschieben Deshalb werde ich 300 überschreiten. Auch bei einer Position von 100% möchte ich 300 Pixel verwenden. Lassen Sie uns die Datei einstellen und sehen, ob sie richtig funktioniert hat oder nicht. Wie Sie sehen können, funktionieren Animationen perfekt und wir übersetzen die Y-Eigenschaft Ich möchte die Skalierungseigenschaft verwenden. Bei einer Position von 0% skalieren, ich möchte sie einmal skalieren. Dann möchte ich es bei einer Position von 70% noch einmal skalieren, aber bei einer Position von 100% möchte ich es auf Null skalieren. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Wie Sie sehen können, sind unsere Regentropfen, wenn sie in den Boden fallen, verschwunden nicht wieder zur alten Position zurückgekehrt, da wir den Skalenwert Null bei einer Position von 100% verwenden Deshalb ist es verschwunden, als es auf den Boden gefallen ist. Jetzt müssen wir die Ausgangsposition der Transformation ändern. Hier verwende ich Transform Ors und ich verwende Bottom Weight. Scannen Sie dann den wichtigsten Teil dieses Projekts. Hier kannst du sehen, wie die Regentropfen zusammen fallen, aber ich möchte nicht, dass Regentropfen so fallen Ich möchte, dass die Regentropfen nacheinander nach dem Zufallsprinzip fallen. Und um das zu tun, müssen wir mit der Eigenschaft der Animationsdauer spielen Wenn wir die Animationsdauer ändern, alle Regentropfen nacheinander nach dem Zufallsprinzip Wenn Sie sich erinnern, wie Sie in meiner ML-Datei sehen können, erstellen wir unser Span-Tag mit einer Variablen und unsere Variable lim ist I und wir setzen einen zufälligen Wert für diese Variable, 16, 11, 12 usw. Ich werde diesen Zufallswert verwenden, um tatsächlichen Regen zu erzeugen. Kommen wir zur CSS-Datei und hier verwende ich die Eigenschaft Animationsdauer , Animationsdauer. Außerdem werde ich die Kels-Funktion verwenden , eine Funktion von CSS. Ich möchte 15 Sekunden wir oder Variable I teilen. Hier gebe ich ein, wo dann innerhalb der Rundkleider unsere Variable N ist, um Variable auszurufen, wir müssen Bindestriche verwenden, dann I. Wenn ich diese Datei setze, können Sie jetzt sehen, dass unsere Regentropfen zufällig fallen Ich sehe sehr hübsch aus und jetzt sieht es aus wie echte Regentropfen. Wir müssen die Farbe der Regentropfen ändern, und dafür werde ich weiße Farbe verwenden Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie perfekt funktioniert. Unser Projekt ist fast fertig, wir müssen den Boden anlegen und um einen Teil des Bodens in Death Place anzulegen, müssen wir das Grundstück Border Bottom nutzen. Wir müssen hier einen Container finden . Ich gebe Border Bottom ein. Und ich werde einen Rahmen mit zwei Pixeln verwenden. Außerdem möchte ich eine Volltonfarbe für unseren Rand, einfarbig, und unser Rand ist weiß, wenn überhaupt Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem müssen wir die Regentropfen vom Boden entfernen die Regentropfen vom Boden Also hier werde ich die unteren zehn Pixel eingeben. Nachdem ich diese Datei eingestellt habe, hat sie jetzt perfekt funktioniert. So haben wir unser Rainy Cloud-Animationsprojekt erfolgreich abgeschlossen . Wenn Ihnen dieses Projekt gefällt, vergessen Sie bitte nicht , Ihre Vov-Bewertung abzugeben Ich danke dir sehr.