Animation CSS et GSAP : parcours débutant à avancé

1. Introduction du cours: Bonjour et bienvenue dans le cours CSS and GSP Animation, Bane to Advanced Journey Il s'agit du cours le plus détaillé et le plus complet sur l'animation CSS. Il. Je m'appelle John Shorter, Full Stew PP Park et instructeur en ligne Voyons maintenant ce que nous allons apprendre de ce cours. Nous allons commencer ce tutoriel avec le filtre CSS. Ensuite, nous allons apprendre la transition CSS, la fonction de synchronisation de transition, le délai de transition, puis nous allons passer à la section de transformation. Ici, nous allons apprendre à faire pivoter, à traduire, à dimensionner et à fausser les métriques Ensuite, nous allons apprendre la transformation en trois D, la translation trois D, l'échelle, la rotation, etc. Ensuite, nous allons apprendre la partie la plus importante, la perspective. Ensuite, nous allons modifier le style de transformation, la visibilité dans le backspace, puis nous allons passer à la section d'animation de Sess, images clés, façon dont nous pouvons faire fonctionner l'animation, etc. Ensuite, nous avons l'animation gular, le remplissage, le mode collage. Après avoir appris toutes les propriétés d'animation Sess, nous allons démarrer l'animation GSP Oui, comme je vous l'ai dit, nous allons apprendre l'animation complète. Dans ce tutoriel, je couvre également l'animation GSP. Dans les deux premiers didacticiels, nous allons présenter comment utiliser l'animation DSP et comment nous pouvons l'implémenter Ensuite, nous allons découvrir la chronologie GSP, comment nous pouvons utiliser la chronologie GSP Ensuite, nous allons créer un projet à l'aide de l'animation chronologique GSP Ensuite, un par un, je vais aborder plusieurs projets d'animation CSS, tels que le lien animé, flip à trois D O, etc. Permettez-moi de vous montrer la démonstration pratique, type de projet que nous allons aborder dans ce cours. Il s'agit de notre premier projet dans lequel je vais créer un simple bouton animé. Si je passe le curseur sur ce bouton, vous pouvez voir la transition. C'est une question très simple. Ensuite, nous allons créer ce bouton de survol en trois D. Si je passe mon curseur dessus, vous pouvez le voir appuyer sur le bouton, et c'est écrit, cliquez ici Cliquez, si je passe mon curseur dessus, comme vous pouvez le voir, appuyez sur le bouton Il s'agit d'un bouton rabattable à trois D, et vous pouvez également remarquer les trois défauts. Ensuite, nous allons créer du texte animé dans un tableau. Ici, vous pouvez voir l'effet de clignotement de la lumière. Vous pouvez également voir le Shan. Ce texte est t. Ici, vous pouvez taper n'importe quoi. Supposons « bonjour ». C'est l'un des effets les plus cool que j'ai jamais vus. Ensuite, nous allons créer ces animations animées. W va suivre mon curseur. Comme vous pouvez le voir, lorsque je me déplace avec le curseur, selon la position du curseur, il suit les lignes. Chaque fois que je passe le curseur au-dessus du mot, cela change la réaction physique. Ensuite, nous allons créer ce cercle à trois DV. Vous pouvez voir le mouvement des cercles. Lors du prochain projet, nous allons créer l'animation de la couche D. Si je passe le curseur sur ce I, vous pouvez voir le résultat. Vous pouvez remarquer les couches transparentes situées en dessous. Si une dette contractée par le curseur revient à nouveau dans son assiette. Lors du prochain projet, nous allons créer cette animation en rotation en trois dimensions. Comme vous pouvez le voir, il s'adaptait à la roue. Nous allons créer ce type de projet. Ensuite, nous allons créer cette animation de nuages pluvieux. Comme vous pouvez le voir sur ce nuage, la façon dont les gouttes de pluie tombent et tombent en haut dans le sol est variable. Et nous allons créer cette animation de chargement. Il s'agit d'une animation. Enfin, nous allons réaliser cette animation chronologique horizontale à l'aide de GSA Oui, nous allons également aborder le GSAP dans ce didacticiel. Nous allons créer un projet à l'aide de GSA, une animation de chronologie horizontale, et comment allez-vous remarquer la transition de cette chronologie Qu'est-ce que tu attends ? Commençons l'animation ensemble. 2. Tutoriel sur le filtre CSS partie 1: Bonjour, les gars, c'est bon de vous revoir. Il s'agit de la première animation CSS liée au didacticiel, et nous allons commencer ce didacticiel en utilisant la propriété du filtre CSS. À l'aide du filtre, nous pouvons modifier les effets d'image, et nous avons un total de 12 effets que nous pouvons utiliser dans notre image. Le nom de notre premier effet est « none ». Si vous ne souhaitez utiliser aucun effet, vous pouvez utiliser cette propriété. Et en utilisant la propriété floue, vous pouvez flouter votre image Et en utilisant la valeur de luminosité, vous pouvez réduire ou augmenter la luminosité. Pour le contraste, vous pouvez utiliser la valeur de contraste, et la valeur rompue fonctionne comme l'ombre de cette image Et en utilisant la valeur d'échelle, nous pouvons afficher notre image en noir et blanc Et en utilisant la rotation, vous pouvez remplir différentes couleurs avec différents angles. Et notre prochaine valeur est l'inversion. Si vous vous souvenez de l' ancienne règle de la caméra, vous pouvez comprendre l'effet très facilement. Notre valeur suivante est l'opacité. En utilisant la valeur d'opacité, nous pouvons contrôler la transparence de cette image Si vous souhaitez contrôler la saturation de cette image, vous pouvez utiliser la valeur de saturation. Si vous souhaitez que votre image soit plus colorée ou moins colorée, vous pouvez utiliser cette valeur. Notre valeur suivante est CFA, et notre dernière valeur est URL Cette valeur d'URL fonctionne avec des images SVD. Dans ce tutoriel, je vais aborder ces six effets. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon studio Viso Cortor et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document estil dans mon répertoire de travail actuel Comme vous pouvez le voir dans mon navigateur, il y a une image, et j' insère déjà cette image en utilisant le tag S. Comme vous pouvez le voir dans ma section sur le style, nous disons 600 pixels huit pour cette image, et une hauteur ou deux, et je vais utiliser tout ce filtre dans cette image. Les effets jouent un rôle très important dans l'animation CSS. C'est pourquoi je commence ce tutoriel avec les effets CSS. Dans un premier temps, je vais utiliser la propriété du filtre. Filtre. Notre première valeur est zéro. Si je définis ce fichier, vous pouvez voir ici n' y a aucun changement, il n' y a aucun changement dans cette image. Parce qu'il s'agit de la valeur par défaut de cette propriété et que notre prochaine valeur est flou Donc, pour nouer Blur. Supposons que je veuille brouiller cette image jusqu'à quatre pixels. Si je mets cette image, vous pouvez voir le résultat ici. Si vous souhaitez le rendre plus flou, vous pouvez augmenter la valeur Supposons 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. La valeur par défaut de cette propriété de flou est zéro. Si j'utilise une valeur nulle puis que je définis ce fichier, vous pouvez voir le résultat ici. Maintenant, notre image est clairement visible. Il s'agit de la valeur de l'âge d'utilisation du flou, et notre prochaine valeur est la luminosité 100 est la valeur de luminosité par défaut, 100 %. Cette valeur fonctionne avec un pourcentage. Si je sauvegarde ce fichier, vous pouvez voir qu'il n'y a aucun changement, et maintenant je veux réduire la luminosité de 20 %. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Cela réduit la luminosité de cette image. Si vous souhaitez revenir à la luminosité normale, vous devez passer 100. Si je le règle, vous pouvez voir le résultat. Si vous souhaitez augmenter la luminosité de cette image, vous devez transmettre une valeur supérieure à 100 %. Supposons que je passe les 300 %. Si je configure ce fichier, vous pouvez voir le résultat. Si nous passons à 0 % de luminosité puis que nous définissons le fichier, vous pouvez le voir ici, maintenant il est complètement noir. Passons à la valeur suivante, qui est le contraste. Donc, pour taper, contraste. Cent est la valeur habile du contraste, 100 %. Si je configure ce fichier, vous pouvez voir le résultat. Si vous souhaitez augmenter le contraste de cette image, vous devez transmettre la valeur supérieure à 100 %. Supposons 200 %. Si j'ai configuré ce fichier, vous pouvez maintenant voir le contraste. Si vous souhaitez diminuer le contraste, vous devez passer en dessous de 100 %, 50 %. Si je configure ce fichier, vous pouvez voir le contraste. Si nous passons une valeur de 0 % puis que nous définissons le fichier, vous pouvez maintenant voir qu'il n'y a aucun contraste dans cette image. IE p 0%, comme vous pouvez le voir, notre image devient grise. Notre valeur suivante est Drop Shadow. Mais avant d'utiliser cette valeur, je vais réduire l'image. 400 pixels. Cette valeur est similaire à la propriété box shadow. Tout d'abord, nous devons fournir une ombre horizontale. Je vais fournir dix pixels. C'est pour la direction de l'axe X. Ensuite, nous devons fournir une ombre verticale. Pour l'axe y, je vais à nouveau dépasser dix pixels. Ensuite, je vais passer le flou de l'ombre, qui est de sept pixels Ensuite, nous devons passer la couleur de l'ombre. Je vais utiliser la couleur verte. Si je place ce fichier, vous pouvez voir le résultat ici. Vous pouvez également modifier le caractère sanglant de l'ombre. AI plus, zéro pixel, puis définissez le fichier. Maintenant, vous pouvez le voir agir comme une ombre solide. De plus, vous pouvez utiliser valeur négative dans ce paramètre. Supposons que je veuille cette ombre moins la direction y x. Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit de l'effet d'ombre des offres d'emploi au Royaume-Uni, et notre dernière valeur est l'échelle de gris. Laisse-moi te montrer. Échelle de gris. Grâce à cet effet, nous pouvons convertir notre image couleur en image en noir et blanc. 0 % est la valeur par défaut de ce paramètre d'échelle de gris. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Mais si j'utilise 100% puis que je configure le fichier, vous pouvez maintenant voir que cette image a complètement transformé cette image en noir et blanc. N'oubliez pas que nous devons transmettre une valeur comprise entre zéro et 200 %, pas plus de 100 Vous pouvez utiliser n'importe quelle valeur entre ces Supposons que je veuille passer les 70 %. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, l'image est remplie de 70 % de gris et de 30 % de couleur. C'est tout pour ce tutoriel. Dans le prochain tutoriel, je vais aborder les filtres restants. Il fait pivoter, inverser, opacité, saturation, sépia Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 3. Tutoriel sur le filtre CSS partie deux: Bonjour les gars, c' est bon de vous revoir. Il s'agit de la deuxième partie du didacticiel sur les filtres CSS. Dans ce tutoriel, nous allons aborder ces six filtres Il fait pivoter, inverser, opacité, saturer, Spa et URL Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon Visual Studio Coreor et mon navigateur à l'aide de l'extension Live Sever, et j'ouvre mon précédent document estel pour Dans un premier temps, je vais appeler le filtre des propriétés du filtre. Notre première valeur est la rotation. Et ici, vous pouvez utiliser une valeur de 023 à 60 degrés. Je vais passer 150 degrés DEG, puis définir ce fichier, ici vous pouvez voir le résultat Si je passe les 100 degrés et que je règle ce fichier, vous pouvez voir le résultat différent. En utilisant cette valeur, vous pouvez essayer une combinaison à 360 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Il n'y a aucun paramètre négatif pour cette valeur. Passons à la valeur suivante, qui est inversée. Tapez donc invert Si je définis ce fichier, vous pouvez voir ici qu'il inverse complètement l'image, et nous pouvons passer le paramètre zéro à cent pour cent Supposons que je veuille dépasser les 0 %. Si je définis ce fichier, vous pouvez voir ici qu'il s'agit de la valeur différente de cette propriété Si je passe 50 %, puis que je définis le fichier. Si nous utilisons une valeur de 50 %, elle est maintenant complètement transformée en gris. Si j'augmente la valeur, quelque chose de 70%, et que je définis ce fichier. Vous pouvez maintenant voir le résultat. Cela inverse toujours notre image, mais vous pouvez voir la couche grise dessus De même, si je réduis la valeur en dessous de 50 %, quelque chose de 20 %, puis que je définis le fichier, comme vous pouvez le voir, cela n'inverse pas complètement l'image Il s'agit de la jauge d'utilisation de la valeur inversée. Notre valeur suivante est l'opacité. Comme vous pouvez le voir, notre image est maintenant entièrement visible, et maintenant je veux rendre cette image transparente. Pour cela, nous devons utiliser la valeur d'opacité. Si je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement car nous ne fournissons aucun paramètre dans cette valeur. Maintenant, je veux rendre cette image semi-transparente, donc je veux fournir 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Si vous rendez cette image complètement transparente, vous devez passer 0 %. Si je définis ce fichier, les images existent toujours à cet endroit, mais nous l'avons rendu complètement transparent. Si vous rendez cette image complètement visible, vous devez transmettre une valeur de 100 %. J'espère que vous pouvez maintenant comprendre cette valeur, comment elle fonctionne. J'espère que vous pouvez maintenant comprendre la valeur de l'opposition, comment elle fonctionne Notre prochaine valeur est saturé. Cette valeur va fournir de l' intensité aux pixels de couleur. Donc, pour taper saturate. À l'aide de cette valeur, vous pouvez contrôler l'intensité de cette couleur. Cent est la valeur par défaut de cette propriété, 100 %. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement, et maintenant je veux saturer cette couleur Je veux passer les 200 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir le changement de couleur, et si vous voulez la désaturer, vous devez transmettre une valeur inférieure à 100 %, soit 70 %. Si je définis ce fichier, vous pouvez maintenant voir la couleur de l' image très terne. Si je passe une valeur de 0 % puis que je définis le fichier, vous pouvez maintenant voir cette image complètement transformée en une image en niveaux de gris, c'est-à-dire une image en noir et blanc. J'espère que vous comprenez maintenant ce qu'est saturé. Notre valeur suivante est le CFA. Donc, pour égaliser le CFA. Ce filtre vous donne le look vintage de cette image. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez passer un paramètre compris entre zéro et 200 %. Si je passe 0 % puis que je définis ce fichier, vous pouvez maintenant voir l'image réelle. Si j'augmente la valeur 50 % puis que je définis le fichier, vous pouvez voir ici qu'il applique un effet CFA à cette image, et 100 est la valeur de cette propriété n'existe aucune valeur négative ni aucune valeur en pixels pour cette propriété. La dernière valeur est URL. Pour cela, vous devez connaître les images SVG. Si vous n'avez pas de connaissances de base animation SVG ou en image SGD, vous pouvez consulter mon cours Ce cours est disponible sur cette plateforme. Accédez simplement à mon profil d'instructeur et vous trouverez ce cours. Dernière chose que je veux dire, supposons que vous souhaitiez appliquer plusieurs effets à cette image. Supposons que vous souhaitiez d'abord utiliser l'effet sanguin sur cette image. Je veux donc taper le sang au pixel près. Ensuite, je veux appliquer un effet PR à cette image. PR, 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant je veux augmenter la luminosité de cette image. Luminosité, 200 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez ajouter autant d' effets que vous le souhaitez. J'espère que ce concept de filtre CSS est maintenant clair pour vous. Dans la prochaine version d'essai, nous allons comprendre ce que sont les transitions CSS. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain Tual 4. Tutoriel de transition CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre un nouveau CSS lié aux propriétés, la transition CSS. Il s'agit de l'une des propriétés les plus importantes de l'animation CSS. La question qui se pose maintenant est la suivante : qu'est-ce que la transition ? La transition est synonyme de douceur. Supposons que vous souhaitiez modifier la position d'un objet. Dans le cas contraire, vous souhaiterez augmenter la largeur de l'objet. Permettez-moi de vous montrer l'exemple. Comme vous pouvez le voir dans mon document d' estimation, nous avons au total deux D, et je souhaite augmenter la largeur lorsque je survole mon objet rouge, et j'ai déjà défini une transition dans cet objet Si je passe le curseur sur cet objet, vous pouvez voir le résultat Vous pouvez voir que chaque fois que le conteneur augmente la largeur, vous pouvez voir un effet de lissage. Si nous n'utilisions pas l'effet de transition, le travail serait effectué en une seule fois. Ensuite, vous ne pouvez pas voir le lissage lorsque la largeur augmente C'est pourquoi nous devons utiliser la transition. De même, pour notre prochain objet, nous réduisons le rayon de la bordure au-dessus de l'objet. Laisse-moi te montrer. Comme vous pouvez le constater, il y a une belle transition. Si nous n'utilisons pas cette transition, cela se fera en une seule fois. Cela se ferait en un clin d'œil dans votre I. Pour des raisons de fluidité, nous devons utiliser cette transition Parlons des propriétés. Fondamentalement, la transition comporte cinq propriétés. Transition, propriété de transition, durée de transition, délai de transition et fonction de synchronisation de transition. En gros, notre première propriété est à la limite de toutes ces propriétés. Si vous souhaitez utiliser ces quatre propriétés sur une seule ligne, dans ce cas, vous ne pouvez utiliser que la propriété de transition. Fondamentalement, notre première propriété est la propriété de transition. En utilisant cette propriété, nous pouvons spécifier où souhaitez-vous utiliser ces transitions ? Supposons que je veuille utiliser cette transition pour le rayon de bordure. Sinon, W. Dans ce cas, nous devons déclarer le nom de la propriété, quelque chose comme propriété de transition, rayon de bordure, sinon, propriété de transition, W. Notre propriété suivante est la durée de transition. Dans cette propriété, vous pouvez spécifier la durée pendant laquelle vous souhaitez exécuter l'animation. Notre prochaine propriété est le délai de transition. Nous utilisons cette propriété pour déterminer quand la transition va commencer, et notre dernière propriété est la fonction de temporisation de la transition. Cette propriété a des effets intégrés. Et à l'aide de ces effets, vous pouvez contrôler la fluidité de cette transition. C'est ça. Étudions la pratique et voyons comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon visoto Cortor et mon navigateur en utilisant l'extension Lipseer, et j'ai déjà créé un document eSTIML nommé index point nommé Vous pouvez voir ici un aperçu de l' intérieur de ce document. Et la hauteur de profondeur est de 200 pixels et W est également de 200 pixels, et je n'utilise aucun effet Hva dans cette définition. Et maintenant, je veux augmenter cette profondeur. Je vais donc d'abord utiliser la propriété de transition. Propriété de transition. Comme je vous l'ai dit, je veux augmenter le gain. Je vais appeler la propriété width. Avec cette propriété, nous devons utiliser une autre propriété. Nous devons utiliser la propriété de durée de transition , la durée de transition. En utilisant cette propriété, nous pouvons déclarer la durée pendant laquelle nous voulons exécuter cette transition, et je souhaite exécuter notre animation pendant 2 secondes. Je vais taper deux a. Vous pouvez prendre votre propre valeur. Sinon, vous pouvez également utiliser la milliseconde. Lorsque je passe le curseur dans ce D, je souhaite augmenter la largeur du conteneur Je vais utiliser des pseudoclas. Pointez un point avec le pointeur de deux points. Ensuite, à l'intérieur des étalonnages, je souhaite augmenter la largeur du récipient Tapez donc avec 400 pixels. Si je définis ce fichier, si je le place et que je passe mon curseur à cette profondeur, vous pouvez voir la transition, et vous pouvez voir la fluidité de cette De même, si je survole mon curseur, vous pouvez également voir le lissage Voyons ce qui se passe si je supprime la transition. Je vais commenter ces deux propriétés. Si je place ce fichier et que je passe mon curseur dans cette case, vous pouvez voir le résultat n'y a pas de lissage quand on augmente la largeur Il suffit d'un clin d'œil terminer la transformation C'est pourquoi nous devons utiliser la propriété de transition. Parce que cela donne un bel effet de douceur à cette transformation Comme vous pouvez le constater, nous appliquons simplement cette transition dans notre largeur. Mais si j'augmente la hauteur dans notre sélecteur de survol, hauteur, 350 pixels Et puis définissez ce fichier. Si je survole mon curseur, comme vous pouvez le voir, il suffit de clignoter dans votre Iy pour augmenter la hauteur Mais vous pouvez toujours voir l'effet de lissage en largeur. Si vous souhaitez ajouter le même effet pour la hauteur, après largeur, virgule, vous devez taper le nom de la propriété, hauteur. Vous devez également déclarer la durée de cette transformation. Je veux utiliser trois secondes. Si je place ce fichier et que je passe mon curseur dessus, vous pouvez voir le résultat La transformation de largeur O est terminée en deux secondes, mais notre transformation de hauteur est terminée en trois secondes. Non seulement cela, nous pouvons appliquer le même effet pour la couleur de fond. Certains à taper, arrière-plan, vert. Nous devons également appeler cette propriété background, height, coma, background. Pour le contexte, je veux utiliser quatre secondes. Si je configure ce fichier, et quels que soient mes cursus dans ce fichier, vous pouvez voir qu'il m'a fallu quatre secondes pour changer de couleur Il s'agit de l'utilisation de la propriété de transition et de la durée de transition Maintenant, je veux utiliser toute cette valeur sur une seule ligne. Je vais commenter ces deux lignes, et maintenant je vais parler uniquement de transition. Je vais maintenant utiliser toute la valeur sur une seule ligne. Je vais copier les valeurs et les coller ici. De plus, je vais copier les valeurs de durée, et après un espace, je vais les coller. Si je place ce fichier et que je place ma voiture dans cette profondeur, vous pouvez voir tous les effets en même temps En utilisant cette propriété, nous pouvons en faire une doublure. C'est le bout court de toute cette propriété. Dans un premier temps, vous devez déclarer les noms des propriétés de transition, puis vous devez déclarer la durée de la transition. Supposons maintenant que vous souhaitiez utiliser durée de transition de deux secondes pour l'ensemble de cette transformation. Dans ce cas, vous pouvez taper tous les cheveux en double, et vous ne devez passer qu'une seule durée, deux secondes. Il va maintenant appliquer l'effet de transition, toutes ces propriétés. Si j'enregistre ce fichier et que je place le curseur M et le curseur Hob dans ce de, vous pouvez voir le résultat. Dans le même temps, il applique la douceur de la hauteur, de la largeur et de l'arrière-plan Si vous souhaitez utiliser la même durée pour tous ces effets, vous pouvez utiliser ce raccourci, C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons parler de la fonction de synchronisation des transitions. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 5. Tutoriel de la fonction de synchronisation de transition CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce tutoriel, nous allons parler de la fonction de synchronisation des transitions. Grâce à cette fonction, vous pouvez contrôler la fluidité de cette transition Voici quelques valeurs courantes liées à la fonction de synchronisation de transition, is linear, is, is out, is in out, bic baser. Nous avons également trois autres valeurs, mais celles-ci ne sont pas si importantes. Notre première valeur est qu'il s'agit d'une valeur par défaut. Spécifiez un effet de transition avec un démarrage lent, puis d'abord, puis une fin lente. Notre valeur suivante est linéaire et indique un effet de transition à la même vitesse du début à la fin. Du début à la fin, il a maintenu la même vitesse. Notre prochaine valeur est in. Spécifiez un effet de transition avec un démarrage lent, et notre valeur e out jouera le rôle inverse de is in. Spécifiez un effet de transition avec une fin lente, et notre prochaine valeur de temporisation sera e in out. Spécifiez un effet de transition avec un début et une fin lents, et notre dernière valeur est cubique. Définissons vos propres valeurs dans une fonction de base cubique Vous pouvez définir vos propres valeurs de chronométrage. Sans ces six valeurs, nous en avons trois autres, à savoir début de l'étape, la fin de l' étape et les étapes. Elles ne sont pas si importantes, mais il est bon de les connaître. Voyons comment cela fonctionne dans la pratique. Ici, vous pouvez le voir, j'ouvre un site web Q week pens.com. Vous pouvez voir ici un exemple en temps réel de ces valeurs. Es linear e in is out et e in out. Dans un premier temps, je vais augmenter la durée, la durée à une seconde. Ensuite, je vais commencer cet exemple avec la valeur par défaut. E. Si je clique sur le bouton Go, vous pouvez voir le résultat. Notre valeur suivante est linéaire. Si je clique sur le bouton Go, vous pouvez voir le résultat. valeur linéaire maintient la même vitesse du début à la fin, puis entre en jeu. Si je clique sur le bouton Go, vous pouvez voir le résultat. Et puis sortez. Si je clique sur le bouton Go, vous pouvez voir le résultat, et notre dernière valeur est. Oui, dans l'entrée/sortie spécifiée, l'effet de transition est spécifié avec un début et une fin lents Permettez-moi de vous donner un autre exemple. Comme vous pouvez le voir, il existe cinq d différents, et j'utilise cinq valeurs de fonction de chronométrage différentes pour eux. Si je parie que mes voitures sont toutes cet article, vous pouvez voir le résultat. C'est pour le linéaire, c' est pour e, et c'est pour. C'est pour moi, et c'est pour. J'espère que vous comprenez la différence. Passons au créateur de Visual Studio et voyons comment nous pouvons l'utiliser Comme vous pouvez le voir sur votre écran, j'ouvre côte à côte mon Visual Studio Cortor et mon navigateur en utilisant l'extension Lipsever, et mon navigateur en utilisant l'extension Lipsever, j'ai déjà créé un document eSTIML nommé index point eSTIML nommé Comme vous pouvez le voir, j'ai déjà créé d pour cet exemple. Dans notre précédent tutoriel, nous allons en apprendre davantage sur la propriété et la durée de la transition Mais dans ce didacticiel, nous allons apprendre la fonction de synchronisation des transitions Je vais donc appeler cette propriété. Fonction de synchronisation de transition. Commençons par la pratique avec la valeur par défaut, qui est E. Donc, tapez, es. Si je sauvegarde ce fichier et que je passe mon curseur dessus, vous pouvez voir le résultat Cet effet de transition commence par lent, puis d'abord, puis se termine par lent. Il s'agit de la valeur par défaut, et la valeur suivante est linéaire. Certains linéaires. Si je sauvegarde ce fichier et que je passe mon curseur dessus, vous pouvez voir le résultat Cet effet de transition a maintenu la même vitesse du début à la fin, et notre valeur suivante est in. D'une manière ou d'une autre, taper c'est dedans. Si j'enregistre ce fichier et que je place mon curseur dans la profondeur, je spécifie un effet de transition avec un démarrage lent De même, nous avons une valeur opposée, c'est-à-dire que nous sortons. Un peu de root est sorti. Si je place ce fichier et berm cars dans cette case, comme vous pouvez le voir, spécifiez un effet de transition avec une fin lente Notre valeur suivante est in out. Une partie de la racine est sortie. Si je place ce fichier, et encore une fois, que je place M voitures dans ce d, vous pouvez voir le résultat Il définit un effet de transition avec un début et une fin lents. Parlons d'une autre valeur, les étapes. Certains tapent des étapes Ici, nous pouvons terminer notre transition par étapes. Supposons que je souhaite effectuer cette transition en deux étapes. Je voudrais en passer deux ici. Si je place ce fichier et que j'enfonce mes voitures dans cette profondeur, vous pouvez voir le résultat Comme vous pouvez le voir en deux étapes, il complète la transition. je retire mon curseur, vous pouvez voir le même effet. En deux étapes, il termine la transition, et maintenant je veux terminer cette transition en cinq étapes. Si je place ce fichier et que je passe mon curseur dans cette case, vous pouvez voir le résultat En cinq étapes, il complète la transition. Il s'agit de la valeur du quas d'étapes d'utilisation. La plupart du temps, nous essayons d'éviter cette valeur. Nous n'utilisons pas ce val. Mais à des fins éducatives, vous devez avoir des connaissances à ce sujet. Notre valeur suivante est le démarrage par étapes. Je vais donc taper, Step, start. Si je place ce fichier et que je place mon curseur dans cette profondeur, vous pouvez voir en une seule étape qu'il termine l'animation Mais si j'utilise la valeur de fin d'étape, Steve, end et que je définis ce fichier, je survole mon curseur, mon animation démarrera au bout de 2 secondes. Laisse-moi te montrer. Je vais donc placer mon curseur dans cette profondeur Comme vous pouvez le constater, l'animation démarre pendant deux secondes l'animation démarre pendant et termine la transition en une seule étape. C'est le cas d'utilisation de la valeur de fin d'étape. Passons à la dernière valeur, qui est une base cubique. Tapez donc Cubic Baser. Dans Cuba Basier, vous pouvez réaliser l'animation en quatre étapes Lorsque nous utilisons la valeur du pas, n' y a aucune fluidité dans notre transition Mais dans Qubic Baser, nous pouvons maintenir la fluidité de la transition. Supposons que pour notre première étape, je prenne 0,5 seconde. Pour notre deuxième étape, je vais prendre 0,6 seconde, et pour notre troisième étape, je vais prendre 1 seconde. Pour notre quatrième étape, je vais prendre 0,1 seconde. Si je sauvegarde ce fichier et qu'Ober mes voitures sont dans le rouge, vous pouvez voir le résultat Cela a commencé lentement puis s'est terminé en premier. Pour notre premier arrêt, cela a pris 0,5 seconde, et pour notre deuxième Steve, cela a pris 0,6 seconde, et pour notre troisième Steve, cela a pris 1 seconde, et pour notre dernier arrêt, il a fallu 0,1 seconde. Il s'agit d'un cas cubique par rapport à une valeur. Vous pouvez modifier la durée comme vous le souhaitez. J'espère que vous comprenez maintenant ce qu' est la propriété de la fonction de synchronisation de transition. Dans notre prochain tutoriel, nous allons parler de la propriété du délai de transition. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 6. Tutoriel sur le retard de transition CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre ce qu'est la propriété du délai de transition. En gros, cela veut dire, après combien de temps souhaitez-vous commencer la transition ? Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir côte à côte, j'ouvre mon visa studio coreor et mon navigateur à l'aide de l'extension Lipseer, et j'ouvre mon précédent Utilisons la propriété du délai de transition. Je vais lier le délai de transition, et je vais transmettre une valeur de trois secondes, trois S. Si je définis ce fichier et les voitures Hoberm qui s'y trouvent, comme vous pouvez le voir, au bout de trois secondes, la transition démarre De même, si je supprime avec le curseur, comme vous pouvez le voir, jusqu'à trois secondes, la transition est terminée. Vous pouvez régler l' heure comme vous le souhaitez. C'est le cas d'utilisation de la fonction de retard de transition. Maintenant, je vais utiliser une version abrégée de toutes ces propriétés. Comme vous pouvez le constater, le total utilise quatre propriétés de transition : la propriété de transition, la transition, la durée, la transition, la fonction de synchronisation et le délai de transition. Je veux en faire une doublure. Pour cela, je vais d'abord commenter ces quatre propriétés de transition. Ensuite, je vais parler de la transition. Dans un premier temps, vous devez déclarer le nom de la propriété. Dans notre cas, w, sound, collez w ici. Ensuite, nous devons transmettre la valeur de durée de transition, qui est de deux secondes, deux A, puis fonction de synchronisation de transition, qui est ese. Et notre dernière valeur est la valeur du délai de transition, qui est de deux secondes. Maintenant, nous n'avons pas besoin d'utiliser ces quatre propriétés. Vous devez juste vous rappeler que nous devons suivre cette séquence. d'abord, propriété unité contre durée, puis unité contre durée, puis fonction de synchronisation unité contre plus, enfin unité contre délai. Si je place ce fichier et hobercur dans ce de, vous pouvez voir l'animation démarrer pendant deux secondes démarrer Comme vous pouvez le constater, cela a parfaitement fonctionné. Maintenant, je voudrais vous dire une chose importante. Il n'est pas nécessaire que nous utilisions la transition avec uniquement un sélecteur de survol Vous pouvez utiliser cette transition lorsque vous chargez votre page. Une autre chose que vous devez retenir, c'est que si nous ne déclarons pas la propriété dans notre cas, je vais donc faire un commentaire à ce sujet. Et puis définissez ce fichier, comme vous pouvez le voir, il ne fonctionnera pas correctement. Nous devons déclarer la propriété avant que vous ne l'utilisiez dans notre sélecteur Huber, et vous devez vous en souvenir Je vais maintenant utiliser cette transition avec différents pseudo-sélecteurs Tapez donc actif. Dans un premier temps, supprimons le délai. Ensuite, je vais configurer ce fichier. Si je survole mes voitures sont dans cette profondeur, comme vous pouvez le voir, cela ne fonctionne pas, car notre pseudo sélecteur est actif Nous devons appuyer sur Mouse Leak pour exécuter cette animation. Laisse-moi te montrer. Comme vous pouvez le voir, je continue d'appuyer sur bouton Leak de ma souris et mon animation est lancée. Lorsque notre souris malade est active, elle exécute l'animation. Sinon, ça ne marche pas. Voilà pour ce tutoriel. J'espère que toutes les propriétés de transition sont maintenant claires pour vous. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 7. Introduction de la transformation 2D dans CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce tutoriel, nous allons apprendre une nouvelle propriété , la transformation. En gros, nous allons nous concentrer sur la transformation. Dans un premier temps, voyons un exemple ce qu'il faut transformer. Vous pouvez voir ici deux exemples. Il s'agit de l'élément profond normal, et cet élément profond pivote de 20 degrés dans le sens des aiguilles d'une montre En utilisant la transformation, nous pouvons faire pivoter n'importe quelle profondeur, dans le sens des aiguilles d'une montre, sinon dans le sens inverse des aiguilles d'une montre De même, nous avons un autre exemple. Il s'agit de la profondeur normale, et cet élément profond est incliné de 20 degrés le long l'axe X et de 10 degrés le long de l'axe Y. Nous pouvons donc incliner notre élément, faire pivoter notre élément, redimensionner notre élément et bien d'autres choses encore Voyons quelles sont les valeurs d'une transformation en deux D. Comme vous pouvez le voir, nous avons une valeur totale de 11 en deux transformations en D. Traduisez, traduisez x, traduisez Y, faites pivoter, échelonner, échelonner X, échelonner y, Q, QX, QY, et notre dernière valeur est Nous avons une autre valeur, qui est la valeur par défaut, qui est none. En utilisant la propriété matrix, vous pouvez utiliser toute cette valeur sur une seule ligne. Dans cette présentation, je vais aborder ces quatre valeurs, traduire, traduire x, traduire y et faire pivoter. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur de studio visuel et mon navigateur en utilisant l'extension Lip Server. J'ai déjà créé un document estil nommé index point STL. Comme vous pouvez le voir, dans ma structure estil, j'ai déjà créé un élément Dep, et j'ai défini une largeur de 200 pixels et une hauteur de 100 pixels, et j'ai également défini la couleur d'arrière-plan et la bordure Dans un premier temps, je vais commencer cette transformation par une valeur de rotation. Donc, pourrissez transformer la propriété. Et je vais utiliser la valeur de rotation. Entre parenthèses, nous devons passer le paramètre de degré. Supposons que je veuille faire pivoter cet élément de 40 degrés. Je vais donc dépasser les 40 dg. Si je sauvegarde ce fichier, vous pouvez voir le résultat. De même, si je passe à 90 degrés puis que je sauvegarde ce fichier, comme vous pouvez le voir, notre élément profond pivote à 90 degrés. Notre valeur de rotation fait partie de deux transformations. Il ne fait pas que faire pivoter notre élément, il fait également pivoter notre contenu. Non seulement cela, vous pouvez également utiliser une valeur négative. Supposons que je veuille le faire pivoter de -60 degrés, -60. Si je configure ce fichier, vous pouvez voir le résultat. Si vous voulez inverser cette profondeur, vous pouvez utiliser moins 180 degrés, sinon 180 degrés. Si je configure ce fichier, vous pouvez le voir retourner notre élément. Il s'agit de l'âge d'utilisation de la valeur de rotation. Parlons de notre prochaine valeur, qui est la traduction. Je veux taper, traduire les cheveux. Et je vais configurer ce fichier. Comme vous pouvez le constater, il n'y a aucun changement. Maintenant, la question qui se pose est la suivante : quel est le sens de traduire ? La méthode translate déplace un élément par rapport à sa position actuelle. Comme vous pouvez le voir, il s'agit la position actuelle de cet élément, et je souhaite déplacer cet élément 100 pixels, dans la direction de l'axe x et dans la direction y x de 200 pixels. Dans ce cas, nous devons utiliser cette valeur, traduire. Au début, nous devons passer dans la direction x xs, puis nous devons passer dans la direction y x. Dans un premier temps, je souhaite déplacer cet élément dans le sens de 100 pixels x de l'axe. Je vais passer les 100 pixels. C'est pour le paramètre x xs. Ensuite, je veux déplacer cet élément, 50 pixels, direction y x. Je veux passer 50 px. Si je définis ce fichier, comme vous pouvez le voir, il déplace l'élément de sa position actuelle, selon le paramètre donné pour les x x et y xs. Dans le sens xxs, 100 pixels, et dans le sens y xs, 50 pixels Passons à la valeur suivante, qui est translate x. Donc, tapez, traduisez x et insérez les parenthèses, et insérez les parenthèses, nous n'avons besoin de transmettre qu'un seul paramètre, qui est le paramètre x xs Cette fonction permet de déplacer l' élément le long de l'axe X. Si je définis ce fichier, comme vous pouvez le voir, c'est la position exacte de cet élément car nous ne passons aucun paramètre ici. Maintenant, je veux déplacer cet élément, 200 pixels, direction x xs. Je vais dépasser les 200 ici, Px. Si je configure ce fichier, vous pouvez voir le résultat. De même, nous avons une autre valeur pour la direction yx. Donc, pour taper translate Y. Comme vous pouvez le voir, c'est la position exacte de cet élément, et maintenant je veux déplacer cet élément 100 pixels dans la direction y x. Donc, entre parenthèses, je vais passer 100 pixels Si je configure ce fichier, vous pouvez voir le résultat. Il déplace notre élément de 100 pixels dans la direction de y x. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, je vais aborder les propriétés de cette échelle, échelle, échelle x, échelle y. Merci d'avoir regardé cette vidéo. Merci d'avoir regardé cette vidéo, merci pour notre prochain tutoriel. 8. Échelle 2D de transformation CSS: Bonjour les gars, c' est bon de vous revoir. Il s'agit du deuxième didacticiel relatif à la transformation. Dans ce didacticiel, nous allons apprendre ces trois valeurs, échelle, échelle x et échelle y. Essayons de comprendre ce qu' est la mise à l'échelle et comment elle fonctionne. Supposons qu'il s' agisse de notre élément profond, ce soit la direction de sortie et la direction de l'axe Si vous souhaitez diminuer ou augmenter la taille de cet élément, vous devez dans ce cas utiliser une valeur d'échelle. Augmentons la taille de cet élément. Et pour augmenter la taille de cet élément, nous avons besoin de deux paramètres, paramètre xs et le paramètre y xs. Cette méthode de mise à l'échelle augmente ou diminue la taille d'un élément. Voyons comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir sur votre écran, j'ouvre côte à côte mon Viso Studio Cooror et mon navigateur à l'aide de l'extension Lipsear, et mon navigateur à l'aide de l'extension Lipsear, je crée déjà un index de documents d'estimation Essayons donc d'augmenter l'élément profond, 22 fois l'identifiant d'origine et trois fois la hauteur d' origine. Dans un premier temps, je vais appeler notre propriété Name transform. Transformez l'échelle. Dans un premier temps, nous devons transmettre la valeur de direction xs. Dans le sens x, je veux redimensionner cet élément deux fois, donc je veux en passer deux ici, et dans le sens de l'axe y, je veux le redimensionner trois fois. Je voudrais en passer trois ici. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il redimensionne notre élément, et il redimensionne également notre texte à l'intérieur de cet élément. De la même manière, vous pouvez réduire la taille de l'élément. Revenons à la position normale. Si je définis ce fichier, il a la taille normale de cet élément, et maintenant je veux réduire le poids et la hauteur de l'élément profond de moitié par rapport à son poids et à sa hauteur d'origine. Pour la direction de l'axe x, je vais passer 0,5. Pour la direction de l'axe y, je vais également passer 0,5. Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit de l'échelle de valeur d'échelle, et notre prochaine valeur est l'échelle x. Laissez-moi vous montrer. Revenons à la taille par défaut, et je vais appeler scale x, je vais définir ce fichier. Cette méthode x permet d'augmenter ou de diminuer la largeur d'un élément. Supposons maintenant que je veuille augmenter deux fois la largeur de l'élément profond. Dans ce cas, nous ne devons transmettre que la valeur x x, et je veux l' augmenter deux fois. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, la largeur augmente deux fois. Si vous souhaitez diminuer la largeur, vous devez passer une valeur comprise entre 0,1 et 0,9. Passe sonore 0,5. Si je configure ce fichier, vous pouvez voir le résultat. Cela diminue la largeur de cet élément. Revenons à la taille par défaut de cet élément. Maintenant, notre méthode suivante est scale y. Je vais taper scale y. Cette méthode d'échelle Y permet d' augmenter ou de diminuer la hauteur d'un élément Je veux augmenter la hauteur trois fois par rapport à sa taille d'origine. Je vais donc en passer trois ici. Si je configure ce fichier, vous pouvez voir le résultat. Et de la même manière, si vous souhaitez diminuer la hauteur, vous devez transmettre une valeur comprise entre 0,12 et 0,9 Ici, je vais passer 0,6, 0,6. Si je configure ce fichier, vous pouvez voir le résultat. Il a été réduit à la hauteur de cet élément. C'est le cas d'utilisation de la valeur mise à l'échelle. J'espère que vous comprenez maintenant comment cela fonctionne. Dans le prochain didacticiel, nous allons apprendre ces trois valeurs, Q, Q X et Q Y. Mais avant, nous allons apprendre une autre propriété, qui est l'origine de la transformation Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 9. Angle 2D de la transformation CSS: Bonjour les gars, c' est bon de vous revoir. Il s'agit de la troisième vidéo sur la transformation d'une étude CSS. Dans ce didacticiel, nous allons apprendre ces trois propriétés, Q, X et SQ Y. Cette méthode Qs un élément le long l'axe x et de l'axe y selon les angles donnés À l'intérieur de ce paramètre, nous devons passer des angles. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur so studio et mon navigateur en utilisant l'extension Lp Server, et je crée déjà un document eSTEML nommé index point Nous devons donc d'abord appeler le nom de propriété transform. Certains pour taper transform. Dans un premier temps, je vais commencer ce tutoriel avec la valeur Q x. Je vais passer Q x. Entre cette parenthèse, nous devons transmettre la valeur de l'angle En utilisant cette valeur, nous ne pouvons changer que la direction x xs. Si nous utilisons cette valeur à partir de ce point, cela changera l'angle. Supposons que je passe les 20 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, à partir de ce point, il faut un angle de 30 degrés. De même, vous pouvez également utiliser une valeur négative. Si je commence par -20 degrés, puis que je définis ce fichier. Comme vous pouvez le voir, à partir de ce point, il pivote dans le sens droit, et notre angle de rotation est également de 20 degrés. Mais dans ce cas, -20 degrés. Comme vous pouvez le constater, ce mouvement de rotation est uniquement dans la direction, non dans la direction de l'axe y. Revenons à la position par défaut, et je vais utiliser sk y value. Q, y. Maintenant, la rotation fonctionne dans le sens vertical. Si je passe 20 degrés ici, 20 DEG et que je place ce fichier, vous pouvez voir le résultat À partir de ce point, il s'est déplacé de 20 degrés dans la direction yx. En gros, il est déplacé vers le bas, et si vous voulez le déplacer vers le haut, vous devez passer une valeur négative. Si je passe à -20 degrés puis que je définis ce fichier, vous pouvez voir le résultat. J'espère que vous comprenez maintenant comment fonctionnent les propriétés Qx et Q y. Parlons de notre valeur suivante, qui est uniquement Q. abord, je vais revenir à la position par défaut, et je vais taper uniquement Q. Dans cette méthode, dans notre premier paramètre, nous devons passer un angle x xs, puis nous devons passer un angle y x. Au début, je vais passer un angle de 30 degrés x xs. Ensuite, je vais passer un angle de 20 degrés sur l'axe Y. Si je configure ce fichier, vous pouvez voir le résultat. Non seulement cela avec une valeur positive, vous pouvez également utiliser une valeur négative. Supposons que je veuille passer à -20 degrés dans la direction y x. Si je configure ce fichier, vous pouvez voir le résultat. Cela dépend de vous. Comment utiliser ces valeurs ? Parlons d' une autre propriété, qui est liée à la transformation, et le nom de cette propriété est transform origin. La question qui se pose maintenant est la suivante : quel est l'âge d'utilisation de la propriété d'origine de la transformation ? Cela vous permet de modifier la position de l'élément transformé. Qu'est-ce que cela signifie ? Supposons qu'il s'agisse de notre élément D. Si vous vous souvenez de la valeur de rotation, vous pouvez également vous souvenir du point de rotation, qui est le centre de cet élément. Ce point de rotation est situé au centre de x xs, également de y xs. Mais je ne veux pas faire pivoter mon élément à partir du point central. Je souhaite modifier le point de rotation. Je veux faire pivoter cet élément à partir de ce point, c'est-à-dire le coin supérieur De même, si je veux effectuer une rotation à partir de ce point, il s'agit de notre coin inférieur droit et de notre coin inférieur gauche C'est également notre coin supérieur droit. Vous pouvez prendre le point par son nom. Sinon, vous pouvez prendre une valeur en pourcentage ou en pixels. Si vous voulez prendre le point de rotation à l'intérieur de cet élément profond, quelque chose dans cette position, oui, vous le pouvez. Selon la position du point touché, vous devez prendre 20 % dans la direction de l'axe, et vous devez également prendre 30 % dans la direction de l'axe y. Juste une chose dont vous devez vous souvenir, en utilisant cette propriété, vous pouvez modifier la position de l'élément de transformation. Revenons au créateur de Visio Studio et voyons comment il fonctionne Comme vous pouvez le voir, c' est notre profondeur normale. Je fais pivoter cette profondeur de la position centrale à 20 degrés. Mais si je change la position de l' origine de la transformation à partir de ce point, une partie pour lier, transformer l'origine. Et je vais passer de la position gauche de l'axe X à la position supérieure de l'axe. Donc, pour passer au sommet. Avant de configurer ce fichier, je souhaite revenir à cette profondeur dans la position normale. Je vais commenter ces deux lignes. Si je place ce fichier, il revient à sa position normale. Maintenant, je vais décommenter ces lignes, et maintenant je vais configurer ce fichier, me concentrer sur ce coin Si je configure ce fichier, vous pouvez voir le résultat. À partir de ce coin, il passe à 20 degrés. Augmentons la valeur de rotation. Je vais donc taper, 80 degrés. Si je configure ce fichier, vous pouvez voir ce résultat. À partir de ce point, il pivote de 80 degrés. Revenons à la position par défaut. Encore une fois, je vais changer le point de rotation. Je vais donc taper en bas à droite. Maintenant, à partir de maintenant, il va faire pivoter notre élément. Si je configure ce fichier, vous pouvez voir le résultat. Le point d'origine de la rotation est maintenant ce point. Revenons à la position par défaut. Encore une fois, je vais changer la position d'origine de la rotation. Mais cette fois, je vais utiliser n'importe quel coin. Maintenant, je veux un point de rotation, quelque chose à cet endroit. la direction de l'axe X, je vais passer 20 %, et pour la direction de l'axe Y, je vais prendre 40 %. Si je configure ce fichier, vous pouvez voir le résultat. À partir de ce point, il fait pivoter l'élément de 80 degrés. Et si je passe la valeur x xs zéro et la valeur yx, 100, puis que je définis le fichier, je vais également changer l'angle de rotation, 20 degrés, puis redéfinir ce fichier, comme vous pouvez le voir, maintenant notre point de rotation est le coin inférieur du tour. Parce que dans le sens xs, nous utilisons une valeur nulle, mais dans le sens de l'axe y, nous utilisons une valeur de 100 %. C'est pourquoi notre point de rotation se situe dans le coin inférieur du tour. La question qui se pose maintenant est la suivante : quel est le cas d'utilisation de cette propriété ? Cette propriété est essentiellement utilisée pour l'animation. Comme vous le savez, il s'agit de notre tutoriel d'animation CSS. C'est pourquoi nous devons en apprendre davantage à ce sujet. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir notre prochaine valeur. Nous allons connaître notre dernière valeur, qui est metrix. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 10. Matrice 2D de transformation CSS: Bonjour, les gars, c'est bon de vous revoir. Il s'agit du dernier tutoriel relatif à la transformation. Dans cet essai, nous allons apprendre la valeur de la matrice. Maintenant, la question est : qu'est-ce que la matrice ? La méthode matricielle combine les deux méthodes de transformation en une seule. Cette méthode prend un total de six paramètres, contenant une fonction matricielle, qui vous permet de faire pivoter, de redimensionner , de déplacer et d'incliner des éléments Surtout si on n' utilise pas trop cet élément. Voyons donc comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mes vidéos à votre créateur et à mon navigateur à l'aide de l'extension Lipseer, et je crée déjà un document eSTIML nommé Index four Dans un premier temps, je vais appeler le nom de propriété transform, et je vais appeler notre matrice de valeurs. Dans un premier temps, nous devons transmettre la valeur de l'échelle x. Je vais en passer un. Dans notre direction excessive, je ne veux pas l'étendre. C'est pourquoi je transmets une valeur. Ensuite, nous devons transmettre la valeur du ciel. Je vais passer -0,3. Ensuite, nous devons transmettre la valeur Q x. Ici, je vais passer le zéro. Ensuite, nous devons transmettre la valeur de l'échelle y, et ici je vais en transmettre une. ne nous reste plus que deux paramètres, translate x et translate Y, pour translate x, je vais passer zéro, et pour translate y, je vais passer zéro. Si je définis ce fichier, comme vous pouvez le voir, cela fait simplement incliner notre élément profond de -0,3 degré Si vous souhaitez redimensionner cet élément deux fois, vous devez passer l'échelle x deux et l'échelle y deux. Si je configure ce fichier, vous pouvez voir le résultat. Avec Q, il redimensionne également notre élément. C'est le cas d'utilisation de cette méthode matricielle. Maintenant, utilisons les deux valeurs de transformation une par une avec effet de survol et essayons de créer une animation de survol Je vais commenter cette ligne, et dans un premier temps, je vais créer le pseudo sélecteur, D colon hover Ensuite, dans les calibrages, je vais utiliser la propriété transform, et je vais lier transform premier temps, je vais utiliser la valeur d'échelle, et je veux redimensionner cet élément globalement deux fois, donc je vais en passer deux ici. Si je place ce fichier et que je passe mon curseur sur cet élément de, vous pouvez voir le résultat Comme vous pouvez le constater, la transition est terminée en une seule étape . Pour que cette transformation soit fluide , nous devons utiliser la propriété de transition Je veux lier la transition ici, d'abord, nous devons déclarer le nom de la propriété et notre nom de propriété est transform. Ensuite, nous devons déclarer le temps de transition, qui est de 1 seconde. Si je place ce fichier et que je passe mon curseur sur cet élément de, vous pouvez voir la fluidité de cette transformation. Mais dans cet exemple, notre élément profond évolue à partir de la position centrale. Mais maintenant, je veux changer la position d'origine de la transformation. Je vais nouer, transformer l'origine. En haut à gauche. Si je place ce fichier, et quelles que soient mes voitures, dans cet élément profond, comme vous pouvez le voir, à partir de maintenant, il redimensionnera notre élément profond. Utilisons notre prochaine propriété de transformation en deux D, qui est translate. Certains pour dupliquer cette ligne, et je vais commenter la précédente. Ici, je vais nouer, traduire. Et je veux déplacer notre élément profond, 200 pixels, direction xs, et un pixel pt, direction yx. Si je sauvegarde ce fichier et que je l'enregistre dans cet élément profond, vous pouvez voir le résultat Il déplace notre élément profond, 200 pixels, direction de l'axe x, et un pixel point, direction yx. Utilisons la valeur suivante, qui est asymétrique. Encore une fois, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais égaler SQ. Et dans le sens I xs, je veux le faire pivoter de 20 degrés, et dans le sens y xs, je veux le faire pivoter de dix degrés. Si je définis ce fichier et que Hober Micers est dans ce deve, vous pouvez voir Comme vous le savez, notre origine de transformation est oubliée. Quand je fais du hober macers , vous pouvez voir J'espère que vous comprenez maintenant ce qu'est la transformation en deux dimensions et comment nous pouvons l' utiliser dans notre animation. Merci d'avoir regardé cette vidéo Dans notre prochain tutoriel, nous allons apprendre la transformation en trois D, réglage des états pour notre prochain didacticiel. 11. Tutoriel 3D de transformation CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons commencer une transformation en trois dimensions. Dans notre chapitre précédent, nous avons découvert la transformation en deux D. Mais dans ce chapitre, nous allons apprendre la transformation en trois dimensions. Sans transformation en trois dimensions, nous ne pouvons pas imaginer l'animation. Voyons donc les valeurs associées à la transformation en trois D. Comme vous pouvez le constater, nous avons totalisé dix transformations en trois D liées à la valeur Rotation x, rotation, rotation z, rotation trois, translation, translation trois, échelle trois D, échelle, prospective et matrice trois Dans la méthode de rotation x, nous devons transmettre la valeur de l'angle. De même, nous devons transmettre la valeur de l' angle pour la rotation y. Mais pour la méthode de rotation en trois D, nous devons transmettre un total de quatre paramètres, x, y, z et la valeur de l'angle. Dans ce didacticiel, nous allons aborder ces quatre méthodes rotation x, rotation, rotation et rotation trois D. Voyons comment ces méthodes sont utilisées dans un exemple réel. Comme vous pouvez le constater, nous avons un total quatre éléments D dans notre document. Et j'ai opté pour une valeur de rotation différente pour cet exemple. Si je survole l'élément rotation x d de mon curseur, vous pouvez voir la transformation De cette façon, la rotation x a fonctionné. Ici, nous utilisons la valeur de rotation x avec la prospective. Si nous utilisons la valeur de rotation x, cela trace une ligne dans la direction excessive de x entre ce point et ce point. Permettez-moi de vous montrer le véritable exemple. Supposons qu'il s'agisse d'un élément profond. Si j'utilise la valeur de rotation x, cela créera une ligne allant de ce point à ce point. Il s'agit de notre gamme Transform Origin. Si je passe une valeur positive, quelque chose de 40 degrés, alors fera pivoter notre élément de cette façon. Si je passe à -40 degrés, fera pivoter cet élément de cette façon Tu peux voir mon visage ? Absolument pas Mais si j'utilise un angle de 90 degrés, il va faire pivoter cet élément comme ceci. Maintenant, l'élément n'est pas correctement visible. Mais si je le fais pivoter de 180 degrés, vous pouvez maintenant voir la partie opposée de cet élément. De cette façon, la rotation des valeurs fonctionne. Parlons de notre prochaine valeur, qui est la rotation. Si les micas sont si profonds, vous pouvez en voir l'effet. Nous utilisons également la valeur prospective avec cela. Que vous puissiez facilement comprendre cette valeur. Si nous utilisons la valeur de rotation y, elle trace une ligne entre ce point et ce point, est-à-dire la direction y xs. C'est pourquoi nous l'appelons rotation Y. En utilisant la valeur de l'angle, vous pouvez la faire pivoter d'un site à l'autre, sinon du côté droit Voyons l'exemple, comment cela fonctionne. Si nous utilisons la valeur Y de rotation, cela tracera une ligne entre ce point ce point signifie la direction yx. Il s'agit de notre ligne d'origine, et par défaut, elle est toujours au centre. Si je passe un paramètre positif de 40 degrés, fera pivoter cet élément de cette façon. De même, si je passe à -40 degrés, cet élément fera pivoter cet élément de cette façon Si je fais pivoter cet élément de 90 degrés, l'ensemble de l'élément est maintenant moins visible et vous pouvez voir mon visage. Si je le fais pivoter de 180 degrés, vous pouvez voir la partie opposée de cet élément. Notre valeur suivante est la rotation Z. Si je passe mon curseur sur ce de, vous pouvez voir le résultat Il définit une rotation en trois D le long de l'axe Z. Voyons comment cela fonctionne. C'est l'exemple d'une rotation zx. Il définit une rotation en trois D le long de l'axe z, et par défaut, point d'origine est toujours au centre, et en utilisant une valeur positive ou négative, nous pouvons le faire pivoter de cette façon, sinon de cette façon. Notre dernière et dernière valeur est rotation trois d. Elle définit trois rotations complètes. Si je passe mon curseur sur ce deve, vous pouvez voir le résultat À la fin de cet exemple, je vais vous montrer comment cela fonctionne. Commençons par l'aspect pratique avec la rotation de la valeur x. Comme vous pouvez le constater, j'ouvre côte à côte mon curateur Visuo Studio et mon navigateur en utilisant l'extension de serveur Lip J'ai déjà créé un document eSTIML nommé demo Dot estiml. Comme vous pouvez le voir à l'intérieur d'un conteneur parent, je crée un conteneur-boîte et je définis une largeur d' augmentation similaire pour notre conteneur parent et pour notre conteneur enfant Pour le contenant parent, j'ai défini une couleur de fond gris, et pour le contenant pour enfant, j'ai défini une couleur de fond chocolat. Appelons la propriété transform et utilisons la valeur rotate x. Je vais appeler transform rotate x, et ici nous devons transmettre le paramètre d'angle de rotation. Je vais taper pour obtenir un diplôme. Si je place ce fichier, vous pouvez voir le résultat ici. Hé, cela a bien fonctionné, mais vous ne pouvez pas trop sentir le changement. Pour cela, je vais utiliser la prospective et la transition que vous pouvez comprendre très facilement. Je vais l'utiliser avec hover selector, point, box, colon, Ce sont les étalonnages, je vais appeler cela une propriété. Et je vais appeler transition property pour plus de fluidité. Transition, et le nom de notre propriété est transform et notre durée de transition est de 1 seconde. Si je place ce fichier et survole mes voitures sur cet élément profond, vous pouvez voir comment cela fonctionne, mais ce n'est pas clair du tout C'est pourquoi je vais utiliser une autre valeur, qui est prospective. Cela va vous donner les trois D, et je ne vais pas expliquer comment fonctionne la prospective. Pour des raisons prospectives, je vais vous donner une vidéo séparée. Utilisons la valeur prospective. Tapez donc prospectif. Et entre parenthèses, nous devons transmettre la valeur, et notre valeur est de 200 pixels Si je place ce fichier, puis que je place le curseur sur ce développement, vous pouvez voir le résultat, comment cela fonctionne Supposons que cela crée une ligne entre ce point ce point signifie la direction x xs. En utilisant cette valeur, vous pouvez le tordre vers le haut ou vers le bas. C'est le cas d'utilisation de la rotation de la valeur x. Changeons l' angle de rotation, 90 degrés. Si je place ce fichier et que je passe le curseur Mi sur ce développement, vous pouvez maintenant voir le résultat Il est désormais totalement invisible. Si vous voulez l' inverser complètement, vous devez transmettre une valeur de 180 degrés. Un, 80 degrés. Si je place ce fichier et que je passe mon curseur dans cette profondeur, vous pouvez voir le résultat Comme vous pouvez le voir, il fait pivoter notre élément profond de 180 degrés. Non seulement cela, vous pouvez également modifier la position d'origine de la transformation. Laisse-moi te montrer. Je vais appeler transform origin property. Transformez l'origine. Maintenant, je ne veux pas faire pivoter cet élément au milieu de cet élément. Je veux le faire pivoter depuis ce coin. Dans ce cas, nous devons utiliser la valeur en bas à droite, en bas à droite. Avant de définir ce fichier, je vais également modifier l'angle de rotation, qui est de 30 degrés. Si je place ce fichier et que je place mon curseur sur ce développement, comme vous pouvez le voir dans le coin inférieur droit, il pivote de 30 degrés J'espère que vous comprenez maintenant comment fonctionne la rotation de la valeur x. Passons à la valeur suivante, qui est la rotation Y. Mais avant de commenter cette ligne Ici, je vais juste taper rotate y. Si je place ce fichier et que je place mon curseur sur ce développement, vous pouvez voir le résultat Comme vous pouvez le voir, il divise notre élément et trace une ligne de ce point à ce point. C'est dans la direction de y x. Et à partir de cette ligne, vous pouvez la tordre du côté p sinon du côté droit, fonction de la valeur de l'angle. Tout est similaire à la rotation de la valeur x. Tracez simplement une ligne et divisez cet élément de ce point à ce point dans la direction y x. C'est pourquoi nous l'appelons rotation Y. Passons à notre prochaine méthode, qui consiste à faire pivoter Z. Type de son, rotation Z. Si je place ce fichier et que je place mes voitures sur cette profondeur, vous pouvez voir mes voitures sur cette profondeur, vous pouvez Je trace une ligne dans ZD x. Je veux dire au milieu de cet élément de Permettez-moi de vous montrer un exemple et de voir comment cela fonctionne. Ici, vous pouvez voir une image, et si vous utilisez la rotation x, elle trace une ligne de ce point à ce point. En utilisant cette valeur, vous pouvez faire pivoter votre élément vers le haut ou vers le bas. Si vous utilisez la valeur de rotation y, vous pouvez faire pivoter votre élément vers le haut ou vers la droite. Si vous utilisez des rotations pour cette valeur, laissez-moi vous montrer comment cela fonctionne J'espère que vous comprenez maintenant comment fonctionne la rotation de cette valeur Parlons de notre dernière valeur, qui est la rotation de trois D. Voyons d'abord la vraie démonstration. Si nous utilisons la rotation en trois D, nous pouvons utiliser toutes les valeurs de rotation à un. Cette ligne est pour la ligne de rotation x xs, celle-ci est pour y x, et celle-ci est notre ligne zx Maintenant, je vais le faire pivoter dans le sens x xs. En même temps, je vais la faire pivoter dans le sens de l'axe y, et cette ligne est dans le sens zérox En même temps, nous pouvons le faire pivoter dans le sens zx. En gros, il est défini une rotation en trois D. Au début, je vais appeler la valeur, faire pivoter trois d, puis entre parenthèses, vous devez passer un total de quatre paramètres, x x, y x, z x et angle Vous pouvez spécifier l' axe de rotation en utilisant un nombre pour les trois premiers arguments. Mais pour le quatrième argument, vous devez spécifier la valeur de l'angle. Pour x xs, je vais passer deux, et pour yx, je vais passer moins un moins un. De même, pour z x, je vais également passer moins un. Mais dans notre quatrième paramètre, nous devons transmettre la valeur de l'angle, donc taper 45 degrés. Si je place ce fichier et que je passe mon curseur sur ce développement, vous pouvez voir le résultat Il s'agit de la méthode de la cage d'utilisation de la rotation en trois D. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder ces deux valeurs. Traduisez Z et traduisez trois D. Merci d'avoir regardé cette vidéo, 12. Tutoriel de transformation 3D CSS: Bonjour les gars, c' est bon de vous revoir. Dans ce tutoriel, nous allons apprendre cette méthode à quatre traductions, traduire X, traduire Y, traduire et traduire trois t. Nous avons déjà découvert ces deux valeurs dans notre précédent tutoriel Mais ici, je vais l'utiliser avec trois transformations. Voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon corréateur Visoto et mon navigateur en utilisant l'extension Life Sever, et mon navigateur en utilisant l'extension Life Sever, je crée déjà un document eSTIML nommé index point eSTEML j'ouvre mon corréateur Visoto et mon navigateur en utilisant l'extension Life Sever, et je crée déjà un document eSTIML nommé index point eSTEML. Comme vous pouvez le voir à l'intérieur du conteneur parent, nous avons un conteneur box. Utilisons notre première valeur. Mais avant d'appeler la propriété transform, je dois taper transform d'une manière ou d'une autre. Et notre première valeur est translate x. Quelqu'un à taper, traduit x. Entre parenthèses, je vais passer 200 pixels Si je place ce fichier et le curseur Hoberm dans ce développement, vous pouvez voir Cela déplace mon élément de 200 pixels dans le sens x x. Et si vous voulez le déplacer dans la direction opposée, dans ce cas, vous devez passer à -200 pixels Si je place mon curseur de fichier et de berm dans cette case, vous pouvez voir le résultat Nous l'avons déjà appris dans vos documents précédents. Faisons donc cette transition trois jours. Je vais donc passer une autre valeur, qui est prospective, prospective, 200 pixels. Je vais également passer la valeur de rotation y, la rotation y, et ici je vais passer à 30 degrés. Si je place ce fichier et que je passe mon curseur sur cet élément profond, vous pouvez voir le résultat Comme vous pouvez le voir, cela déplace également notre élément profond, il fait pivoter notre élément profond, et vous savez que nous utilisons la prospective, c'est pourquoi cela vous donne un look en trois D. Parlons de notre prochaine valeur, qui est translate Y. Donc, pour utiliser translate Y, je vais utiliser ici une valeur positive Si je place ce fichier et le curseur berm sur cet élément de, vous pouvez voir le résultat Permettez-moi d'utiliser la valeur de rotation x. Alors ty, fais pivoter x. Si je place ce fichier et ce curseur berm sur ce D, tu peux voir, maintenant ça a l'air plus attrayant et plus dynamique Utilisons notre propriété suivante, qui est translate Z. Donc, traduisons Z. Si je passe 200 pixels, alors définissez ce fichier Si je stationne ma voiture sur ce point, comme vous pouvez le voir, elle ne fonctionne pas Mais nous avons déjà défini les traductions de cette valeur sur ce D. Utilisons une autre valeur avec cela. Je vais utiliser la valeur de rotation avec ça, rotation, y, 60 degrés. Si je place ce fichier et que je place mon aide-soignant sur ce D, vous pouvez voir le résultat Mais cela ressemble assez à translate x, mais ce n'est pas le cas. Laisse-moi te montrer. Permettez-moi d'utiliser la valeur prospective avec cela. Certains types sont prospectifs, prospectifs, 900 pixels. Si je place ce fichier et que je place ma voiture sur ce périphérique, vous pouvez voir le résultat Laissez-moi vous montrer la vraie démonstration. Alors tu pourras le comprendre correctement. Supposons que ce soit notre élément profond. Dans un premier temps, je vais faire pivoter cet élément profond. Si nous utilisons des translations pour cette valeur, elle est déplacée de cette façon. J'espère que vous comprenez maintenant comment fonctionne la traduction de la valeur Z. Parlons de notre dernière valeur, qui est translate trois D. Certaines pour taper, traduire trois D. Ici nous devons passer un total de trois valeurs, x x, x et zx Supposons que pour x x, je passe 50 pixels, et pour x, je passe également 50 pixels. Pour zéros, je vais passer à zéro pixel. Si je place ce fichier et berm cars sur ce D, vous pouvez voir le résultat Et si j'augmente, traduis la valeur Z, supposons que je tape pour une cellule typique, puis que je place ce fichier et que je passe mon curseur sur ce développement, vous pouvez voir le résultat En même temps, il se déplace dans la direction x xs, dans la direction y xs et dans la direction z x. J'espère que vous comprenez maintenant ce qu'est la traduction de trois valeurs D. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons aborder ces deux valeurs, échelle 3 D et échelle Z. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel 13. Échelle de tutoriel 3D de transformation CSS: Bonjour, les gars, c'est bon de vous revoir. Il s'agit d'un autre didacticiel lié à la transformation en trois dimensions. Dans ce didacticiel, nous allons apprendre ces quatre méthodes, échelle X, échelle Y, échelles et échelle trois. Nous avons déjà découvert l'échelle x et méthode de l'échelle Y dans nos précédents tutoriels. Mais encore une fois, je vais répéter cette méthode dans ce tutoriel. Mais la méthode la plus importante pour les trois D est la lumière d'échelle. Elle définit une transformation à trois niveaux D en donnant une valeur pour le zx, et notre dernière méthode est l'échelle trois D. En utilisant cette méthode, nous pouvons utiliser trois valeurs différentes à la fois Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code VSO Studio et mon navigateur en utilisant l'extension Lp Server, et je crée déjà un document eSTEML nommé index Dans un premier temps, je vais utiliser la transformation du nom de propriété. Donc, pour taper, transformez ici. Notre premier est scale x, Some type, scale x, scale x, scale x, et je veux redimensionner cet élément deux fois dans la direction excessive de x. Je vais en passer deux ici. Si je place ce fichier et berm cars dans ce développement, vous pouvez voir le résultat De même, nous pouvons utiliser la valeur Y de l'échelle. Je vais changer l'échelle y. Si je place ce fichier et que je passe mon curseur sur ce développement, vous pouvez voir le résultat Comme nous ne fournissons aucun point d'origine de transformation, c'est pourquoi il se trouve au milieu de l'échelle de cet élément. Il s'agit de la position d'origine par défaut. Mais si nous utilisons la valeur d'origine de transformation avec cela, laissez-moi vous le montrer. Ensuite, définissez ce fichier et les hobercars sont sur ce développement, vous pouvez voir le résultat différent Parlons de notre valeur la plus importante, qui est l'échelle huit. Mais d'abord, je vais commenter cette ligne, et je vais passer à l' échelle 8 ici. Échelle 82 fois. Si je sauvegarde ce fichier et voitures Hoberm sont en cours de développement, comme vous pouvez le voir, il n'y a aucun changement car cette valeur ne fonctionne qu'avec une transformation en trois D. Nous devons lui donner trois d. Je vais commenter cette ligne, et je vais utiliser cette valeur avec prospective et faire pivoter y. Je vais également recommander cette ligne Si je définis ce fichier et passe mon curseur sur ce développement, vous pouvez maintenant voir le résultat Si j'augmente les échelles de cette valeur, que additionne sept ici, place ce fichier et que je passe mon curseur sur ce développement, vous pouvez maintenant voir la différence et voir comment cela fonctionne De même, si je diminue la valeur d'échelle, dont certaines entrent 0,5, place ce fichier et que je passe mon curseur sur ce développement, vous pouvez voir le résultat J'espère maintenant que c'est à vous comment fonctionne cette méthode à grande échelle. Parlons de notre dernière méthode, qui est l'échelle trois d. Un type, échelle trois d ici, échelle trois D. En utilisant cette méthode, nous devons passer ici la valeur totale de trois. Échelle X, échelle Y et échelles huit. En utilisant cela, nous pouvons utiliser trois valeurs différentes à la fois. Pour x xs, je veux le redimensionner deux fois. Pour y xs, je veux le redimensionner trois fois, et pour zéro x, je veux le redimensionner cinq fois. Si je configure ce fichier et que je parie sur ce développement, vous pouvez voir le résultat. premier temps, il redimensionne cet élément deux fois dans le sens x, puis trois fois dans le sens Y x, puis cinq fois dans le sens zéro Voici les esquisses en U d'une valeur d'échelle trois. J'espère que c'est clair pour toi maintenant. C'est tout pour ce procès. Dans le prochain utérus, nous allons découvrir une nouvelle propriété, qui est prospective Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain utérus. 14. Tutoriel CSS Perspective: Bonjour, les gars, c'est bon de vous revoir. Dans ce tutoriel, nous allons apprendre une nouvelle propriété, perspective Sess. Dans nos précédents tutoriels, nous l'avons déjà appris. Mais dans ce tutoriel, nous allons l'utiliser individuellement. Mais avant de passer à la pratique, voyons quelques exemples. Ici, vous pouvez voir que c'est l'exemple de rotation, et c'est aussi l' exemple de rotation. Mais pour ce qui est des différences, pour cet élément, nous utilisons la prospective. C'est pourquoi il fournit trois D. De même, voici l'exemple de rotation y x. Pour notre premier exemple, nous n'utilisons pas de prospective. Mais pour notre deuxième exemple, nous utilisons la prospective. C'est pourquoi il s'agit de fournir trois D. Si nous utilisons la prospective, vous pouvez voir clairement la rotation, et si nous n' utilisons pas la prospective, vous ne pouvez pas comprendre la rotation. Essayons de le comprendre avec plus de détails. Supposons que vous regardiez un écran de projecteur à partir de ce point. On peut dire que la distance et l'angle de vue sont appelés prospectifs. Il paraîtra plus grand si vous le regardez de plus près, et si vous le regardez de loin, il paraîtra plus petit. Laissez-moi vous montrer la vraie démonstration. Supposons que ce soit notre élément profond. Si vous le regardez de près, il aura l'air plus grand. Et si vous le regardez de loin, il paraîtra plus petit. C'est ce qu'on appelle le prospective. Il semble petit et grand même s'il n'est pas redimensionné. J'espère que c'est clair pour toi maintenant. La prospective s'accompagne d' une autre propriété, qui est l'origine prospective. Par défaut, il est livré avec un centre. Mais vous pouvez modifier le prospect où vous le souhaitez. Essayons de comprendre l'origine potentielle en détail. Supposons que ce soit votre chambre. Si vous le regardez depuis le centre, vous pouvez voir clairement tous les murs et le sol. C'est votre dernier étage, c'est votre dernier étage. Voici votre mur latéral droit, voici votre mur latéral gauche, et voici votre mur d'arrière-plan. Mais si vous regardez votre chambre depuis le coin supérieur gauche, je veux dire que depuis ce coin, vous ne pouvez pas voir clairement le dernier étage et le dernier étage. De même, si vous regardez votre chambre depuis cette position, c'est-à-dire la position la plus haute, vous ne pouvez pas voir clairement le dernier étage. Vous pouvez voir le rez-de-chaussée, le mur d'arrière-plan, le mur latéral droit et le mur latéral gauche. Parce que votre position d'origine potentielle est la meilleure. De même, si vous regardez votre pièce depuis le coin supérieur droit, vous ne pouvez pas voir le bon mur et votre dernier étage est à peine visible ou non. Parce que votre origine potentielle est la bonne. Mais si vous regardez votre chambre du côté droit par erreur, je tape mur droit en position gauche. Si vous utilisez l'origine potentielle du côté droit, vous ne pouvez pas voir correctement le mur droit. Vous pouvez voir le mur d'arrière-plan, vous pouvez voir le rez-de-chaussée, vous pouvez voir le dernier étage et vous pouvez également voir le mur latéral inférieur vous pouvez voir le dernier étage , mais votre mur latéral droit n'est pas visible. Si vous utilisez l'origine prospective en bas à droite, vous ne pouvez pas non plus comprendre le bon mur. Comme vous pouvez le voir, le mur droit n'est pas non plus visible. De ce fait, le rez-de-chaussée est rarement visible. De même, si vous regardez votre pièce depuis le bas, vous ne pouvez pas voir correctement le rez-de-chaussée. Si vous regardez votre chambre depuis le coin inférieur gauche, vous ne pouvez pas voir le mur de gauche. De plus, vous ne pouvez pas voir complètement le rez-de-chaussée. Si vous n'avez utilisé que l'origine potentielle, vous ne pouvez pas voir le mur de plomb Vous pouvez voir le mur de droite, vous pouvez voir le mur d'arrière-plan, vous pouvez voir le rez-de-chaussée, vous pouvez également voir le dernier étage, mais vous ne pouvez pas voir le mur en bois Ce sont toutes des valeurs d'origine. Vous pouvez également utiliser une valeur en pourcentage avec cela. Avec le prospect, vous pouvez modifier l'origine du prospect. Commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser la propriété d'origine potentielle et potentielle. Comme vous pouvez le voir, côte à côte, j'ouvre mon studio visuel Cortor et mon navigateur en utilisant l'extension Lipseer, et je crée déjà un document eSTEML nommé Index point eSTEML j'ouvre mon studio visuel Cortor et mon navigateur en utilisant l'extension Lipseer, et je crée déjà un document eSTEML nommé Index point eSTEML. Comme vous pouvez le voir, il existe un élément profond, et maintenant je veux faire pivoter cet élément profond lorsque je passe le curseur sur cet élément Ici, je vais utiliser la propriété transform, donc tapez, transform. Transformez, faites pivoter, faites pivoter x, et je veux le faire pivoter jusqu'à 50 degrés dans le sens xs. Si je place ce fichier et que ses micas sont sur cet élément profond, vous pouvez voir le résultat Comme vous pouvez le voir, cela fait pivoter notre élément, mais ce n'est pas clair car nous n'utilisons aucune valeur prospective. Dans nos articles précédents, nous avons utilisé la prospective comme valeur de transformation Mais maintenant, je vais utiliser une propriété potentielle, et nous devons utiliser cette propriété potentielle dans notre conteneur de base, non dans le conteneur pour enfants. Ici, nous devons lier les perspectives. Et je vais passer les 800 pixels potentiels. Si je place ce fichier et survole mes voitures sur ce développement, vous pouvez maintenant voir l'apparence en trois D. Dans nos articles précédents, nous avons utilisé la prospective comme valeur de transformation Vous devez juste vous rappeler que prospective donne à l' élément un aspect en trois D. N'oubliez pas non plus si vous avez utilisé une propriété potentielle individuellement, vous devez l'utiliser dans le conteneur parent, non dans le conteneur enfant. Maintenant, modifions la valeur potentielle. Supposons que je passe les 100 ans. Comme je vous l'ai dit plus tôt, diminuer la valeur du prospect fera paraître les choses plus grandes. Si je passe mon curseur sur ce développement, vous pouvez voir la différence Maintenant, il paraît plus grand parce que nous surveillons cet élément de très près. C'est pourquoi il paraît plus grand. À l' inverse, si nous augmentons la valeur potentielle, 1 200 pixels, puis que nous définissons ce fichier et que nous passons le curseur sur ce développement, vous pouvez voir le résultat Vous pouvez maintenant voir le plus petit objet. Parce que nous savons qu' un objet paraît petit lorsqu'on le regarde de loin. Comme vous pouvez le constater, la distance est maintenant de 1 200 pixels. Pour l'instant, je vais taper 800 pixels prospectifs. Parlons de l' origine prospective et de son fonctionnement. Dans un premier temps, je vais appeler cette propriété, qui est origine prospective, origine prospective. Par défaut, car la valeur est le centre et la valeur de l'axe y est le centre. Donc type de groupe, centre et centre des cheveux, centre centre. Si je définis ce fichier et que les hobercars sont sur ce développement, comme vous pouvez le voir, à partir du point central, cela fait pivoter notre élément Comme vous pouvez le constater, il n'y a aucun changement car il s'agit de la position centrale. Dans un premier temps, je vais utiliser la bonne valeur, l' origine potentielle, c'est vrai. Si je définis ce fichier et Hobermcars est sur ce développement, vous pouvez voir Comme vous pouvez le constater, notre élément ne déborde pas du bon côté, car maintenant notre perspective est du bon côté C'est pourquoi nous ne pouvons pas voir le bon mur. De même, si nous utilisons le veluft gauche et que nous définissons ce fichier et que les micas de Huber se trouvent sur cet élément, vous ne pouvez plus voir le mur de vous ne pouvez plus voir Comme vous pouvez le constater, notre élément ne déborde pas du côté gauche, mais du côté droit Si nous utilisons une forme de cube, vous pouvez la comprendre correctement. Vous pouvez essayer toutes les valeurs d'origine une par une. Non seulement cela, vous pouvez également utiliser une valeur en pourcentage. Nous allons apprendre tout cela lorsque nous travaillerons sur de vrais projets. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 15. Tutoriel de style de transformation CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre une nouvelle animation Sess liée à une propriété, et le nom de la propriété est transform style Fondamentalement, cette propriété fonctionne avec la propriété transform. Apprenons-en plus à ce sujet. La propriété de style de transformation indique comment imbriquer les éléments qui sont rendus dans un espace à trois D. Et en gros, cette propriété a deux valeurs. Le nom de notre première valeur est plat. Il a précisé que l'élément enfant ne conservera pas sa position en trois D. Et il s'agit de la valeur par défaut. La valeur principale et importante est de conserver trois. Spécifie que les éléments enfants conserveront leur position en trois D. En gros, je veux dire que si nous utilisons la valeur de conservation des trois D dans l'élément parent, notre élément parent fonctionne comme un objet à trois D. Permettez-moi de vous montrer l'exemple. Vous pouvez voir ici que nous avons animé un élément enfant. Comme vous pouvez le voir, le plus petit élément profond traverse le plus grand élément profond. Comme vous le savez, élément parent de développement plus grand. Si nous utilisons une valeur de trois D préservée, nous pouvons réaliser ce type d'effets à trois D. Si nous n'utilisons pas la valeur des trois D préservée, laissez-moi vous le montrer. Vous pouvez maintenant voir que notre élément parent n'agit pas comme un élément en trois D et que notre élément enfant ne peut pas passer par l'élément parent. Il s'agit donc de la jauge d'utilisation de la propriété de style de transformation. Permettez-moi de vous donner un autre exemple. Ici, vous pouvez voir un parent plonger, et à l'intérieur de celui-ci, nous avons un enfant qui plonge , et je fais pivoter notre enfant de 40 degrés dans la direction de l'axe y. Et par défaut, notre style parent de transform était fourni avec une valeur flood. C'est pourquoi notre parent de n'agit pas comme un objet tridimensionnel. Mais si nous utilisons propriété de style de transformation et que nous utilisons la valeur de conservation des trois D, notre arrière-plan se comporte comme un objet en trois D et notre enfant passe en profondeur à travers l'élément d' arrière-plan Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur de studio Visor et mon navigateur en utilisant l'extension Lp Server, et je crée déjà un document STL nommé index point STL Ici, vous pouvez voir un total de deux éléments, l'élément parent et notre élément enfant. Comme vous pouvez le voir, nous faisons déjà pivoter notre élément enfant de 50 degrés dans la direction xs, et j'utilise déjà une propriété potentielle dans notre élément parent, et j'ai défini une valeur potentielle, 800 pixels, et maintenant je veux faire pivoter l'élément parent de. Je vais utiliser la propriété transform dans notre conteneur parent, transform. Faites pivoter y, et je veux le faire pivoter de 30 degrés dans la direction de y, de 30 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Oui, cela fait pivoter notre élément, mais cela n'a pas donné d'aspect tridimensionnel car nous n'utilisons aucune propriété de style de transformation. Je vais utiliser la propriété de style de transformation, le style de transformation. À D fall, cette propriété était livrée avec une valeur fixe, mais je vais utiliser la conservation de trois valeurs D. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir notre élément enfant passer par l'élément parent, et vous devez vous rappeler que vous devez utiliser cette propriété dans votre conteneur parent, non dans le conteneur enfant. Si j'active la barre d'outils de mon développeur et que je sélectionne cet élément, comme vous pouvez le voir, notre valeur de rotation x de transformation est de 50 degrés. Salut, c'est notre élément enfant. Si j'augmente l'angle de rotation, vous pouvez voir la transformation. Si je diminue l'angle de rotation, vous pouvez également voir la transformation. Faisons pivoter le conteneur parent. Je vais sélectionner le conteneur parent, et je vais faire pivoter ce conteneur parent. Si je fais pivoter le conteneur parent, vous pouvez voir les trois d. Maintenant vous pouvez clairement voir notre élément enfant passer par l'élément parent. Il s'agit de la page d'utilisation de la propriété de style de transformation. Maintenant, changeons l'origine de transformation de notre élément enfant. Le type Amo transforme l'origine et le type Amo en bas. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. À partir du bas, il fait pivoter notre élément enfant de 50 degrés. Laissez-moi vous le montrer clairement. Si j'augmente la valeur de rotation ou l'élément parent, vous pouvez le voir clairement. Comme vous pouvez le voir, depuis le bas, il fait pivoter notre élément. C'est tout pour ce tutoriel. J'espère que vous comprenez maintenant ce qu'est la propriété de style uskazo transform. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 16. Tutoriel de visibilité du backface CSS: Bonjour, les gars, bon retour. Encore une fois, je vous propose un nouveau tutoriel, et dans ce didacticiel, vous allez apprendre une nouvelle propriété, à savoir visibilité de la face arrière Vous devez utiliser cette propriété avec la propriété transform. Avant de passer à l'aspect pratique, essayons de comprendre ce qu' est la visibilité de la face arrière La propriété de visibilité de la face arrière définit si la face arrière d'un élément doit être visible face à l'utilisateur Maintenant, la question est : qu'est-ce que la face arrière ? La face arrière d'un élément est une image miroir de la face avant affichée. Supposons qu'à l'intérieur de cet élément profond, vous tapez hello world. Si je le fais pivoter de 180 degrés, vous pouvez voir la face arrière d'un élément Comme vous le savez, il reflète votre élément. Vous pouvez également voir le reflet du texte. Cette propriété est utile lorsqu'un élément est pivoté. Il vous permet de choisir si l'utilisateur doit voir le verso ou non Supposons que vous ne souhaitiez pas afficher la face arrière d'un élément À l'aide de cette propriété, vous pouvez la contrôler. Et notre propriété de visibilité de la face arrière comporte deux valeurs, visible et masquée Permettez-moi de l'expliquer avec un objet en trois D. Comme vous pouvez le voir sur votre écran, voici un cube en trois D. Si vous utilisez une valeur cachée, vous ne pouvez pas voir la partie opposée du sous-tube Mais si vous utilisez une valeur visible, vous pouvez voir l'autre partie à travers ce cube. C'est la principale différence entre ces deux valeurs. Permettez-moi de vous donner un autre exemple. Comme vous pouvez le voir sur votre écran, il y a deux éléments de, et j'utilise la propriété de transformation de ces deux éléments. Et comme vous pouvez le voir, nous utilisons la valeur de rotation y. Si je porte sur notre premier élément, vous pouvez voir que vous pouvez voir la face arrière de notre premier élément. Comme vous pouvez le constater, il reflète notre texte. Mais je ne veux pas montrer la face arrière lorsque je fais pivoter notre élément. Dans cet élément, nous utilisons donc la propriété de visibilité de la face arrière Donc, si je place mon curseur, vous ne pouvez plus voir la face arrière de cet élément car nous utilisons une valeur cachée pour celui-ci Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Viso So Cortor et mon navigateur en utilisant l'extension Lipseer, et je crée déjà un document eSTIML nommé index point STML j'ouvre mon Viso So Cortor et mon navigateur en utilisant l'extension Lipseer, et je crée déjà un document eSTIML nommé index point STML. Comme vous pouvez le voir dans mon navigateur, nous obtenons deux éléments profonds, le conteneur et la boîte. Et comme je vous l'ai dit plus tôt, si vous souhaitez utiliser la propriété de visibilité de la face arrière, vous devez également utiliser la propriété de transformation Donc, dans le sélecteur de survol, je vais taper transform Transformez la rotation y, et je veux la faire pivoter de 80 degrés. Si je définis ce fichier et que les voitures Hb M sont en cours de développement, vous pouvez le voir faire pivoter notre élément Vous pouvez également voir le texte miro, et maintenant je vais utiliser notre nouvelle propriété, qui est la visibilité de la face arrière Je dois taper « visibilité de la face arrière ». Tout d'abord, je vais utiliser la valeur visible. Si je définis ce fichier et voitures Hoberm sont en cours de développement, vous pouvez voir la Mais si j'utilise une valeur cachée, laissez-moi vous montrer et définir ce fichier et Huber Makar sur cet Vous ne pouvez plus voir la face arrière de cet élément. C'est le cas d'utilisation de la propriété de visibilité de la face arrière. C'est tout pour ce tutoriel. le prochain tutoriel, nous allons apprendre les Dans le prochain tutoriel, nous allons apprendre les animations Cases Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 17. Tutoriel d'animation CSS première partie: Bonjour, les gars, c'est bon de vous revoir. Enfin, nous allons apprendre l'animation CSS. Vous pouvez animer n'importe quel élément de test à l'aide de l'animation CSS. Voyons un exemple. Comme vous pouvez le constater, il y a un élément profond. Il s'anime automatiquement sans survol de la souris. Il convertit le rectangle en cercle, puis le cercle en rectangle. Voici un petit exemple d'animation. Cela fonctionne automatiquement. Vous n'avez besoin d'aucun effet de survol. Voyons quel type de propriété nous avons en CSS pour créer cette animation. Comme vous pouvez le constater, nous avons un total neuf propriétés liées à l'animation CSS. Notre premier nom de propriété est le nom de l'animation. À l'aide de cette propriété, vous pouvez définir un nom pour l'animation. Puis vient la durée de l'animation. À l'aide de cette propriété, vous pouvez définir la durée pendant laquelle vous souhaitez exécuter cette animation. Puis vient la propriété du délai d'animation. Il spécifie un délai pour le début d'une animation. Puis vient le nombre d' itérations de l'animation. Elle indique le nombre de fois qu'une animation doit être jouée, et notre propriété suivante est la direction de l'animation. Il spécifiait si une animation devait être jouée en avant, en arrière ou en cycles alternés, puis venait la fonction de chronométrage de l'animation. Il définit la courbe de vitesse de l'animation. Notre prochaine propriété est le mode de remplissage des animations. Il spécifie un style pour l'élément lorsque l' animation n'est pas jouée. Nous allons en apprendre davantage à ce sujet dans nos derniers tutoriels. Notre prochaine propriété est Animation Play State. Il indique si l' animation est en cours d'exécution ou en pause, et notre dernière propriété est l'animation. Il s'agit de la propriété abrégée. Vous pouvez utiliser toutes les valeurs des propriétés à la fois en utilisant cette propriété. Nous allons apprendre toutes ces propriétés une par une. Maintenant, pour utiliser toutes ces propriétés d'animation, vous devez créer un sélecteur, le nom correspond au taux d'images clés Dans un premier temps, vous devez taper add the rate keyframes, puis vous devez fournir un nom d'animation Vous devez juste vous rappeler de ne pas laisser d' espace dans ce nom. Vous pouvez fournir un trait d'union. Vous pouvez également utiliser un underscore ou un étui camel. Mais ne fournissez aucun espace. Ensuite, dans le clivrass, vous devez fournir deux mots clés différents de et Il s'agit de l'endroit où vous souhaitez démarrer l'animation, et à l'aide de deux mots clés, vous devez fournir le point final de l' animation. À l'intérieur des étalonnages, vous pouvez utiliser la propriété CSS. Supposons que vous souhaitiez modifier la largeur du conteneur. Oui, tu peux. Il existe une autre méthode que vous pouvez utiliser. Vous pouvez utiliser un pourcentage pour le même travail. Vous pouvez remplacer la position de départ par 0 %, et de même, vous pouvez remplacer la position de départ par 100 %. Ces deux déclarations vont revenir, même résultat. Mais ici, vous pouvez utiliser n'importe quelle valeur de pourcentage comprise entre 0 et 100. Supposons que vous souhaitiez changer la couleur au point de départ de l'animation et que vous souhaitiez également modifier la couleur à 20 %. Vous pouvez fournir plusieurs valeurs si vous utilisez cette méthode. Sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre ma visière sur Curator et mon navigateur en utilisant l'extension Lp Saver Vous pouvez également voir que j'ai déjà créé document eSTEML nommé index point estel Comme vous pouvez le voir, il y a un élément profond et le nom de classe est une boîte, et je stylise déjà cet élément profond avec 250 pixels, hauteur 200 pixels J'aligne également cet élément profond au milieu de cette page Web. Maintenant, je veux animer cette profondeur. Je veux transformer ce rectangle en cercle. Avec cela, je souhaite également changer la couleur sans utiliser le sélecteur Over Je vais utiliser différentes propriétés d'animation CSS. Dans un premier temps, je vais créer un sélecteur d'images-clés, au niveau de l'image-clé rouge Après le sélecteur Kefam, nous devons fournir le nom de l' animation Pour notre animation, je vais prendre un exemple. Ensuite, dans les calibrages, nous devons utiliser deux mots clés de et deux de, puis je vais en utiliser deux point de départ, je veux dire rayon de bordure zéro, un certain type, propriété du rayon de bordure. Rayon de bordure 0 %. À la fin de cette animation, je souhaite modifier le rayon de bordure de 50 %. Rayon de bordure 50 %. Si je définis ce fichier, il n'exécutera pas l'animation car nous devons lier le nom de cette animation à cette boîte. Pour cela, je vais prendre une propriété, qui est le nom de l'animation, le nom l'animation, et notre nom d'animation est un exemple. Grâce à cette méthode, vous pouvez utiliser cette image-clé plusieurs fois et vous n'avez pas besoin de créer cette animation encore et encore. Maintenant, avec le nom de l'animation, vous devez également déclarer la durée de l' animation. Je vais appeler une autre propriété, qui est la durée de l'animation. Pendant 2 secondes, je veux lancer cette animation. Ici, vous pouvez également utiliser une valeur de seconde ou de milliseconde. Si j'enregistre cette page, vous pouvez voir l'animation ici, mais elle n'exécute notre animation qu'une seule fois, et elle prend deux secondes pour terminer cette animation. Maintenant, je décide de lancer cette animation cinq fois. Pour cela, nous devons utiliser une autre propriété, qui est le nombre d' itérations d'animation Donc, tapez, le nombre d' itérations de l'animation, et je veux l'exécuter cinq fois. C'est pourquoi j'en passe cinq ici. Si je sauvegarde ce fichier, comme vous pouvez le voir, il exécute notre animation cinq fois. Trois, quatre et cinq. Une fois le terme terminé, il arrête d'exécuter notre animation. Si vous souhaitez exécuter cette animation pour toujours, vous devez transmettre une valeur infinie ici, dont certaines sont de type infini. Si je définis ce fichier, comme vous pouvez le voir, il exécute maintenant notre animation pour toujours. Je ne veux pas exécuter cette animation indéfiniment, donc je veux transmettre trois valeurs ici. Je veux le lancer trois fois. Maintenant, comme vous pouvez le voir, une fois l'animation terminée, revenez à la position précédente en une seule étape. Lorsqu'il est revenu de la valeur finale à la valeur de départ, comme vous pouvez le voir, il n' y a pas de transition. En une seule étape, il termine l'animation. Pour assurer la fluidité, nous devons utiliser une autre propriété, à direction de l'animation Tapez donc la direction de l'animation. Et je vais utiliser une valeur alternative. Si je sauvegarde ce fichier, vous pouvez maintenant voir le lissage lorsque vous revenez à la position normale Si je le lance indéfiniment, vous pouvez voir sa fluidité. Comme vous pouvez le constater, quand on revient à la position de départ, il y a une douceur. Parlons maintenant de la propriété de direction de l'animation. Fondamentalement, la direction de l'animation était livrée avec quatre valeurs, normale, inverse, inverse alternée. Normal est la valeur par défaut. L'animation est jouée normalement. Cela fonctionne vers l'avant. Dans le cas contraire, inversez le travail en arrière. Si vous utilisez une valeur inverse, l'animation est jouée dans le sens inverse. Puis vient la valeur alternative. Si vous utilisez une valeur alternative, elle est d'abord jouée vers l'avant, puis vers l'arrière. Notre dernière valeur est l'inverse alternatif. Dans ce cas, l'animation est d' abord jouée en arrière, puis en avant. Vous avez déjà découvert la valeur alternative. Il passe de la position de départ à la position finale, puis revient à la position d'emposition pour commencer Notre valeur suivante est inversée. Laisse-moi te montrer. Si j'utilise cette valeur puis que je définis ce fichier. Comme vous pouvez le voir, l'animation part d'un cercle, puis est convertie en carré. Parlons de notre dernière valeur, qui est l'inverse alternatif. Si j'utilise une valeur inverse alternative, puis que je définis ce fichier. Comme vous pouvez le constater, l'animation est d' abord jouée en arrière, puis en avant. C'est le cas d'utilisation de la propriété de direction de l'animation. Pour l'instant, je vais utiliser une valeur alternative. Si j'ai configuré ce fichier, vous l'avez déjà découvert. C'est tout pour ce tutoriel. Dans le prochain tutoriel, je vais vous montrer les différentes méthodes des images-clés. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 18. Tutoriel d'animation CSS partie deux: C'est bon de vous voir, les gars. Dans ce tutoriel, je vais vous montrer la deuxième méthode pour exécuter l'animation. Dans notre précédent tutoriel, nous avons utilisé un mot clé à partir de deux mots clés. Mais dans ce tutoriel, nous allons utiliser la valeur en pourcentage. Donc, sans perdre votre temps, revenons au studio de visualisation Corator Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visor Studio et mon navigateur à l'aide de l'extension Life Sever, et j'ouvre mon précédent document estel Comme vous le savez, à partir de la position de départ, je vais donc remplacer de 0 % par 0 %. Et tu connais notre position en deux mots. Je vais donc remplacer deux mots k par 100 %. Donc, si je sauvegarde ce fichier, comme vous pouvez le voir, cela fonctionne de la même manière. Maintenant, je veux changer la couleur de fond à la position finale. Je vais donc utiliser la propriété d' arrière-plan, arrière-plan, et notre couleur d'arrière-plan est ate. Si j'ai défini ce fichier, comme vous pouvez le voir, avec une transformation de forme, cela a également changé de couleur. Comme vous pouvez le constater, pour cette animation, nous utilisons au total quatre propriétés d'animation CSS différentes : le nom de l' animation, la durée de l' animation, nombre d'itérations de l'animation et la direction de l'animation Je vais maintenant vous montrer comment utiliser un raccourci pour cette animation Je veux dire, comment pouvons-nous utiliser ces quatre valeurs de propriété sur une seule ligne. Pour cela, nous devons appeler une autre propriété d'animation, qui est animation, Animation. Dans un premier temps, nous devons transmettre le nom de l'animation. Comme vous pouvez le voir, le nom de notre animation est un exemple. Donc, copiez le nom et collez-le ici. Ensuite, nous devons dépasser la durée de l' animation. Comme vous pouvez le constater, la durée de notre animation est de deux secondes, le son dépassant deux secondes. N'oubliez pas que vous devez suivre la séquence, puis je vais passer valeur du nombre d'itérations, qui est infinie Ensuite, je vais transmettre la valeur de direction de l'animation , qui est alternative. Pour l'instant, les quatre lignes externes ne sont pas nécessaires, je vais donc commenter ces lignes, et je vais enregistrer ce fichier Comme vous pouvez le constater, cela a parfaitement fonctionné. Cela fonctionne de la même manière. Et maintenant, je vais parler d'une autre nouvelle propriété, le délai d'animation. Pour cela, je vais commenter cette ligne et décommenter celle-ci. Après la propriété duration, je vais taper animation delay. Ici, je vais passer trois c'est, ça veut dire trois secondes. Vous pouvez également prendre une valeur en millisecondes. Cela signifie que si je supprime ce fichier, notre animation démarrera au bout 3 secondes. Laisse-moi te montrer. Comme vous pouvez le voir, un peu pour paramétrer ce fichier, bout de 3 secondes, il démarre notre animation. C'est le cas d'utilisation de la propriété de retard. Enfin, je vais utiliser une autre propriété, qui est la fonction de chronométrage des animations. Mais avant de vous montrer les valeurs de la fonction de synchronisation des animations CSS. En gros, nous avons un total de six valeurs, nous sommes linéaires, nous entrons sortons une fois par semaine. Si vous utilisez sa valeur, elle spécifie une animation avec un démarrage lent, puis d'abord, puis une fin lente. Il s'agit de la valeur par défaut, et la valeur suivante est linéaire. Il permet de spécifier une animation à la même vitesse du début à la fin. Puis vient notre troisième valeur, qui est in, spécifiez l'animation avec un démarrage lent. Dans le cas contraire, nous avons une autre valeur, out, spécifiez une animation avec une fin lente. Notre cinquième valeur est in out, spécifiez une animation dont le début et la fin sont lents. Et notre dernière valeur est Q weak vesier. Vous pouvez définir vos propres valeurs dans une fonction Q web sier. Permettez-moi de vous montrer le véritable exemple de leur fonctionnement. Vous pouvez voir ici les éléments avec différentes valeurs de fonction de chronométrage. Le linéaire est en entrée et en sortie. Comme vous pouvez le constater, nous utilisons la même durée d'animation pour tout cela. Mais comme vous pouvez le constater, ils fonctionnent différemment. Leur vitesse n'est pas la même. Comme vous pouvez le constater, le linéaire maintient la même vitesse du début à la fin, puis vient notre prochaine valeur, qui est la facilité. Comme vous pouvez le voir, cela commence par lentement, puis d'abord, se termine lentement, puis vient. Il spécifie l'animation avec un démarrage lent. Et puis il sort. Il spécifie l'animation avec slow end, et notre dernière valeur est e in out. Il spécifie une animation avec un début et une fin lents. Il s'agit de la différence entre toutes les valeurs de la fonction de chronométrage. Laissez-moi vous montrer comment nous pouvons l'utiliser dans la pratique. Je vais donc appeler le nom de notre propriété, qui est la fonction d'animation. Fonction d'animation. Dans un premier temps, je vais utiliser la valeur e. Certains d'entre eux. Si je sauvegarde ce fichier, comme vous pouvez le voir, il commence par slow, puis d'abord et n lentement. Et c'est la valeur par défaut, et je vais utiliser notre valeur suivante, qui est linéaire. Smot Linear Si je sauvegarde ce fichier, comme vous pouvez le voir, il a conservé la même vitesse. Vous ne pouvez pas comprendre la différence dans cet exemple. Vous pouvez le comprendre correctement lorsque nous commençons notre exercice et notre projet, puis je vais utiliser notre autre valeur, qui se trouve dans. Si je sauvegarde ce fichier, comme vous pouvez le voir, il spécifie une animation avec un démarrage lent. Notre valeur suivante est sortie. Certains types sont sortis. Si je sauvegarde ce fichier, comme vous pouvez le voir, il spécifie l'animation avec une fin lente. Notre dernière valeur est is in out. Il y en a un qui est sorti. Si je sauvegarde ce fichier, comme vous pouvez le voir, il spécifie l'animation avec un démarrage lent et une fin lente. Et maintenant je vais utiliser notre dernière valeur, qui est Q basier Je vais égaler Qb Basier. Ici, vous devez transmettre un total de quatre valeurs, pas plus de quatre valeurs, pas moins de quatre valeurs. Au début, je vais prendre une valeur de 0,1, puis je vais prendre une valeur de 0,4. Ensuite, je vais prendre une valeur de 1,0. Viennent ensuite la valeur 0,1. Il va couvrir l' animation en quatre étapes. Pour notre premier t, il faudra encore une fois zéro point. Pour notre deuxième étape, cela prendra 0,4 seconde, et pour notre troisième étape, cela prendra encore une fois. Pour notre dernier t, il faudra encore une fois zéro point. Si je configure ce fichier, vous pouvez voir le résultat. Au bout de 3 secondes, vous pouvez voir le schéma d'animation. Avec cette valeur, vous pouvez terminer votre animation dans une quatrième étape. Vous pouvez également utiliser toutes les étapes comme raccourci. Pour cela, vous devez utiliser cette valeur en troisième position. Vous devez d'abord transmettre le nom de l'animation, puis la durée, la fonction de synchronisation, puis la valeur dela, le nombre d' itérations, puis la direction de l'animation. Ne t'inquiète pas pour ça. Nous allons apprendre tout cela lorsque nous démarrerons nos projets. Je vais maintenant changer de couleur à 50 % de l'animation. Je veux dire 50 % de position d'animation. À 50 % à l'intérieur du clisis, je veux changer la couleur de fond, le fond, le bleu Si je place ce fichier, comme vous pouvez le voir, à la position de 50 % de l' animation, il conserve la couleur. Tout d'abord, il convertit la couleur chocolat en couleur bleue, puis il convertit la couleur bleue en couleur rouge. Nous pouvons utiliser autant de valeur que nous le voulons ici. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir ce qu'est mode fichier d'animation et ce qu' est le mode animation plast Ne manquez pas notre prochaine vidéo. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 19. Tutoriel de mode de remplissage d'animation CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre une nouvelle animation CSS liée aux propriétés, et le nom de notre propriété est Mode de fichier d'animation CSS. Mais maintenant, la question est : qu'est-ce que le mode fichier d'animation ? La propriété du mode de fichier d'animation spécifie le style de l'élément lorsque l' animation n'est pas exécutée. Nous pouvons l'utiliser avant qu'il ne commence. Nous pouvons également l'utiliser après sa fin. Sinon, nous pouvons l' utiliser à la fois comme condition. En même temps, nous pouvons l'utiliser avant et après l'animation. Parlons maintenant du mode de fichier d'animation lié aux valeurs. Cette propriété a un total de quatre valeurs, aucune, en avant, en arrière et les deux None est la valeur par défaut. L'animation n' appliquera aucun style à l'élément avant ou après son exécution. Notre prochaine valeur est la valeur future. L'élément conservera les valeurs de style définies par la dernière image clé. En gros, cela dépend de la direction de l'animation et du nombre d'itérations de l'animation Notre valeur suivante est rétrograde. L'élément obtiendra les valeurs de style définies par la première image-clé et les conservera pendant le délai d'animation Sinon, nous pouvons utiliser notre dernière valeur, qui est les deux. L'animation suivra les règles à la fois en avant et en arrière, en étendant les propriétés de l'animation dans les deux Nous allons donc utiliser cette valeur de quatre champs dans ce didacticiel. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir côte à côte, j'ouvre mon corréateur Visual Studio et mon navigateur à l'aide de l'extension LifeSer, et je crée déjà un document SML nommé index point STML Et vous pouvez également voir un élément profond dans mon navigateur. Et je me suis assis à 150 pixels de largeur et 100 pixels de hauteur dans cet élément profond. Maintenant, je vais animer cet élément profond, et je vais également lui donner couleur différente Je vais augmenter la largeur de cet élément. Comme vous pouvez le voir, j'ai déjà créé l'image-clé pour cette animation, et le nom de notre image-clé est À l'intérieur du carliss, je vais taper. Au début, je vais prendre 0 %. À l'intérieur du CVSS. Dans un premier temps, je vais changer la couleur d'arrière-plan. Et je vais mettre de la couleur jaune. Je vais également augmenter la largeur de l'article. Je vais taper avec la largeur. Comme vous pouvez le voir, notre précédent wi était de 150 pixels, et maintenant je vais mettre 200 pixels. Je vais également dupliquer cette ligne trois fois. 0 %, puis 50 %, enfin 100 %. Dans 50 % des animations, je vais augmenter la largeur à 50 pixels. Je vais également changer la couleur de fond. Couleur de fond rouge, et à 100%, je vais dire 300 pixels de largeur de l'article. Je vais également changer de couleur. Cette fois, je vais utiliser la couleur bleue. En gros, nous créons une image clé d'animation simple. Utilisons cette image-clé dans cette boîte. Pour cela, je vais d'abord prendre l'animation immobilière. Le nom de notre animation est un exemple. Ensuite, nous devons dépasser la durée de l' animation, et je veux terminer cette animation en 2 secondes. Ensuite, je vais transmettre la valeur du délai d'animation et je veux retarder cette animation de 3 secondes. Si je définis ce fichier, comme vous pouvez le voir, après trois secondes, il exécute notre animation. Une fois l'animation terminée, elle revient à sa position initiale. Je vais maintenant utiliser la propriété du mode fichier d'animation. Nous pouvons l'utiliser après la valeur de durée. Sinon, nous pouvons appeler le nom de la propriété. Je vais appeler le nom de la propriété, mode de fichier d'animation. Comme vous le savez, cette propriété comportait quatre valeurs. Dans un premier temps, je vais utiliser Bad value. À l'envers. Si nous utilisons le mode retour en arrière, cela passe directement dans le 0 % de cette animation. Permettez-moi d'augmenter le temps de temporisation de l' animation. Je vais utiliser 5 secondes pour cet exemple. Si je définis ce fichier, comme vous pouvez le voir, il passe déjà dans le 0 %. Cela commence à partir du 0 %. Puis venez 50 %, puis 100 %, et une fois l'animation terminée, elle revient à la position normale. Permettez-moi de vous le montrer encore une fois. Si je définis ce fichier, il démarre l'animation à partir de 0 %, puis retarde de 5 secondes, puis exécute notre animation. Comme vous le savez, si nous utilisons une valeur rétrograde, l'élément obtiendra les valeurs de style définies par la première image et les conservera pendant le délai d'animation. Passons à la valeur suivante, qui est forward. Je vais taper les cheveux vers l'avant. Si nous utilisons cette valeur, elle exécute simplement notre animation. Mais au final, il n'est pas revenu à l'état initial. Laisse-moi te montrer. Si je configure ce fichier, comme vous pouvez le voir, après 5 secondes, il exécutera notre animation. De plus, vous pouvez voir qu'il ne revient pas à son état initial. Comme vous le savez, l' élément conservera les valeurs de style définies par le dernier cadre de création. Comme vous pouvez le constater, notre dernière image est à 100 % et sa couleur de fond est le bleu A Dans cette position, nous définissons la largeur de l'élément, 300 pixels. Passons à la valeur suivante, qui est les deux. Si j'utilise cette valeur, Both, notre animation démarrera à 0 %, et une fois l'animation terminée, elle restera bloquée sur la position 100 %. Donc, si je définis ce fichier, comme vous pouvez le voir, il part du 0 %, puis après un délai de cinq secondes, il démarre notre animation. Comme vous pouvez le voir une fois l'animation terminée, l' état initial de cet élément n'est pas revenu. Si nous utilisons cette valeur, elle suivra la règle à la fois en avant et en arrière C'est le cas d'utilisation des deux propriétés. Parlons maintenant de notre dernière valeur, qui est aucune. Voici comment n'en taper aucun ici. Si je configure ce fichier, comme vous pouvez le voir, rien ne se passera ici. Au bout de 5 secondes, il suffit de lancer notre animation. C'est le cas d'utilisation de la valeur N. C'est tout pour ce tutoriel. J'espère que ce tutoriel vous plaira. Maintenant, vous savez ce qu' est le mode fichier d'animation. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 20. Tutoriel du mode État de jeu d'animation CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre une nouvelle propriété liée à l'animation CSS, et le nom de notre propriété est animation play state Moore. La question qui se pose maintenant est de savoir quel est l'état du lieu d'une animation. La propriété d' état de l'animation place, spécifiez si l'animation est en cours d'exécution ou en pause. Vous pouvez exécuter votre animation. Sinon, vous pouvez suspendre votre animation avec cette propriété. En gros, cette propriété deux valeurs, pause et running. Si vous utilisez la valeur de pause, elle indique que l' animation est en pause et que l'exécution est la valeur par défaut de cette animation. Sans perdre votre temps, commençons par l' pratique et essayons de comprendre ce qu'est l'état d'un lieu d'animation. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur so stop et mon navigateur à l'aide de l'extension PSaver, et j'ouvre mon précédent document de test Maintenant, je veux arrêter mon animation lorsque je place mon curseur sur cet élément profond. Pour cela, nous devons utiliser la propriété de la plaque d'animation. Comme vous pouvez le constater, nous retardons notre animation de 5 secondes. Si je sauvegarde ce fichier, vous pouvez voir au bout de 5 secondes qu'il exécute notre animation. Maintenant, je veux arrêter cette animation pendant qu'elle est en cours d'exécution. Pour arrêter l'animation, je vais survoler mon curseur Dans un premier temps, je vais créer un sélecteur de survol pour cette boîte Je vais taper point box hover dans les malédictions, je vais utiliser notre propriété Planche d'animation. Dans un premier temps, je vais utiliser Pause. Je vais taper pause ici. Si je sauvegarde ce fichier, comme vous pouvez le voir, bout de cinq secondes, il lancera notre animation. Mais je vais passer mon curseur sur cet élément, comme vous pouvez le voir, il arrête notre animation Je n'exécute pas complètement l' animation. je retire mes courbes comme vous pouvez le voir, cela termine l'animation Permettez-moi de vous montrer l' exemple une fois de plus. Mais avant de réduire le délai, 1 seconde. Si je configure ce fichier, comme vous pouvez le voir, il exécute à nouveau notre animation. Mais lorsque je passe le curseur sur cet élément, l'animation s' arrête Mais maintenant je vais supprimer le curseur de cet élément. Comme vous pouvez le voir, l'animation est maintenant terminée. Revenez ensuite à l' état normal de cet élément. Mais maintenant, je veux lancer cette animation, lorsque je passe mon curseur sur cet élément Pour cela, je vais copier cette propriété. Et collez-le ici. Par défaut, je souhaite suspendre cette animation. Mais quand je m' occuperai de cet élément, je veux lancer Donc, dans notre sélecteur Hober, je vais taper animation play state running Si je configure ce fichier, comme vous pouvez le voir une fois de plus, l'animation ne fonctionne pas. Mais si je concentre mon soignant sur cet élément, comme vous pouvez le constater, une fois de plus, il lancera notre animation C'est le cas d'utilisation de la propriété de la plaque d' animation. J'espère que vous comprenez maintenant comment cela fonctionne. Merci d'avoir regardé cette vidéo, bientôt pour notre prochain tutoriel. 21. Introduction et mise en œuvre de l'animation GSAP: Bonjour les gars, c' est bon de vous revoir. Encore une fois, je suis de retour avec une nouvelle animation Tutorial Real State. Et à partir de ce tutoriel, nous allons démarrer l'animation GreenSok. Essayons maintenant de comprendre ce qu'est l'animation GSOC. Ceci est le site officiel de Greensak Animation. GSP est une bibliothèque d'animation JavaScript standard de GreenSok Cela vous permet de créer des animations de haute performance qui fonctionnent dans tous les principaux navigateurs. En un mot, GSOC est une bibliothèque d'animation JavaScript. C'est très utile dans le développement Web. Maintenant, ouvrons la page d'accueil. Voici donc la page d'accueil de GSAP Animation. Nous avions l'habitude d'utiliser du CSS pour l'animation, mais nous pouvons désormais créer des animations à l'aide des bibliothèques Java Scrib Et maintenant, l'animation devient très facile car nous n'avons pas besoin d'utiliser une grande quantité de propriétés CSS dans notre projet. Non seulement l'animation, en utilisant GSAP, nous pouvons également créer un site Web Je vais vous montrer la démonstration. Voici l'exemple de site Web que nous pouvons créer à l'aide de l'animation GSOC Tous les sites Web que vous pouvez voir dans cette section sont créés avec l'animation GSOC Si je fais défiler Little wet vers le bas, vous pouvez voir ici le site web réalisé avec des animations GSP Supposons que je vais ouvrir ce site Web, ce site Web de portfolio. Voyons à quoi ça ressemble. Vous pouvez voir ici l'animation et les transitions de ce site Web. L'animation GSAP vous donne un aspect hybride à votre site Web Permettez-moi de vous donner d'autres exemples. Il existe de nombreux sites Web réalisés avec une animation GSOC. Supposons que si j'ouvre celui-ci, vous pouvez voir le résultat ici. Quand je fais défiler ma page vers le bas, ça ressemble à ça. Il existe de nombreux exemples réalisés avec des animations GSAP. Vous pouvez consulter tous les exemples un par un, et vous pouvez apprendre le GSAP si vous avez les connaissances de base du script Java, Atmel Vous n'avez pas besoin d'un niveau de codage avancé pour apprendre le GSAP Voyons maintenant comment installer l'animation GSOC. Pour cela, nous devons accéder à la documentation de la section doc. Et j'ai déjà ouvert mon éditeur de code Visa Studio et mon navigateur à l'aide de l'extension Live Server. Donc, comme vous pouvez le voir dans mon répertoire de travail actuel, nous n'avons que le fichier index point estil. Je vais maintenant créer un fichier JavaScript. Tapez le son app point, et je vais appuyer sur Entrée. Et maintenant, je vais lier ce fichier JavaScript dans mon document estim Ici, je vais utiliser la balise Script. La source du script est égale à app point s. Je vais définir ce fichier. Et vous pouvez donner n'importe quel nom à votre fichier Tower Script. Il n'est pas obligatoire d'utiliser Ap Dogs. Vous pouvez utiliser crypto js, ym Dogs, Hart Dogs. Tout tourne autour de toi. Revenons maintenant à la page du document. Après avoir ouvert la section de documentation, vous devez cliquer sur l'option déroulante Installer Sinon, vous pouvez rechercher Install. Je vais donc cliquer sur cette section Installer. Et ici, il fournit tout type de méthode d'installation. En utilisant NPM, Note package Manager, vous pouvez également utiliser CN Réseau de diffusion de contenu. Il fournit également R. Le meilleur et le plus simple moyen d' utiliser cette animation est le CDN. Et voici votre lien SN fourni par GSAP. Je dois donc copier ce lien et revenir à mon éditeur de code Is Studio. Et je vais le coller avant la balise de script App Do JS. Et je vais configurer ce fichier. Utilisez toujours votre fichier JS personnalisé sous le fichier source, car votre navigateur doit d' abord connaître GSA Ensuite, il peut facilement appeler les fonctions de votre fichier JS personnalisé. Et maintenant, nous allons expérimenter avec de petites animations Nous pouvons également créer cette animation en utilisant le CSS, mais nous n'allons pas utiliser le CSS ici. Implémentons donc l'animation GSop. Donc, dans notre body tag, je vais d'abord créer une boîte à points Deep Tag Dep Ici, je crée une balise profonde we, class name box. Ensuite, je vais donner un petit style à cette boîte. Laisse-moi te montrer. Je vais donc utiliser une balise de style. Style et à l'intérieur de la balise de style, je vais sélectionner la case. Boîte à points, puis dans la première propriété de Caris, je vais utiliser Wheel Et ici, je vais passer à 200 pixels. De plus, je vais définir la hauteur, la hauteur, 200 pixels. En gros, je vais créer une boîte carrée, puis je vais dire arrière-plan. Fond, et ça peut être de n'importe quelle couleur. Pour l'instant, je vais utiliser la couleur rouge car la couleur rouge est beaucoup plus visible. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Nous avons fait notre partie STML et Cass. Passons au fichier Abdo JS, animation Greensock. Vous souvenez-vous que dans nos précédents tutoriels, nous allons apprendre à faire et à en tirer ? Supposons que je veuille déplacer cette boîte dans la direction x. Je veux le déplacer de 100 pixels dans la direction xs. Pour l'instant, la position de cette case est nulle, et je veux la déplacer de 100 pixels. Si vous souhaitez déplacer de zéro à 100, vous devez utiliser deux. Et si vous voulez déplacer 102, zéro à nouveau, alors vous devez utiliser de Vous devez vous souvenir du concept de base à ce sujet ? Nous l'avons déjà appris dans notre section animation, je ne vais donc pas l' expliquer en profondeur. Commençons le code pour clarifier le concept. Ici, je vais taper GSA. GSA, point, nous allons utiliser deux fonctions. Deux. Ensuite, à l'intérieur du laiton rond, vous devez mentionner le sélecteur, l'élément que vous souhaitez sélectionner Je vais sélectionner cette case en utilisant son nom de classe. Donc, à l'intérieur des codes doubles, je vais taper point box. Alors viens. la ligne suivante, je vais utiliser calibraceis, et ici nous devons mentionner, que voulons-nous faire avec cette boîte ? Je veux déplacer cette case dans la direction excessive de x. Je vais donc passer X, deux points, et je vais le déplacer jusqu'à 300 pixels. Et avant de configurer ce fichier, si je vous montre mon fichier d'estimation des points d'index, et si je vous montre ma section de style, et comme vous pouvez le voir dans ma section de style, nous n'utilisons aucune animation. Après avoir défini ce fichier, comme vous pouvez le voir, cela ne fonctionne pas car ma suggestion automatique remplace ce mot clé par celui-ci. Encore une fois, nous devons le remplacer par du GSA. Oui, et je vais configurer ce fichier. A Pour définir ce fichier, comme vous pouvez le voir, l'élément a été déplacé de cette position vers cette position dans une direction excessive. Maintenant, laissez-moi vous expliquer ce qui se passe dans les coulisses. Examinons donc cette section et d'abord, je vais unifier cette option, puis je vais sélectionner cet élément et ici je vais ouvrir ma section de style. Comme vous pouvez le voir dans cette version de style, comme vous pouvez le voir dans cette section de style, elle transforme ici la propriété. Transform Translate 300 pixels. En arrière-plan, GSP utilise cette propriété sss pour déplacer cet élément Permettez-moi de clarifier le concept. Je vais étendre la valeur. Je vais en faire 500. Cette fois, je vais le déplacer de 500 pixels. Si je définis ce fichier, vous pouvez voir ici que valeur de translation de la transformation est maintenant la position x x de 500 pixels, et la position y xs est toujours nulle car nous ne déplaçons pas cet élément dans la direction y x. C'est pourquoi c'est zéro. La structure de base réalisée avec CSS. Pour ce tutoriel, je pense que le serveur live n'est pas obligatoire, je vais donc désactiver le serveur Lib. Et pour l'instant, je vais ouvrir le fichier Index point estim depuis notre répertoire Comme vous pouvez le constater, cette fois j'ouvre ce fichier depuis mon répertoire. Je n'utiliserai aucun serveur live. Si je recharge ce navigateur, vous pouvez voir l'animation Vous pouvez découvrir cette animation. Si j'utilise le serveur live, cela ne fonctionne pas très bien. Pour l'instant, si je lis ce navigateur, comme vous pouvez le voir se déplacer si vite, je vais dire une certaine durée. Ici, je vais utiliser le coma, puis je vais utiliser la durée de l'appel de propriété. Durée, deux points, pour l'instant, je vais définir cinq secondes. Je vais configurer ce fichier. Après avoir défini ce fichier, si je recharge ce navigateur, vous pouvez maintenant voir notre animation prendre cinq secondes pour la terminer Si je le recharge à nouveau, vous remarquerez ici que cela augmente de temps en temps notre valeur excédentaire En gros, il a changé la propriété ss en fonction de la durée. Si vous souhaitez exécuter cette animation au bout de 2 secondes, oui, vous pouvez utiliser le délai. Juste là, vous êtes dans le coma, alors vous devez taper delay. Retard, deux points, et moi un ou deux secondes de retard. Si je configure ce fichier et que je redémarre mon navigateur, comme vous pouvez le voir au bout de deux secondes, une animation démarre Pour réaliser cette animation, nous n'avons pas besoin de taper une énorme quantité de code Sess dans notre section Sass Il suffit d'utiliser cette quantité de code si nous utilisons la bibliothèque GSAP Ensuite, je vais déplacer cette boîte dans la direction y x. Ici, je vais taper y, deux points, et dans la direction xs, je veux le déplacer de 300 pixels. Si je définis ce fichier et que je recharge mon navigateur, comme vous pouvez le voir après avoir attendu deux secondes, il se déplace x x et il se déplace dans la direction x. Dans le même temps, si vous souhaitez modifier la couleur d'arrière-plan, vous pouvez utiliser cette propriété. Supposons que je veuille changer l'arrière-plan, donc je vais prendre la propriété d'arrière-plan. Couleur de fond. Colon, et je veux le dire couleur verte. Couleur de fond vert. Ensuite, je vais enregistrer ce fichier. Après avoir configuré ce fichier, je vais recharger le navigateur. Après avoir défini ce fichier, comme vous pouvez le voir, il ne fonctionne pas car je pense en avoir fait quelques. Nous devons fournir que cette valeur est une chaîne, je dois donc fournir cette valeur dans le devis. Je vais donc utiliser un single. Encore une fois, je vais configurer ce fichier et redoter mon navigateur. Après avoir redémarré mon navigateur, fonctionné pendant deux secondes, comme vous pouvez le voir, il a lancé l'animation et également changé la couleur de fond de cet élément profond Pour l'instant, je vais réduire la durée, je vais la faire passer à deux secondes. Je vais également supprimer le délai et redéfinir ce fichier. Comme vous pouvez le voir, il est maintenant passé du rouge au vert. N'oubliez pas qu'en CSS, nous utilisons une propriété d'arrière-plan comme celle-ci. Fond, couleur du trait d'union. Mais dans le script Java, nous n'utilisons pas de telles propriétés d'arrière-plan. Ici, nous utilisons de l'eau Camel Case. Comme vous pouvez le voir, nos personnages C commencent par un étui Camel. Nous utilisons le cas Camel dans le script Java. Ici, vous pouvez également utiliser dans la propriété hy la propriété de mise à l'échelle. Supposons que je veuille redimensionner cet élément. Échelle de type H. Échelle, et je veux l'augmenter jusqu'à deux fois, puis tomber dans le coma. Maintenant, si je lance cette animation, elle va étendre cet élément deux fois. Laisse-moi te montrer. Après avoir exécuté cette animation, comme vous pouvez le voir, elle augmente la taille de la boîte. Maintenant, c'est devenu 400 pixels en x xs et 400 pixels en y x. Non seulement vous pouvez régler w et hauteur, mais laissez-moi vous montrer. Encore une fois, je vais configurer ce fichier et lire mon navigateur, et cette fois, je vais définir w. Nous et comment je vais régler avec 100 pixels. En gros, si je définis ce fichier et lance cette animation, cela va réduire la largeur de l'élément car de quatre, la largeur de notre élément est de 200 pixels. Donc, si je relie cette animation comme vous pouvez le voir, cela en réduit la largeur. Pour l'instant, j'espère que ce concept est clair pour vous et que vous savez comment nous pouvons l'utiliser. Dans cet exemple, pour exécuter cette animation, nous devons recharger ce navigateur. Mais à l'avenir, pour exécuter cette animation, nous allons utiliser le déclencheur Scroll. Donc, chaque fois que je fais défiler le navigateur, il lance l'animation. Comme je vous l'ai dit, pour comprendre l'animation SAP, vous devez avoir des connaissances de base sur SSS et Stable Voilà pour ce tutoriel. Voici la petite introduction et démonstration de l'animation SAP. J'espère que ce tutoriel vous plaira. Merci d'avoir regardé cette vidéo, Stun pour le prochain tutoriel 22. Introduction et mise en œuvre de l'animation GSAP partie deux: Salut, les gars, c'est bon de vous revoir. Il s'agit d'un autre didacticiel lié à l'animation des chaussettes vertes. Dans notre précédent tutoriel, nous avons créé cette animation de base à l'aide de GSOC Si nous rechargeons cette page, comme vous pouvez le voir, voici notre animation Il a fallu 2 secondes pour terminer l'animation. De plus, cela a réduit la largeur de cet élément. Avec cela, modifiez également la couleur de fond de cet élément, du rouge au vert. Maintenant, je vais vous montrer comment vous pouvez faire pivoter cet élément. Pour l'instant, je vais commenter cette largeur de ligne, puis je vais utiliser une autre propriété appelée rotation. Faites pivoter, et je veux faire pivoter 360 d en vert. C. Si je configure ce fichier et que je perds mon navigateur, vous pouvez voir le résultat En gros, nous pouvons tout faire en utilisant nos propriétés d'animation en CSS. À l'avenir, nous allons appliquer cette animation à des événements. C'est pourquoi le script Java est important, et nous allons maintenant passer à la fonction from. Je vais maintenant commenter toutes les lignes. Ensuite, je vais appeler depuis la fonction. Encore une fois, Amer tapez G G SAP point, encore une fois, mon autosugest, remplacez mon mot clé Donc, menu GPS de type Amer. Un point de l' intérieur du rond ss. Dans un premier temps, je vais sélectionner l'élément de la boîte. Boîte à points. la ligne suivante, je vais utiliser des cas. Dans les boîtiers, nous devons définir nos propriétés et nos valeurs, et je vais appliquer exactement les mêmes propriétés. Ici, je tape x x la valeur est 500. La valeur Y est 300. Ensuite, je vais transmettre une valeur enracinée. Faites pivoter la valeur, appliquez Ama à 360 degrés. La valeur suivante est la durée. Durée et monta en deux secondes. Ensuite, je vais appliquer la couleur de fond. Couleur de fond Couleur de fond, ama apply est au vert unique. Et je veux configurer ce fichier. Donc, en gros, j'applique les mêmes propriétés que celles que j' applique dans mes deux fonctions. Si je relocalise mon navigateur, vous pouvez maintenant comprendre quelle est la différence entre deux et Lorsque j'utilise deux fonctions, l'élément est déplacé de l'origine. Mais lorsque vous appliquez à partir de la fonction , il renvoie à son lieu d'origine J'ai donc relogé mon navigateur, comme vous pouvez le voir, il est revenu à son lieu d'origine Si je relocalise à nouveau mon navigateur, comme vous pouvez le voir, il revient à sa position d'origine C'est donc la différence fondamentale entre la fonction two et la fonction from. Si vous remarquez que vous avez du gaz, il est devenu vert à rouge. De plus, il tourne dans le sens opposé. Parlons maintenant de la propriété de répétition. Si vous souhaitez répéter cette animation plusieurs fois, vous devez utiliser cette propriété. Il tape, répète. Répétez, et je vais dire répétez trois fois. Si je relocalise mon navigateur, il va répéter cette animation quatre fois au total Parce que par défaut, l' animation sera exécutée une fois, puis vous allez la répéter trois fois. Laisse-moi te montrer. Je vais donc recharger mon navigateur. Après avoir rechargé mon navigateur, comme vous pouvez le voir, il va répéter cette animation quatre fois au total Maintenant, si vous voulez le répéter à l'infini, vous pouvez utiliser moins une valeur pour cela. Si je définis ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il va survoler les informations d'animation T. Cela ne s'arrêtera pas tant que je n'aurai pas modifié la valeur. Pour l'instant, je vais modifier la valeur, répéter, zéro, et je vais enregistrer ce fichier. Après avoir configuré ce fichier, je vais recharger mon navigateur. Donc, comme vous pouvez le voir, cette fois, cela va arrêter la répétition de notre animation. Et maintenant je vais appliquer l'effet O. Maintenant, je veux exécuter mon animation de haut en bas. Pour cela, je vais transmettre une propriété O U, U et transmettre une valeur vraie. Vrai Ensuite, je vais répéter cette animation. Pour le temps. Je souhaite configurer ce fichier. Si je recharge le navigateur, vous pouvez voir l'effet UU Maintenant, ça marche comme UU. Si je définis cette valeur comme vraie, elle avance et recule. Il partira une fois et reviendra. Et si je passe la valeur de répétition à l'infini, puis à l'infini dans le temps, cela fera la même chose. Non seulement cela, vous pouvez également appliquer la même propriété dans ces deux fonctions. Ensuite, cela vous donnera le même effet, mais la différence est que si nous utilisons deux fonctions, cet élément ne reviendra pas à sa position initiale. Il s'arrête dans la position de destination à cet endroit. Revenons maintenant à la page à points d'index. Comme vous pouvez le constater, nous n'avons plus qu'un seul élément profond. Mais je vais franchir cette ligne trois fois au total. Nous avons maintenant un total de quatre éléments profonds. Je vais également commenter certaines propriétés de ma fonction ap Dots. Tout d'abord, je vais supprimer la fonction de rotation. Ensuite, je veux le déplacer uniquement dans la direction excessive. Ensuite, je vais supprimer la valeur de répétition. Je vais également décommenter U. Ensuite, je veux définir ce fichier Revenez ensuite à la page estel et réduisez la taille de cette boîte. Cette fois, je vais faire 100 pixels par 100 pixels. Si je définis ce fichier et que je recharge mon navigateur, il appliquera toutes les animations, tous les éléments profonds car leur classe est la même Faisons une petite marge entre eux. Marge, cinq pixels. Et je vais configurer ce fichier. Après avoir glissé ce fichier, si je lis mon navigateur, vous pouvez maintenant voir l' écart entre les deux. Maintenant, je vais changer le nom de la classe tous ces éléments. C'est la boîte numéro un. Il s'agit de la boîte numéro deux. Voici la case numéro trois, et voici la boîte numéro quatre. Et je vais configurer ce fichier. Revenons maintenant au fichier Apo JS. C'est la boîte numéro un. Je vais d'abord changer le style d'animation. Je vais utiliser deux fonctions. Cette appli, deux. Ensuite, je vais dupliquer cette section plusieurs fois. En gros, je vais supprimer toutes ces lignes commentées. Je n'en ai pas besoin. Ensuite, je vais dupliquer cette section au total trois fois. Il s'agit de la boîte numéro deux. Il s'agit de la boîte numéro trois. Désolé, c'est le numéro de boîte. Celle-ci est la case numéro trois, et la dernière est la case numéro quatre. Si je configure ce fichier et que je réorganise mon navigateur, le résultat sera le même Uniquement pour apporter des modifications dans notre index un point sur une section de style de fichier SML Ici, je vais cibler tous les éléments de en même temps. Parce que je change le parce qu'à partir d'ici, je change les noms des classes. Je vais passer le nom de balise de nom de l' élément D. Et définir ce fichier. Si je lis mon navigateur, vous verrez le résultat. Désormais, tous les éléments terminent l'animation en même temps. Mais maintenant, je veux lancer deuxième numéro après le premier numéro. Je veux dire qu'après avoir exécuté l'animation du premier élément, je veux un certain délai pour le deuxième élément. Pour cela, je vais utiliser ici une autre propriété appelée delay. Je vais à pied, je vais utiliser la propriété Delay. Retardez, et je veux attendre jusqu'à deux secondes. Oups, l'orthographe différée est ronde, DE AY. Je dois donc reconfigurer ce fichier et recharger mon navigateur. Après avoir rechargé mon navigateur, comme vous pouvez le voir, après un délai de deux secondes, il lance une animation. Ainsi, un par un, vous pouvez retarder l'animation. Supposons que pour le troisième élément, je vais le retarder jusqu'à 4 secondes. Ensuite, pour le quatrième élément, je veux le retarder jusqu'à 6 secondes. Encore une fois, je vais configurer ce fichier et recharger mon navigateur. Une fois mon navigateur rouge, une fois terminé, il attend 2 secondes, puis il s' exécute un par un. Maintenant, le problème est que vous devez sélectionner toutes les cases une par une. En outre, vous devez appliquer le délai plusieurs fois. Mais Green Sock a la solution pour cela. Je vais donc commenter toutes les lignes sauf la première. Ensuite, je duplique le premier et commente celui-ci. Et cette fois, je vais sélectionner toutes les cases en même temps. Je vais retirer la première boîte. Je dois également apporter des modifications à notre fichier stable. Encore une fois, je vais changer le nom de tous les cours. Sinon, nous pouvons également ajouter une autre boîte de nom de classe. Ici, je vais ajouter une boîte. Boîte. Et je veux configurer ce fichier. En gros, nous utilisons ici plusieurs classes sur le même élément. Revenons maintenant au fichier Abdo JS. Je vais maintenant appliquer le même délai à mon animation. Pour cela, il suffit d'utiliser une propriété appelée strager, STA double GER, staged, et je vais dire six Ensuite, je dois configurer ce fichier. Après avoir configuré ce fichier, je vais recharger mon navigateur. Comme vous pouvez le constater, après avoir terminé le premier, vous devez exécuter le second. Ensuite, après avoir terminé le deuxième, il lancera le troisième. la même manière, après avoir terminé le troisième, il lancera le quatrième. Si je réduis la valeur du baliseur de valeurs, si je lui donne quatre puis que je définis ce fichier, maintenant il fera la même chose un peu plus rapidement Après avoir terminé le premier, le second sera lancé. Ensuite, il lancera le troisième. Enfin, il va lancer le quatrième. Si je réduis la valeur du tigre, si je la fais 1 seconde, une, puis que je configure ce fichier et que j'élue mon navigateur, maintenant vous pouvez voir au bout d'une seconde qu'il exécutera toutes les animations une par une Maintenant, nous n'avons pas besoin de taper cette quantité de code pour obtenir le résultat. Une seule propriété et une seule valeur font la même chose. Nous n'avons pas besoin de créer une animation individuelle pour cela. À l'aide de la valeur de décalage, vous pouvez définir le délai entre les animations Répartissez la valeur pour gérer vos retards individuels. Si vous ouvrez la documentation de cette animation GSP et recherchez deux fonctions GSAP qui fonctionnent, et si vous ouvrez cette section, vous pouvez voir ici l'utilisation des propriétés spéciales Vous pouvez voir les données, le délai, la durée est, l'ID, le Las. Il existe de nombreuses propriétés liées à la fonction, et vous pouvez toutes les utiliser. Après avoir fait défiler cette page un peu vers le bas, vous pouvez voir ici la propriété stagger Et dans cette section, vous pouvez lire la documentation sur la propriété stagger documentation officielle est le meilleur moyen d'apprendre quelque chose. Cela vous donne toujours la bonne réponse à jour. Vous pouvez en savoir plus sur la propriété UU, les UE, les images-clés, etc. Dans notre premier didacticiel et le deuxième didacticiel, j'essaie simplement de vous présenter comment nous pouvons utiliser l'animation GSP, et quelles en sont les propriétés ? Nous venons de découvrir le processus de travail de l'animation GSP. le prochain tutoriel, nous allons en apprendre davantage sur les chronologies Nous allons en apprendre davantage sur le marchand de parchemins, les locomotives, etc. Voilà pour le tutoriel. Merci d'avoir regardé cette vidéo, Stedun, pour le prochain tutoriel 23. Timeline dans GSAP Créer votre première timeline: Bonjour les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec une nouvelle animation GSP liée au tutoriel Et dans ce tutoriel, nous allons apprendre la chronologie GSP La chronologie GSP est un outil de séquençage qui permet aux utilisateurs de contrôler et de gérer le timing de l'animation En gros, il s'agit d'un conteneur pour les jumeaux et autres chronologies, et il est utilisé pour créer des séquences complexes Avec les chronologies, les animations sont affichées dans l'eau. Ils sont listés dans le cool. Ainsi, de nouvelles animations peuvent être ajoutées sans calculer manuellement les délais. Les chronologies permettent également de créer des séquences d' animation facilement ajustables et résilientes Voici quelques mesures que vous pouvez prendre pour éliminer les délais. Positionner l'animation dans le temps, répéter les animations, inclure les délais avant la répétition et l'animation en chaîne. En un mot, la chronologie est tout ce qui se définit dans un laps de temps. Supposons qu'il s'agisse de notre chronologie de cinq secondes. Mais comment pouvons-nous spécifier différentes tâches à différentes secondes ? Nous pouvons effectuer différentes tâches à différents moments. En gros, en utilisant la chronologie, nous pouvons spécifier ce que nous allons exécuter étape par étape. Dans notre précédent tutoriel, nous allons découvrir comment exécuter une animation GSAP Si nous voulons exécuter des animations les unes après les autres, nous devons prévoir un délai pour chacune des animations, et pour résoudre le problème de retard, le GSP introduit une chronologie Nous allons donc discuter de la chronologie. Et n'oubliez pas que notre chronologie est liée les unes aux autres et qu'elle s'exécute étape par étape. Enfin, nous sommes dans la page de documentation de l'animation GSap Et dans nos précédents tutoriels, nous avons déjà appris comment installer l'animation GSP Revenons maintenant au code User studio. Comme vous pouvez le voir, côte à côte, j'ouvre les visières de votre éditeur de code et de mon navigateur Et comme vous pouvez le voir dans mon répertoire de travail actuel, nous avons le fichier Coral Three, le fichier Index point SML Mind Sess et le fichier Abdo GS Et dans notre fichier STL à points d'index, je lie déjà l'animation GSP dans cette balise de script, et j'utilise déjà lien SN de l'animation GSP à l' aide de la Maintenant, à l'intérieur du body tag, je vais créer une boîte Total Three. Le Hamer de type D a donc une boîte à étiquettes. C'est la boîte numéro un. Ensuite, je duplique cette section. Il s'agit de la boîte numéro deux. Encore une fois, je vais dupliquer cette section, et c'est la case numéro trois. De plus, je vais assigner un cours. Je vais attribuer la même classe à laquelle nous pourrons cibler toutes les cases conseillées. Je vais donc taper class, c'est juste une boîte. Ensuite, je copie cette section et je la colle dans notre case deux et boîte directement. Encore une fois, je vais configurer ce fichier. Ensuite, je vais passer au point principal CSS Five. Tout d'abord, je vais utiliser le sélecteur universel. Commencez dans le Cis, je vais dire marge, zéro. Notre prochaine propriété, je vais utiliser le rembourrage zéro, et notre troisième propriété est la taille de la boîte, la taille de la boîte , la zone de bordure Ensuite, je vais styliser l'élément de la boîte. Je vais donc utiliser le champ à points du nom de classe à l'intérieur des cultivs Première propriété, je vais utiliser le poids Poids, 100 pixels. Hauteur, 100 pixels. Ensuite, je vais utiliser la propriété d'arrière-plan, arrière-plan, et je vais utiliser la couleur dorée. De plus, je vais ajouter une marge, une marge, et je vais ajouter une marche de cinq pixels Je vais configurer ce fichier. Si je place ce fichier et que je connecte mon navigateur, vous voyez ici le résultat. Et maintenant, je veux attribuer une imitation différente à ces éléments Mais l'un après l'autre. Et pour attribuer l'animation, nous allons utiliser GSap Passons au fichier App Point GS. Je dois d'abord taper, Gap. Point. Encore une fois, notre suggestion automatique remplace le mot clé Je reviens à la position GSP, point, et je vais utiliser la fonction pro À partir de. Ensuite, dans set the round ss inset the double codes , je vais d'abord sélectionner le premier élément, la case 1 Je vais sélectionner cet élément en utilisant son nom d'identification, qui possède une case à cocher. Ensuite, Oma a inséré la propriété cis, d' abord, je vais utiliser l'opacité Opacité. Tout d'abord, je vais rendre l'opacité nulle et ensuite, je vais utiliser la durée, la durée de l'animation La durée, et je veux dire, la durée totale est de cinq secondes. Si je configure ce fichier et que je relocalise mon navigateur dans les 5 secondes, cet élément devient Je veux dire que cet élément opposé devient 021. Laisse-moi te montrer. Si je relocalise mon navigateur, comme vous pouvez le voir dans les 5 secondes, il devient Je vais également dire valeur excédentaire de 300. En cas d'excès de direction, cela provient de 300 pixels. Je vais configurer ce fichier et relocaliser mon navigateur, vous pouvez voir le résultat Je pense que cinq secondes, c'est trop long pour cette animation, donc je vais en faire deux secondes. Alors je vais commencer cette section. Cette fois, je vais sélectionner la case numéro deux. Je vais changer la case numéro deux du nom d' identification, je configure ce fichier et je recharge mon navigateur, puis les deux animations fonctionneront ensemble. Laisse-moi te montrer. Vous pouvez voir le résultat. Nous avons maintenant une solution. Nous pouvons utiliser la propriété du retard. Retardez, et je voudrais ajouter un délai de deux secondes. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, pour utiliser le COA entre ces deux D. Encore une fois, je vais configurer ce fichier et le diriger par navigateur Ici, vous pouvez voir qu'après avoir terminé la première animation et deux secondes de retard, terminer la deuxième animation. Si j'ai fait la même chose plusieurs fois, c'est devenu un énorme code. Supposons que nous créions un site Web où nous allions apprendre plusieurs effets, et que je veuille exécuter ces effets multiples les uns après les autres. Et si nous suivons cette méthode, c'est devenu horrible. Nous allons utiliser un calendrier pour cela. Je vais commenter tous les codes. Ensuite, je reviens à la section documentation. Vous pouvez ensuite rechercher une chronologie dans cette barre latérale de filtre. Vous pouvez également cliquer sur cette option, chronologie. Ici, j'essaie juste de vous montrer d' où vous pouvez obtenir la documentation de la chronologie. Revenez ensuite au fichier JS. Je vais d'abord déclarer une variable. Tapez ici CS. Cs et ma limite variable est T. TL stats pour la chronologie, égales à GSA Chronologie GS. Fonction de chronologie par points GSA. Ici, nous créons la chronologie, et maintenant je vais utiliser le même code. Je vais copier ce code et je vais l' exécuter avec GSap Laisse-moi te montrer. Ici, je vais coller le code et je vais le décommenter Nous avons maintenant besoin de cette propriété DLA. Je vais donc supprimer cette propriété. Ici, je vais remplacer le GSP par le TL. T L. Et je vais configurer ce fichier. Maintenant, nous créons ici une chronologie. Si je recharge mon navigateur, comme vous pouvez le voir après avoir terminé le premier, le second démarre Mais vous pouvez remarquer ici que nous n'utilisons aucun délai. Si je fais la même chose pour le troisième, je vais donc dupliquer cette ligne et changer la case numéro trois du nom d'identification, et ils définiront ce fichier. Ensuite, définissez ce fichier et rechargez-le par navigateur. Maintenant, vous pouvez voir qu'après avoir terminé le premier , il va commencer le deuxième, puis le troisième. En gros, la chronologie remplace la propriété delay. Bien entendu, vous pouvez utiliser le délai si vous travaillez avec peu d'animation. Si votre animation est grande, sinon, si vous utilisez plusieurs animations, optez toujours pour une chronologie. C'est très utile lorsque vous créez une série d'effets. Maintenant, revenons-en à la documentation. Si vous souhaitez répéter votre chronologie, vous pouvez utiliser cet objet. Laisse-moi te montrer. Je vais donc copier la valeur et la propriété de cet objet. Revenons ensuite au code visa sudo. Ensuite, dans cette fonction tine, je vais utiliser Cal ases. Ensuite, je vais coller la valeur de répétition. Je veux répéter cette animation deux fois au total. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il complète d'abord le premier, puis le deuxième, puis le troisième Et maintenant, il va répéter la chronologie. C'est ainsi que les répétitions fonctionnent. Et si vous voulez attendre entre ces délais, oui, vous le pouvez Pour utiliser cette propriété, il suffit de répéter le délai. Copiez donc cette propriété et cette valeur, puis revenez au code du studio, et après le coma, je vais les coller ici. Il va répéter ce produit d'animation deux fois. De plus, cela va encore une fois ajouter un petit délai entre cette chronologie. Si je configure ce fichier et que je recharge mon navigateur après avoir terminé la chronologie, vous pouvez voir qu'il va attendre 1 seconde Ensuite, il exécutera à nouveau la chronologie . Vous pouvez voir le résultat. Et si j'augmente la valeur, cela va attendre longtemps. En outre, il fournit d'autres fonctions telles que la pause, reprise du SC et l'inverse. Supposons que si vous voulez inverser la chronologie, si vous cliquez sur un bouton, cela va inverser la chronologie. Il fournit toutes les différentes options, comment vous pouvez l'utiliser. Vous pouvez lire la documentation pour en savoir plus à ce sujet. À partir de là, vous pouvez découvrir toutes les options. Parlons maintenant du temps absolu. Il a été mesuré dès le début de la chronologie. Permettez-moi de vous montrer l'exemple. Passons maintenant au code Visa Studio, et à d au point d'index, une amende stable. Ici, je vais utiliser une balise d' en-tête, H deux, et aussi je vais lui attribuer un ID égal à demi et il tape un texte, bonjour tout le monde. Et je vais configurer ce fichier et recharger mon navigateur. Revenons ensuite au fichier Ab point JS. Ici, je vais animer cette balise d'en-tête. Mais dans un premier temps, je vais réduire la valeur de répétition. Je voudrais le répéter une seule fois. Ensuite, je vais sélectionner cette balise de titre à l'aide de la chronologie. TL point, et je vais utiliser la méthode from. Ensuite, j'ai posé le laiton rond. Tout d'abord, je vais cibler d'abord, je vais cibler la balise d' en-tête à l'aide de l'iDame Possède un tag Dm. Donc, au niveau du calibrage, Ham utilise une propriété appelée opacité Opacité, et j'ai réglé l'opacité à zéro, puis je vais utiliser le temps obsolète exactement comme ça Hmm pour utiliser le temps obsolète, et je veux le régler sur 3 secondes. Si je place ce fichier et que je fais rouge mon navigateur, comme vous pouvez le voir, au bout de 3 secondes, l'animation démarrera. abord, il va afficher le hellowd, puis il va démarrer cette animation une par une En gros, cela ajoute un peu de retard à cette animation. En gros, il va afficher cet élément au bout de 3 secondes. Mais si je déplace celui-ci, si je le déplace en dessous de la case deux, je vais donc couper cette partie et la coller sous la section de la case deux. Si je configure ce fichier et que je relocalise mon navigateur, jusqu'à 3 secondes, il affichera ce texte Mais cela marque déjà le début de cette chronologie. Laisse-moi te montrer. Si je relocalise mon navigateur, comme vous pouvez voir, lancez mon animation, puis 3 secondes plus tard, le texte s'affiche C'est comme ça que ça marche si j'en change l'eau. Il y a beaucoup de choses comme ça dans la chronologie du GSP. niveau commence, et nous allons en apprendre davantage à ce sujet de temps en temps dans notre prochain tutoriel. Ensuite, nous allons créer un site Web. Dans notre premier tutoriel, nous allons apprendre comment utiliser GSP et dans notre deuxième tutoriel, nous allons en apprendre davantage sur la chronologie Dans le prochain tutoriel, je vais essayer de créer une page de destination intéressante en utilisant ces méthodes de chronologie. Et aussi, je vais essayer de mettre en œuvre tout ce que j'ai appris dans nos précédents tutoriels. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, Stune pour le prochain tutoriel 24. Créer des designs de chronologie animés: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié à l'animation DSP Aujourd'hui, dans ce tutoriel, nous allons créer un beau projet. Nous allons créer un projet de chronologie d'animation horizontale. Comme vous pouvez le voir dans mon navigateur, nous avons une ligne horizontale. Et comme vous pouvez le voir, nous créons une chronologie à l'aide de ces cases. Maintenant, je veux animer cette boîte lorsque je déloderai mon navigateur Vous pouvez donc remarquer que lorsque je déconnecte mon navigateur, vous pouvez d' abord le voir déplacer la ligne horizontale Ensuite, un par un, il va animer nos boîtes. Des cases avec effet d'arcs, effet de rotation, effet d' échelle, effet de facilité, et enfin, nous déplaçons cette boîte dans la direction opposée. Comment créer cet effet d'animation. Comme vous le savez, pour créer cet effet d'animation, nous allons utiliser la chronologie GSAP Nous allons également utiliser les propriétés GAP is I. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons créer cette belle animation. Comme vous pouvez le constater, nous pensons à Visto Codor. Et si vous remarquez, vous pouvez voir dans notre body tag, nous avons un tag profond principal. À l'intérieur de cette balise profonde principale, il créera plusieurs boîtes. Il créera un total de six boîtes, et chaque boîte sera livrée avec un identifiant différent. Avec cela, nous attribuons une boîte de nom de classe à chaque élément profond. Et pour définir la position de la boîte, nous attribuons également à d'autres classes, case top pour la position supérieure, et pour la case bottom pour la position inférieure. Nous utilisons cette classe pour positionner notre élément au-dessus de la ligne horizontale. De plus, nous avons une autre boîte de nom de classe en bas. Et cette classe avait l'habitude de placer des cases en dessous de la ligne horizontale. Passons maintenant au fichier CSS. Si je vous montre ce fichier CSS, dans un premier temps, nous attribuons une hauteur de victoire fixe à notre balise mean deep, et nous définissons également une couleur d' arrière-plan. Ensuite, nous créons ici une ligne horizontale en utilisant posto selector après abord, nous créons un contenu fade, puis nous le positionnons de manière absolue, car dans notre élément principal, Hos utilise la position relative, Dy D H utilise la position absolue Ensuite, j'utilise une hauteur fixe, six pixels par huitième, 1920 pixels. Ensuite, créez la ligne horizontale. Ici, je crée les boîtes, ces boîtes. Ensuite, je crée les cercles. Ici, nous créons deux cercles différents pour les classes boxtop et box bottom classes Pour créer les cercles, utilisez également le sélecteur After Posto Comme vous pouvez le voir, ce cercle et cette rose ont été créés à l'aide de sélecteurs postdoctoraux Enfin, une par une, je positionne cette boîte selon une ligne horizontale. Dans ce tutoriel, je ne vais pas vous expliquer comment je peux créer cette structure STS. Ne vous inquiétez pas, je vais fournir le code source de cette structure. Passons maintenant au fichier JS, le fichier Abdo JS. Mais avant, si je vous montre mon fichier STL à points d'index, vous pouvez voir ici que je crée déjà un lien avec la bibliothèque SP en utilisant CL Joignez également le fichier Abdo JS à ce document. Passons au fichier Abdo JS. Donc, au plus vite, je vais intégrer la chronologie. Je vais donc créer un coût variable. Et notre variable m est t, TL étoiles pour la chronologie, égale à g Sap. Fonction de chronologie des écarts. Ils en mettront deux sur cette ligne. Après avoir créé la chronologie, un par un, je souhaite implémenter tous les éléments. Dans un premier temps, je souhaite implémenter l'élément principal. Je vais sélectionner le nom de la classe, puis revenir à l'Apo Five. Dans un premier temps, je vais utiliser la fonction de formulaire. À partir de Then à l'intérieur du rond ss. premier temps, je vais sélectionner l'élément principal, en utilisant son nom de classe point Ming, et je veux déplacer cet élément dans la direction x x. À l'intérieur de l'hétérotype cals, x deux-points à l'intérieur du double moins cent Si je configure ce fichier, que je retourne dans mon navigateur et que je recharge mon navigateur, vous pouvez voir le résultat Comme vous pouvez le voir, nous allons déplacer cet élément principal de la gauche vers la droite, je pense que cette animation est trop rapide. Utilisons un peu de durée. Ici, je vais utiliser la propriété duration. Durée, et ici je vais utiliser la durée totale de la force par seconde. Je pense que c'est suffisant. Si je configure ce fichier, que je retourne dans mon navigateur et que je recharge mon navigateur, vous pouvez voir l'effet Comme vous pouvez le voir, toute la section se déplace du côté droit en 4 secondes. Mais si je recharge à nouveau ce navigateur, comme vous pouvez le voir, la couleur de fond du corps est toujours blanche Nous devons maintenant faire correspondre la couleur de fond de ce corps à cette couleur. Pour cela, je vais me lancer dans le fichier CSS style point. Et ici, je vais utiliser la même couleur de fond dans mon body tag. Donc, dans un premier temps, je vais sélectionner le body tag. corps est à la base, je vais utiliser cette propriété d'arrière-plan, et je vais définir ce fichier Maintenant, si je reviens dans mon navigateur et que je le recharge. Maintenant, la couleur de fond de notre corps et la couleur fond de notre élément principal sont similaires. Et pour rendre cette animation plus attrayante, faisons-la à 100 %. -100 %, pas un pixel. Si je configure ce fichier, que je reviens dans mon navigateur et que je recharge mon navigateur. Vous pouvez voir l'animation. Comment c'est ainsi. Il s'agit simplement d'une animation de la section principale. Mais comme je vous l'ai dit dans nos précédents tutoriels, l'utilisation de Live Server est l'option non basée pour animation SSs car chaque fois que je sauvegarde mon fichier, il recharge le navigateur Je vais donc suspendre cet enregistrement pendant 2 secondes. Et cette fois, j'ouvre ce document depuis mon répertoire, pas depuis le serveur live. un premier temps, dans notre chronologie, nous déplaçons cet élément principal dans la direction de l'excédent de -100 % Ici, nous utilisons la chronologie car je veux réaliser mon animation une par une . Ensuite, je vais sélectionner notre case 1 élément. Celui-là. Je copie donc le nom de l'ID et je le retourne dans le fichier Abdo JS Ici, je vais lier, en gros, je vais explorer cette section et remplacer le point principal de notre première case, en utilisant son nom d'identification. Il a cette boîte. De plus, je souhaite déplacer cet élément dans la direction x xs. Ici, je veux dire durée, juste 1 seconde. Et je vais configurer ce fichier. Revenons maintenant au navigateur. Si je lis ce navigateur, dans un premier temps, il va exécuter l'animation principale, puis il va exécuter la deuxième animation. Mais le problème vient de l'animation du premier élément, les cercles passent derrière la ligne horizontale. Donc, pour résoudre le problème , ajoutez-le au fichier style point cess. Il s'agit de notre fichier de style point cess. Il s'agit de la ligne horizontale. Au début, sur notre ligne horizontale, je vais dire indice zéro, indice Zight, et zéro indice un Alors je vais dire zéro index dans notre boîte. Je vais taper Zight index et Herm pas 999. Et je vais configurer ce fichier. Ici, j'utilise Big V car à chaque fois j'ai besoin de cases au-dessus de la ligne horizontale. C'est pourquoi, ici, je suis assise la ligne horizontale zéro index un et case zéro index 999. Si je configure ce fichier et que j' agis dans le navigateur et que je recharge ce navigateur, cette fois, vous pouvez voir vers le haut pour exécuter l'animation principale, cela déplace la boîte Et comme vous le remarquez, cette fois notre cercle est au-dessus de la ligne horizontale. Avec cela, je veux rendre cette animation de boîte plus attrayante. Hm pour définir l'opacité. Revenons au fichier Abdo Chase et cette fois je vais utiliser une autre opacité d'appel immobilier, OPA City opacity OPA City opacity Lorsque la boîte commence à se déplacer dans la direction x xs , nous définissons le zéro opposé. Si je reviens au navigateur et que j'élue mon navigateur, vous pouvez maintenant voir l'animation principale Si vous le remarquez attentivement, cela fonctionne correctement. Mais si j'augmente la durée, si je fixe à 3 secondes l'animation de la boîte, puis que je reviens le navigateur et que je recharge le navigateur, il lance d'abord l'animation principale Vous pouvez maintenant remarquer l'opacité. Ici, vous pouvez remarquer l'opacité de cet élément, la façon dont il a été modifié Maintenant, je veux faire passer cette animation au niveau supérieur. Pour cela, nous devons utiliser un effet d'assouplissement. Passons donc à la documentation de ce site Web et recherchons easing, EA, AIN Z, vous pouvez le rechercher dans cette section latérale des filtres. Fournissez plusieurs exemples d'animation d'assouplissement, tels que puissance un, puissance deux , puissance trois, puissance quatre , retour, limites, illustrations, etc. Chaque option est différente l' une de l'autre. Supposons que si je sélectionne Power Two, c'est ainsi que notre animation va fonctionner. Si j'utilise du retour. C'est ainsi que va fonctionner notre animation. C'est le graphisme de cette animation. De même, si vous souhaitez utiliser l'effet illustry, voici comment fonctionne l' effet illustry Supposons que je veuille utiliser cet effet pour illustrer. Copiez cette propriété et valeur, puis revenez au code du studio. Ici, j'appuie sur la durée, 2,2 x 0,5 secondes, puis je vais utiliser le coma. Ensuite, je vais utiliser cette propriété et cette valeur illustrer. Et je vais configurer ce fichier. Après avoir défini ce fichier, si je reviens dans mon navigateur et que je recharge ce navigateur, après avoir effectué l'animation principale, vous pouvez voir l'effet d'essai pour le premier élément Pour l'instant, j'aimerais arrêter l'animation profonde principale, car à chaque fois, l'animation va s' exécuter et cela prend plus de temps. Je vais d'abord commenter cette section. Ne t'inquiète pas Je décommenterai cette section plus tard. Ensuite, je vais configurer ce fichier et recharger mon navigateur. Maintenant, vous ne pouvez remarquer que cette animation. Si vous souhaitez modifier l'effet, supposons que vous souhaitiez utiliser ba. Dans ce cas, juste ici, vous devez taper is back. Après ce fichier, si je recharge mon navigateur, vous pouvez dire le rétroeffet Maintenant, de la même manière, je veux amener cet élément dans la direction opposée. Je veux apporter cet élément du bon côté. Cette fois, je veux apporter notre dernier élément du bon côté. Je vais agrandir cette section, et cette fois je vais sélectionner la case numéro six, car c'est la dernière case. Nous sélectionnons cette case à l'aide de son nom d'identification, puis je vais changer la position de l'axe X, à cent pour cent par rapport au X X. Si je place ce fichier dans un navigateur et que je recharge mon navigateur. Comme vous le remarquez, la première boîte vient de cet endroit et la deuxième boîte vient de cette direction. Les deux animations font la même chose, mais juste pour changer de direction. Ensuite, je vais utiliser l' effet de boîte pour cet élément, 2012. Si je sélectionne cette option, vous pouvez voir comment fonctionne cette animation. Revenons au code Es studio. Entre la case 1 et la case 6, je veux placer l'animation de la case 2. Je veux le créer en série pour une copie cette section et sélectionner la case deux, et je vais redéfinir la valeur ese en bound Et aussi, nous devons changer la position, xs en y x, moins y x, et je vais définir ce fichier. Après avoir défini ce fichier, passons au navigateur. Après le navigateur, après avoir exécuté la première animation de boîte, il va exécuter la deuxième animation de boîte. Oups, je crois que j'ai fait une erreur parce que nous devons sortir cette boîte par le bas, pas par le haut. Revenons à votre code de visa supprimons le -100 % et définissons ce fichier Après ce fichier, encore une fois, je vais recharger mon navigateur. Après avoir exécuté la première animation, vous pouvez remarquer la deuxième animation, son fonctionnement et son effet de rebond Ensuite, il exécute la troisième animation. Ensuite, je vais animer la troisième boîte. Revenons donc aux visas selon votre code, et je vais piger cette section Et cette fois, je veux sélectionner la case numéro trois, et je vais changer de direction -100%. Avec ça. Maintenant, avec Bounce, je veux un effet de rotation. Je vais donc utiliser une propriété appelée rotation. Faites pivoter, deux points, et je veux le faire pivoter à 360 degrés, un cercle complet. Je vais configurer ce fichier. Après avoir configuré ce fichier, si je reviens mon navigateur et que je recharge mon navigateur, il exécute d'abord notre premier élément, puis il exécutera le second élément, et si vous remarquez, comme vous pouvez le voir, qu' il arrose l'élément et qu'il l'a enraciné Ensuite, je vais cibler la quatrième case. Encore une fois, je reviens au code stop et au duplicata, numéro trois Tout d'abord, je vais changer de direction 100 % parce que je veux le déplacer depuis le bas. Ensuite, je vais utiliser le même effet de limites. Mais cette fois, je ne vais pas utiliser l'effet de rotation. Cette fois, je vais utiliser la compétence 5. Échelle, deux-points, et je veux faire une échelle de 0 à 1. Donc, ici, je passe à zéro. Mais avant de définir ce fichier, nous devons changer l'identifiant, case numéro quatre, et je vais définir ce fichier. Maintenant, saluons le navigateur. Après avoir relégué le navigateur, si vous remarquez la quatrième case, vous pouvez comprendre l'animation Avec l'effet de rebond, il redimensionne l'élément. Maintenant, je veux animer le cinquième élément. Pour cela, je vais utiliser un autre effet cette fois. Cette fois, je vais utiliser le slow effect. Revenons au code du studio, et d'abord, je vais dupliquer cette section. Ensuite, je vais changer d'identifiant. Case quatre à cinq, et remplacez le rebond par lent Au début, je vais changer la direction de -100 %, et je vais supprimer celle de l'échelle Cette fois, je ne vais pas appliquer d'effet d'échelle et je vais définir ce fichier. Après avoir défini ce fichier, retournez dans le navigateur et rechargez-le. Après avoir comparé le navigateur, comme vous pouvez le voir une par une, il va exécuter toutes les animations. Inclinaison de l'animation, animation rotative, animation à échelle, animation à effet lent. Et rétro-animation dans la direction opposée. Et maintenant, je vais activer mon animation profonde principale. Revenons au code du studio vidéo et décommentez cette section Et configurez à nouveau ce fichier. Revenons maintenant au navigateur et redirigeons mon navigateur. Maintenant, vous pouvez voir d' abord, vous pouvez voir une ligne horizontale venir de cette direction, puis une par une, elle exécute toute l'animation. Enfin, nous créons cette animation à effet de chronologie à l'aide de GSAM C'est tout pour le tutoriel, comme pour regarder cette vidéo, rendez-vous pour le prochain tutoriel 25. Lien animé CSS Button: Bon retour, les gars. Il s' agit de notre premier exercice. Nous allons commencer notre exercice d'animation par un exercice simple. Dans ce tutoriel, nous allons apprendre comment créer un bouton de lien animé en CSS. Voyons le résultat de cette animation. Permettez-moi de vous montrer le résultat de notre projet. Comme vous pouvez le constater, il y a un bouton. Lorsque je passe le curseur dessus, vous pouvez voir un effet de glissement De plus, vous pouvez voir que c'est toujours la couleur du texte. C'est un projet très simple, mais efficace pour les débutants. Laissez-moi vous montrer comment nous pouvons le créer. Comme vous pouvez le voir, côte à côte, j'ouvre mon iso sudo Correor, et mon navigateur en utilisant l'extension Live Server Dans un premier temps, je vais créer une balise d'ancrage dans ce document. Je vais donc taper A, et je vais taper du texte. Cliquez sur moi. J'ai configuré ce fichier, vous pouvez voir le texte dans notre navigateur, cliquez sur moi. Je vais également attribuer une classe à cette balise d'ancrage. Classe, et le nom de notre classe est BTM signifie bouton. Ensuite, à l'intérieur de la balise head, je vais créer une balise de style. Ensuite, dans la balise de style, je vais créer un sélecteur en utilisant le point de classe BTN BTN Puis à l'intérieur de la Calass. Dans un premier temps, pour notre classe de boutons, je vais parler d'une couleur de fond. Donc, pour taper l'arrière-plan ici. Contexte. Je vais prendre la couleur orange pour notre arrière-plan. Si je définis ce fichier, vous pouvez voir le résultat, et maintenant je veux changer la couleur du texte. Certains types, couleurs, couleurs, blancs. Si je configure ce fichier, vous pouvez voir le résultat. Si vous le remarquez, vous pouvez voir un soulignement dans ce texte, et nous devons maintenant le supprimer. Pour cela, nous devons utiliser la propriété de décoration du texte. Je vais taper une décoration de texte. Aucune. Si je définis ce fichier, comme vous pouvez le voir, cela supprime le soulignement du texte. Ajoutons maintenant un peu de rembourrage à ce bouton. Un peu de rembourrage, un rembourrage par le haut du bouton, je vais attribuer un pixel, et de gauche à droite, je vais attribuer dix Si je configure ce fichier, vous pouvez voir le résultat. Si vous souhaitez ajouter un paragraphe au-dessus du bouton et en dessous du bouton. Dans ce cas, vous devez utiliser le bloc d'affichage intégré. Tapez donc display property. Afficher le bloc en ligne. Si nous n'utilisons pas la propriété display inline, notre rembourrage peut se chevaucher avec Pour cette raison, nous devons utiliser le bloc intégré de valeur d'affichage. Maintenant, je veux augmenter la taille de la police, et je change également la famille de polices. Tapez donc la famille de polices, les cheveux, la famille de polices, l'antenne. Je vais également augmenter la taille de la police. Donc, pour taper la taille de police ici, taille de police. 22 pixels. Si je suis satisfait, vous voyez maintenant clairement notre bouton. Donne-moi un coup de pied Vous pouvez maintenant voir la couleur en arrière-plan. Lorsque je passe le curseur, je souhaite animer cette couleur d'arrière-plan Je ne veux pas montrer cette couleur sans animation. Je veux juste montrer cette bordure de couleur de ce bouton. Pour cela, je vais commenter le contexte de cette propriété. Ensuite, je vais taper border. Bordure d'un pixel, solide, et je vais utiliser la couleur rouge orangé pour la bordure. Si je configure ce fichier, vous pouvez voir le résultat. Je vais également changer la couleur de police. Je vais utiliser la même couleur pour le formulaire. Tarif orange. Si je définis ce fichier, maintenant vous ne pouvez voir que la bordure et le texte, et maintenant je veux donner un effet de glissement en utilisant l'animation. Pour cela, je vais créer un pseudo point sélecteur BTN Ensuite, définissez les alias. Au début, je vais définir une couleur de retour, taper un arrière-plan, et je vais utiliser la même couleur pour l'arrière-plan, taux d'orange, puis nous devons le positionner. Je vais taper position property. Position absolue. Si nous utilisons une valeur, nous devons supprimer notre contenu. Pour cela, je vais taper des codes doubles pour le contenu. Nous devons le laisser en blanc. Si nous utilisons le pseudo sélecteur Ater et avant. Comme vous pouvez le constater pour Ater, nous utilisons la position absolue. Je vais utiliser position relative dans notre conteneur parent, position relative. Après la position, nous devons passer le type v en haut et à gauche, haut, zéro, gauche, zéro, puis je vais passer à la position et à la hauteur pour notre sélecteur Ater Premier type à cent pour cent. Et puis je vais aussi dire hauteur, hauteur, 100 %. Si je configure ce fichier, comme vous pouvez le voir, notre élément de tag couvre l'ensemble de notre bouton. Pour l'instant, je vais dire 0 % avec, et maintenant nous devons créer l'effet de survol de la classe BGN Pour cela, je vais taper point btn, et je vais créer un sélecteur de survol Ensuite, dans le CVSS, je vais d'abord changer la couleur du texte du bouton Lorsque je passe le curseur sur ce bouton, je souhaite changer la couleur du texte du bouton Je vais taper en blanc. Ensuite, je vais dupliquer ce sélecteur de survol avec du verre BTN, et maintenant je vais créer un sélecteur de survol avec apter Her colon apter ce sélecteur de survol avec du verre BTN, et maintenant je vais créer un sélecteur de survol avec apter Her colon apter. Dans ce sélecteur, je souhaite étendre le cannabis. Je veux taper du cannabis à cent pour cent. Si je définis ce fichier et que je passe mon curseur sur ce bouton, vous pouvez voir l'effet, mais vous ne pouvez pas voir l'effet de glissement De plus, vous ne pouvez pas voir le texte car nous devons déplacer le conteneur ter derrière le texte. Pour cela, nous devons utiliser l'indice Z. Certains tapent un index moins un. Si je définis ce fichier et que je passe mon curseur sur ce bouton, vous pouvez voir l'effet Ici, vous pouvez voir que lorsque je place mon curseur dessus, la couleur du texte se trouve. Cela a permis d' augmenter la largeur du sélecteur de 100 %, passant de 0 % à 100 Et maintenant, nous devons utiliser la transition pour notre animation. Nous devons utiliser cette transition dans notre classe mère. Dans la classe BTN, je vais taper transition Transférez tout. Je souhaite appliquer la transition à toutes les transformations. C'est pourquoi j'utilise toutes les valeurs, puis nous devons passer le temps de transition. Je veux passer 0,5 seconde, puis vous devez passer le mode de transition, qui est E. Je vais utiliser la valeur e. De plus, je veux passer la transition de ve. Pour cela, je vais utiliser zéro seconde. Si je définis ce fichier, il n'affectera que le texte. Si j'en fais trop, vous pouvez voir l'effet. Vous pouvez voir l'effet de transition sur notre texte, pas la couleur de fond. Pour obtenir cet effet de glissement, nous devons utiliser cette transition dans notre sélecteur supérieur Je copie cette transition et je la colle ici. Si je place ce fichier et que je survole mes courbes dessus, vous pouvez voir le résultat Nous avons créé avec succès notre bouton de lien animé. Nous n'utilisons aucune image-clé CSS pour cela. Hé, cet exercice n'est pas très difficile car je veux démarrer ces projets d'animation avec des effets de transition très simples, pas avec les images clés CSS. Dès notre prochain projet, nous allons passer au plus difficile. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain exercice. 26. CSS 3D Flip on Hover Pure CSS3 3D Effets de Hover Button: C'est bon de vous revoir une fois de plus, je suis de retour avec un nouveau projet d'animation passionnant. Dans ce projet, nous allons créer un bouton de survol pour trois jours de sommeil Sans perdre votre temps, assistons à la démonstration. Comme vous pouvez le constater, il y a un bouton. Si je passe mon curseur dessus, vous pouvez voir le résultat. Ici, vous pouvez voir la partie opposée de ce bouton. Il appuie sur le bouton et redonne un nouveau goût. Cliquez sur les cheveux. C'est un bouton d' animation survolté, mais il est assez avancé Sans perdre votre temps, commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon correcteur Visual Studio et mon navigateur en utilisant l'extension Lb Server De plus, vous pouvez voir que je crée déjà un document estil nommé index point at Avec cela, je crée un fichier Sess, style point Sess. Comme vous pouvez le voir, je lie ce fichier de style à ce document estim Je vais donc d'abord créer une balise d'ancrage à l'intérieur de la balise body. Tapez donc A. Par défaut, je ne veux pas le rediriger, je veux donc utiliser le tag has. Maintenant, à l'intérieur de cette balise d'ancrage, je vais créer trois nouvelles balises span. Façade en verre Span. Ensuite, je vais supprimer cette balise span deux fois. nom de notre première classe d'envergure est frontal, et le nom de notre deuxième classe d'envergure est central. Donc, tapez, centrez, et notre dernier nom de classe span est de retour. Alors, tapez en arrière. Ensuite, sur notre face avant, je vais taper pi, et sur notre face arrière, je vais taper les cheveux. Pour notre étiquette d'envergure centrale, je veux la laisser vide. Si je configure ce fichier, comme vous pouvez le voir, comme vous pouvez le voir dans mon navigateur, ici c'est sprint, click air, coin supérieur gauche de ce navigateur. J'ai refait avec succès une pièce stable. Passons au fichier de thèse et personnalisons cette page. Dans un premier temps, je vais styliser notre body tag. Donc pour taper le corps. À l'intérieur de la Calise, je vais mettre Marzin zéro, Marzin zéro De plus, je veux définir padding zero, padding, zero, puis je vais utiliser la propriété de la famille de polices Tapez donc la famille de polices, Sans. Je vais également définir une couleur de fond sombre pour notre corps. contexte, et je vais utiliser hexa ve, a, deux, six, deux, six, 26 Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir dans mon navigateur, notre couleur de fond est maintenant gris foncé, et nous devons maintenant supprimer cette étiquette de colère À l'intérieur de l'étiquette de colère, nous avons le total pan tag. Stoppons l'étiquette de colère. Donc, res A dans les calices au début, je vais utiliser position property, position Position, absolument. Maintenant, je veux aligner cette balise d'ancrage, au milieu de cette page. Pour cela, je vais utiliser la meilleure propriété, Top 50 %. Ensuite, je vais utiliser la propriété Lip. Laissez 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, alignez notre balise d'ancrage, au milieu de cette page Web. Ensuite, je vais utiliser la propriété transform. Alors tapez, transformez ici, transformez. Transformez, traduisez. Comme vous le savez, en utilisant la méthode translate, nous pouvons déplacer un élément par rapport à sa position actuelle, en fonction de x x et yx. Pour x xs, je vais passer -50 %, et pour l'axe y, je vais également passer -50 Ensuite, je vais dire d'augmenter la largeur de son étiquette d'angle. Dans un premier temps, je vais taper « nous ». Nous sommes 200 pixels, puis je vais dire propriété de hauteur, hauteur 60 pixels. Si je définis ce fichier, vous pouvez voir le résultat, puis je vais dire centre de ligne texte, centre d'alignement de texte Comme vous le savez, nous allons créer un bouton en trois points. Pour cela, nous devons utiliser une autre propriété, qui est le style de transformation. Donc, pour taper, transformez le style. Transformez le style. Ici, je vais utiliser preserve three d v. Cette propriété spécifie comment les éléments imbriqués sont rendus dans un espace en trois D. Comme vous le savez, nous devons utiliser cette propriété avec la propriété transform. Sans propriété de transport, nous ne pouvons pas utiliser cette propriété. Nous en apprendrons davantage dans notre série de didacticiels, puis je vais utiliser une autre propriété, qui est prospective, prospective de 1 000 pixels. De plus, je vais dire transformer la position de l'origine, transformer l'origine, le centre du centre. Si je définis ce fichier, comme vous pouvez le voir, il aligne maintenant parfaitement notre contenu au milieu de cette page Web. Nous ne pouvons pas comprendre la perspective et les trois transformations parce que nous ne stylisons pas notre objet span. Nous devons maintenant styliser notre objet span. Comme vous pouvez le voir, nous avons un objet Pro Three Span. Stylisons tous les objets en même temps. Pour cela, je vais sélectionner span tag. Span. Dans le cavas , je vais d'abord taper position property Position absolue. Ensuite, nous devons aligner cette balise span. zéro, p zéro. De plus, je vais dire y et poids, taille 100 % poids 100 %. Ensuite, je vais utiliser ce blog, ce bloc d'affichage, et je vais également aligner le texte à l'intérieur de cette balise panoramique. Je vais lier le texte, aligner le texte, aligner le texte au centre, puis je vais dire hauteur de ligne. Hauteur de ligne, 60 pixels. Si je configure ce fichier, vous pouvez le voir ici chevaucher notre texte. Ensuite, je vais dire taille de police, 24 pixels, et je vais également définir une couleur d' arrière-plan pour la balise span. Contexte. Je vais utiliser la valeur RGV RGB, comme vous le dites, nous devons d'abord transmettre la valeur rouge, puis la valeur verte, enfin le veau bleu Avec cela, nous devons transmettre la valeur Alpha. Nous pouvons contrôler la transparence à l' aide de la valeur Alpha. C'est pourquoi nous devons utiliser ce fichier. Ici, je vais passer 255 pour le rouge, 255, puis je vais passer encore une fois, deux fois cinq pour le vert et 255 pour le bleu. Pour notre Alpha u, je vais passer 0,10. Nous devons maintenant changer le style de transformation. Je vais lier Transform Style Transform Style, PS 3. Maintenant, je ne veux pas montrer le verso de notre balise span. Lorsque vous effectuez une rotation, nous ne voulons pas afficher le verso. Pour cela, nous devons utiliser une propriété, et vous le savez, qui est la visibilité dans l'espace arrière. dos arrière augmente la visibilité, et je vais définir une valeur cachée parce que je ne veux pas afficher le verso, puis je vais définir le rayon de bordure de la balise span, le rayon de bordure, 30 pixels. Notre propriété suivante est la transformation du texte. Ensuite, je veux transformer le texte en majuscules. Pour cela, je vais utiliser la propriété de transformation du texte. Transformation de texte, majuscules. Ensuite, je vais définir une couleur pour notre texte. Article en couleur. Si je configure ce fichier, vous pouvez voir le résultat. Sur ce, je veux dire propriété de transition, transition. 1 seconde. Comme vous le savez, nous avons un total trois objets span à l'intérieur de la balise d'ancrage. Je vais transformer tous les thèmes différents du tag span. Dans un premier temps, je vais transformer le recto, puis je vais transformer le verso. Enfin, je vais transformer celui du centre, et nous allons exécuter la transformation à l'aide du sélecteur Revenons au fichier CSS et commençons par notre première balise span. Donc, tapez, span dot front. Ensuite, dans les calses, je vais utiliser la propriété transform, transform, transform rotate x, et je veux le faire pivoter de zéro d. Avec cela, je veux le déplacer dans la direction z x. Je vais taper, traduire z, 20 pixels. Si je définis ce fichier, vous ne pouvez pas voir le résultat car je souhaite effectuer cette transformation lorsque je passe le curseur sur ce bouton Maintenant, je veux faire pivoter ce bouton lorsque je le survole. Pour cela, nous devons créer un sélecteur de survol. Donc, pour obtenir cette ligne , je vais attacher le tag d'ancrage Colon Hover. Lorsque je survole mon curseur, je souhaite faire pivoter notre balise frontale de moins 180 Si je place ce fichier et je passe mes courbes dessus, vous pouvez voir le résultat Vous pouvez voir notre première étiquette panoramique pivoter de moins 180 degrés. Nous devons faire la même chose pour notre plaque arrière. Je vais sélectionner ce code et nous obtenons cette ligne. Ici, je vais attacher span, point, back. Par défaut, je veux le faire pivoter de 180 degrés, et je vais utiliser le même transfert vidéo de 20 pixels. Dans notre sélecteur hober, je veux le faire pivoter de zéro à d, vers l'arrière, et je veux le faire pivoter de Si je place ce fichier et qu'il contient des hober micers, vous pouvez maintenant voir l'effet rotatif en trois D. Je souhaite maintenant définir une couleur d' arrière-plan pour notre balise de plan central. Celui-ci. Pour cela, je vais lier span point center. Dans les étalonnages, je vais utiliser la propriété d' arrière-plan, arrière-plan, et je vais utiliser le dégradé de couleur, et je vais utiliser le dégradé linéaire Et je vais utiliser la direction des lèvres. Je veux passer à la lit. Virgule. Je vais maintenant utiliser la valeur de couleur hexa Il possède un tag C 30 1a5b. C'est une couleur rose, et notre couleur suivante est tag 71 29bd. C'est une couleur violette. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, pour notre objet à travée centrale, je souhaite activer la visibilité en arrière plan Je vais taper Backspace visibility, et je vais utiliser une valeur visible Ensuite, je vais créer un sélecteur de survol pour notre balise center span Et je vais supprimer le premier mot clé, et je vais taper au centre. Pour Rotate, je vais utiliser moins 18d. Mais pour Translate Eight, je vais utiliser zéro pixel. Si je définis ce fichier et que les micros Hober sont sur ce bouton, vous pouvez voir l'effet des trois D. Nous avons créé avec succès trois boutons D flip Her. J'espère que ce projet vous plaira. Merci d'avoir regardé ce DVD, je suis prêt pour notre prochain exercice. 27. Texte animé modifiable: Ravie de vous voir, encore une fois, je suis de retour avec un nouveau projet d'animation passionnant. Dans ce projet, nous allons créer un texte animé irritable avec l'effet lumineux de Case Passons à l'écran de l' ordinateur pour voir la démonstration. Ici, vous pouvez voir à quel point notre texte brille, et vous pouvez également voir le reflet de ce texte Non seulement cela, mais notre texte est également irritable. Laisse-moi te montrer. Supposons que si vous voulez taper votre nom, vous pouvez supprimer le texte de cet endroit et vous pouvez taper votre nom. C'est une très bonne pratique et un exemple d'animation SSS. Vous pouvez utiliser cette animation sur votre site Web. Cela peut donner à votre site Web un bleu très créatif. Sans plus attendre, commençons le projet et voyons comment nous pouvons le créer. Comme vous pouvez le voir, côte à côte, j'ouvre donc à codaor et à mon navigateur en utilisant l'extension Light Server, et je crée déjà un document eSTIML nommé index point eSTIML nommé index Avec cela, je lie un fichier CSS, style point CSS. Au début, dans la balise body, je vais créer une balise headted, H two header, et à l'intérieur de cette balise, pour le moment, je vais taper du texte. Si je configure ce fichier, vous pouvez voir le résultat. Texte. Il s'agit d'un contenu statique. Nous ne pouvons pas le modifier depuis notre navigateur. Si vous voulez en faire un contenu irritable, dans ce cas, nous devons utiliser un attribut, et le nom de notre attribut est content irritable. Laisse-moi te montrer. Ici, je vais taper le contenu dans le tableau, et je veux le rendre vrai. Si je le confirme puis que je définis ce fichier, nous pouvons maintenant modifier notre contenu depuis notre navigateur. Laisse-moi te montrer. Je veux convertir le texte en nom. Vous pouvez voir le résultat. Nous avons réalisé avec succès notre partie table. Passons à notre partie design. Je vais sauter le fichier CSS, le style CSS. Dans un premier temps, je vais utiliser sélecteur universel pour taper étoile À l'intérieur du Calass, je veux définir une marge. Marge, zéro. Avec cela, je veux également définir le rembourrage, le rembourrage zéro En outre, je souhaite utiliser la propriété d' oxydation, la taille de la boîte, la mise en boîte, la zone de bordure Ensuite, je vais utiliser la famille de polices, la famille de polices. Famille de polices, et je souhaite utiliser la police Aerial. Souffle aérien et sensible. Si je dis ce fichier, vous pouvez voir le résultat. Ensuite, je veux styliser le corps de notre body tag. Au lieu des alias, je veux commencer par la propriété d' affichage Display Display Flex. Hé, si vous n'êtes pas familier avec Flex and Read, vous pouvez consulter mon cours. Justifiez ensuite le centre de contenu. Je souhaite également aligner cet article au centre. Je souhaite utiliser la propriété Aligner l'élément, Aligner le centre de l'élément. Notre prochaine propriété est de hauteur minimale. Nous devons définir la hauteur minimale, la hauteur M. Hauteur minimale, je veux utiliser 100 VH. Avec cela, je veux définir une couleur de fond foncée. Bground, et je vais utiliser gv ve. Pour le tarif, je vais en utiliser cinq. Pour le vert, je vais en utiliser 30. Pour le bleu, je vais utiliser 71. Si je configure ce fichier, vous pouvez voir la couleur. Vous pouvez voir la couleur de fond bleuâtre foncé, est également au centre de notre contenu au milieu de cette page Parce que nous utilisons Flexbox pour aligner notre contenu, puis nous passons à la partie la plus importante, à savoir la conception des balises d'en-tête H deux à l'intérieur du calise, notre première propriété est position, position relative, et notre deuxième propriété est la taille de police Taille de police six M. Si je définis ce fichier, vous pouvez voir le résultat. Avec cela, je veux définir l'espacement des lettres, l'espacement des lettres. Espacement des lettres, 15 pixels. Notre prochaine propriété est que la couleur signifie la couleur de l'étang. Colorie, et je vais utiliser ou donner une valeur. Pour le rouge, je vais en utiliser quatre. Pour le vert, je vais utiliser 50, et pour le bleu, je vais en utiliser 124. Si je configure ce fichier, vous pouvez voir le résultat. Cette couleur est assez identique à la couleur de fond, et maintenant je vais transformer ces prises en majuscules Le texte est surligné en majuscules. Si je définis ce fichier, vous pouvez voir le résultat, puis je vais le définir à 100 %. Le texte est aligné au centre, puis vient la partie très importante de cette vidéo. Maintenant, nous devons refléter ce texte. Je souhaite créer un reflet en forme de médaille. Pour cela, nous devons utiliser une nouvelle propriété n box reflect. Laisse-moi te montrer. Hé, comme vous pouvez le voir, je travaille avec le navigateur Chrome. C'est pourquoi nous devons utiliser un préfixe. clé Web, le nom de notre propriété, la boîte reflètent. Réfléchissez. premier temps, nous devons déclarer la direction de notre réflexion, qui est u, puis nous devons fournir la longueur de cette réflexion, qui est d'un pixel. Si je configure ce fichier, vous pouvez voir le résultat. Cela crée un reflet parfait de notre texte. Notre première valeur est la valeur de direction de réflexion. Notre deuxième valeur est la valeur définie. Troisièmement, nous devons fournir la valeur de la tasse. Pour la valeur Mux, je vais utiliser un dégradé linéaire. Ici, je vais taper un gradient linéaire. À l'intérieur des parenthèses, notre première valeur est transparente. Notre deuxième valeur est v. Entre parenthèses, nous devons fournir la valeur argv Mais dans un premier temps, je vais allumer le film blanc. Maintenant, je vais passer le Vu, première valeur O est la valeur rouge. Pour le rouge, je vais utiliser 11. Pour le vert, je vais en utiliser 70. Pour le bleu, je vais utiliser 18. Enfin, nous devons transmettre la valeur Alpha, comme vous le savez, à utiliser pour des raisons de transparence. Pour la valeur Alpha, je vais utiliser 0,267. Si je configure ce fichier, vous pouvez voir le résultat. Ensuite, je vais utiliser un point-virgule pour terminer cette ligne. Notre propriété suivante est la hauteur de ligne, la hauteur de ligne. Pour la hauteur de ligne, je vais utiliser 0,70 E. Ensuite, je veux activer le contour de ce texte Je souhaite utiliser la propriété outline. Aucune. Si je configure ce fichier, vous pouvez voir le résultat. Après avoir retiré le contour, notre réflexion est attachée à notre contenu. Notre réflexion semble maintenant réaliste, puis vient notre dernière partie, qui est l'animation. Dans un premier temps, je souhaite créer une image clé au rythme des images clés. Le nom de notre animation est animate. Puis à l'intérieur de la classe. Comme vous le savez, nous avons au total deux types de sélecteur d'images-clés. Vous pouvez utiliser un ou deux mots clés. Sinon, vous pouvez utiliser une valeur en pourcentage. Pour cet exemple, nous devons utiliser une valeur en pourcentage. Non seulement, nous devons travailler avec plusieurs valeurs en pourcentage, et je prépare déjà la valeur en pourcentage pour cet exemple. Je vais le copier et je veux le coller ici. Coller. Ensuite, à l'intérieur des étuis, nous devons utiliser notre propriété. Dans un premier temps, je souhaite changer la couleur du texte. Je vais donc utiliser la valeur de couleur. Couleur, et je vais utiliser la valeur AGV. Et j'utilise la même couleur que celle que j'utilise dans notre balise d'en-tête. Notre prochaine propriété est Text Shadow. Alors tapez, ombre de texte. Prends Shadow, aucun. Comme vous pouvez le constater, j' applique cette propriété 0 % d'animation, 18 % d' animation, 20 % d'animation, 50,1 % d'animation, 60 % d'animation, 65,1 % d'animation, 80 % d'animation, 90,1 % d'animation et 92 % d'animation Maintenant, appelons l' animation et essayons de voir elle fonctionne correctement ou non. Je souhaite utiliser la propriété d'innovation. Animation, et notre moi d'animation est animé, durée de votre an nation est de 1 seconde, et la direction de notre animation est linéaire Pendant la durée de notre animation, je vais utiliser Infinite Wheel Infini. Si je sauvegarde ce fichier, voyons ce qui s'est passé. Comme vous pouvez le constater, rien ne se passe. Parce que pour créer un effet croissant, nous devons jouer avec la valeur de l'ombre du texte. Pour cela, nous devons utiliser un autre sélecteur de pourcentage. J'ai déjà copié le sélecteur de pourcentage et je vais le coller ici Ensuite, dans la classe, je vais utiliser la propriété color. Color, color, white, has tag, F f f. Maintenant, nous devons jouer avec la propriété TeX Shadow. Une sorte d' ombre fiscale. Prends Shadow. Dans un premier temps, vous devez transmettre la valeur x xs, qui est zéro, puis vous devez transmettre le y xs Vu. Je vais utiliser zéro. Troisièmement, vous devez transmettre la valeur Blarns. Ici, je vais utiliser dix pixels. Enfin, vous devez passer la couleur de l'ombre. Pour la couleur des ombres, je vais utiliser le RGV vu. RGB entre parenthèses, je vais taper valeur rouge C six, valeur verte 149 et la valeur bleue 231 Si je configure ce fichier, vous pouvez voir le résultat. Tu peux voir comment ça saigne. Vous pouvez également voir le reflet. Et maintenant, je veux rendre cet effet plus attrayant. Je veux dupliquer cette ligne, C P C Dans la ligne suivante, je veux dupliquer cette ligne. Maintenant, je veux juste augmenter la valeur du flou, 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir un effet de lumière croissant sur le bord de ce texte. Après le coma, je veux dupliquer cette ligne. Encore une fois, je souhaite augmenter la valeur des 40 pixels de Blarns Encore une fois, je veux dupliquer cette ligne, et maintenant je vais utiliser 80 pixels. Enfin, je vais utiliser 160 pixels. Si je supprime le dernier virgule et configure ce fichier, vous pouvez voir l'effet. Comme vous pouvez le constater, notre effet de croissance semble désormais plus attrayant. Non seulement cela, il est également modifiable. Supposons que vous souhaitiez saisir votre nom. Je vais supprimer celui-ci, et je vais taper Smith. Vous pouvez taper n'importe quel texte ici car nous utilisons du contenu modifiable, comme vous pouvez le voir, du contenu modifiable vrai J'espère que vous comprenez maintenant comment nous pouvons créer cet effet croissant. Merci d'avoir visionné cette vidéo, restez à l'affût de notre prochain projet. 28. Œils animés suivent le curseur de la souris: C'est bon de vous revoir , je suis de retour avec un nouveau projet d' animation Chases passionnant, et le nom de notre projet est Animated eyes follow mouse cursor Allons voir la démonstration. Ici, tu peux voir un visage. Si vous le remarquez, vous pouvez voir ses yeux suivre le point du curseur. Si je le déplace à droite de cette page, vous pouvez voir qu'il suit. Si je le déplace vers le haut de cette face, il suivra également. Si je place mon curseur sur ce visage, vous pouvez voir que cela a changé la réaction buccale. Voyons comment créer ce projet. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visual Studio et mon navigateur en utilisant l'extension PSEver, et je crée déjà un document eSTIML nommé Index point estel. Je lie déjà ce document eSTIML au fichier Sess, Style point Sess abord, dans la balise body, je vais créer une classe D, D et le nom de notre classe est phase. Dans un premier temps, je veux créer le visage. Ensuite, dans cette balise deep, je vais créer une autre classe deep, D. Dans cette section, nous allons créer notre visage. Ensuite, dans cette section, nous allons créer deux si. D, plus moi, et je vais mettre à jour cette diapositive. Nous avons refait avec succès une pièce stable. Tout d'abord, nous créons une balise pour la phase. Ensuite, à l'intérieur de cette balise rapide, nous créons un bloc pour s, puis nous passons à une autre balise profonde pendant deux s. Passons maintenant à la section style. Dans un premier temps, je vais utiliser un sélecteur universel, Star. Dans les boîtiers, je vais d'abord utiliser la propriété de marge. Marge, zéro, puis je vais utiliser la propriété de remplissage, le zéro de remplissage et la zone de bordure de la taille de la boîte Ensuite, je vais survoler le body tag. Boîtier à l'intérieur des boîtiers, écran flexible. Justifiez le centre de contenu. J'utilise un conteneur flexible pour aligner notre centre de phase sur cette page. Ensuite, je vais utiliser la propriété Align item. Alignez les éléments au centre. Hauteur minimale, hauteur moyenne, 100 VH. Je souhaite utiliser toute la page Web. C'est pourquoi j'utilise 100 VH, et notre dernière propriété est l'arrière-plan B-Ground. Pour la couleur d'arrière-plan, je souhaite utiliser la valeur RGV RGV pour le rouge, je vais utiliser huit, et pour le vert, je vais utiliser la valeur 84 Pour le bleu, je vais utiliser 19. Si je configure ce fichier, vous pouvez voir la couleur de fond. Pour ce projet, je vais utiliser une couleur de fond bleu foncé, et maintenant je veux styliser la partie faciale. Je veux styliser Dot Face, Inside the calibraces. Dans un premier temps, je vais utiliser la propriété position, la position relative, et notre propriété suivante est Wed, 300 pixels. Je veux aussi dire hauteur, hauteur, 300 pixels. Notre prochaine propriété est en arrière-plan. Bground, encore une fois, je vais utiliser la valeur RGV. RGV, pour Red Value, je vais utiliser 255 Pour la valeur verte, je vais utiliser 198, et pour la valeur bleue, je vais utiliser 54. Si je définis ce fichier, vous pouvez voir la boîte carrée sur votre écran, et maintenant nous devons convertir la forme carrée en forme ronde. Pour cela, je vais utiliser la propriété border radius. Rayon de bordure 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Je vais également utiliser la propriété d'affichage. Présentez le lin. Justifiez le centre de contenu. Je vais également utiliser le centre des propriétés de l'élément d' alignement. Hé, si vous n'êtes pas familier avec CSS Flexbox et Greed, vous pouvez consulter mes virus Cs réactifs Nous façonnons notre phase avec succès. Maintenant, nous devons entrer dans cette phase. Pour cela, je vais créer la phase Colon cool avant le sélecteur, avant Puis à l'intérieur de la voiture se trouve la résine. Comme vous le savez déjà, nous devons d' abord prendre une propriété vide, et le nom de notre propriété est content, contenir un vide Ensuite, notre propriété suivante est position, position absolue. Ensuite, je vais dire hauteur et poids, poids 150 pixels, hauteur 70 pixels, et maintenant je vais prendre la couleur de fond. Bmoulu, chocolat. Si je place ce fichier, vous pouvez voir une forme rectangulaire au milieu de cette face. Maintenant, nous devons déplacer ce visage un peu plus bas. Pour cela, je vais utiliser Top Value. 180 pixels supérieurs. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir que notre bouche ressemble à une boîte carrée, et pour créer une forme de bouche parfaite, nous devons utiliser la propriété du rayon de bordure. Dans un premier temps, je souhaite définir un rayon de bordure dans ce coin. Pour cela, je vais utiliser le rayon inférieur gauche de la bordure. Rayon inférieur gauche de la bordure, et je vais utiliser 70 pixels Si je place ce fichier, vous pouvez voir le résultat, puis je parierai cette ligne et je remplacerai lap par right. Si je place ce fichier, vous pouvez le voir ici créer une forme de sourire. Maintenant, je veux changer le mouvement de la bouche lorsque j' ouvre le curseur dessus. Pour cela, nous devons créer un autre sélecteur. Laisse-moi te montrer. Face à points : Colon survole, deux points avant. Dans le caliss, je vais réutiliser cette valeur et cette propriété Je vais copier la propriété et valeur. Et collez-le ici. Maintenant, une par une, je vais remplacer ces valeurs. Tout d'abord, je vais modifier la valeur maximale, 210 pixels. Si je place ce fichier et que je passe mon curseur dessus, vous pouvez voir la différence Cela change la position du support. Ensuite, je vais modifier ce rayon d'eau. Rayon zéro du rebord inférieur de la bouteille. De plus, le rayon en bas à droite de la bouteille est nul. Si je place ce fichier et que je passe mon curseur dessus, vous pouvez voir la différence Mais il n'y a aucune transition dans cette transformation. Pour cela, nous devons utiliser la propriété de transition. Ici, je vais taper transition. Transition 0,5 seconde. Si je place ce fichier et que je survole mes voitures dessus, vous pouvez voir l'effet de transition Il faut 0,5 seconde pour terminer la transformation. Nous avons terminé avec succès notre section buccale. Passons à la section de glace. Comme vous pouvez le voir à l'intérieur du bac à glace, nous en avons deux. Créons le si de ce visage. Dans un premier temps, je vais styliser la section point. Ensuite, dans la position relative de Calass, je veux le positionner en haut de -40 pixels, et je vais utiliser la propriété d'affichage display flex En utilisant cette propriété et ces valeurs, nous avons réussi à déplacer notre section de glace à cet endroit, non au milieu de cette face. Ensuite, nous devons créer la classe i. Je vais sélectionner la classe ice, je vais également sélectionner la classe i. Ensuite, dans le réglage des étalonnages, notre première propriété est la position, la position relative, et je vais aussi dire hauteur et largeur pour cela, c'est-à-dire Wed Une cellule typique, la hauteur un type. Wed Une cellule typique, la hauteur un Après w et hauteur, je vais commencer par la couleur de fond. Contexte. C'est. Si je configure ce fichier, vous pouvez voir le résultat. Fondamentalement, côte à côte, il crée deux boîtes carrées avec une hauteur typique. Ensuite, je vais utiliser la propriété d'affichage. Bloc d'affichage. Ensuite, je vais utiliser la propriété border radius. Rayon de bordure 50 %. Si je configure ce fichier, vous pouvez voir la différence. Ici, vous pouvez voir côte à côte, cela crée deux globes oculaires, mais il n'y a pas d'espace entre deux globes oculaires Pour cela, je vais utiliser la propriété de marge. Marge, zéro et 15 pixels. Si je configure ce fichier, vous pouvez voir la différence. Dans l'ensemble, cette valeur de marge fournit un espace de 30 pixels entre ces deux yeux, et nous devons maintenant créer les globes oculaires de cet œil Dans un premier temps, je vais copier cette ligne. Et je vais le coller ici. W I, je vais utiliser avant le sélecteur. Colon Colon avant. Ensuite, à l'intérieur du calis, comme vous le savez, nous devons d'abord créer un contenu vierge, un contenu vide Notre prochaine propriété est position, position absolue. De plus, nous devons le placer, donc je vais utiliser la meilleure valeur, Top 50 %. Il reste 25 pixels, et pour nos yeux, je vais m'asseoir à 840 pixels Hauteur également 40 pixels. Ensuite, je vais utiliser la couleur de fond pour notre globe oculaire, notre arrière-plan, et je vais utiliser le RGV GV, pour le vert, je dois passer 42. Alors pour le rouge, je vais encore passer 42. Et pour le bleu, je vais passer 42. J'ai configuré ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, cela crée deux boîtes carrées gris foncé. Mais nous devons lui donner une forme ronde. Je vais utiliser le rayon de bordure. Rayon de bordure, 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Bonjour, vous pouvez voir notre glace regarder vers le bas sous cet angle. Mais je veux changer l'angle d'observation de la glace, quelque chose dans cette position. Pour cela, je vais utiliser la propriété transform. Transform translate -50 % pour x xs, également -50 % pour y Si je configure ce fichier, vous pouvez voir le résultat. Regardons maintenant sous cet angle. Si je place mon curseur dans cette phase modi, vous pouvez voir la réaction, mais la boule de glace ne suit pas la position du curseur. Pour cela, nous devons utiliser JavaScript. Nous avons terminé avec succès notre partie stylistique. Dans la prochaine partie de cette vidéo, nous allons travailler avec JavaScript. Merci d'avoir regardé cette vidéo, restez connectés pour la prochaine partie. 29. Effets d'animation du chargeur de cercle ondulé CSS 3D: Allons voir les gars. Encore une fois, je suis retour avec un nouveau projet d'animation CSS. Dans ce projet, nous allons créer une animation de chargeur de cercles Web. Passons à l'écran de mon ordinateur pour voir la démonstration. Ici, vous pouvez le voir créer une très belle vague efficace à l'aide de trois cercles en D. Voyons comment créer cette animation. Comme vous pouvez le voir, côte à côte, j'ouvre mon VSO Studio Creor et mon navigateur à l'aide de l'extension Light Server, et je crée déjà un document STL nommé Index Dot STL Je lie également ce document au fichier Tyler SSS. Donc, d'abord, dans ma balise body, je vais prendre une balise profonde, D, et je vais donc définir une classe pour ce chargeur de classes profondes. Ensuite, à l'intérieur du DIP tag, je vais prendre plusieurs span. En gros, je vais utiliser balise span vide pour créer des cercles. Pour ce projet, je vais utiliser le tag Peptin span, donc je vais dupliquer cette ligne forte time Nous avons un total de 15 étiquettes d'envergure pour 15 cercles. Nous avons effectué avec succès notre partie d'estimation. Passons maintenant au fichier CSS, style point Css. Ici, dans un premier temps, je vais sélectionner le sélecteur universel, qui est une étoile Ensuite, à l'intérieur des étalonnages, je vais utiliser la propriété de marge Marge, zéro. Ensuite, je vais utiliser la propriété de rembourrage. Rembourrage zéro. Ensuite, j'ai configuré ce fichier. Ensuite, je vais sélectionner le body tag. Type de corps à base de plantes. Ensuite, à l'intérieur du calvass, je vais d'abord utiliser la propriété display Présentez le lin. Justifiez le centre de contenu. Notre prochaine propriété est l'article aligné. C'est également le centre, puis je vais dire la hauteur minimale de notre page Web. Pour cela, je vais utiliser la propriété de hauteur moyenne, I N hauteur. Hauteur principale, 100 VH. Je souhaite sélectionner une page entière pour ce projet. C'est pourquoi j'utilise 100 VH. Notre prochaine propriété est en arrière-plan. Arrière-plan, pour l'arrière-plan, je vais utiliser la valeur RGV RGB Pour le rouge, je vais taper 70. même pour le vert, je vais taper également 70, et pour notre valeur bleue, je vais taper 70. Si je définis ce fichier, vous pouvez voir ici que notre couleur d'arrière-plan est le gris foncé, et maintenant je vais styliser la classe du chargeur. Donc, pour sélectionner point loader. Et définissez les calibrages dans un premier temps, je vais utiliser la propriété position Lié au poste. Je vais également régler la hauteur et le poids de ce chargeur, le poids, 300 pixels. Hauteur, 300 pixels également. Je vais maintenant utiliser la propriété la plus importante, qui est le style de transformation. Transformez le style. Dans notre propriété de style de transformation, je vais utiliser la valeur Pi trois D, car je veux donner à notre cercle trois D. Notre propriété suivante est transformer. Transformer notre première valeur est prospective. Prospective, 500 pixels, O La valeur suivante est rotation v rotation x, ici je vais passer à l' angle de passage, 60 degrés. Ensuite, je vais styliser toutes les balises span à l'intérieur de la classe loader. Je veux lier l'espace entre les points. Je vais sélectionner toute la durée. Ensuite, à l'intérieur des étalonnages, notre première propriété est la position, la position absolue Notre prochaine propriété est le bloc d'affichage. Et maintenant, je vais définir la bordure de notre balise span. Bordure, cinq pixels. Je vais définir une bordure de cinq pixels, et je veux une bordure unie, et la couleur de notre bordure est le blanc. Donc, pour taper AF A. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez le voir, il suffit de créer plusieurs boîtes au même endroit. Pour l'instant, ce n'est pas clair pour nous. Notre prochaine propriété est box shadow, box shadow. Je vais positionner cette ombre, zéro cellule Pi, cinq pixels et zéro pixel. Je vais également utiliser une couleur pour cette ombre en forme de boîte. Etiquette H CCC. A. Donnez une couleur plus claire à notre ombre. Maintenant, avec cette valeur, je veux utiliser une autre valeur, qui est incrustée Je veux aussi placer une ombre à l'intérieur d'une partie des anneaux. C'est pourquoi j'utilise la valeur inst. Ensuite, je vais copier la valeur, et je vais la coller ici. Je vais configurer ce fichier. Notre prochaine propriété est la taille des boîtes. Dimensionnement de la boîte, et ici je vais utiliser la valeur de la zone de bordure. De plus, je vais utiliser une autre propriété, qui est le rayon de la bordure, le rayon de la frontière, le rayon de la frontière 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Je sais que ce n'est toujours pas clair pour toi. Et maintenant, je vais augmenter la taille du cercle un par un. Pour cela, nous devons sélectionner toutes les balises span une par une. Sélectionnons toutes les balises span une par une. Certains types, point, loader ou span tag, span. Colonne, et maintenant je vais utiliser le sélecteur h child, le H child Dans un premier temps, je vais sélectionner notre premier stylo, alors j'en tape un ici. Ensuite, à l'intérieur du calivass, nous devons positionner notre premier porte-stylo Dans un premier temps, je vais utiliser la propriété supérieure, la propriété supérieure zéro. Notre propriété suivante est Lp, Lip est également zéro, puis vient notre autre propriété, qui est nulle en bas. Notre dernière propriété de positionnement est la bonne, la bonne, également zéro. Pour cela, je vais utiliser une autre propriété, qui est le délai d'animation. Animation, D. Pour l'instant, je vais laisser ce champ vide. Je vous expliquerai plus tard pourquoi j'utilise cette propriété. Si je configure ce fichier, comme vous pouvez le voir, il crée notre premier cercle, et c'est le plus grand cercle depuis notre boop, et pour créer notre deuxième cercle, je vais dupliquer toute cette section Dans un premier temps, je vais changer de sélecteur, hein, ch deux. Avec ça, je vais changer la valeur supérieure gauche de Valu Gottma et Laisse-moi te montrer. Dix premiers, tour, dix, position inférieure, dix, position droite, dix. Si je place ce fichier, vous pouvez voir ici que rien ne se passe ici. Cela ne crée pas de cercle car nous ne fournissons aucune unité. Ici, nous devons fournir une unité. Je veux fournir un pixel ici, dix pixels, dix pixels et dix pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Il y a un autre cercle à l'intérieur de ce cercle. Ensuite, un par un, je vais créer ce cercle. Je vais dupliquer cette section, et ici je vais sélectionner l'enfant trois. Je vais également augmenter les valeurs de position, 20 pixels, 20 pig self bottom et 20 pig sulfo Si je place ce fichier, vous pouvez voir le résultat. Cela ajoute un troisième cercle à ce groupe, et maintenant je vais avancer rapidement dans cette section pour terminer le processus. Comme vous pouvez le constater, nous terminons le processus de création. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir que tous ces cercles sont parfaitement alignés. Ici vous pouvez voir, et ici vous pouvez voir chaque fois que j'ajoute une valeur de dix pixels à notre valeur précédente. Dans notre 13e sélecteur, nous utilisons la valeur maximale de 120 pixels Mais dans notre sélecteur suivant, dans notre 14e sélecteur, nous utilisons 130 De cette façon, dans notre 15e sélecteur, nous ajoutons dix pixels et nous passons 140 vagues Nous avons créé notre cercle avec succès. Nous devons maintenant l'animer. Il suffit de jouer avec la valeur de l'indice Z pour créer la vague. Créons donc une image-clé pour cette animation. Nous arrivons à la section supérieure et ici, je vais créer l' image-clé au rythme de l'image-clé Ensuite, nous devons lier le nom de la clé Fram et le nom de notre clé Fram est animate Ensuite, à l'intérieur du ss, nous devons sélectionner la position. Pour sélectionner la position de l'animation, je vais utiliser une valeur en pourcentage. Tout d'abord, je vais sélectionner deux positions, une position 0 % et une position à 100 %. Ensuite, à l'intérieur du Crass, à cette position, je veux transformer les cercles Ici, je vais utiliser une transformation de propriété. Transformez, et je vais utiliser translate Z value. Traduisez Z. Et je veux le traduire de -100 pixels dans la direction z x. Ensuite, je vais sélectionner 50 % de position, 50 %. Puis il a réglé les calibres. Encore une fois, je vais utiliser la propriété transform. Transformez, traduisez une centaine de pixels. Nous devons maintenant appeler cette animation dans notre balise span. Ici, je vais taper animation. Le nom de l'animation est animate. Et je veux lancer cette animation pendant 3 secondes. Avec cela, je veux également faciliter le mouvement d'animation. Enfin, je vais passer le nombre d' itérations de l' animation, qui est infini Si je définis ce fichier, comme vous pouvez le voir, tous les cercles se déplacent ensemble vers le haut et vers le bas, car nous utilisons l'index Z. Ici, vous pouvez voir qu'il déplace tous les cercles ensemble en même temps. Nous devons maintenant utiliser la propriété delay, le délai d'animation. En utilisant cette propriété, nous pouvons retarder notre animation, ce qui est absolument nécessaire pour créer le cercle ondulé. Ici, dans un premier temps, je vais utiliser un délai de 1,4 seconde. Si je place ce fichier, comme vous pouvez le voir, après 1,4 seconde, il lance l'animation pour notre premier enfant. De même, pour notre deuxième enfant, je vais passer la version 1.3. Deuxième. Pour notre troisième enfant, je vais passer 1,2 seconde. Pour notre quatrième, je vais passer 1,1 seconde. Pour notre cinquième enfant, je vais passer une seconde. Pour notre sixième enfant, je vais passer 0,9 seconde. Pour notre septième enfant, je vais passer 0,8 seconde. Pour notre huitième enfant, je vais passer 0,7 seconde. Pour notre neuvième enfant, je vais passer 0,6 seconde. Pendant dix, je vais passer 0,5 seconde. Pour notre enfant de 11 ans, je vais passer 0,4 seconde. Pour notre 5e enfant, je vais passer 0,3 seconde. Pour notre 13e enfant, je vais passer 0,2 seconde, et pour le 14e sélecteur d'intervalle, je vais passer 0,1 seconde Pour notre dernier, je vais dépasser le délai de zéro seconde. J'ai défini avec succès une propriété de délai d'évation, toute cette balise span Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Comme vous pouvez le constater, il s'agit maintenant de créer des cercles Web parfaits. Et maintenant, ça a l'air plutôt incroyable. Cela a créé une très belle infection sur le dessus des tissus. J'espère que vous comprenez maintenant comment nous pouvons créer cette animation de cercle Web. Merci d'avoir visionné cette vidéo, restez à l'affût de notre prochain projet. 30. Effets de survol d'image en couches CSS 3D: Bonjour. Encore une fois, je suis de retour avec un nouveau projet d'animation CSS. Dans ce projet, nous allons créer une image CSS à trois couches H, et c'est un bon projet pour le concepteur UI UX. Allons voir la démonstration. Revenons au flux informatique. Comme vous pouvez le constater, il existe un modèle d'interface utilisateur mobile. Si je passe mon curseur dessus, vous pouvez voir un effet de couche en trois D. Vous pouvez voir ce type d' animation sur la majeure partie du site. Cela rend notre site Web plus attrayant. Voyons donc comment créer ce projet. Enfin, je suis dans mon retor de code Visual Studio comme vous pouvez le voir, je crée déjà un point d'index de nom de document STL STL J'ai déjà lié un fichier CSS à notre meilleur document, style point CSS. Comme vous pouvez le voir dans mon répertoire de travail actuel, il y a une image, capture d'écran point PG. Je vais vous montrer l'image. Pour cet exemple, j'ai déjà fait une capture d'écran du fichier CS Epler Vous pouvez choisir votre propre mise en page. C'est à vous de décider. Commençons par la pratique, comment nous pouvons créer ce projet. Dans un premier temps, je vais créer un conteneur à l'intérieur de mon body tag. Ici, je vais lier la classe et DP à la classe container. Ensuite, insérez cette classe de conteneur, je vais utiliser le tag em pour insérer une image. Tapez l'image Ham, I M G. Comme vous pouvez le voir, nom de notre image est ren shot point JPG. Tapez Ham, capture d'écran, JPG, et je vais obtenir cette balise d'image trois fois. Nous avons réalisé avec succès notre partie SML pour cet exemple. Maintenant, je vais allumer mon serveur IP et voir à quoi il ressemble. Sans style, ça ressemble à ça. Nous devons maintenant accéder à ce fichier de style pour créer le design parfait. Maintenant, vous pouvez voir côte à côte, j'ouvre mon fichier de style et mon navigateur. Dans un premier temps, je vais commencer par le body tag. Ici, je vais taper le corps. Ensuite, à l'intérieur des étalonnages, je vais utiliser notre première propriété, qui est la marge Marge zéro. Notre prochaine propriété est le rembourrage, le rembourrage zéro. Maintenant, je vais utiliser une autre propriété, qui est située à cent pour cent de hauteur, 100 VH. Ensuite, je vais utiliser la propriété d'affichage. Écran flexible. Et je veux aligner notre centre d'articles. Je vais utiliser la propriété aligner les éléments, aligner les éléments au centre, et nos dernières propriétés justifient le contenu. Justifiez le centre de contenu. Hé, si vous ne connaissez pas Flexbox et lisez, vous pouvez consulter mon code Si je configure ce fichier, comme vous pouvez le voir, rien ne se passe ici. Nous devons maintenant styliser la section du conteneur. Ici, je vais taper container point container. Ensuite, réglez les étalonnages. Au début, je vais utiliser la propriété position, position relative, puis je veux dire wa wa, 360 pixels. Notre propriété suivante est la hauteur, la hauteur, 480 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Cela réduit légèrement la taille de notre contenant, puis je veux définir une marge dans ma section supérieure. Ici, je vais utiliser la propriété Margin Top, Margin Top 150 pixels. Ensuite, je vais définir un arrière-plan pour ce conteneur. Hamer tapez background, pour l'arrière-plan, je vais utiliser RG B A. Ensuite, entre parenthèses, nous devons transmettre un total Pour le rouge Vue, je suis égal à plus zéro. Pour le Vu vert, je suis également à plus zéro. Pour notre valeur bleue, encore une fois, je vais passer zéro. Mais pour notre valeur Alpha, je vais passer 0,1. Je veux une couleur de fond transparente pour ce conteneur. Notre prochaine propriété est Transform Property. Bonjour Amy Traform. Transformez, et je vais utiliser six ve au total. Tout d'abord, je vais utiliser la rotation. Faites pivoter de -30 degrés. Avec cela, je veux utiliser SQ et Scale fera l'affaire. SQ 25 kg. Et échelonnez 0,8 fois. Si je définis ce fichier, vous pouvez voir le résultat, et maintenant nous devons positionner la balise image à l'intérieur de la balise container. Pour cela, je vais sélectionner un conteneur avec une balise image point container space image. Ensuite, à l'intérieur des alias, notre première propriété est position, position absolue et image avec 100 % Si je configure ce fichier et que je vous montre mon navigateur. Maintenant, vous pouvez le voir parfaitement dans la position que nous voulons, et puis vient la partie la plus importante. Nous devons maintenant jouer avec l'opacité et transformation avec effet de survol. Laissez-moi vous montrer comment faire. Comme vous pouvez le voir dans mon document estimable, nous avons au total quatre images Nous devons maintenant sélectionner toutes les images une par une. Pour cela, je vais utiliser le sélecteur Chi. Laissez-moi vous montrer comment survoler Container Colon. Puis espacez l'image en deux points sur l'enfant. J'ai inscrit les quatre courses. Tout d'abord, je sélectionne le quatrième enfant dans le groupe d'images. Ensuite, pour définir les calices, je vais utiliser la propriété transform Transformation : traduisez 160 pixels dans sens exxs et moins 160 pixels dans le sens Avec cela, je vais utiliser la propriété d'opacité. Opacité, un, je veux montrer l'opacité totale. C'est pourquoi j'en choisis un. Ensuite, je vais sélectionner notre troisième image. Je vais sélectionner cette ligne et la dupliquer. Moi, enfant trois. Je vais également changer la valeur de transformation et la valeur d'opposition. Opacité, 0,8, et traduisez pour x x six, je vais passer de un à 20 pixels Pour yx, je vais également passer de moins un à 20 pixels. Maintenant, encore une fois, je vais sélectionner 1 seconde dm. Je vais prendre cette ligne et Hm taper deux, n h deux. Pour x xx, je vais passer huit t, et pour xx, je vais passer moins huit. Hm pour dire opacité 0,6. Encore une fois, je vais dupliquer cette ligne pour sélectionner notre première image. Aucun enfant. Dans notre transformation, je vais sélectionner l' axe Y du soufre de 40 pixels et de -40 Opacité, je vais taper 0,4. Si je place ce fichier et que je reviens mon navigateur Chrome et que je place mon curseur sur cette image, vous pouvez voir l'effet. Mais il n'y a aucune transition dans cette image. Nous devons maintenant définir une transition pour donner un effet de douceur. Encore une fois, je reviens à mon codaor, et je vais appeler ici notre propriété de transition Transition 0,5 seconde. De plus, nous devons appeler le même établissement dans notre section des conteneurs. Transition 0,5 seconde. Si je définis ce fichier et que je reviens à mon navigateur Chrome, si je passe mon curseur sur cette image, vous pouvez voir cette transition fluide J'espère que vous savez maintenant comment créer des effets de survol d' image en trois couches Merci d'avoir regardé cette vidéo, soyez prêts pour notre prochain projet. 31. Effets d'animation de rotation 3D CSS3: Bonjour les gars. Encore une fois, je suis de retour avec un nouveau projet d'animation Sess Dans ce projet, nous allons créer une animation de rotation en trois D. Sans perdre votre temps, assistons à la démonstration. Dans ce projet, nous allons créer une animation de rotation en trois D. Ici, vous pouvez voir la démonstration, son mode de rotation et son apparence. Sans perdre votre temps, étudions les aspects pratiques et voyons comment nous pouvons créer ce type d'animation en trois dimensions. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Correlator et mon navigateur en utilisant l'extension Live Server, et je crée déjà un fichier estim nommé index Je lie également ce fichier avec notre fichier de style style point Sss. Donc, d'abord, dans la balise body, je vais créer un D, un D, et je vais également définir une boîte de classe. Alors s'agit-il d'une balise DIP, je vais créer une autre balise DIP, D, et je ne vais définir aucun nom de classe pour cette balise DIP. Ensuite, à l'intérieur de cette balise DIP, je vais créer une durée totale de quatre balises span. Je vais dupliquer ce pan tag trois fois. Nous avons maintenant un total de quatre balises span. Si je configure ce fichier, vous ne verrez rien dans mon navigateur. Nous avons fait notre test avec succès. Passons maintenant au fichier Sass du styler et commençons à styliser nos éléments Tout d'abord, je vais commencer par le body tag. Ici, je vais taper boding. Ensuite, vous définissez les cases. D'abord, je vais utiliser la propriété de marge Marge, zéro. Ensuite, je vais utiliser la propriété de rembourrage. Rembourrage zéro. Notre deuxième propriété est l'arrière-plan. Un arrière-plan, et je vais dire une couleur de fond. Pour cela, je vais utiliser la valeur R GV, RGB. Pour le rouge, je vais utiliser 66. De plus, pour le vert, je vais utiliser 66. Pour notre bleu, je vais utiliser 66. Si je définis ce fichier, comme vous pouvez le voir, il remplit notre page de couleur gris foncé. Vous pouvez utiliser n'importe quelle couleur comme vous le souhaitez. Je vais maintenant styliser cette section de boîte. Pour cela, je vais sélectionner un point ou les classer dans une boîte. Ensuite, au niveau du calibrage, notre première propriété est la position Position absolue. Notre prochaine propriété est top. Je veux le placer au milieu de cette page. C'est pourquoi je vais passer les 50 %, 50 %. Notre prochaine propriété est à louer également à 50 %. Ensuite, je vais utiliser la propriété transform. Transformer. Ici, je vais utiliser un prospect, un potentiel de 1 000 pixels. Avec cette perspective, nos trois motels ne fonctionnent pas correctement. Ensuite, je vais dire hauteur et largeur, Weed, 200 pixels. Puis hauteur, hauteur, 300 pixels. Nous devons également utiliser une autre propriété, qui est le style de transformation. Style de transformation, je vais utiliser preserve three D, et maintenant nous devons styliser celui-ci, aussi profond, qui se trouve à l'intérieur de ce parent D. Ici, je vais sélectionner got box, space D. Ensuite, à l'intérieur du calis O, la première propriété est position, position absolue, et notre deuxième propriété est top zéro Et je vais aussi utiliser p zéro. Ensuite, je vais dire hauteur et largeur à cet élément profond. Poids 100 %. Hauteur également 100 %. Maintenant, disons une couleur d'arrière-plan et voyons comment elle ralentit. Contexte. Je vais utiliser la couleur blanche. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez le voir créer une boîte, mais il n'est pas aligné au milieu de cette page. Nous devons maintenant aligner cette case, au milieu de cette page. Pour cela, je vais utiliser ici al value. Laisse-moi te montrer. Ici, je vais taper toutes les fonctions. C A L C. Puis à l'intérieur du rond ss. Nous devons calculer la position. Comme vous pouvez le constater, notre hauteur est de 300 pixels. Ici, je vais m' occuper de 150 pixels. À partir de 50 % de la position, la moitié de la hauteur , soit 150 pixels. De même, je vais utiliser la fonction L pour notre position gauche. C A LC, réglez la presse ronde, 50 % moins. Ici, vous pouvez voir que notre largeur est de 200 pixels. Je vais passer à -100 pixels wi. Maintenant, si je définis ce fichier, comme vous pouvez le voir, notre DV est parfaitement aligné au milieu de cette page Revenons ensuite à la section profonde, et ici je vais utiliser la propriété de transformation de la stèle Transform transform, Style, transform style servent trois D, et nous devons maintenant styliser notre balise span, qui se trouve à l'intérieur de cette balise dip. Ici, je vais sélectionner la case à points, l'espace, D, l'espace. Ensuite, à l'intérieur des étalonnages, notre première propriété est la position, la position absolue Et le top zéro. En retard, zéro également. Notre propriété suivante est l'affichage, et je dois utiliser le bloc. De plus, nous devons régler la hauteur. Nous à 100 %. Hauteur à cent pour cent, puis je vais définir l'arrière-plan. Bground, pour l' arrière-plan, je vais utiliser un dégradé de couleur linéaire, un dégradé linéaire Dans un premier temps, nous devons passer l'angle de dégradé, et notre angle de dégradé est de zéro degré. C, et ici, je vais fournir trois couleurs au total, O la première couleur est plus terne, F un, F un, F un Allumons le Ward Rap. Maintenant, vous pouvez le voir clairement. Ensuite, notre couleur suivante est has tag BBB, c'est une couleur gris clair Le troisième va également réutiliser cette couleur. Copiez la couleur et collez-la ici. Si je définis ce fichier, vous pouvez voir ici la couleur du dégradé. Cela commence par une couleur gris clair, puis un peu de gris et encore une fois, une couleur gris clair. Ensuite, je vais dire rayon de bordure pour ce dégradé de couleur. Laisse-moi te le montrer. Rayon de bordure, 20 pixels. Si je configure ce fichier, vous pouvez voir le rayon de la bordure dans le coin. Supprimons maintenant la couleur d'arrière-plan de l'élément d parent. Donc, pour commenter cette ligne et la redéfinir une fois de plus. Vous pouvez maintenant voir le résultat. Nous devons maintenant sélectionner toutes les balises span une par une. C'est pour cela que je vais sélectionner. Je vais taper point box, space, D, space, span. Une colonie, un enfant, un enfant. Ensuite, dans le round ss, je vais utiliser une transformation de nom de propriété. Transformation Je veux faire pivoter notre premier enfant dans la direction de l'axe x. Ici, je vais taper rotate x v, rotate x, et je veux le faire pivoter de zéro degré, puis je vais sélectionner la section entière et la dupliquer. Je vais maintenant sélectionner notre deuxième enfant. Je veux faire pivoter celui-ci dans le sens S, 45 degrés. Ensuite, je vais dupliquer une fois de plus. Je vais maintenant sélectionner le troisième enfant. Et ici, je vais dire angle de rotation de -45 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Un par un, nous alternons nos articles de rechange. Ensuite, je vais sélectionner toute cette section et la dupliquer à nouveau et cette fois, je vais sélectionner le quatrième enfant. Maintenant, je vais dire angle de rotation de 90 degrés. Je vais aussi parler de ce fichier. Je vais maintenant faire pivoter toute la section dans la direction de y x. Pour cela, après prospective, je vais utiliser la rotation y, la rotation y. -45 degrés Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, cela ressemble à un objet en trois D, et vous pouvez voir et vous pouvez voir toutes les parties de la balise span. Et maintenant, nous devons travailler sur notre dernière partie, qui est la partie animation. Ici, je vais appeler notre propriété d'animation animation. Le nom de l'animation est animate. Et la durée de notre animation est de cinq secondes, et la direction de notre animation est linéaire, et je veux exécuter cette animation pendant un temps infini. Ici, je vais utiliser le nombre d' itérations d'animation infini. Nous devons maintenant créer l' image-clé pour cette animation. Je vais copier le nom de l'animation. Enfin, je vais créer l'image clé au rythme de l'image clé. Keyframes, et le nom de notre animation est anime. Ensuite, à l'intérieur du grossier, je vais utiliser ici la valeur en pourcentage à position 0 %, c'est-à-dire les étalonnages Je vais utiliser transform probity, transform. Transformez d'abord, je dirais prospectif, prospectif de 1 000 pixels. Après la prospection, je vais faire pivoter x value, faire pivoter x zero tv. Ensuite, je vais dupliquer cette section, et à 100 % de la position, je vais régler la rotation x 359 degrés Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir qu'il fait déjà pivoter notre objet. Cette rotation en trois D est très jolie. J'espère que vous savez maintenant comment créer cette rotation en trois D et cet ion. Merci d'avoir regardé cette vidéo Nous sommes prêts pour notre prochain projet. 32. Nuage pluvieux animé partie 1: Au plaisir de vous revoir, je suis de retour avec un nouveau projet d'animation Sess Dans ce projet, nous allons créer Rainy Cloud. Il s'agit d'un projet d'animation de thèse très avancé car nous allons utiliser le partage variable. Voyons voir la démonstration, à quoi elle ressemble. Comme vous pouvez le voir sur votre écran, gouttes de pluie tombent des nuages et disparaissent sur le sol Vous pouvez facilement remarquer les gouttes de pluie. Sans perdre votre temps, voyons comment nous pouvons créer ce projet. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visa Studio et mon navigateur en utilisant l'extension Life Server, et je crée déjà un fichier eSTEML à points d' index Je crée également un fichier Style Doot Sess. Comme vous pouvez le constater, nous relions notre fichier de style à ce document eSTEML. Comme vous le savez, nous devons commencer par la structure des EST. Au début, je vais créer un conteneur, qui va contenir Cloud et R. Je vais créer une classe, un conteneur à points D. Comme vous pouvez le constater, nous créons un conteneur de noms de classes. Ensuite, à l'intérieur de ce conteneur, je vais créer Cloud. Ici, je vais créer un autre accord. De point Clou Je vais configurer ce fichier. Je vais maintenant passer à la section style, fichier CSS à points de style. Dans un premier temps, je vais sélectionner la page du document en utilisant Universal Select Firm type star. Ensuite, je définis les Cals, d'abord, je vais utiliser la propriété de marge Marge, zéro. Avec ça , je vais également utiliser du rembourrage Rembourrage, également nul. Ensuite, je vais utiliser la propriété de dimensionnement de la boîte. Dimensionnement de la boîte, et ici je vais utiliser la boîte Bodi V. En tout cas, il n' y a aucun point de fusion dans ce document Maintenant, je vais styliser notre body tag. Ici, je vais taper le corps. Ensuite, à la place des alias, je vais d'abord utiliser l'affichage des propriétés d'affichage. Écran flexible. Ensuite, je vais utiliser le contenu de justification. Justifiez le centre de contenu. Nous devons également utiliser une autre propriété, aligner les éléments. Alignez les éléments au centre. Si vous n'êtes pas familier avec Flex Box et Greed, vous pouvez consulter mon cours Ensuite, je vais dire hauteur minimale pour cette page. Donc, pour taper hauteur moyenne, hauteur moyenne hund VH Notre prochaine propriété est l'arrière-plan, arrière-plan, et je vais dire la couleur de fond. 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 dire ce fichier. Cette couleur est bonne pour notre exemple, et vous pouvez choisir votre propre couleur. Nous devons maintenant styliser la section du conteneur. Je copie le nom de cette classe de conteneur, et ici, je vais taper point container. Ensuite, à l'intérieur du cis ou des premières propriétés, positionnez vraiment la position. Je vais également indiquer la hauteur de ce conteneur. Hauteur, quelque chose pour moins d'un pixel. Et je vais dire ce côté. Nous devons maintenant concevoir la partie cloud. Donc, pour copier le nuage de noms de classe, puis un conteneur, je suis un nuage de points en ardoise. Ensuite, à l'intérieur des alias, notre première propriété est position, position relationnelle. De plus, je vais le dire à la hauteur de ce nuage. Nous avons besoin de 320 pixels. Et hauteur, 100 pixels. Ensuite, je vais dire couleur d'arrière-plan, arrière-plan, et je vais utiliser un fond blanc. Pour cela, je vais utiliser le tag hexa D H FF eight. 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. bordure, rayon de bordure, 100 pixels. Réglons le pote et C. De plus, je vais le positionner par le haut. Ici, je vais utiliser la propriété supérieure. 50 pixels supérieurs. Je vais définir celui-ci, et pour lui donner la forme d'un nuage, nous devons utiliser le sélecteur posto Ici, je vais créer un sélecteur de publication pour le cloud. Nuage D : Colonne et deux points. Ensuite, à l'intérieur des vases, je vais créer un contenu fade contenant du fade En gros, je vais créer une copie de ce cloud. Une propriété suivante est position, position, et cette fois, je vais utiliser obsolète, obsolète. Ensuite, je souhaite déplacer ce nouveau cloud vers cette position. Pour cela, nous devons utiliser la propriété. Jusqu'à 50 pixels. Ensuite, je vais dire « avec » et « hauteur » de ce nuage. W 110 pixels. Je vais aussi dire hauteur, hauteur, donc 110 pixels. Et puis je vais parler de la couleur de fond. Fond, et pour la couleur de fond, je vais aussi dire 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 m'occuper de celui-ci. Pour le placer au milieu, nous devons déplacer ce cercle sur le côté gauche. Ici, je vais utiliser lift property lap Lap 40 pixel. Si je configure ce fichier, 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. À partir du bas, je vais également aller à g zéro, et à partir de la gauche, je vais aller à g 30 pixels. Enfin, je vais donner une couleur unie à cette ombre en forme de boîte. Le type H a une étiquette, couleur blanche, FF. Si je le règle pendant ce temps, vous pouvez voir le résultat. Comme vous pouvez le constater, nous créons une forme de nuage parfaite à l'aide d'une anthèse sml. Dans la prochaine partie de ce projet, nous allons créer in. Merci d'avoir regardé cette vidéo, à bientôt. 33. Nuage pluvieux animé partie Deux: Que vous voir, les gars. Il s'agit de la deuxième partie de ce projet. 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. Sans perdre votre temps, commençons. Dans un premier temps, je vais créer une balise profonde, qui contiendra des gouttes de pluie. De.in. 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 étiquette à plusieurs portées pour nos gouttes de pluie. Ici, à l'intérieur de cette balise profonde, je vais créer une balise pan. 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 plutôt efficace. Pour effacer une variable Sess, nous devons utiliser das sine. Laissez-moi vous montrer comment faire. D et notre variable me est I. Ensuite, nous devons utiliser deux points. Ensuite, nous devons utiliser col pour définir notre variable. Après deux points, nous devons fournir la valeur. Valeur F, 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 souhaite dupliquer cette ligne. Je vais passer ici. Encore une fois, je vais dupliquer cette ligne. Ici, je vais vous transmettre. Vous pouvez utiliser un nombre aléatoire, n'importe quel nombre aléatoire. C'est un pré. Ils le dupliquent une fois de plus. Ici, je vais utiliser 14. Encore une fois, je vais utiliser 18. Protestons cette section pour vous faire 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, il n'y a rien ici. Nous devons maintenant styliser les gouttes de pluie dans notre fichier Sess. Je veux copier le nom de la classe, et dans notre fichier de style, je vais sélectionner cette classe, faites-le. Ensuite, à l'intérieur des étalonnages, 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. Nous devons maintenant coiffer la goutte de pluie. Pour cela, nous devons sélectionner les balises rain et span. Pour cela, nous devons sélectionner span tag.in, space, span. Ensuite, à l'intérieur du calvass, O détermine d'abord la position par rapport à la position Notre propriété suivante est la hauteur, puis la cellule de pointe. Pesez également dix cellules de pointe. Maintenant, je vais ajouter la couleur de fond à nos gouttes de pluie. Ici, je vais utiliser la propriété dground, background. Réglons le fichier et voyons ce qui s'est passé. Si je définissais le fichier, comme vous pouvez le voir, il ressemblait à une ligne d'état. Mais ce sont toutes 20 gouttes de pluie. Mettons un peu de rembourrage pour notre pluie. Ici, je vais utiliser la propriété de rembourrage, le rembourrage. abord, pour le haut en bas, je vais utiliser zéro, et pour la leptine, à droite, je vais utiliser 20 pixels Si je configure ce fichier, vous pouvez voir le résultat. Ensuite, nous devons *** marge entre les gouttes de pluie. Pour cela, nous devons utiliser la propriété de marge. Marge. Pour le haut et le bas, je vais utiliser zéro F etin w right, je vais utiliser deux pixels Maintenant, vous pouvez voir que nos points sont parfaitement organisés. Maintenant, nous devons obtenir la forme ronde des points de pluie ou cela, nous devons utiliser la propriété du rayon de bordure. Ici, je vais taper le rayon de la bordure. Rayon de bordure 50 %. Sauvegardons le fichier et vous verrez le résultat. Maintenant, il a tendance à créer l'animation. Je vais utiliser la propriété d'animation, animation, et le nom de notre animation est animate. Et la durée de notre anation est de cinq secondes. De plus, la direction est linéaire. Enfin, nous devons fournir un nombre d' itérations d'anulation, qui est infini Parce que je veux suivre nos tarifs à l'infini. Ajoutons maintenant le cadre à cette animation. Tapez donc au rythme des images clés, et notre anation est animée Puis à l'intérieur des alias. Tout d'abord, à une position de 0 %. Je vais utiliser la propriété transform, transform, 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 est correct ou non. Comme vous pouvez le constater, l'animation fonctionne parfaitement, et avec la propriété translate it, je souhaite utiliser une échelle d' échelle à 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 l'adapter ainsi. 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é dans le sol. Nous devons maintenant modifier la position d'origine de la transformation. Ici, je vais utiliser transform origin, et je vais utiliser bottom, puis vient 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'animation, toutes les gouttes de pluie tombent une par une au hasard. Si vous vous souvenez, comme vous pouvez le voir dans mon fichier STL, nous créons notre balise span avec variable et notre limite de variation est I, et nous définissons une valeur aléatoire pour cette variable, 161112, etc. Je vais utiliser cette valeur aléatoire pour créer une vraie bague. Revenons au fichier CSS, et ici, je vais utiliser la propriété de durée de l'animation. Durée de l'animation. De plus, je vais utiliser la fonction Kal, qui est une fonction du CSS, je veux diviser 15 secondes, e ou variable I. Ici, je vais taper où, dans le rond ss, notre nom même est I, et pour bien refroidir, nous devons utiliser da da. Alors moi. Si je configure ce fichier, nos gouttes de pluie tombent au hasard Je suis très jolie. Et maintenant, on dirait de vraies gouttes de pluie. Nous devons juste changer la couleur des gouttes de pluie, et je vais utiliser le blanc pour cela Si j'ai configuré ce fichier, vous pouvez maintenant voir qu'il fonctionne parfaitement. Notre projet est presque terminé. Nous devons créer le sol pour créer une partie du sol à cet endroit, nous devons utiliser la propriété border bottom. Nous devons trouver le conteneur. Ici, je vais taper border bottom. Et je vais utiliser une bordure de deux pixels. Je veux aussi une couleur unie pour notre bordure, unie, la couleur de notre bordure est le blanc, oui. Si je configure ce fichier, vous pouvez voir le résultat. De plus, je dois retirer les gouttes de pluie par le bas. Ici, je vais taper les dix derniers pixels. J'ai testé ce fichier, maintenant il fonctionne parfaitement. Nous avons mené à bien notre projet sur le cloud et la pluie. J'espère que cette vidéo vous plaira. Merci d'avoir regardé cette vidéo Nous sommes prêts pour notre prochain projet. 34. Animation de chargement CSS: C'est bon de vous revoir , encore une fois, je suis de retour avec un nouveau projet d'animation. Comme vous pouvez le voir dans cette animation, comment fonctionne l'animation de chargement. Sans perdre votre temps, voyons comment nous pouvons le créer. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visor Studio et mon navigateur à l'aide de l'extension de serveur Lx, et j'ai déjà créé un point d'index des noms de documents STL STL Avec cela, vous créez ou stylisez également un fichier Sass. Donc d'abord, à l'intérieur de la balise body, je vais créer une balise H deux, H deux. Dans le tag S two, je vais taper du sang. Puis un point. Mais dans mon tag H two, je vais utiliser les données de. Données de type Hm. Texte de données. Ensuite, égal à l'intérieur du double cosinus, je vais passer le même texte en cours de chargement. Copiez le texte et collez-le dans les codes doubles. Si je configure cette page, vous pouvez voir le texte dans mon navigateur. C'est notre partie stable. Nous devons maintenant accéder au fichier or Sess. Dans un premier temps, je vais importer un formulaire. Laisse-moi te montrer. Ici, nous voyons que j'importe popping scorm, et la police est 700 C'est une forme en gras, et maintenant je vais sélectionner le sélecteur universel Star au lieu de la Cass, ou la première propriété est la marge. La marge, zéro ou la deuxième propriété est le rembourrage. Le rembourrage est également z. La troisième propriété est la taille de la boîte, taille de Bob et la façon dont je vais utiliser la zone de bordure Ensuite, je vais utiliser les biens de ma famille. Famille de polices, famille Fon, et ici je vais utiliser Poppins Cette police provient de Sensory Fame. Soto virgule, je vais taper Sensory. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir ici le résultat de la police. Vous pouvez utiliser n'importe quel type de police. Cela dépend de vous. Maintenant, tapons la partie de votre corps. Il va utiliser son corps. corps est à l'intérieur du C, notre première propriété est affichée, et je vais utiliser un flocon Je voudrais placer ce texte au milieu du discours. C'est pourquoi je vais utiliser Flake. Ensuite, notre propriété suivante est de justifier le contenu. Justify Contain Center. Je vais également aligner cet article. Alignez le centre de l'article. Si je définis ce fichier, vous pouvez voir la résolution, puis je vais dire la hauteur minimale. Hauteur minimale du type Hm, hauteur minimale cent VH. Cela dit, je voudrais également parler du contexte. Pour le fond, je vais utiliser la couleur RGV, RGP. Vous pouvez également utiliser n'importe quelle couleur plus foncée. Mais ici, je vais utiliser un poids trois, la valeur verte est 40 et la valeur bleue est 53. Si je définis ce fichier, vous pouvez voir le. Vous pouvez utiliser n'importe quelle couleur de fond sale. C'est un p, et ensuite, je vais styliser ce type H deux. Ici, je vais attacher H deux. Ensuite, je règle les calibrages, je vais taper la position Position relative, la propriété O suivante est la taille de police. Taille de police. 14 V. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, ça a l'air parfait. Maintenant, je vais régler la couleur du téléphone. H Je vais attacher la couleur, et je vais utiliser la même couleur RGV Je copie la valeur, et je vais la coller ici. Je vais configurer ce fichier. Vous pouvez maintenant voir qu'elle correspond à la couleur d'arrière-plan. C'est pourquoi vous ne pouvez pas voir la couleur. Notre prochaine propriété est Take. Pour cela, encore une fois, je vais utiliser la couleur RGV. Mais cette fois, je vais changer le, et notre valeur est 2108 et pour le bleu, je vais utiliser 146 Si je définis ce fichier, vous ne pouvez toujours pas voir ce trait car nous ne le faisons pas. C'est pourquoi je vais passer 0,3. V. Si j'ai configuré ce fichier, vous pouvez maintenant en voir la raison. Vous pouvez également augmenter le trait. Il s'agit d'un PU, et nous devons maintenant reproduire la forme à l' aide de la sélection de posture Pour cela, je vais taper H, deux points, deux points, quatre. Puis à l'intérieur des calibrages ou du contenu des premières propriétés. Et ici, je vais utiliser la fonction Otter. Nous devons maintenant transmettre cet attribut, le texte des données. Je copie cet attribut ici, je vais transmettre le texte des données. Si vous le remarquez, vous pouvez voir le texte de nos données et notre contenu est similaire. C'est pourquoi il va créer la même réplique. Notre prochaine propriété est la position. Je veux le positionner de manière absolue. Ensuite, nous devons utiliser le top zéro. Supposons également zéro. De plus, je vais dire : pour l'instant, je vais dépasser les 30 pixels. Si je définis ce fichier, vous ne pouvez rien dire car nous ne fixons aucune couleur ni hauteur à cet élément. Pour cela, je vais utiliser la propriété height. Hauteur 100 %. Je vais également utiliser de la couleur. Couleur, ici, je vais utiliser un vdu hexadécimal, tag 01f e87. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Pour l'instant, je vais me fixer à zéro. Cela n'aura aucun impact. Plus tard, je vais vous montrer pourquoi nous devons utiliser avec la propriété. Avant de faire quoi que ce soit, je veux que ce texte soit en majuscules. Ici, je vais utiliser la propriété text trasf. Mais avant, je vais utiliser le point-virgule. Ensuite, je vais taper Tex transform. Transmission du texte en majuscules. Et puis aussi pour régler le trait sur cet emplacement. Ici, je vais utiliser cette propriété et cette valeur, et après la couleur, je vais les coller. Mais cette fois, je vais changer de roue. Ici, je vais passer zéro VH h. Stroke with zero V. Si je configure ce fichier, vous pouvez voir le résultat Si vous pouvez le remarquer, vous pouvez voir n' y a aucun trait sur cette fente. Notre prochaine propriété est à débordement, à trop-plein chauffé. Définissez ce fichier, vous pouvez maintenant voir le résultat. Comme vous pouvez le voir, notre huit est zéro et Olow z. C'est pourquoi vous ne pouvez pas voir le texte Mais si j'augmente la valeur huit, laissez-moi vous montrer une cellule de 40 pi, puis définissez ce fichier, vous pourrez voir le résultat. Comme vous pouvez le voir lentement, il remplit le texte de couleur. De même, si j' augmente la valeur, 90 sélectionne une cellule puis que je définis ce fichier, vous pouvez également voir le résultat. Dans l'animation, nous devons jouer avec cette propriété. Pour l'instant, je vais créer le zéro, puis définir ce fichier. Ensuite, je vais utiliser une autre propriété, qui est border. Écriture sur la bordure. Bordure droite, et je vais utiliser une bordure solide de deux pixels, solide. De plus, je vais utiliser une couleur Hodsimal. 01f e87. Si je configure ce fichier, vous pouvez voir le résultat. Si j'augmente la largeur, cette fois, je vais donc passer 120 pixels et définir ce fichier. Comme vous pouvez le voir, il semblerait que cette ligne remplisse la couleur de ce texte. Encore une fois, je vais passer à zéro, et maintenant nous devons jouer avec l'animation. Je vais créer une animation. Animation, et le nom de notre animation est animate. Je veux exécuter cette animation pendant 6 secondes, et la direction de notre animation est linéaire. Je veux exécuter cette animation pendant une durée illimitée. Ici, je vais utiliser l'infini. Nous devons maintenant créer le cadre clé. Type H au rythme des images clés. Keyframes et le nom de notre animation est animate. Comme vous pouvez le constater, je tape une mauvaise orthographe pour animate. C'est pourquoi je vais le corriger. Et je vais taper le nom animate. Puis à l'intérieur du Calass à la position 0 %. Encore une fois, à l'intérieur des boîtiers, je mets w, w zéro, et je vais aborder les sujets de cette section. Maintenant, à 70 % de ma position, je suis réglé à cent pour cent. Si je configure ce fichier, vous pouvez voir l'animation. Comment ça marche. Cela a parfaitement fonctionné. Si je joue avec une valeur de 0 %, je vais dépasser les 10 % De plus, avec 10 %, je vais passer 100 %. À une position de 0 %, une position % et une position de 100 %, je veux un Stoke Zero Mais à 70 % de position et 90 % de position de cette animation, je veux la semaine à 100 %. Si j'ai configuré ce fichier, il est maintenant parfait. Comment ça s'est passé. C'est exactement ce que nous voulons. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain projet.