Animation CSS de nuage pluvieux

1. Introduction du cours: C'est donc ce que nous allons construire aujourd'hui dans cette classe. Nous allons construire ce magnifique nuage pluvieux. Comme vous pouvez le constater, Harry crée un bel effet de nuage pluvieux. Vous pouvez remarquer que des gouttes de pluie tombent du nuage et qu'elles disparaissent après être tombées dans le sol Nous allons le construire aujourd'hui dans cette classe. Bonjour Je m'appelle John Sharkar et je suis votre instructeur pour ce projet Ce magnifique projet d'animation CSS serait un excellent ajout à votre portfolio. Ici, nous devons créer un cloud en utilisant CSS et nous devons également créer ces gouttes de pluie et faire tomber de façon rouge C'est ce que nous allons créer dans ce projet. Si vous souhaitez en savoir plus, commençons. 2. Créer le cloud en utilisant CSS: C'est bon de vous revoir, les gars. Il s'agit du premier tutoriel de ce projet, et dans ce tutoriel, nous allons créer le Cloud. Dans la première partie de ce tutoriel, nous allons créer ce magnifique cloud en utilisant du CSS. Pour créer ce type de forme de nuage, nous allons utiliser les classes Posido, comme avant la classe Posido Sans trop parler, passons dans l'éditeur de code Result Studio et démarrons le projet. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Result Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un fichier TML à points d' index Je crée également un fichier CSS à points de style. Comme vous pouvez le constater, nous associons notre fichier de style à ce document TML Comme vous le savez, nous devons commencer par la structure du TMS. Dans un premier temps, je vais créer un conteneur qui contiendra Cloud et Ring. Je vais créer un conteneur de points de classe D. Comme vous pouvez le voir, nous créons une classe nommée container, puis dans ce conteneur Dev, je vais créer Cloud. Ici, je vais créer un autre De Dev Cloud. Je vais configurer ce fichier. Je vais maintenant passer à la section style, fichier css style point. Dans un premier temps, je vais sélectionner la page du document à l'aide de la sélection universelle. Je vais donc taper étoile. Ensuite, à l'intérieur du Cali, il est dit que je vais d'abord utiliser la propriété de marge Marge zéro. Avec cela, je vais également utiliser rembourrage, un rembourrage, également zéro Ensuite, je vais utiliser la propriété de dimensionnement de la boîte, la taille de la boîte, et ici je vais utiliser la boîte à eau V. Par défaut, il n'y a aucune marge en retard sur ce document Maintenant, je vais styliser notre body tag. Ici, je vais attacher le corps. Ensuite, à l'intérieur de la résine Cali, je vais d'abord utiliser cette propriété, display display flex Ensuite, je vais utiliser Justify content, Justify content center. Nous devons également utiliser une autre propriété, aligner les éléments. Alignez le centre iMS. Si vous n'êtes pas familier avec Flexbox et la cupidité, vous pouvez consulter mon cours Ensuite, je vais dire hauteur minimale pour cette page. Donc, pour taper hauteur moyenne, hauteur moyenne, 100 VH. Notre prochaine propriété est en arrière-plan. Fond, et je vais dire couleur de fond. Oui, je vais dire quelque chose de gris foncé. gris foncé. Je veux une couleur plus foncée. Je sélectionne cette couleur, celle-ci, et je vais définir ce fichier. Cette couleur est bonne par exemple, et vous pouvez choisir votre propre couleur. Et maintenant, nous devons styliser la section du conteneur. Je vais copier le nom de cette classe de conteneur. Et ici, je vais taper point container. Ensuite, à l'intérieur du coli res, notre première propriété est la position. Position, vraiment. De plus, je vais dire hauteur de ce conteneur, hauteur d'environ 400 pixels. Je vais choisir ce côté. Nous devons maintenant concevoir la partie cloud. Donc, pour copier le cloud de noms de classe puis un conteneur, je suis Slate point Cloud. Ensuite, à l'intérieur des calices, notre première propriété est la position, la relation Je vais également le dire à la hauteur de ce nuage de 320 pixels. Et hauteur, 100 pixels. Ensuite, je vais définir la couleur d' arrière-plan, l'arrière-plan et je vais utiliser un fond blanc. Pour cela, je vais utiliser une valeur hexadécimale, une balise F. Si je définis ce fichier, comme vous pouvez le voir, il crée un rectangle et nous devons lui donner une forme ronde. C'est pourquoi je vais utiliser la propriété border radius. Rayon de bordure, rayon de bordure, 100 pixels. Réglons le fichier et C. Je vais également le positionner par le haut. Ici, je vais utiliser la propriété supérieure, les 50 premiers pixels. Je vais configurer celui-ci pour lui donner la forme d'un nuage, nous devons utiliser le sélecteur Posius Ici, je vais créer un sélecteur de posius pour le cloud, le cloud, les deux-points avant Ensuite, dans les alives, je vais créer Blank contain bland, en gros, je vais créer une copie de La propriété suivante est position, position, et cette fois, je vais utiliser Absolut Obsolt Next, je veux déplacer ce nouveau cloud vers cette position Pour cela, nous devons utiliser to property, top -50 pixels. Ensuite, je vais me mettre à hauteur de ce nuage. Nous 110 pixels. De plus, je vais régler la hauteur, hauteur, également 110 pixels. Ensuite, je vais définir la couleur de fond. Fond et pour la couleur de fond, je vais également définir le blanc. Je vais configurer ce fichier. Nous devons maintenant lui donner une forme ronde. Pour cela, nous devons utiliser le rayon de bordure. Rayon de bordure, 50 %. Je vais régler celui-ci. Pour le placer au milieu, nous devons déplacer ce cercle du côté de la lèvre. Ici, je vais utiliser la propriété lit, it, p 40 pixels. Si je suis satisfait, vous pouvez voir le résultat. Maintenant, nous devons créer une autre forme de cercle pour créer un nuage parfait. Pour cela, je vais créer une ombre de boîte solide. Laissez-moi vous montrer comment faire. Ici, je vais utiliser la propriété box shadow, box shadow. Dans un premier temps, nous devons positionner cette ombre. À partir du haut, je vais donner 90 pixels. À partir de la droite, je vais donner zéro. En partant du bas, je vais également donner zéro et en partant de la gauche, je vais donner 30 pixels. Enfin, je vais donner une couleur unie à cette ombre en forme de boîte. Donc ici, je vais taper, avec une étiquette, de couleur blanche, si c'est le cas. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, nous créons une forme de nuage parfaite en utilisant le DML et le CSS Dans la prochaine partie de ce projet, nous allons créer in. Merci donc d' avoir regardé cette vidéo. Rendez-vous dans la prochaine partie. 3. Créer les gouttes de pluie et les animer en utilisant CSS: Il s'agit donc de la dernière partie de ce didacticiel. Dans cette section, nous allons créer les gouttes de pluie et pour créer les gouttes de pluie, nous allons utiliser des variables CSS Et vous allez également prendre l'aide de la fonction de calcul CSS Revenons donc à l'éditeur de code de Visual Studio. Dans la partie précédente, nous avons réussi à créer le Cloud. Mais dans cette partie, nous allons créer les gouttes de pluie. Alors, sans perdre votre temps, commençons. Dans un premier temps, je vais créer une balise profonde qui contiendra des gouttes de pluie Point profond RL. Comme vous pouvez le constater, nous créons un élément profond avec une classe de pluie. Ensuite, à l'intérieur de cet élément profond, je vais créer une balise d' envergure multiple pour nos gouttes de pluie Ici, à l'intérieur de cette balise profonde, je vais créer une balise span. Ensuite, je vais utiliser l' attribut style dans ce style de plan. Ici, je vais utiliser des variables CSS. Je sais que cela semble un peu avancé, mais c'est assez efficace pour effacer une variable CSS, nous devons utiliser dads sine Laissez-moi vous montrer comment est le tiret et le nom de notre variable I. Ensuite, nous devons utiliser deux points. Ensuite, nous devons utiliser le froid pour définir notre variable. Après deux points, nous devons fournir la valeur. Pour la valeur ici, je vais taper un nombre aléatoire, quelque chose 11. Au total, je vais utiliser 20 gouttes de pluie, mais tu peux en utiliser autant que tu veux Je vais dupliquer cette ligne. Et voilà, je vais passer 12 ans. Encore une fois, je vais dupliquer cette ligne ici, je vais en passer dix. Vous pouvez utiliser un nombre aléatoire, n'importe quel nombre aléatoire. C'est un dix. Là, dupliquez-le une fois de plus. Et ici, je vais utiliser 14. Encore une fois, je vais utiliser 18. Transférons d'abord cette section pour gagner du temps. Ensuite, je vais dupliquer à nouveau cette section de travail. Je crée 20 gouttes de pluie en utilisant le tag span. Si je configure ce fichier, comme vous pouvez le voir, rien n'est refuge ici. Nous devons maintenant styliser les gouttes de pluie dans notre fichier SSS. Je veux copier le nom de classe reign dans notre fichier de style, je vais sélectionner cette classe, Reg. Ensuite, à l'intérieur du Calibra, notre première propriété est la position, la position relative Notre deuxième propriété est display, display flex. Et notre troisième propriété est l'indice Z. Un index. Maintenant, nous devons coiffer les gouttes de pluie. Pour cela, nous devons sélectionner les balises rain et Span. Pour cela, nous devons sélectionner span tag, point, rain, space, span. Ensuite, à l'intérieur des alias, notre première propriété est la position relative Notre propriété suivante est hauteurénith, hauteur, dix pixels, également largeur, dix Maintenant, je vais donner la couleur du diagramme à nos gouttes. Ici, je vais utiliser la propriété du diagramme, fond rouge. Configurons le fichier et voyons ce qui s'est passé. Si je définis ce fichier, comme vous pouvez le voir, il ressemble à une ligne d'état. Mais ce sont toutes 20 gouttes de pluie. Ajoutons un peu de rembourrage à notre pluie. Ici, je vais utiliser la propriété de rembourrage, le rembourrage. abord, pour le haut et le bas, je vais utiliser zéro, et pour la gauche et la droite, je vais utiliser 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ensuite, nous devons créer une marge entre les gouttes de pluie. Pour cela, nous devons utiliser la propriété de marge. Marge. En haut et en bas, je vais utiliser zéro et de gauche à droite, je vais utiliser deux pixels. Vous pouvez maintenant voir que nos points de pluie sont parfaitement organisés, et maintenant nous devons conserver la forme ronde des points de pluie ce dont nous avons besoin pour utiliser la propriété du rayon de bordure. Donc ici, je vais taper le rayon de la bordure. Rayon de bordure, 50 %. Réglons le fichier et vous verrez le résultat. Maintenant, il est envoyé pour créer l'animation. Je vais donc utiliser l'animation par propriété d'animation. Et le nom de notre animation est animate. Et la durée de notre animation est de cinq secondes. De plus, la direction est linéaire. Enfin, nous devons fournir le nombre d'itérations de l'animation, qui est infini parce que je veux suivre la plage dans le temps infini Ajoutons maintenant l'image-clé à cette animation. Je tape sur les images-clés rouges notre nom d'animation est animate Ensuite, à l'intérieur des calices, d' abord à une position de 0 %, je vais utiliser la propriété de transformation, transformer et je veux déplacer ces points rouges vers le bas C'est pourquoi nous devons utiliser translate Y. Translate Y. Je souhaite démarrer notre animation de points rouges à partir de la position 0 % C'est pourquoi je passe zéro. De même, je vais dupliquer cette ligne et à 70% de position, je veux la déplacer de 300 pixels vers le bas. C'est pourquoi je vais dépasser les 300. Également à 100% de position, je souhaite utiliser 300 pixels. Réglons le fichier et voyons s' il fonctionne correctement ou non. Comme vous pouvez le voir, l'animation fonctionne parfaitement et nous traduisons la propriété Y, je souhaite utiliser la propriété scale. Echelle à une position de 0 %, je veux la redimensionner une fois. Ensuite, à 70 % de position, je veux le redimensionner une fois de plus, mais à 100 % de position, je veux le redimensionner à zéro. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Comme vous pouvez le constater, lorsque nos gouttes de pluie tombent dans le sol, elles disparaissent. Nous ne revenons pas à l' ancienne position, car nous utilisons une valeur d'échelle nulle à 100 % de position C'est pourquoi il a disparu lorsqu'il est tombé au sol. Nous devons maintenant modifier la position d'origine de la transformation. Ici, je vais utiliser transform ors et je vais utiliser le poids inférieur. Scannez ensuite la partie la plus importante de ce projet. Ici, vous pouvez voir les gouttes de pluie tomber ensemble, mais je ne veux pas tomber des gouttes de pluie comme ça Je veux que les gouttes de pluie tombent une par une, au hasard. Et pour cela, nous devons jouer avec la propriété de durée de l'animation. Si nous changeons la durée de l'anivation, toutes les gouttes de pluie tombent une par une Si vous vous souvenez, comme vous pouvez le voir dans mon fichier ML, nous créons notre balise span avec variable et notre variable lim est I et nous avons défini une valeur aléatoire pour cette variable, 16, 11, 12, etc. Je vais utiliser cette valeur aléatoire pour créer de la pluie réelle. Passons au fichier CSS et ici, je vais utiliser la propriété de durée de l'animation , la durée de l'animation. Je vais également utiliser la fonction Kels, qui est une fonction du CSS Je veux diviser 15 secondes nous ou variable I. Ici, je vais taper où, dans les rondresses, notre variable N est I pour appeler variable, nous devons utiliser le tiret, puis I. Si je place ce fichier, vous pouvez voir que nos gouttes de pluie tombent Je suis très jolie et maintenant ça ressemble vraies gouttes de pluie dont nous avons besoin pour changer la couleur des gouttes de pluie, et je vais utiliser du blanc pour Si je configure ce fichier, vous pouvez maintenant le voir fonctionner parfaitement. Notre projet est presque terminé, nous devons créer le terrain et pour créer une partie du sol dans le lieu du décès, nous devons utiliser la propriété border bottom. Nous devons trouver un conteneur ici, je vais taper border bottom. Et je vais utiliser une bordure de deux pixels. Et aussi, je veux une couleur unie pour notre bordure, unie, et notre couleur de bordure est blanche, si Si je configure ce fichier, vous pouvez voir le résultat. Et aussi, nous devons retirer les gouttes de pluie du bas Donc ici, je vais taper les dix derniers pixels. Après avoir défini ce fichier, il fonctionne parfaitement. Nous avons donc mené à bien notre projet d'animation Rainy Cloud. Si vous aimez ce projet, n' oubliez pas de fournir votre avis sur Vov Merci beaucoup.