Animations créatives CSS et JavaScript - le guide complet de 150 projets !

1. Animations créatives avancées CSS et Javascript - 140 projets: Êtes-vous à la recherche d'un cours qui vous fasse du stade de débutant à la création de belles animations CSS et Javascript avancées pour vos sites Web, ou avez-vous suivi d'autres cours de CSS, mais souhaitez tout de même améliorer vos compétences en CSS et les faire passer au niveau supérieur en maîtrisant animations CSS et Javascript ? Si c'est le cas, vous êtes au bon endroit. Je suis et c'est le cours d'animation CSS et Javascript le plus vendu. À mon avis, dans ce cours, vous maîtriserez animations, les transitions et les transformations CSS et Javascript , et même la propriété CSS clip path, tout en codant 140 animations et effets créatifs étape par étape , à partir de zéro. Au fur et à mesure que vous développerez chacun de ces exemples, vous découvrirez de nouvelles idées et vous trouverez l'inspiration pour créer des animations avancées et faire de vous un développeur Web meilleur et plus confiant. Alors, qu'y a-t-il dans ce cours ? Eh bien, nous allons commencer par examiner la propriété de transition CSS et ses différentes fonctions, et nous verrons comment elle peut donner vie à vos éléments HTML. Nous passerons ensuite aux transformations CSS, qui ouvrent la porte à de nombreuses options créatives. Déplacer des éléments HTML sur la page pour les redimensionner, faire pivoter et les incliner. Nous y maîtriserons toutes les fonctions de transformation que nous pouvons utiliser dans des environnements à deux et trois D. Ensuite, nous passons à la partie amusante. Nous utiliserons tout ce que nous avons appris sur le CSS, transformations et les transitions pour créer des exemples créatifs qui vous inspireront et vous aideront à tirer pleinement parti de ce que vous avez appris. Nous allons commencer par créer de nombreux effets de boutons différents, puis essayer des effets d'image, des effets de menu, puis des effets de carte, et même d'autres transformations intéressantes, comme le texte et les effets de réseaux sociaux. Ensuite, nous passerons à la maîtrise du CSS, des animations et des images clés Nous apprendrons tout à leur sujet, leurs différentes propriétés qui facilitent la création d' animations Web créatives et avancées. Dans la section suivante, nous allons créer plus de 40 projets d'animation créative en utilisant différentes techniques. Je suis sûr que ces exemples vous émerveilleront et stimuleront votre imagination en vous montrant combien de choses incroyables peuvent être réalisées grâce aux compétences que vous avez Ensuite, nous découvrirons la propriété CSS clip path, qui nous permet de créer de superbes effets et ouvre la voie à des idées encore plus créatives. Nous allons apprendre comment nous pouvons l'utiliser pour créer différents projets très sympas. Au cours de leur parcours dans ce cours, beaucoup de mes étudiants m' ont demandé de télécharger une nouvelle section avec des effets Javascript. À votre demande, vous pouvez maintenant consulter cette section à la fin du cours, où nous passerons à l' étape suivante et tirerons parti de la puissance de Javascript pour créer des effets avancés intéressants qu' il est impossible de créer en utilisant uniquement du CSS. Pour avoir une idée générale des projets que nous allons créer tout au long du cours, je vous invite à consulter la première conférence de chaque section. J'y ai inclus un aperçu de tous les effets que nous allons créer. Je pense que vous pouvez voir que ce cours regorge de contenu. Il comprend 18 heures de vidéo téléchargeable et toutes les ressources de codage pour les projets sur lesquels nous travaillerons tout au long du cours. N'oubliez pas quand il a été téléchargé pour la première fois. Ce cours ne dure qu' une demi-heure. Donc, vous savez, j'essaie toujours d'ajouter du nouveau contenu avec des idées différentes pour vous aider à vous tenir au courant des nouvelles techniques CSS et Javascript actuelles techniques CSS et Javascript afin de créer tous les effets sympas que vous voyez sur le marché. Si vous souhaitez améliorer vos compétences en CSS et en Javascript, ce cours est vraiment parfait pour vous. Plus de 19 000 étudiants se sont déjà inscrits et ont laissé des centaines d'avis cinq étoiles Je suis sûr que vous apprécierez le cours autant qu'eux. N'attendez pas et demandez-vous. Rejoignez-nous au cours aujourd'hui et je vous verrai à l'intérieur. 2. 2 : - transitions CSS: Bonjour tout le monde. Bienvenue dans cette leçon où nous parlerons des transitions CSS. Donc, tout d'abord, quelle est la propriété de transition CSS ? Et que peut-il faire pour nous ? Eh bien, la transition en tant que propriété CSS appliquée à un élément spécifique pour que d'autres propriétés de cet élément spécifique changent en douceur sur une durée donnée. Ou animé d'une manière agréable en survolant, ou pour un autre exemple, ou pour un autre exemple, se concentrant sur cet élément. Regardons un exemple de ce que je veux dire ici dans mon HTML. Vous pouvez voir ici, j'ai un simple bouton. Et ici, dans mon CSS, j'ai ajouté quelques styles au bouton. Vous pouvez voir que j'ai juste changé la hauteur, la largeur et la taille de la police pour le rendre plus grand. Changez la couleur du texte en blanc et supprimez la bordure, puis ajoutez une couleur d'arrière-plan bleu. Et vous pouvez voir dans le navigateur ici comme notre bouton. Maintenant, ajoutons une nouvelle déclaration CSS. Donc je vais aller ici et dire le bouton sur le vol stationnaire. Ce qui signifie que lorsque je déplace mon curseur sur le bouton, je veux changer la couleur d'arrière-plan en vert. Maintenant, si je vais passer le curseur sur mon bouton, vous pouvez voir la couleur de fond bleu change en vert. Et quand je déplace ma souris, la couleur de fond revient au bleu. Mais vous avez peut-être remarqué que ce changement de bleu au vert, Il se passe si vite. On dirait un interrupteur marche/arrêt. C' est assez mécanique. Je pense que ce sera beaucoup mieux si ce changement se produit plus facilement. Et c'est exactement ce que la transition CSS peut faire pour nous. Nous avons donc dit que la transition rend le changement des propriétés CSS se produit en douceur sur une période de temps spécifique. Pour définir une transition, nous devons utiliser au moins deux choses. Le premier est la propriété CSS qui va passer de l'état initial à l'état final. La seconde est la durée, signifie que le temps nécessaire à ce changement est logique, n'est-ce pas ? Donc, pour ce faire, nous devons déclarer aux propriétés CSS. Le premier est appelé la propriété de transition, qui est la propriété à laquelle vous voulez appliquer la transition ou apporter des modifications en douceur sont bien. Dans ce cas est la couleur d'arrière-plan. Et le second est une durée de transition, qui est la période de temps que la propriété prendra pour passer de l'état initial à l'état final. Disons 1 seconde. Et maintenant, quand je vais et passe le curseur sur le bouton, vous pouvez voir que le changement se produit en douceur d'une manière agréable et est beaucoup mieux qu'avant la transition a été appliquée. Et quand je m'éloigne, la couleur de fond revient au bleu joliment. Maintenant, la propriété de durée de transition Connect Set millisecondes ainsi que secondes. Par exemple, je peux changer cette 1 seconde à, disons, 3000 millisecondes, ce qui est en fait trois secondes. Ensuite, lorsque je survole à nouveau le bouton, la chaîne devrait se produire dans une durée plus longue. 3. 3 - Options de transition CSS: Bonjour tout le monde. Dans cette leçon, nous allons continuer à parler de la propriété de transition et des autres options que nous pouvons traiter lorsque nous l'utilisons sur nos éléments HTML. Maintenant, en plus de la propriété de transition et de la durée de transition dont nous avons parlé dans la dernière leçon. Et rappelez-vous que nous avons dit qu'ils sont nécessaires pour la transition pour travailler sur les éléments. Nous avons également deux propriétés supplémentaires que nous pouvons utiliser pour prendre le contrôle de notre transition. Et ce sont la fonction de synchronisation de transition et le délai de transition. Tout d'abord, la fonction de synchronisation de transition fait simplement référence à la façon dont la modification de la propriété se produira. Par exemple, la couleur d'arrière-plan a-t-elle commencé à changer lentement au début de la durée de transition, puis plus rapidement à la fin ? Ou va-t-il changer au même rythme tout au long de la période de transition ? possible de répondre à ces questions par la fonction de synchronisation de la transition. Maintenant, la fonction de synchronisation de transition a cinq valeurs différentes que nous pouvons utiliser. abord, la facilité, qui est appliquée par défaut, si vous n'utilisez pas la fonction de synchronisation de transition, ce qu'elle fait c'est que la chaîne démarre lentement, puis va plus vite au milieu, puis ralentit un peu avant la fin. Deuxième linéaire dans lequel le changement se produira à la même vitesse du début à la fin tout au long de la durée de transition. Troisièmement, n, dans lequel le changement commence lentement, puis accélère avant la fin. Quarante. La facilité, qui, contrairement à la facilité d'entrée, commence vite et ralentit à la fin. Et enfin, facilité dans, dans lequel le changement commence lentement, puis accélère au milieu, puis se termine lentement. C' est un peu comme la facilité. Il n'y a pas beaucoup de différence entre eux. Super. Voyons donc ceux qui sont en action. J' ai cinq valeurs de fonction de synchronisation de transition ici dans mon navigateur, et j'ai une démo pour chacune d'entre elles. Maintenant, la propriété qui va changer ici est la position de la div. Donc, quand je survole l'un d'eux, il va déplacer une distance spécifique horizontalement, puis revenir à son emplacement d'origine lorsque je survole, comme ça. Maintenant, avant de voir les différentes valeurs, Jetons un coup d'oeil à eux dans l'éditeur de code et voyons comment nous avons créé ce mouvement horizontal. Donc, ici dans mon HTML, j'ai un div avec une classe de conteneur. Puis à l'intérieur, j'ai cinq divs enfants, tous ayant avec un mouvement de classe qui utilise un CSS pour ajouter les styles généraux pour tous les divs. Et chacun d'entre eux a un ID spécifique afin que nous puissions changer la fonction de synchronisation de transition en fonction de cet ID. Ainsi, vous pouvez voir que le premier a un ID de facilité. Sa fonction de synchronisation de transition sera 0s. Le second est linéaire. Ensuite, facilitez l'entrée, relâchez et sortez facilement. Et quand nous allons à notre CSS, ici, nous avons sélectionné la classe Move et ajouté quelques styles génériques pour rendre les vidéos plus belles. Comme certaines marges avec hauteur, rembourrage et ainsi de suite. Et ici, à la dernière ligne, nous déclarons la propriété de transition, qui est la traduction qui est responsable de changer l'emplacement des dibs de gauche à droite sur notre durée de transition de trois secondes. Donc, si nous regardons ici à la fin du fichier CSS, vous pouvez voir que nous ciblons tous les divs. Et quand nous survolons, ils traduiront, ou en d'autres termes, leur emplacement sur la page changera. Ils déplacent 900 pixels sur l'axe des x ou horizontalement et 0 verticalement. Il s'agit d'une propriété de transformation que nous apprendrons plus tard dans le cours. Mais je veux que vous sachiez que cela va juste changer l'emplacement de la div 900 pixels vers la droite. Quand on survolera. Au-dessus de cela, j'ai ciblé chaque div avec son ID unique et ajouté les cinq valeurs différentes de la fonction de synchronisation de transition. Donc ici, j'ai ajouté de la facilité pour le premier, linéaire pour le second, puis facilité d'entrée, de détente et de facilité d'entrée, de sortie. Donc, pour finir les choses, ce que nous faisons ici est simple. Nous venons de dire au navigateur, quand je survole n'importe quel div, je veux qu'il déplace 900 pixels vers la droite. Et je veux que ce changement ou ce mouvement se produise en douceur pendant trois secondes. Et je veux que chaque div bouge différemment. Donc, le premier se déplacera différemment de la seconde, ce qui se déplacera différemment du troisième, et ainsi de suite. Maintenant, d'accord, revenons au navigateur. Et quand je survole 0s, qui est la valeur par défaut, vous pouvez voir qu'il démarre lentement, puis devient plus rapide lorsque les retours ralentissent avant la fin. Et quand je survolerai, il reviendra aussi lentement, puis vite, puis lentement. Mais pour linéaire, si je survol, vous voyez qu'il va au même rythme tout au long de la durée. Il se déplace à la même vitesse pendant les trois secondes. Et faciliter l'entrée. Lent au début, puis plus vite à la fin. Et quand je survole, ça revient lentement. Puis plus vite à la fin. Se détendre rapidement au début, puis ralentir à la fin. Et quand je survole, ça revient vite. Et puis ralentir à nouveau à la fin. Faciliter l'entrée et la sortie, Commencer lentement, puis se déplace plus vite au milieu, puis ralentir à nouveau à la fin. Bon, maintenant, la deuxième propriété dont nous parlerons dans cette leçon s'appelle le délai de transition. Et cela représente simplement le temps que la transition attend avant de commencer. Il accepte les valeurs de temps en secondes ou en millisecondes. Maintenant, ici dans notre HTML, nous avons le bouton de la première leçon. Je pense que vous vous souvenez que lorsque nous survolons ce bouton, la couleur de fond changera du bleu au vert, comme ça. Revenons maintenant à notre CSS. Je vais aller juste ici en dessous de la propriété de durée de transition. Et j'ajouterai un délai de transmission de deux secondes. Et maintenant, lorsque je passe le curseur sur le bouton, il devrait attendre deux secondes avant que le changement des couleurs d'arrière-plan ne commence. Et c'est simplement la propriété de délai de transition. 4. 4 - façons de écrire la propriété de transition: Bonjour tout le monde. Dans cette leçon, nous allons continuer à parler des différentes options de transition que nous avons. Donc, dans les leçons précédentes, nous avons appris que la transition fait le changement dans une propriété CSS spécifique se produit en douceur sur une valeur spécifique de temps. Mais pouvons-nous utiliser la transition sur plus d'une propriété, ce qui signifie que nous pouvons faire plus d'un changement de propriété sans heurt ? Eh bien, la réponse est oui. Ici, dans mon CSS, je vais aller juste ici et ajouter de la couleur. Noir. Donc, lorsque je survole le bouton, je veux que la couleur d'arrière-plan passe du bleu au vert, et que la couleur du texte passe du blanc au noir. Maintenant, voyons cela dans le navigateur. Je vais passer le curseur sur le bouton et vous verrez que la couleur du texte change rapidement sans transition. Alors, comment pouvons-nous y appliquer la transition ? C' est si facile. Retour à notre CSS. Je vais y aller et ajouter un espace. Ensuite, une autre propriété de transition, qui est la couleur bien sûr. Et maintenant, quand je retourne au navigateur et que je passe le curseur sur le bouton, vous pouvez voir que la couleur du texte change en douceur avec la couleur d'arrière-plan. Et nous pouvons vraiment étendre cela, ce qui signifie. Nous pouvons changer autant de propriétés que nous le voulons. Donc, par exemple, allons à notre CSS. Et je veux aussi changer la largeur du bouton à, disons, 600 pixels lorsque je survole dessus. Et je vais aller ici et ajouter de l'espace que de la largeur pour le faire changer en douceur. Et quand je vais au navigateur et que je passe le curseur sur le bouton, vous pouvez voir que tout change bien ensemble. Et au cas où vous auriez besoin de changer de nombreuses propriétés, disons cinq ou six. Et vous pensez que ce sera dur de les écrire tous ici. Vous pouvez simplement les supprimer et ajouter le mot-clé all. En faisant cela, toutes les propriétés seront incluses dans la transition. Alors voyons ça. Vous ne pouvez voir rien ne change. Super. Maintenant, nous avons appris toutes les propriétés de transitions CSS avec lesquelles nous pouvons travailler. Mais il y a une propriété abrégée que nous pouvons utiliser pour les mélanger tous en une seule ligne, et c'est juste appelé transition. Donc, je vais supprimer ces deux lignes et j'ajouterai la transition. Ensuite, la propriété de transition juste ici. Je ne ferai que passer l'arrière-plan. Puis un espace et la durée de transition de trois secondes. Elles sont suffisantes pour que la transition se produise. Mais si vous voulez ajouter les autres propriétés, ajoutez un autre espace et ajoutez la fonction de synchronisation de transition. Disons la facilité dans un autre espace et le retard de transition à la fin, disons seulement 1 seconde. Et quand nous voyons cela dans le navigateur, vous pouvez voir quand je passe la souris sur le bouton, il va attendre 1 seconde. Commencez la modification de la couleur de fond sur trois secondes. Et encore une fois, nous pouvons choisir plus d'une propriété. Pour ajouter plusieurs propriétés. Dans cette méthode courte, nous utilisons une virgule pour séparer les différentes propriétés. Je vais donc y aller et ajouter une virgule. Ensuite, j'ajouterai l'autre propriété que je veux changer, qui est la couleur. Ensuite, la durée de transition, disons deux secondes cette fois. Et puis la fonction de synchronisation de transition, disons facilité. Et enfin, la durée de transition. Maintenant, nous voulons faire quelque chose de cool ici. Nous voulons que la modification de la couleur du texte commence après la modification de la couleur de fond. Nous devrions donc ajouter une durée de transition de quatre secondes, trois pour la transition de fond elle-même, et une pour son retard. Revenons au navigateur. Je vais passer le curseur sur le bouton et vous verrez que la couleur d'arrière-plan change. Et puis après cela, la couleur du texte commence à changer. Et bien sûr, nous pouvons ajouter d'autres propriétés. Donc, je vais revenir à notre CSS et aller ici, supprimer cette nouvelle largeur et ajouter une nouvelle propriété, disons border-rayon, 50 pour cent. Ainsi, le rayon de la frontière changera aussi. Et puis je vais aller ici et inclure ceci dans la transition et ajouter une durée de transition de quatre secondes, puis faciliter la fonction de synchronisation de transition, puis six secondes pour la durée de transition. Donc, il commencera après la fin des deux premières propriétés. Donc, quand je retourne au navigateur et que je passe le curseur sur le bouton, vous pouvez voir l'arrière-plan va changer lorsque la couleur du texte, et enfin, le rayon de la bordure. Et bien sûr, nous pouvons utiliser le mot-clé tout si nous voulons simplement animer toutes les propriétés ensemble, je vais supprimer tout cela et juste dire, oh, alors la durée de transition de trois secondes, puis faciliter. Et enfin, le délai de transition de deux secondes. Et quand nous voyons que dans le navigateur, vous pouvez voir toutes les propriétés sont en train de changer les unes avec les autres. Mais avez-vous remarqué maintenant que nous ne pouvons pas contrôler le délai de transmission comme nous le pouvions dans la méthode précédente, parce que toutes les propriétés commencent maintenant et se terminent ensemble. C' est tout pour cette leçon, et je te verrai dans la prochaine. 5. 5 - Quelles propriétés peuvent être transitionnelles: Bonjour tout le monde. Dans les leçons précédentes, nous avons appris ce qu'est une transition, comment elle fonctionne dans toutes les options disponibles et la syntaxe que nous pouvons utiliser dans une transition. Si vous vous souvenez, nous avons dit que la transition ennemie le changement des propriétés CSS sur une durée spécifique. Mais toutes les propriétés CSS ne peuvent pas être utilisées avec des transitions car la modification de ces propriétés ne se produit pas progressivement. Il s'agit de changements d'un état à un autre sans valeurs intermédiaires. Propriétés qui ne sont pas animables. Les nôtres aiment l'image de fond, car elle ne peut pas changer progressivement d'une image à l'autre. affichage n'est pas une propriété animable. Et il y en a beaucoup plus comme le style de bordure, la position, flotteur, l'arrière-plan, la répétition, la famille de polices, et ainsi de suite. D' autre part, les propriétés animables sont celles qui peuvent être exprimées par des nombres. Parce que le navigateur peut calculer ou interpeller des valeurs intermédiaires, telles que largeur, hauteur, largeur de bordure, remplissage , marge, hauteur de ligne, opacité. Idée de Gabby. Nous pouvons également animer les propriétés qui sont exprimées par les couleurs, telles que la couleur et la couleur d'arrière-plan. Et si vous voulez une ressource pour trouver toutes les propriétés animables, le site dot développeur mozilla.org a une liste de toutes les propriétés. Vous pouvez donc simplement aller à Google et taper quelles propriétés CSS peuvent être transitionnées. Et puis cliquez sur le site Mozilla. Et cela vous mènera à cette liste où vous avez toutes les propriétés animables. Maintenant, afin que vous puissiez voir ces propriétés animables en action, j'ai créé cette page qui contient certaines d'entre elles. Par exemple, si je survole cette div, nous opacité passerons comme ceci. Vous pouvez donc télécharger ce fichier à partir des ressources et a ces propriétés pour voir à quoi ils ressemblent pendant la transition. 6. 6 - CSS 2D Transforment les bases de transforme les transformes transformes de bases: Bonjour à tous et bienvenue dans cette nouvelle section du cours où nous allons apprendre sur les transformations 2D. Alors, que transforme notre CSS et que peuvent-ils faire pour nous ? Eh bien, dans le dernier chapitre, nous avons appris sur les transitions CSS, qui nous ont permis de traiter les propriétés CSS appliquées à des éléments spécifiques et faire en sorte que ces propriétés changent en douceur sur une période de temps spécifique. Dans ce chapitre, nous n'apprendrons pas à contrôler les propriétés appliquées aux éléments, mais nous contrôlerons les éléments eux-mêmes, comme les divs et les images, etc. En d'autres termes, nous allons apprendre à modifier la taille, la forme et la position de l'élément. Et c'est ce que les transformations CSS sont nos liées. La propriété transform a quatre fonctions que nous pouvons utiliser pour contrôler la façon dont nos éléments seront affichés. Et ces fonctions sont la fonction d'échelle, qui nous permet de redimensionner les éléments, ce qui signifie augmenter ou diminuer leur hauteur ou leur largeur. La fonction translate, qui nous permet de déplacer l'élément et de changer sa position à n'importe quel endroit du navigateur horizontalement ou verticalement. La fonction de rotation, qui nous permet de faire pivoter les éléments dans un environnement 2D par n'importe quel degré ou nombre de tours que nous voulons. Et la fonction d'inclinaison, qui nous permet d'incliner les éléments le long de l'axe des x ou de l'axe des y. Donc maintenant, après avoir vu ce que les transformations CSS peuvent faire pour nous et quelles fonctions sont utilisées avec elle. Dans la leçon suivante, nous commencerons à apprendre ces fonctions, et nous commencerons par la fonction de traduction. Alors on se voit dans la leçon suivante. 7. 7 - Fonction tranlsate de CSS: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment changer la position des éléments HTML tels que divs, images, et ainsi de suite en utilisant la fonction Transformer Translate. Maintenant, chaque fois que vous voulez utiliser la propriété transform, vous allez l'écrire comme ceci. Transformer. Ensuite, la fonction de transformation que vous voulez appliquer, qui est traduite pour cette leçon, puis parenthèses. Et à l'intérieur de ceux-ci, la valeur de la fonction spécifiée. Maintenant, parlons un peu de la fonction de translation. Fondamentalement, la fonction de translation déplace les éléments autour du navigateur le long de l'axe des x et de l'axe des y. Donc, par exemple, si j'écris quelque chose comme ça, transformer traduire et pixels, dix pixels, cela déplacera l'élément 10 pixels vers la droite et dix pixels vers le bas à partir de sa position d'origine. Alors essayons ça. Vous pouvez voir ici dans mon HTML, tout ce que j'ai est une image que nous allons essayer toutes les fonctions sur et ici et ajouter quelques styles pour rendre l'image belle quand nous la voyons. Et si nous allons au navigateur, vous pouvez voir que l'image est assise ici. Nous voulons donc changer la position de l'image, ce qui signifie que nous voulons la faire bouger horizontalement ou verticalement. Donc, d'abord, nous voulons le faire bouger horizontalement. Nous pouvons le faire facilement en utilisant la propriété transform translate. Donc je vais retourner à notre éditeur de code et cibler l'image. Et quand je survolerai, j' ajouterai de la transformation. Et la fonction que je veux est traduire, et je veux la déplacer horizontalement le long de l'axe des x. Donc, je vais dire traduire x, puis j'ajouterai la valeur de la distance que je veux que l'élément bouge, disons 500 pixels. Et montons ici et ajoutons quelques transitions pour que le mouvement se déroule en douceur. Donc, je vais ajouter la transition. Et puis la propriété que nous voulons changer en douceur, qui bien sûr est transformé, puis la durée de l'animation. Disons deux secondes. Super. Donc maintenant, ce qui devrait arriver lorsque je survole l'image, c'est qu' elle se déplace horizontalement de 500 pixels le long de l'axe x vers la droite. Revenons au navigateur. Et quand je survolerai l'image, bien sûr, elle se déplacera doucement 500 pixels vers la droite. Maintenant, nous pouvons également utiliser des valeurs négatives pour la propriété translate, et cela fonctionnera bien, mais l'élément se déplacera vers la gauche, pas vers la droite. Revenons à notre éditeur de code. Et je vais y aller et ajouter moins 500. Et quand je retournerai et que je survolerai l'image à nouveau, elle se déplacera vers la gauche cette fois. Super. Ensuite, nous voulons déplacer l'image verticalement, pas horizontalement. Assez facile. Nous allons utiliser Translate Y au lieu de X. Donc, je vais revenir à notre éditeur de code et changer ce x en un y. Donc, quand nous utilisons des valeurs positives, l'image va se déplacer vers le bas. Mais dans ce cas, nous utilisons des valeurs négatives. Donc, nous devrions aller vers le haut, retourner au navigateur. Et quand je survole l'image, vous pouvez voir qu'elle se déplace 500 pixels vers le haut. Et revenons à notre éditeur de code et utilisons 500 pixels positifs. Et bien sûr, il va se déplacer vers le bas. Maintenant, nous pouvons combiner ces deux fonctions en une seule fonction simplement appelée translate. Revenons à notre éditeur de code. Je vais supprimer cet y. Maintenant, la fonction translate accepte deux valeurs. La première valeur est X, qui déplace l'image le long de l'axe x. Donc, je dirai moins 500 pixels, par exemple. Et la deuxième valeur est y, qui indique le mouvement verticalement le long de l'axe y, disons 200 pixels. Et maintenant, lorsque je passe la souris sur l'image, elle ne devrait pas déplacer moins 500 pixels le long de l'axe des x, ce qui signifie 500 pixels vers la gauche et 200 pixels vers le bas en même temps. Et comme ça, l'image se déplace horizontalement et verticalement en même temps. Donc, pour terminer les choses, Translate est l'une des fonctions que nous pouvons utiliser avec la propriété transform. Et cela nous permet de changer la position des éléments HTML sur la page. Il peut s'agir de Translate X, qui déplacera l'élément horizontalement vers la droite si la valeur est positive ou vers la gauche si la valeur est négative. Ou cela peut être Traduire Y, qui déplacera les éléments verticalement vers le bas si c'est positif ou vers le haut si c'est négatif. Et nous pouvons simplement utiliser Translate, qui accepte deux valeurs, x et y, qui suppriment l'élément le long des deux axes en même temps. 8. 8 - Fonction Échelle de CSS: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment redimensionner les éléments HTML en utilisant la fonction d'échelle. Ainsi, la fonction d'échelle nous permet de redimensionner facilement les éléments. Mais que voulons-nous dire quand nous parlons de redimensionnement des éléments ? Eh bien, redimensionner les éléments signifie changer leur largeur ou leur hauteur ou les deux aspects. Alors commençons par la largeur. Nous pouvons redimensionner les éléments avec facilement en utilisant l'échelle x. donc j'ai la même image de la leçon précédente, et j'irai ici quand je survolerai l'image et j'ajouterai l'échelle de transformation x. et la fonction d'échelle sauf les nombres qui combien la largeur de l'élément changera par rapport à sa largeur d'origine. Donc, par exemple, si j'ai ajouté à ici, cela fera augmenter la largeur de l'image à deux fois la taille d'origine. Donc, si c'était 100 pixels, ce sera 200 pixels. Et si je change les deux à 1,5, ce sera 150 pixels. Alors voyons ça. Vous pouvez voir lorsque je survole l'image, sa largeur augmente et est doublée. Maintenant, je peux aussi diminuer la largeur. Donc, je peux revenir à l'éditeur de code et utiliser 0,5, par exemple, ce qui diminuera la largeur de l'image à la moitié de l'original. Comme ça. Grande échelle nanométrique, la hauteur des éléments, nous pouvons utiliser l'échelle y au lieu de x. donc revenons à notre éditeur de code. Je vais changer ça en y. et ça devrait diminuer la hauteur pour avoir comme cellule. Et bien sûr, nous pouvons augmenter la hauteur en utilisant des valeurs supérieures à un. Voyons à quoi ça ressemble. Revenons à notre éditeur de code. Je vais changer ce 0.5 à 1.5. Et cela devrait augmenter la hauteur. Juste comme ça. Comme translate, la fonction scale peut prendre deux arguments, x et y, où la valeur x définit combien la largeur des éléments augmentera ou diminuera par rapport à sa largeur d'origine. Et la valeur y définit combien sa hauteur augmentera ou diminuera par rapport à sa hauteur d'origine. Revenons à notre éditeur de code. Je vais aller ici et enlever ce y et en ajouter deux. Donc, la largeur sera doublée et deux autres. Ainsi, la hauteur sera doublée aussi. Et l'image devrait être deux fois plus grande. Maintenant, quand je passe la souris sur l'image, vous pouvez voir qu'elle s'agrandit et a ce joli zoom en effet. Maintenant, si je retourne à notre éditeur de code et supprime cette deuxième valeur et ne laisse que cette première valeur. Cela va mettre à l'échelle la largeur et la hauteur ensemble. Tout comme si nous n'avons pas supprimé la deuxième valeur. Donc, si j'ai fait ce point 2, 5, cela devrait mettre l'image à l'échelle jusqu'à 25 pour cent de sa taille d'origine. Donc, pour envelopper les choses, échelle est l'une des fonctions que nous pouvons utiliser avec la propriété transform. Et il nous permet de changer la largeur d' un élément HTML ou sa hauteur ou les deux simultanément. Il peut être mis à l'échelle x, ce qui augmentera l'élément avec si la valeur est supérieure à un, ou le diminuera si la valeur était inférieure à un. Ou il peut être mis à l'échelle y, ce qui augmentera la hauteur de l'élément si elle est positive, ou la diminuera si elle est négative. Et nous pouvons simplement utiliser l'échelle, qui accepte deux valeurs, x et y. et nous allons changer la largeur et la hauteur de l'élément en même temps. 9. 9 - Fonction rotate de CSS: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment faire pivoter éléments HTML dans un environnement 2D en utilisant la fonction de rotation. Ainsi, la fonction de rotation accepte une valeur, qui est l'angle ou le nombre de degrés. Vous voulez faire pivoter l'élément par, suivi de DEG quatre degrés. Essayons donc de faire tourner notre image. Je vais y aller et ajouter de la transformation, faire pivoter, et disons 20 degrés. Donc, ce que cela fera, c'est qu'il fera pivoter l'image de 20 degrés dans le sens des aiguilles d'une montre. Donc, quand je vais dans le navigateur et que je passe la souris sur l'image, vous pouvez voir qu'elle tourne dans le sens des aiguilles d'une montre de 20 degrés. Retournons à notre éditeur de code et essayons quelque chose comme 90 degrés. Vous pouvez voir que l'image est maintenant tournée de 90 degrés. Essayons 180 degrés. Et maintenant, vous pouvez voir l'image tourne à 180 degrés et retourne verticalement. Ensuite, je vais essayer 360 degrés, ce qui fera tourner l'image plein cercle, puis revenir à la façon dont elle était avant. Maintenant, nous pouvons également utiliser des degrés négatifs pour la fonction de rotation, qui fera pivoter les éléments HTML dans le sens inverse des aiguilles d'une montre. Donc, je vais retourner à mon éditeur de code et changer ceci à, disons, moins 60 degrés. Et maintenant, quand je survole le bord, il tourne de 60 degrés dans le sens inverse des aiguilles d'une montre. Super. Maintenant, la fonction de rotation accepte également des valeurs dans d'autres unités. Par exemple, nous pouvons utiliser des tours pour dire à l'élément à quelle distance il devrait tourner. Donc, si je vais à mon éditeur de code, supprimez ceci et ajoutez un tour. Et maintenant, quand je vais au navigateur et que je passe le curseur sur l'image, il va tourner un tour complet dans le sens des aiguilles d'une montre, ce qui est égal à 360 degrés. Et nous pouvons même utiliser des termes négatifs pour faire tourner l'élément dans le sens inverse des aiguilles d'une montre. Donc, par exemple, utilisons moins 0,5 tours. Et maintenant, l'image tourne un demi-tour dans le sens inverse des aiguilles d'une montre. Une autre unité que nous pouvons utiliser avec la fonction de rotation est les gradients. Donc, un cercle complet est de 400 dégradés. Essayons ça. Je vais aller à l'éditeur de code et changer cela en 200 gradients. Et maintenant, quand je passe la souris sur l'image, elle devrait tourner un demi-tour comme ça. Dans le monde réel, la fonction de rotation est utilisée avec des degrés la plupart du temps, mais je voulais juste vous informer sur ces autres unités. Donc c'est tout pour la fonction de rotation. C' est très simple. Alors je te verrai dans la prochaine leçon. 10. 10 - Fonction CSS skew: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment incliner les éléments horizontalement ou verticalement en utilisant la fonction d'inclinaison. La fonction d'inclinaison est comme les fonctions de translation et d'échelle, ce qui signifie que nous avons des actes d'inclinaison pour incliner les éléments horizontalement et incliner pourquoi les incliner verticalement ? Ou on peut juste utiliser l'inclinaison. Et la première valeur sera x, et la seconde sera y. Maintenant, l'inclinaison est similaire à la rotation en termes d'unités, nous utilisons des degrés pour déterminer combien l'élément doit être biaisé. Bon, voyons maintenant comment cela fonctionne en action. Je vais aller ici et ajouter Transform Skew x, disons 30 degrés. Et maintenant, quand je vais au navigateur et que je passe le curseur sur l'image, vous pouvez voir qu'elle se déforme horizontalement de 30 degrés. Et nous pouvons changer la direction d'inclinaison en utilisant des valeurs négatives. Alors essayons ça. Je vais retourner à mon CSS et faire ce moins 30. Et maintenant, quand je survole, il devrait être biaisé dans l'autre direction. Maintenant, nous allons incliner l'image verticalement en utilisant la fonction d'inclinaison y. Je vais retourner à notre éditeur de code, puis changer ce x à y. et maintenant, quand je passe la souris sur l'image, vous pouvez la voir biaisée verticalement. Et pour le faire incliner verticalement dans la direction opposée, nous pouvons revenir en arrière et enlever le moins pour le rendre positif. Et quand je survolerai à nouveau, ça va biaiser de l'autre côté. Maintenant, comme nous l' avons dit, nous pouvons biaiser les éléments HTML horizontalement et verticalement en même temps en utilisant juste biais, qui accepte deux valeurs. Le premier est pour ACS et le second est rewire. Donc, je vais retourner à mon éditeur de code et faire ça juste biaisé. Et puis faites-le incliner de 20 degrés horizontalement et de 40 degrés verticalement. Et maintenant, quand je survole, vous pouvez voir qu'il est biaisé dans les deux sens. 11. 11 - Réaliser l'origine de CSS transforment l'origine de la transformation de CSS: Bonjour tout le monde. Après avoir terminé toutes les fonctions de transformation 2D de cette leçon, nous allons en apprendre davantage sur une nouvelle propriété appelée origine de transformation. Eh bien, l'origine de la transformation est le point qu'une transformation prend comme référence quand elle fonctionne. En d'autres termes, le point autour duquel la transformation est appliquée. Donc, par exemple, ici dans mon navigateur et j'ai deux images, j'ai ajouté transformer tourner de 30 degrés à les deux. Donc, quand je survole, ils devraient tourner au même degré. Mais la différence est que j'ai changé l'origine de la transformation de la deuxième image pour être dans le coin supérieur gauche, mais n'ai rien changé pour la première. Donc, il a seulement transformer tourner. Maintenant, quand je survole la première image, vous pouvez voir que rien d'étrange ne se passe ici. Il tourne juste 30 degrés dans le sens des aiguilles d'une montre comme nous l'avons vu dans la leçon précédente. Mais maintenant, je vais passer la souris sur la deuxième image. Quelque chose d'intéressant se passe ici. L' image tourne de 30 degrés dans le sens des aiguilles d'une montre, mais elle pivote sur son coin supérieur gauche, qui est l'origine de la transformation, tandis que la première image tourne à partir de son point central, ce qui nous indique que le point central est le valeur par défaut de l'origine de la transformation. Parlons maintenant des valeurs qui transforment l'origine accepte. Il peut accepter les mots-clés comme une seule valeur, comme le haut, le bas, la droite et la gauche. Essayons donc de revenir à notre éditeur de code. Et ici, je n'ai qu'une seule image. Donc, lorsque nous survolons cette image, nous voulons ajouter la transformation et la faire pivoter de 45 degrés, par exemple. Et nous allons monter ici et ajouter l'origine de transformation haut. Et maintenant, lorsque nous allons dans le navigateur et survolons l'image, vous pouvez voir qu'elle tourne à partir du centre supérieur de l'image maintenant. Ok, Next est une démo pour les autres mots-clés qui transforment l'origine excepts. Voyons voir comment ils fonctionnent. Tout d'abord, nous avons onglet. Nous avons dit qu'il va faire pivoter la div autour du centre supérieur de l'élément. Donc exactement ici. Comme ça. Alors nous l'avons fait, c'est ça. Et dans ce cas, la div tournera à partir du centre de son côté droit, exactement ici, comme ceci. Maintenant, je veux que vous mettiez la vidéo en pause et devinez comment tous les div suivants, ils vont bouger. Alors arrête-le maintenant. Bon, donc en bas, bien sûr, fera pivoter autour du point central bas juste ici. Comme ça. Ensuite, nous sommes partis, qui tournera autour de ce point. Juste comme ça. Puis en haut à droite, qui tourne autour du coin supérieur droit, puis en bas à droite, puis en bas à gauche, et enfin en haut à gauche. Désormais, l'origine de la transformation peut également accepter des valeurs sous forme de pourcentages. Nous commençons par le coin supérieur gauche de l'élément. Donc, la première valeur de pourcentage est X pourcentage. Et quand le pourcentage X est de 100%, cela signifie que nous commençons par le coin supérieur gauche, puis nous nous déplacons à 100% à travers l'élément avec vers la droite, ce qui signifie que nous allons finir dans le coin droit de l'élément. Et puis le pourcentage Y indique jusqu'où nous allons nous déplacer verticalement par rapport à la hauteur de l'élément. Donc, si c'est 100% est bien, alors nous nous déplacerions vers le bas une distance égale à la hauteur de l'élément. Ainsi, notre origine de transformation finira dans le coin inférieur droit de l'élément. Maintenant, disons que nous voulons faire l'origine de la transformation de l'élément au centre en utilisant la méthode de pourcentage. Donc, ce que nous devrions faire est de mettre x comme 50%, puis y comme 50 pour cent aussi. Et il devrait être centré. Ok, essayons cette méthode en action. J' irai ici et ajouterai l'origine de la transformation, disons 30 pour cent vers la droite, puis 80 pour cent vers le bas. Et puis quand nous allons au navigateur, nous allons déplacer 30% vers la droite, puis 80% vers le bas. Donc, l'origine de la transformation sera quelque part ici. Autres valeurs qui transforment l'origine accepte ou pixels. Donc, vous pouvez simplement dire, je veux qu'il déplace 50 pixels vers la droite, puis 100 pixels vers le bas. Et ce sera notre point d'origine de transformation. Alors essayons ça. Je vais y aller et ajouter 300 pixels. Donc, c'est la moitié de la largeur. Ensuite, ajoutez 150 pixels, ce qui représente la moitié de la hauteur ici. Donc maintenant, le point d'origine de la transformation devrait être au centre. Juste comme ça. C' est tout pour cette leçon, tout le monde, et je vous verrai dans la prochaine. 12. 12 - Traduire en 3D: Bonjour tout le monde. Bienvenue dans cette nouvelle section du cours. Dans cette section, nous allons apprendre à utiliser certaines des propriétés dont nous avons parlé dans la section précédente. Mais dans un environnement 3D. Maintenant, la principale différence entre les environnements 2D et 3D est l'axe z. Dans les environnements 2D, nous avons l'axe x, qui est horizontal, et l'axe y, qui est vertical. Mais en 3D, nous avons aussi l'axe z, qui est perpendiculaire aux deux. Maintenant, afin de créer un environnement 3D sur un plan 2D, comme l'écran de notre ordinateur, nous devons créer quelque chose appelé perspective. Vous pouvez considérer la perspective comme la distance entre nos yeux et l'écran de l'ordinateur. Je pense que tu le comprendras plus quand on le verra en action. Mais je veux que vous vous souveniez que chaque fois que vous voulez travailler avec un environnement 3D, vous devez d'abord définir la perspective. Donc, nous allons commencer avec la propriété translate. Dans la section précédente, nous avons appris comment traduire ou déplacer des éléments HTML horizontalement ou verticalement en utilisant les fonctions de traduction X et de traduction Y. Et maintenant, nous voulons utiliser Translate Z et voir ce qui va obtenir. Donc, ici dans mon HTML, j'ai juste une image, et j'irai juste ici et ajouter la transformation, traduire Z, disons 300 pixels. Donc, lorsque je survole l'image, je veux qu'elle bouge 300 pixels dans la direction z. Mais nous avons dit avant d'utiliser l'une des propriétés de transformation 3D, nous devons créer une perspective. Et pour ce faire, nous utilisons une propriété appelée prospective et l'ajoutons au conteneur des éléments HTML que nous voulons transformer. Dans notre cas, le conteneur de l'image est le corps. Donc je vais cibler le corps et ajouter de la perspective. Et rappelez-vous que nous avons dit que la perspective est la distance entre nos yeux, les yeux du spectateur et l'écran de l'ordinateur. Donc, il accepte les valeurs en pixels. Donc disons 100 pixels. Et maintenant, quand je vais sur le navigateur et que je passe la souris sur l'image, vous voyez quelque chose d'intéressant se passe ici. L' image est de plus en plus grande. La largeur et la hauteur augmentent, tout comme ce qui s'est passé lorsque nous utilisons la propriété Scale dans la section précédente. Mais en fait, ce n'est pas ce qui se passe ici. Ce qui se passe vraiment ici, c'est que l'image se déplace vers nous. Donc ça se rapproche de nos yeux. Et c'est pourquoi il semble plus grand, mais sa largeur et sa hauteur n'ont pas changé. Donc maintenant, vous pouvez penser à l'axe z comme la ligne tracée entre deux points. Le premier est nos yeux, et le second est l'écran. Donc, lorsque nous déplacons l'élément le long de l'axe z, il se déplace le long de cette ligne et il se rapproche ou s'éloigne de nos yeux. Par exemple, si je retourne à mon éditeur de code et change ce 300 pixels en moins 300 pixels. Maintenant, quand je survole l'image, vous pouvez voir qu'elle devient plus petite parce qu'elle s'éloigne de nos yeux. Je vais revenir en arrière et enlever ce grade moins. Alors maintenant, quelle est la perspective qu'on a ajoutée ici dans le corps ? Eh bien, avant d'en parler, passons à 500 pixels et voyons ce que nous obtenons. Donc, avant de recharger mon navigateur, quand je passe la souris sur l'image, vous pouvez voir que l'image se rapproche de moi 300 pixels dans une perspective de 1, 0, 0, 0. Donc, je vais rafraîchir mon navigateur pour passer à une perspective de 500 pixels. Et puis je survolerai l'image. Et vous pouvez voir dans ce cas, l'image se rapproche beaucoup plus que la première fois avec cette nouvelle perspective. Et c'est parce que la nouvelle perspective est plus petite. La distance entre nos yeux et l'image est de 500 pixels. Donc, quand il déplace 300 pixels vers nous, alors il finira à 200 pixels loin de nos yeux. Alors que, quand nous utilisions une perspective de cent dix cents pixels, il a fini par 700 pixels de nos yeux. Donc il semble plus petit. Voyons un autre exemple. Donc, je vais revenir à mon éditeur de code et changer ce 300 pixels à n'importe quelle valeur supérieure à la perspective, qui est actuellement de 500 pixels. Donc disons 800 pixels. Maintenant, avant de passer la souris sur l'image, imaginons ce qui va se passer. La distance entre l'image et nos yeux est de 500 pixels. Et nous voulons que l'image déplace 800 pixels vers nous. Donc, ce qui se passera, c'est que l'image se déplacera vers nous jusqu'à ce qu'elle passe devant nos yeux. Et nous ne pourrons pas le voir parce qu'il sera derrière nous, ou peut-être derrière nos globes oculaires dans nos crânes, ce qui semble un peu effrayant, mais ne vous inquiétez pas, c'est sûr. Donc, quand je survole, vous pouvez voir qu'il disparaît au-delà de nos yeux. Donc, pour terminer les choses, chaque fois que nous voulons créer un environnement 3D, nous devons d'abord ajouter de la perspective au conteneur d'éléments. Et la perspective est la distance entre le spectateur et l'écran. 13. 13 - Rotation en 3D: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment faire pivoter des éléments à l'intérieur d'un environnement 3D à l'aide de la fonction Transformer la rotation. Donc, ici, dans notre code, nous avons notre image et elle est assise ici dans notre navigateur. Et ici, vous pouvez voir que nous avons une perspective de 500 pixels. Parce que rappelez-vous, chaque fois que nous voulons utiliser les propriétés de transformation, nous devons d'abord définir la perspective. Alors maintenant, commençons à utiliser la fonction de rotation. Tout d'abord, nous avons Rotate X, ce qui fera tourner l'élément sur son axe d'axe. Ensuite, nous avons fait pivoter y, ce qui le fera tourner sur son axe y. Et enfin, z, qui bien sûr le fera tourner sur son axe z. Alors commençons par faire pivoter Z. J'irai ici à l'intérieur du sélecteur d'image et j'ajouterai la transformation, rotation Z, disons 120 degrés. Et je vais aller au navigateur et recharger. Maintenant, avant que nous survolions l'image, nous tournons Z fera l'affaire, est-ce qu'il fera tourner l'image sur son axe z, ce qui est comme une ligne qui passe de l'écran à nos yeux. Donc, il ne devrait pas être différent de la fonction de rotation que nous avons utilisée avant quand nous avons affaire à des transformations 2D. Donc, je vais passer le curseur sur l'image et vous pouvez voir qu'elle tourne autour de l'axe z de 120 degrés. Bien. Donc tourner Z est en fait similaire à tourner, ce que nous avons appris auparavant. Super. Ensuite, nous allons parler de Rotate oeuf. Je vais aller ici et changer, tourner Z pour faire pivoter x. et je veux qu'il tourne de 60 degrés. Et ce que cela fera, c'est qu'il fera tourner sur son axe x, qui est horizontal. Donc, je vais passer le curseur sur l'image et vous pouvez voir qu'elle tourne en 3D le long de l'axe horizontal. Par exemple, si je retourne en arrière et que je change de 60 degrés à 90 degrés, puis revenez en arrière et passez la souris sur l'image. Vous pouvez voir que l'image tourne de 90 degrés jusqu'à ce qu'elle disparaisse. Ce qui se passe ici, c'est que l'image tourne jusqu'à ce que nous puissions voir son bord. Et comme il n'a pas d'épaisseur, il disparaît. Ensuite, nous avons tourné y. Donc, je vais revenir en arrière et changer, tourner x, tourner y, et changer les degrés à 60 à nouveau. Ensuite, quand je vais et que je passe la souris sur l'image, vous pouvez voir qu'elle tourne sur son axe y, qui est vertical avec le temps. Et c'est tout pour cette leçon, tout le monde et moi vous verrons dans la prochaine. 14. 15 - Effet de bouton rotatif rotatif créatif de bouton rotatif: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer ce bel effet lorsque nous survolons un bouton. Vous pouvez voir que lorsque nous survolons, le fond jaune tourne dans le coin inférieur gauche du lien jusqu'à ce qu'il couvre le tout. Alors commençons ici dans mon HTML, je vais juste aller ici et ajouter une balise d'ancrage. Et dis me planer. Ensuite, je vais aller à mon CSS et ajouter quelques styles. Donc, tout d'abord, je vais cibler le corps et ajouter de la hauteur 100 vh. Ensuite, je vais ajouter affichage, flex, justifier le contenu, centre, aligner les éléments centre ainsi. Donc, ce que ces trois lignes de code feront, c'est qu'elles vont juste lui envoyer le lien horizontalement et verticalement en utilisant Flexbox. Cela n'a rien à voir avec l'animation CSS. Et si vous voulez en savoir plus sur flexbox, qui est un must à apprendre pour tout développeur web de nos jours, j'ai un cours à ce sujet ici à Udemy. Vous pouvez le vérifier si vous êtes intéressé. Alors commençons à coiffer notre lien. Je vais le cibler. Ensuite, ajoutez une décoration de texte. Aucun. Couleur. Cette belle couleur noire. Famille de polices, Sans Serif. Taille de police 45 pixels, bordure, cinq pixels, solide et sont belle couleur noire. Ensuite, j'ajouterai du remplissage, 40 pixels et 80 pixels de gauche et de droite. Ensuite, je vais ajouter la position relative grade. Donc maintenant, afin de créer le beau fond jaune, nous devrons utiliser le pseudo élément avant. Et si vous ne savez pas quels pseudo-éléments sont, ils vous permettent juste d'insérer du code avant ou après des éléments HTML. Donc je vais dire un deux-points avant. Ensuite, je n'ajouterai aucun contenu car nous ne voulons pas ajouter de texte. Et après cela, j'ajouterai la position absolue, et j'ajouterai la gauche 0, puis le haut 0 aussi. Maintenant, nous avons notre pseudo élément avant et sa position est dans le coin supérieur gauche du lien, juste ici, parce que nous avons ajouté 0 à gauche pour qu'il se déplace 0 distance de la gauche. Ou en d'autres termes, il restera juste à gauche du lien. Et il sera également sur le dessus, comme nous l'avons dit, haut à 0 aussi. Donc maintenant qu'avant, pseudo élément est juste un point dans le coin supérieur gauche du lien. Lorsque dans notre exemple, nous voulons que ce soit un fond jaune qui prend toute la largeur et la hauteur du lien. Ainsi, nous pouvons le faire facilement en ajoutant la couleur de fond, notre couleur jaune, puis la hauteur 100%, et la largeur 100%. Bien. Donc maintenant, vous pouvez voir que le pseudo élément précédent apparaît comme la couleur d'arrière-plan et prend toute la largeur et la hauteur du lien. Comme nous le voulions. Mais il y a un problème avec un fond jaune est maintenant cacher le texte en dessous. Donc maintenant, nous ne pouvons pas voir les mots qui me planent. Cela peut être corrigé facilement en allant juste ici et en ajoutant z index minus1, sorte que le texte apparaîtra à nouveau devant le fond jaune. Super. Donc maintenant, si nous regardons notre démo, vous pouvez voir que lorsque je survole avec un fond jaune tourne dans le sens des aiguilles d'une montre à partir de son coin inférieur gauche jusqu'à ce qu'il finisse horizontalement avec une rotation de 0 degrés. Et pour obtenir cet effet, je vais aller ici et ajouter l'origine de la transformation en bas à gauche, car la rotation est pivotante sur ce point, puis Transformer, Rotate moins 90 degrés, sorte que ce sera la position initiale et le fond jaune. Ensuite, j'ajouterai la transformation de transition 1 seconde. Maintenant, quand je survolais le lien, je voulais apporter quelques modifications à l'arrière-plan jaune. Donc, je vais ajouter la transformation, tourner de 0 degrés, ce qui signifie retourné à sa position horizontale d'origine. Et maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir que le degré de rotation est maintenant 0. Quand je survole, il revient à moins 90 degrés. ne nous reste donc qu'une chose à faire, c' est-à-dire cacher la partie du fond jaune à l'extérieur du lien. Cela peut être fait facilement en allant au lien et en disant simplement débordement caché. Et maintenant, nous avons l'effet que nous voulions sur notre bouton. Maintenant, nous pouvons utiliser la même technique pour obtenir des résultats différents, ce qui sera assez agréable aussi. Alors essayons certains d'entre eux. Disons que nous voulons que le fond jaune tourne à partir du coin inférieur droit, pas du bas à gauche. Cela peut être fait en changeant certaines des propriétés que nous avons ajoutées. Mais d'abord, revenons à notre CSS et supprimez cette ligne de code afin que nous puissions voir la boîte jaune en dehors du lien. Afin de faire tourner la boîte jaune à partir du coin inférieur droit, nous pouvons simplement aller ici et changer l'origine de la transformation en bas à droite plutôt qu'en bas à gauche. Donc maintenant, vous pouvez voir le fond jaune tourne à partir du coin inférieur droit de moins 90 degrés. Mais maintenant, changeons cette rotation à 90 degrés au lieu de moins 90 degrés. Et maintenant, le fond jaune tourne de 90 degrés. Maintenant, allons dans notre CSS et ajouter le débordement caché à nouveau. Et maintenant, quand je passe la souris sur le lien, vous pouvez voir que nous avons le même effet qu'avant, mais cette fois la rotation est centrée sur le coin inférieur droit, pas sur le bas à gauche. Maintenant, j'ai un petit défi pour toi. Je veux que vous essayiez de faire tourner le fond jaune vers différents points. Le premier est le coin supérieur gauche. Le second est le coin supérieur droit. vous suffit de modifier deux valeurs, l'origine de la transformation et l'angle de rotation. Alors essayez cela et dites-moi si vous avez pu le faire dans la section Q&R. 15. 16 - Effet de bouton numérisé créatif de numérisés de bouton numérisés et de numérisation créatif: Bonjour tout le monde. Dans cette leçon, nous allons créer ce joli effet de glissement stationnaire. Donc, lorsque je survole ce lien, vous pouvez voir l'arrière-plan glisser doucement de gauche à droite et la couleur change en blanc. Et quand je survole, l'arrière-plan glisse à nouveau vers la gauche. Voyons comment on peut faire ça. Ici, dans mon HTML, je vais juste ajouter une balise d'ancrage et dire juste me survoler. Ensuite, je vais aller à mon CSS et ajouter quelques styles. Je vais cibler le lien, et j'ajouterai quelques styles pour le rendre plus agréable. Donc, je vais ajouter de la décoration de texte, aucun. Puis la couleur. Cette belle couleur. Famille de polices. Sans Serif. Taille de la police 40 pixels, bordure, trois pixels, solide. Et notre couleur. Puis rembourrage 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, j'ajouterai la position, relative, et enfin, la transition tout 1 seconde. Maintenant, vous pouvez voir que notre lien est beaucoup plus agréable et nous pouvons commencer à travailler sur cet effet d'effacement. Donc, l'idée derrière cet effet de balayage est que nous allons créer un pseudo élément avant qui prendra toute la largeur et la hauteur du lien. Ensuite, nous le traduirons en dehors du lien. Et en survolant le lien, nous supprimerons la traduction afin qu'elle retourne à son endroit où nous pouvons la voir. Et cela aura beaucoup plus de sens quand nous avons créé ensemble. Donc, je vais aller ici dans mon CSS et ajouter un deux-points avant. Et puis je rendrai le contenu vide. Puis en dessous de cela, j'ajouterai la position absolue, puis à gauche 0 et top 0 aussi. Ensuite, nous devons le faire prendre toute la largeur et la hauteur de notre conteneur. Donc, je vais ajouter la hauteur 100%, puis la largeur 100%. Et j'ajouterai une couleur de fond. Notre couleur, bien sûr. Ensuite, j'ajouterai z-index minus1, et je vais vous dire pourquoi nous avons ajouté cela en une seconde. Super. Donc, lorsque vous regardez le lien, vous pouvez voir le pseudo élément avant prend toute la largeur et la hauteur du lien. Et le texte a en quelque sorte disparu parce qu'il a la même couleur que l'arrière-plan, donc nous ne pouvons pas le voir. Donc maintenant, nous voulons créer ce mouvement blanc à partir de la gauche qui peut être facilement fait en utilisant la fonction de traduction, dont je suis sûr que vous vous souvenez. Déplaçons les éléments autour de l'écran. Donc, je vais aller ici dans le pseudo élément avant et j'ajouterai la transformation. Traduire X moins 100%. Maintenant, je suis sûr que vous vous souvenez que les valeurs négatives, les éléments de film à gauche et les éléments positifs le déplacent vers la droite. Donc maintenant, vous pouvez voir le pseudo élément avant déplacé vers la gauche de 100% de sa largeur. Et vous pouvez voir que le texte apparaît maintenant juste ici. Super. Alors maintenant, en survolant le lien, je veux que deux choses se produisent. Je voulais avant pseudo élément pour revenir à sa position. Et je veux que la couleur change en blanc. Donc, en survolant le lien, je veux faire quelques changements à l'élément pseudo avant. Et ces changements le ramènent à sa position. Donc, je vais ajouter transform translate X 0 afin qu'il retourne à sa place d'origine. Et je veux que ce changement se produise sans heurts. Donc, je vais monter ici dans le pseudo élément et ajouter une transition, oh, 1 seconde. Donc maintenant, quand je vais et que je passe le curseur sur le lien, vous pouvez voir que l'arrière-plan se déplace doucement de la gauche à sa position d'origine. reste une chose à faire et c'est de cacher l'arrière-plan en dehors du lien. Et cela peut être fait simplement en allant à la balise d'ancrage et en ajoutant un débordement caché. Donc maintenant, vous pouvez voir que l'arrière-plan est invisible en dehors du lien plus. Et nous avons l'effet que nous voulons. Enfin, nous devons changer la couleur du texte en blanc en survolant également. Donc, j'irai à mon CSS et en survolant le lien, je veux que la couleur change en blanc. Et cela se produira aussi en douceur parce que nous avons ajouté une transition ici dans la déclaration de balise d'ancrage. Donc maintenant, quand je survole, vous pouvez voir que la couleur du texte change trop large. Maintenant, comme pour l'index Z que j'ai ajouté ici. J' ai fait cela parce que quand j'ai créé le pseudo élément avant et lui ai donné toute la largeur et la hauteur du lien. Le texte était caché derrière, ce qui signifie couvert le texte. Donc, par exemple, si je vais le supprimer comme ça. Ensuite, passez la souris sur le lien. Vous pouvez voir que les balises seront cachées derrière l'arrière-plan. Nous l'avons donc ajouté pour que le texte apparaisse devant lui afin que nous puissions le voir. Super. Maintenant que nous comprenons le concept derrière ce mouvement blanc, nous pouvons le modifier facilement pour obtenir des résultats différents. Disons que nous voulons que ce mouvement blanc soit du côté droit, pas du côté gauche. Nous pouvons le faire en changeant une seule ligne de code. Donc, ici, dans mon CSS, je vais changer le Translate X pour l'arrière-plan à 100% au lieu de moins 100%, sorte que la position initiale avant que je survole ce soit à droite, pas à gauche. Donc, quand je vais passer le curseur sur le lien à nouveau, vous pouvez voir que le léger mouvement est maintenant du côté droit. Et disons que nous voulons que le balayage soit de haut en bas. Donc, au lieu d'utiliser translate x, nous allons utiliser Traduire Y cette fois. Donc, je vais changer x à y, et nous le voulons de haut en bas. Donc, nous dirons moins 100% parce que les valeurs négatives déplacent les éléments vers le haut. Et encore une fois, je vais changer ce x ici à y. et maintenant vous pouvez voir quand je survole le lien, l'arrière-plan glisse de haut en bas. Maintenant, je veux que tu joues avec ces valeurs et que tu crées plus d'effets. Vous pouvez vous sentir libre de partager ce que vous venez avec d'autres élèves dans la section Q et une section. 16. 17 - Effet de hover de bouton créatif: Bonjour tout le monde. Dans cette leçon, nous allons créer un bel effet de vol stationnaire. Donc, quand je survole le lien, ce joli petit effet devrait se produire. Bon, alors commençons par aller ici dans mon HTML. En ajoutant un lien, dites simplement me survoler. Ensuite, je vais aller à mon CSS et ajouter quelques styles. Je vais cibler le lien et ajouter du remplissage, 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, je vais ajouter la police, la famille, Sans Serif, puis la décoration de texte, aucun pour se débarrasser du soulignement. Puis la couleur. Le tranchant 2626. Taille de la police, 45 pixels. Espacement des lettres. Deux pixels, bordure cinq pixels, solide. Et encore une fois, cette couleur, la position relative et la transition 1 seconde. Donc, voici à quoi ressemble le lien maintenant. Bon, donc nous devrons utiliser le pseudo élément avant. Et si vous ne savez pas ce que c'est, cela vous permet juste d'insérer du code avant votre élément. On verra comment ça marche dans une seconde. Donc je vais dire un deux-points avant. Et à l'intérieur de ce contenu, vide. Donc, je n'ai aucun texte à l'intérieur de ce pseudo élément. Et puis position absolue 0, gauche, 0, largeur, 100%, hauteur, 100%. Donc, il devrait prendre toute la largeur et la hauteur d'un lien, puis la couleur de fond, notre transition de couleur. 1 seconde. Donc maintenant, vous pouvez voir notre pseudo élément apparaît au-dessus du lien et nous ne sommes plus en mesure de voir le lien. Super. Je suis sûr que vous vous souvenez des fonctions de rotation x, rotation y que nous avons apprises plus tôt dans le cours. Et que vous vous souvenez que la rotation x fait tourner l'élément le long de l'axe x, tandis que la rotation y le fait tourner le long de l'axe y. Revoyons ça ensemble. Ici, j'ai deux images et j'ai défini la rotation x pour le premier à 90 degrés en survolant. Voyons ce qui se passera quand je survolerai. Vous pouvez voir que l'image est tournée de 90 degrés le long l'axe x de sorte que nous ne pouvons pas la voir maintenant parce que la partie de celle-ci qui nous fait face maintenant. Son bord. Et j'ai dit la rotation y pour la deuxième image à 90 degrés en planant aussi bien. Donc maintenant, quand je survole, vous pouvez voir que l'image est tournée le long l'axe y de 90 degrés jusqu'à ce qu'elle disparaisse aussi. Bon, maintenant que nous avons examiné ce qui pivoter x et tourner, pourquoi faire ? Revenons à notre CSS. J' irai ici et ajouterai une rotation x 90 degrés, notre pseudo élément afin qu'il tourne de 90 degrés et disparaisse comme dans l'exemple de l'image. Super. Donc maintenant ce que je veux faire est quand je survole le lien, je veux supprimer la rotation du pseudo élément avant afin qu'il retourne à l'endroit où il était avant de disparaître. Donc, je vais cibler le lien et quand je survolerai, je voulais faire quelques changements à l'élément pseudo avant. Je veux réinitialiser la rotation autour de l'axe à 0 pour qu'il apparaisse à nouveau et que nous puissions le voir. Et parce que j'utilise la transition ici, ce changement de rotation devrait se produire en douceur. Donc maintenant, quand je survole le lien, vous pouvez voir que le pseudo élément avant revient et le montre bien. Maintenant, nous devons changer la couleur du texte lorsque nous survolons le lien vers le blanc. Donc je vais cibler le lien. Et quand je survole, je veux changer la couleur en blanc. Et si je survole le lien maintenant, vous pouvez voir que rien ne se passe. La couleur du texte n'apparaît pas. Et c'est parce que le pseudo élément apparaît au-dessus du lien et que le texte se trouve en dessous. Donc, ce que nous pouvons faire est que nous pouvons aller juste ici dans le pseudo élément et ajouter l'index Z moins un pour que le texte apparaisse devant le pseudo élément. Donc maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir le texte apparaît et nous avons un bon effet de vol stationnaire qui se passe. Maintenant, nous essayons de faire pivoter x. Allons plus loin et essayons de faire pivoter y, mélanger ensemble et voir ce qui va obtenir. Donc, je vais copier ce pseudo élément, coller à nouveau, et juste changer avant à après. Bon, maintenant nous avons deux pseudo-éléments. Je vais juste changer la fonction de rotation en y. donc il va tourner le long de l'axe y jusqu'à ce que nous ne puissions plus le voir. Et je vais copier cet effet de vol stationnaire. Collez-le à nouveau et changez avant après X à Y. sorte que lorsque je survole, la rotation le long de l'axe y revient à 0. L' image apparaît bien avec le pseudo élément avant. Et maintenant, quand je vais planer dessus, vous pouvez voir les pseudo-éléments avant et après apparaissent ensemble, qui lui donne cet effet vraiment agréable. Et c'est exactement ce que nous voulions. 17. 18 - Effet de étirage de bouton créatif de boutons: Bonjour tout le monde. Dans cette leçon, nous allons créer ce bel effet de vol stationnaire. Vous pouvez voir lorsque je survole le lien, le texte devient plus en gras et l'espacement des lettres et l'épaisseur de la bordure augmentent. C' est un effet facile mais agréable. Voyons comment on peut le faire. Ici, dans mon HTML, vous pouvez voir que j'ai implémenté une police de Google Fonts nommée Roboto dans cet exemple. Donc, je vais aller ici et ajouter une balise d'ancrage. Et je dirai juste bouton. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. Je vais cibler la balise d'ancrage et ajouter une décoration de texte. Aucun. Rembourrage, 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, j'ajouterai de la couleur. Cette belle couleur rouge et bordure, trois pixels, solide. Et notre couleur rouge. Ensuite, j'ajouterai la transformation de texte. majuscules, taille de police 40 pixels. Et font-family. Roboto. Puis font-weight 300, ce qui le rendra un peu plus léger. Ensuite, l'espacement des lettres moins deux pixels afin que les lettres soient plus proches les unes des autres. Et enfin, transition ou 0,5 seconde pour que le changement se produise en douceur. Et maintenant, vous pouvez voir que le lien ressemble exactement à notre démo. Maintenant, nous devons créer l'effet que nous voulons sur le vol stationnaire. Donc, je vais cibler le lien et en survolant, je vais changer le poids de la police à 900, donc ce sera beaucoup plus audacieux. Ensuite, j'ajouterai l'espacement des lettres dix pixels afin que les lettres soient un peu éloignées les unes des autres. Et puis je vais copier la bordure d'ici et la coller. Et je vais changer cela à sept pixels au lieu de trois pixels. Et c'est tout. Lorsque je survole le lien, vous pouvez voir que le changement est agréable et lisse, juste comme nous le voulons. 18. 19 - Effet de swipe de bouton créatif de la balayage de bouton du bas au texte avec du texte: Bonjour tout le monde. Dans cette leçon, nous allons créer ce joli effet de balayage de haut en bas. Et si vous remarquez, cet effet est très similaire à ce que nous avons créé dans la leçon précédente. La principale différence est que nous avons ici du contenu dans le pseudo élément, qui est le mot année. Et bien sûr, il y a quelques différences dans l'apparence des boutons, mais nous utiliserons les mêmes fichiers de l'exemple précédent et apporterons quelques modifications pour obtenir cet effet. Voici donc le HTML de l'exemple précédent, et nous ne changerons rien du tout. Les changements seront dans notre CSS. Alors allons à notre CSS. Et avant de faire quoi que ce soit d'autre, changeons simplement à quoi ressemblera le lien. Donc, la première chose que je vais faire est d'ajouter un beau fond gris foncé au corps. Et puis après cela, je vais apporter quelques modifications au lien. Donc je vais changer la couleur en blanc. Les familles de polices, bien. La taille de la police est correcte. Et ici, je vais changer la couleur de la bordure en blanc aussi. Et c'est tout pour le lien lui-même. Maintenant, nous devons l'ajouter le pseudo élément avant. Donc, dans cet exemple, nous devons ajouter du contenu ici. Donc, je vais taper année et j'ajouterai la couleur blanche. Et je vais également changer la couleur de fond à cette couleur rouge. Et maintenant, lorsque je survole le lien, vous pouvez voir le mot année apparaît derrière le texte du lien. Cela se produit parce que l'index z est réglé sur moins un ici. Donc, je vais supprimer ceci. Et maintenant, quand je survole le lien, vous pouvez voir le mot ouais, apparaît devant le bouton. Super, donc maintenant nous devons centrer notre parole en arrière-plan. C' est très facile à utiliser Flexbox. Donc, je vais juste aller ici et ajouter un flex d'affichage afin que nous contrôlions tout ce qui est dans ce pseudo élément en utilisant Flexbox. Et je vais ajouter aligner les éléments centre pour centrer le contenu verticalement et justify-content centre ainsi pour le centrer horizontalement. Donc maintenant, quand je passe le curseur sur le bouton, vous pouvez voir que le mot est maintenant parfaitement centré à l'intérieur du pseudo élément. 19. 20 - Effet de glow de bouton créatif: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet en survolant un bouton. Donc, voyons que dans notre démo plus lente pour voir ce qui se passe exactement, je vais passer le curseur sur le lien. Et vous pouvez voir que la couleur de fond change en une couleur rouge. Et il y a une épaisse ligne blanche qui est inclinée à un angle de 45 degrés et qui traverse le lien. En même temps, la couleur d'arrière-plan change. Cool, non ? Voyons comment on peut faire ça. Tout d'abord, j'irai à mon HTML et j'ajouterai une balise d'ancrage. Et dis juste me planer. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. J' ajouterai un fond gris foncé au corps. Puis en dessous de cela, je vais cibler la balise d'ancrage et ajouter une décoration de texte. Aucun. Puis couleur, blanc. Famille de polices. Sans Serif. Taille de la police 40 pixels. Bordure, trois pixels. Blanc massif. Rembourrage. 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, j'ajouterai la transition 0, 0, 3 secondes position relative. Ensuite, faisons changer la couleur d'arrière-plan en rouge en survolant le lien. Donc, je vais aller ici et dire un. Et en planant. Je vais changer la couleur de fond à notre couleur rouge. Et maintenant, lorsque je survole le lien, vous pouvez voir que la couleur d'arrière-plan change pour lire. Bien. Maintenant, nous voulons créer une ligne blanche épaisse qui traverse le lien. Et nous allons utiliser le pseudo élément avant pour cela. Donc, je vais aller à mon CSS et dire un deux-points avant. Et je vais rendre le contenu vide. Ensuite, je vais rendre la couleur de fond blanche. Ensuite, je dirai top 0, gauche 0 aussi. Puis largeur 100%, et hauteur 50 pixels, puis position absolue. Et quand on y regarde, on peut voir qu'il a un fond blanc prenant toute la largeur du lien et ayant un haut de 50 pixels. Maintenant, nous voulons le déplacer vers la gauche à l'extérieur du lien de sorte que lorsque je survole, il se déplace de gauche à droite. Donc, je vais aller ici et ajouter la transformation, traduire X moins 100%. Et maintenant vous pouvez voir qu'il est traduit en dehors du lien vers la gauche par une distance égale à 100% de sa largeur. Ensuite, je veux faire pivoter de 45 degrés parce qu'il est tourné et je démo. Donc, je vais aller ici et ajouter une autre fonction de transformation qui est de faire pivoter 45 degrés. Et maintenant, vous pouvez voir qu'il est tourné. Bien. Maintenant, nous voulons le faire bouger vers la droite tout le chemin à travers le lien lorsque nous survolons le curseur. Et cela peut être fait, pas de problème. Donc, je vais aller à mon CSS et nous survolons le lien. Je veux faire quelques changements sont arrivés à l'élément pseudo avant. Je vais ajouter transform translate X 100% afin qu'il se déplace vers la droite de 100% de sa largeur. Ensuite, faites pivoter 45 degrés. Ainsi, il restera tourné pendant le mouvement. Et maintenant, quand je passe le curseur sur le lien, vous pouvez voir le pseudo élément avant se déplace de gauche à droite en passant à travers le lien. Mais nous avons encore un petit problème. Et c'est de se débarrasser du pseudo élément en dehors du lien. Nous pouvons résoudre ce problème en allant au sélecteur de balise d'ancrage et en ajoutant débordement caché afin que tout ce qui est en dehors soit caché. Et maintenant, quand je survole le lien, vous pouvez voir que nous obtenons exactement l'effet que nous voulons. 20. 22 - Effet de bouton de remplacement de deux couches créatif à l'échange de touches: Bonjour tout le monde. Dans cette leçon, nous allons créer ce bel effet de vol stationnaire. Nous utiliserons à la fois les pseudo-éléments avant et après dans cet exemple. Voyons comment on peut faire ça. Eh bien, tout d'abord, je vais commencer ici dans le HTML, et j'ajouterai une balise d'ancrage. Et dis juste que tu me survoles. Ensuite, nous devons aller à notre CSS et ajouter quelques styles. Donc je vais cibler la balise d'ancrage. Ensuite, j'ajouterai du texte, de la décoration. Aucun. Couleur d'arrière-plan. Cette belle couleur gris foncé. Famille de polices. San Serif. Taille de la police 40 pixels, bordure. Pour les pixels, couleur unie et gris foncé. Ensuite, j'ajouterai du rembourrage, 40 pixels du haut et du bas et 80 pixels de la gauche et de la droite. Et enfin, j'ajouterai la position relative. Bien. Maintenant, commençons à travailler sur les pseudo-éléments avant et après. Je vais créer les pseudo-éléments avant pour notre lien. Et je dirai le contenu. Ensuite, les mots me survolent, puis positionnez absolu, haut, 0 , gauche, 0, hauteur, 100%, largeur, 100% aussi bien. Puis la couleur de fond. Cette belle couleur jaune. Ensuite, coloriez notre couleur gris foncé. Et maintenant, nous devons centrer le contenu à l'intérieur de celui-ci. Et nous le ferons en utilisant Flexbox. Donc, je vais ajouter un flex d'affichage, puis justifier le centre de contenu afin de le centrer horizontalement. Alignez ensuite les éléments centrés afin d'atteindre le contenu verticalement. Et enfin, j'irai ajouter une transition ou 0,5 seconde gris. Donc maintenant, nous avons le pseudo élément précédent avec ce fond jaune placé au-dessus de notre lien. Maintenant, nous allons travailler sur le pseudo élément after. Je vais juste copier tout ça. Coller à nouveau. Et je changerai avant après. Et maintenant l'élément après 0 est assis sur le dessus de l'élément précédent. D' accord ? Je vais juste aller ici dans le pseudo élément after et j'ajouterai transform translate. Et je veux le traduire par moins 100% horizontalement. Donc, il va se déplacer vers la gauche. Et je le traduirai à 100% verticalement. Donc, il va se déplacer vers le bas. Donc maintenant, il devrait déplacer 100% de sa largeur vers la gauche et 100% de sa hauteur vers le bas. Comme on le voit ici. Grille. Maintenant, nous avons les pseudo-éléments avant assis sur le lien. Et le pseudo élément after est dans sa nouvelle position. Continuons à bouger en vol stationnaire. Je veux avant un pseudo élément pour se déplacer dans le coin supérieur droit en dehors du lien. Et je veux que le pseudo élément after prenne sa place. C' est facile à faire. Donc, je vais juste y aller. Et quand je survole le lien, je veux faire quelques changements au pseudo élément avant. Je vais ajouter transformer traduire. Je voulais aller à droite. Donc, je vais ajouter 100% de sa largeur à droite. Et je veux qu'il se déplace vers le haut. Donc, je vais ajouter moins 100% de sa hauteur au sommet. Et juste comme ça, quand je survole le lien, vous pouvez voir le pseudo élément précédent se déplace vers cette nouvelle position. Maintenant, nous voulons que le pseudo élément after prenne sa place. Ce sera très facile à faire. Je vais juste copier cela et changer avant après. Ensuite, je vais faire à la fois le Translate X et le translate y 0 afin qu'il revienne à sa position d'origine. Et maintenant, quand je survole le lien, vous pouvez voir le pseudo élément avant quitte sa place pour le pseudo élément after. Maintenant, si vous remarquez, vous pouvez voir que nous avons toujours la couleur bleue du lien derrière le pseudo élément avant. Et il apparaît quand nous survolons. Pour qu'on puisse s'en débarrasser. Pas de problème en revenant simplement aux liens, la conférence et en ajoutant la couleur transparente afin qu'il disparaisse. Et j'ajouterai un débordement caché afin que les éléments n'apparaissent pas en dehors du lien. Et maintenant, quand nous survolons le lien, vous pouvez voir que tout ressemble exactement à ce que nous espérions. 21. 21 - Effet de bouton de mise à la échelle du texte créatif: Bonjour tout le monde. Bienvenue à cette leçon du cours. Dans cette leçon, nous allons créer ce bel effet de vol stationnaire et nous allons utiliser le pseudo élément avant pour le créer. Voyons comment on peut faire ça. Je vais commencer ici dans mon HTML en ajoutant un lien. Et je dirai juste de me planer. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. Je vais cibler le lien. Ensuite, j'ajouterai du texte, de la décoration. Aucun. Couleur. Cette belle couleur gris foncé. Famille de polices. Sans serif. Taille de police 40 pixels, bordure, trois pixels, solide. Et notre couleur gris foncé. Ensuite, j'ajouterai du remplissage, 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, j'ajouterai la transition ou 0,5 seconde. Et enfin, position relative. Et maintenant, notre lien est beaucoup mieux. Bien. Maintenant, nous allons utiliser le pseudo élément avant pour créer notre effet. Donc, je vais aller ici et ajouter un deux-points avant. Et j'ajouterai du contenu. Passez moi. Ensuite, positionnez absolu, haut, 0, gauche 0, puis hauteur, 100%, largeur, 100% aussi bien. Donc, il prend toute la largeur et la hauteur du lien. Ensuite, je vais ajouter la couleur de fond, notre couleur gris foncé. Et enfin, la couleur blanche. Et maintenant, vous pouvez voir le pseudo élément avant est défini sur le dessus du lien avec sa couleur de fond gris foncé. Donc maintenant, nous voulons centrer le contenu à l'intérieur de l'élément pseudo avant, et nous allons utiliser flexbox pour le faire. Donc, je vais aller ici et ajouter l'affichage. Flex, puis justifier le contenu et aligner également les éléments centrés. Super, alors nous allons faire un peu de travail sur notre impact. L' idée derrière elle est que nous allons faire ce fond gris foncé jusqu'à environ cinq fois sa taille d'origine. Donc, ce sera très énorme. Et nous ferons son opacité 0 pour qu'elle soit transparente. Et lorsque nous survolons le lien, nous le remettrons à l'échelle à un, et l'opacité changera également à 1, sorte qu'elle sera visible. Faisons ça. J'irai ici à l'intérieur du pseudo élément avant, et j'ajouterai l'échelle de transformation cinq fois. Et vous pouvez voir qu'il est mis à l'échelle à cinq fois sa taille et qu'il est énorme. Maintenant, je veux qu'il soit caché en dehors du lien. Donc, je vais aller juste ici à l'intérieur du sélecteur de liens. Et j'ajouterai le débordement caché. Et maintenant, vous pouvez voir les parties du pseudo élément avant en dehors du lien ou caché. Génial, continuons. Maintenant. Nous devons les rendre avant pseudo élément transparent. Donc, je vais aller ici et ajouter l'opacité 0. Et maintenant, vous pouvez voir qu'il est caché. Ensuite, j'ajouterai la transition, tous les zéros, cinq secondes. Maintenant, je suis en vol stationnaire. Nous voulons refaire l'échelle du pseudo élément un. Et nous voulons aussi le rendre visible en me rendant opacité une. Alors faisons ça. Je vais ajouter un deux-points, planer, deux-points avant. Et à l'intérieur, j'ajouterai la transformation, l'échelle un, puis l'opacité une. Et maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir le pseudo élément précédent apparaît et se réduit à sa taille d'origine, nous donnant l'effet que nous voulions. 22. 22 - Effet de bouton de swapping circulaire créatif de bouton de swapping circulaire: Bonjour tout le monde. Bienvenue à cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce superbe effet de survol de bouton. Ainsi, vous pouvez voir quand je survole le bouton, un fond rouge remplit le bouton de haut en bas. Voyons comment on peut faire ça. abord, je vais aller classer ici dans mon HTML et ajouter un bouton et lui donner une classe de btn. Et je dirai juste bouton. Ensuite, je vais aller à mon CSS pour ajouter quelques styles à ce bouton. Je vais commencer par cibler le bouton en utilisant la classe que nous avons ajoutée. Et je vais continuer en ajoutant une bordure, deux pixels, solide. Et maintenant, nous allons utiliser la couleur tomate. Ensuite, je vais supprimer l'arrière-plan en ajoutant l'arrière-plan. Aucun. Ensuite, nous allons ajouter de la couleur. Tomate encore pour le texte. Puis rembourrage 20 pixels du haut et du bas et 40 pixels de la gauche et de la droite. Ensuite, nous devons augmenter un peu la taille de la police. Donc, je vais ajouter la taille de la police 25 pixels. Puis le texte transformer pointeur de curseur en majuscules pour faire le curseur convertir en une main planait sur le bouton. Puis transition ou 0,5 seconde parce que nous allons changer la couleur du texte lorsque nous survolons le bouton. Et nous avons besoin que cela se produise sans heurts. Maintenant, n'est-ce pas ? Maintenant, nous avons notre bouton assis ici et il semble déjà génial. Donc, nous allons travailler sur l'effet stationnaire. Nous allons utiliser le pseudo élément avant pour créer l'arrière-plan rouge. Donc, j'irai juste ici et je dirai BTN colon avant. Ensuite, à l'intérieur de celui-ci, j'ajouterai du contenu vide parce que nous ne voulons pas de texte ou quoi que ce soit comme ça. Puis position absolue, haut, 0, gauche, 0, largeur, 100%, hauteur, 100%. Et nous allons ajouter fond, tomate. Très bien, donc ici vous pouvez voir le fond rouge est assis sur le dessus du bouton, prenant toute la largeur et la hauteur du bouton. Et il cache le texte en dessous. Donc, corrigeons cela en allant juste ici à l'intérieur du fond rouge et en ajoutant l'index Z moins un. Maintenant, le bouton est assis sur le fond rouge, mais nous ne pouvons pas le voir maintenant parce qu'il a la même couleur que l'arrière-plan. Donc, si nous allons ici à l'intérieur du sélecteur de bouton et changer la couleur en blanc, par exemple. Vous pouvez voir le texte s'affiche maintenant. Bon, remettons-le à la tomate. Maintenant, continuons à travailler sur le fond rouge. Si on va à notre démo et jette un coup d'oeil, tu peux voir que je planque. L' arrière-plan rouge obtient un rayon de bordure à partir des coins inférieur gauche et inférieur droit. Alors revenons en arrière et ajoutons ça à notre bouton. Je vais aller ici à l'intérieur du pseudo élément avant. Et j'ajouterai le rayon de bordure 0, 050% et 50%. Donc 0 à partir des coins supérieur gauche et supérieur droit, parce que nous ne voulons pas de courbes sur ceux-ci. Et 50 pour cent en bas à gauche et en bas à droite. Et ici, vous pouvez voir le fond rouge a maintenant ces courbes en bas. Cool. Maintenant, nous allons travailler sur l'effet stationnaire. Ce que nous allons faire, c'est que nous allons définir la hauteur du fond rouge à 0. Ensuite, en survolant le bouton, nous allons faire augmenter sa hauteur afin qu'il remplisse et couvre le bouton. Alors prenons soin de ça. J' irai ici à l'intérieur du fond rouge, et je ferai la hauteur 0% au lieu de 100%. Donc maintenant, vous pouvez voir que le fond rouge n'est plus visible. Ensuite, nous irons ici et dire BTN sur le pointage du côlon avant. Et nous ferons la hauteur 100% à nouveau. Ensuite, afin de faire ce changement de hauteur se passe en douceur, je vais monter ici et ajouter la transition 0, 0, 0,5 secondes. Bien. Donc maintenant, quand je vais et que je passe le curseur sur le bouton, vous pouvez voir la hauteur de fond rouge redevient 100% à nouveau. Mais bien sûr, à cause du rayon de la frontière que nous avons ajouté, il ne couvre pas tout le bouton. Nous devons donc augmenter sa hauteur et le rendre plus de 100% en planant. Alors, allons ici et changez ça à 100% pour, disons 190%. Et maintenant, quand je vais et que je passe à nouveau sur le bouton, vous pouvez voir le fond rouge couvre le bouton. Mais parce que sa hauteur est maintenant 100% du site de boutons, il est débordant. On peut s'en occuper. Pas de problème en allant juste ici à l'intérieur du sélecteur de bouton et en ajoutant un débordement caché pour éviter tout débordement du bouton. Génial, maintenant il a l'air exactement comme nous le voulons. Mais il nous reste une chose, qui est de faire changer la couleur du texte en blanc en survolant le bouton. Donc, je vais aller ici et ajouter btn. Et en vol stationnaire. Je vais ajouter de la couleur, blanc. Excellent. Maintenant, vous pouvez voir que nous avons le même effet que nous voulons, et il a l'air génial. Maintenant que nous avons appris le concept ou l'idée derrière tout cela, nous pouvons manipuler cet effet et le faire passer d'une direction différente, de bas en haut par exemple. Donc, tout ce que nous aurons à faire est de changer l'onglet juste ici en bas afin qu'il grandisse vers le haut ou remplisse à partir de la carte du bas pour l'onglet. Et dans ce cas, nous devrons également changer le rayon de la frontière et mettre les courbes sur le taux supérieur et les coins supérieur gauche. Donc nous dirons 50 pour cent et 50 pour cent ici au lieu de 00. Et c'est tout ce qu'on a à faire. Maintenant, l'effet se produit de haut en bas. Juste comme ça. 23. 23 - Effet de bouton rotatif de 3 couches rotatif créatif en 3 couches: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet de survol de bouton. Donc, quand je passe la souris sur le bouton, vous pouvez voir que nous avons cet effet où d'abord un fond vert couvre le bouton, puis un rouge les couvre tous. Alors, voyons celui-ci et faisons-le. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage et juste dire bouton. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. Je vais cibler le lien. Ajoutez du remplissage, 20 pixels du haut et du bas, et 40 pixels de la gauche et de la droite. Ensuite, j'ajouterai une décoration de texte. Aucun. Transformation de texte. majuscules, la couleur de fond, une couleur jaune, puis la couleur blanche. Et nous voulons que la taille de la police soit un peu plus grande. Donc, je vais ajouter la taille de la police 20 pixels. Nous voulons aussi un espacement entre les lettres. Donc, je vais ajouter l'espacement des lettres aux pixels. Et enfin, position relative. Maintenant, notre bouton est beaucoup mieux. Ensuite, nous voulons créer l'arrière-plan vert qui couvre le bouton lorsque nous survolons. Donc, je vais aller ici et créer un pseudo élément avant pour notre balise d'ancrage. Et à l'intérieur, j'ajouterai du contenu. Bouton, position, absolu, haut, 0, gauche 0. Et parce qu'il a la même largeur et la même hauteur que le bouton, nous ajouterons la largeur 100% et la hauteur 100%. Ensuite, nous allons ajouter la couleur de fond. Cette couleur verte. On y va. Le fond vert est maintenant assis juste au-dessus de notre bouton. Ensuite, nous devons centrer ce texte horizontalement et verticalement à l'intérieur du bouton. Et nous le ferons en utilisant Flexbox. Donc, je vais aller ici et ajouter l'affichage. Flexible. Ensuite, justifiez le centre de contenu pour le centrer horizontalement. Et alignez également les éléments centrés pour le centrer verticalement. Très bien, pour faire l'effet que nous voulons, nous allons utiliser la fonction de rotation, qui nous permettra de faire pivoter le fond vert sur son axe x. Examinons donc ce que la fonction rotation x peut faire pour nous. Je vais aller ici et ajouter Transform. Tournez X 60 degrés. Ainsi, vous pouvez voir que l'arrière-plan vert est maintenant tourné le long de son axe horizontal de 60 degrés. Et il le fait à partir de son point central. Parce que rappelez-vous, l'origine de la transformation est centrale par défaut, signifie que toute action de transformation que vous ferez sur l'élément prendra le point central comme référence. Mais dans cette situation, nous voulons changer cela. Nous voulons que l'arrière-plan vert tourne sur son point central supérieur. Donc, je vais aller ici et ajouter l'origine de la transformation en haut. Et maintenant, vous pouvez voir qu'il prend le point central supérieur comme référence lors de la rotation. Bien. Maintenant que nous avons examiné comment fonctionne la fonction de rotation x, je vais faire pivoter le fond vert de 270 degrés, pas de 60 degrés. Je vais donc changer ce 60 à 270. Maintenant, vous pouvez voir qu'il n'est plus visible car il est maintenant tourné et se trouve derrière le bouton. Maintenant, je passe la souris sur le lien. Je vais faire en sorte que le Rotate se réinitialise à nouveau à 0 afin qu'il couvrira le bouton. Alors j'irai ici. Et en survolant la balise d'ancrage, je vais faire quelques changements à l'élément pseudo avant. J' ajouterai Transform, Rotate X 0. Ensuite, nous voulons que cela se produise sans heurts. Donc, je vais aller ici et ajouter la transition, toutes les 0,5 secondes. Et maintenant, quand je vais passer le curseur sur le bouton, vous pouvez voir le fond vert tourne et couvre le bouton comme nous le voulons. Cool. Maintenant, après avoir créé le fond vert, nous voulions, il est temps de créer le rouge. Ce sera assez facile. Nous copions simplement tout le pseudo élément précédent. Coller à nouveau. Et nous allons juste changer la couleur de fond en rouge. Et nous voulons qu'il tourne après le vert. Nous allons donc ajouter le délai de transition 0,25 secondes. Alors je descends ici. Et je vais copier ceci et changer avant après. De sorte que lorsque nous survolons le bouton, l'arrière-plan rouge apparaîtra également. Donc maintenant, quand je vais et que je passe le curseur sur le bouton, vous pouvez voir le fond vert apparaît. Et ensuite, le rouge en fait deux, nous donnant l'effet que nous voulons. Et nous pouvons facilement changer cet effet si nous le voulons. Donc, par exemple, disons que je veux que l'arrière-plan rouge tourne sur son point central inférieur, pas sur le haut. Ce que nous pouvons faire, c'est que nous pouvons simplement aller et changer l'origine de la transformation ici sur le fond rouge en bas au lieu de l'onglet. Et comme vous pouvez le voir, cela le fait tourner sur son bord inférieur, qui nous donne un effet différent. 24. 25 - Les calques créatifs qui remplacent l'effet de gauche à droite: Bonjour tout le monde. Bienvenue à cette nouvelle leçon dans le cours où nous allons créer ce bel effet de vol stationnaire sur ce bouton. Donc, si nous regardons de près l'arrière-plan qui disparaît jusqu'au rang ici, vous pouvez voir quatre choses se passent en même temps, il se déplace vers la droite tout en tournant sur son axe y, son opacité diminue et sa taille devient plus petite tous en même temps. Pendant ce temps, l'arrière-plan qui arrive a un effet inverse. L' opacité augmente en. Il devient également plus grand, tournant vers la droite pour prendre la première place des arrière-plans. Ça peut sembler déroutant, mais je te promets, tu trouveras ça facile une fois qu'on aura commencé à le créer. Alors faisons ça en fait. J' irai ici dans mon HTML et j'ajouterai une balise d'ancrage et je dirai juste bouton. Ensuite, je vais aller à mon CSS pour le style. Je vais cibler le lien. Ensuite, j'ajouterai du remplissage, 20 pixels du haut et du bas, et 40 pixels de la gauche et de la droite. Ensuite, j'ajouterai la transformation de texte. En majuscules. Décoration de texte Aucun. Espacement des lettres. Pour les pixels. Couleur. Cette couleur jaune. Frontière. Trois pixels, solide. Et notre couleur jaune. La taille de la police, 30 pixels. Et enfin, position. Parenté. Bien. Maintenant, vous pouvez voir que nous avons notre bouton et qu'il a l'air assez bien. Ensuite, nous devons créer l'arrière-plan qui disparaît à droite et celui qui prend sa place. Nous allons commencer avec les avantages uniques et nous allons créer en utilisant le pseudo élément avant. Donc, je vais aller juste ici et dire un deux-points avant. Et à l'intérieur, je vais ajouter le bouton Contenu parce que nous voulions avoir le bouton mot puis la position absolue, top 0, gauche 0. Et parce qu'il prend la même largeur et la même hauteur que le bouton original, j'ajouterai la largeur 100% et la hauteur 100%. Ensuite, j'ajouterai une couleur de fond. Cette couleur gris foncé, puis colorier notre couleur jaune. Impressionnant. Maintenant, vous pouvez voir que nous avons le fond gris foncé et il est placé sur le dessus du bouton prenant toute la largeur et la hauteur. Mais vous pouvez voir que le bouton mot n'est pas centré horizontalement et verticalement. Alors prenons soin de ça. Nous allons le centrer en utilisant Flexbox. Donc, je vais aller ici et ajouter un flex d'affichage, puis justifier le centre de contenu pour le centrer horizontalement. Et aligner les éléments au centre aussi bien pour le centrer verticalement, Bien sûr. Très bien, on y va. Ensuite, nous devons travailler sur l'effet de vol stationnaire. Si vous vous en souvenez, cet arrière-plan doit se déplacer vers la droite, tourner autour de l'axe y, plus petit et être transparent tout en même temps. Alors faisons ça. J' irai ici et je dirai un vol stationnaire à deux points. Je veux faire quelques changements sont arrivés à l'élément pseudo avant. Je vais ajouter à gauche 100%. Et pour faire ce changement de position se passe en douceur, je vais monter ici à l'intérieur du pseudo élément avant et j'ajouterai transition, toutes les 0,5 secondes. Alors maintenant, quand nous allons et survolons le bouton, le fond gris foncé devrait se déplacer vers la droite, comme ça. Et pour le rendre plus petit et tourner sur son axe y, j'irai ici et ajouter l'échelle de transformation 0 pour le rendre plus petit jusqu'à ce qu'il disparaisse. Et tournez y 360 degrés pour le faire tourner sur son axe y. Alors maintenant, quand je vais au navigateur et que je passe le curseur sur le bouton, vous pouvez voir qu'il tourne dans disparaît tout en se déplaçant vers la droite, nous donnant ce bel effet. Et pour faire diminuer son opacité, eh bien, nous pouvons aller ici et ajouter l'opacité 0. Et on y va. Voici l'effet exact que nous voulons sur le premier fond. Ensuite, nous allons travailler sur le deuxième fond qui vient de la gauche à la droite. Nous allons utiliser le pseudo élément after dans ce cas. Donc, je vais copier tout cela, coller, et changer avant à après. Ensuite, nous avons besoin de sa position d'origine pour être sur la gauche. Donc, nous allons changer à gauche, juste ici à moins 100%. Maintenant, vous pouvez voir qu'il se trouve sur le côté gauche de notre bouton. Donc nous voulons le rendre invisible et nous allons le faire de sorte que lorsque nous planons dessus, il soit visible et déplacé vers la droite et tourner. Donc, fondamentalement, nous allons inverser ce que nous avons fait sur le premier. Donc, pour ce faire, j'irai ici et ajouterai la transformation, l'échelle 0 et pivote y 0 degrés aussi. Nous allons également ajouter l'opacité 0. Et maintenant en survolant le lien, nous allons ajouter quelques modifications à l'élément pseudo after. Nous ajouterons 0 à gauche pour le positionner au-dessus de notre lien. Et nous ajouterons la transformation, l'échelle un et la rotation. Pourquoi ? 360 degrés pour le faire grandir et tourner en même temps. Nous allons également ajouter une opacité pour le faire apparaître et avoir ce beau fondu en effet. Alors maintenant, allons et survolons le bouton et vous pouvez voir le premier arrière-plan se déplace vers la droite et le second prend sa place. Mais nous voulons rendre le texte invisible. Nous ne voulons pas que le bouton mot apparaisse sur le bouton lui-même. Donc, je vais revenir au sélecteur de lien et je vais changer la couleur en transparent au lieu de cette couleur. Et maintenant, vous pouvez voir que la couleur est plus invisible. Et nous avons l'effet exact que nous voulons. 25. 26 - 3 cercles créatifs de l'effet de bouton de fond: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer ce joli petit effet de survol de bouton. Donc, vous pouvez voir quand je survole le lien, trois cercles viennent pour couvrir le lien. Ensuite, un arrière-plan apparaît derrière eux et couvre l'ensemble du lien, complétant l'effet entier. Voyons comment on peut faire ça. Je vais commencer ici dans mon HTML en ajoutant un lien. Et à l'intérieur, je vais ajouter une travée et la laisser vide. Nous verrons pourquoi nous avons besoin de ce chef de groupe dans la leçon. Alors je dirai juste, plane-moi. ce moment. Je vais aller à mon CSS. Je vais cibler le lien et ajouter la largeur 220 pixels, hauteur 80 pixels. Ok, maintenant je vais ajouter de la couleur. Cette couleur jaune. Couleur d'arrière-plan, transparente, car nous ne voulons pas de couleur d'arrière-plan. Taille de la police, 26 pixels, décoration de texte. Aucun pour supprimer les soulignements. Transformation de texte. Majuscules pour faire toutes les lettres majuscules. Ensuite, afin de centrer le texte horizontalement et verticalement, nous ajouterons le texte aligner, centre et la hauteur de la ligne. 80 pixels. Cool. Maintenant, enfin, je vais ajouter la transition. Les cinq secondes. Et position. Parenté. Génial. Maintenant, nous allons travailler sur la création des cercles qui viennent de la gauche et de la droite. Lorsque nous survolons le lien, nous utiliserons les pseudo-éléments avant et après pour les créer. Donc, j'irai ici et je dirai un deux-points avant, puis une virgule et un deux-points après. Et à l'intérieur, j'ajouterai du contenu. Chaînes vides. Position, absolue. En haut, 50 pour cent. Largeur, 20 pixels, hauteur, 20 pixels aussi. Couleur de fond, notre couleur jaune. Et pour les faire cercles, j'ajouterai le rayon de la frontière, 50 pour cent. Bon, maintenant vous pouvez voir que nous avons les deux cercles. Celui de gauche est le pseudo élément avant et celui de droite est le pseudo élément after. Et parce que nous avons dit qu'ils sont les meilleures propriétés à 50 pour cent, leur bord supérieur se trouve à 50 pour cent du haut du lien. Mais nous voulons que leur point central soit à 50 pour cent du haut du lien, pas leurs bords supérieurs. Donc, ce que nous pouvons faire, c'est que nous pouvons les traduire vers le haut de la moitié de leur taille. Cela les déplacera un peu vers le haut et les frittera correctement. Donc, je vais revenir à mon CSS et à l'intérieur des pseudo éléments avant et après, j'ajouterai transform, traduirai Y. afin de les déplacer vers le haut, j'ajouterai moins 50 pour cent. Et enfin, j'ajouterai une transition, toutes les 0,3 secondes. Donc maintenant, vous pouvez voir les cercles avant et après sont parfaitement centrés verticalement à l'intérieur du lien. Mais vous pouvez aussi voir qu'ils sont si bons qu'avant pseudo élément couvre la lettre H et l'élément après touche presque la lettre E. Et c'est parce que spécifiez n'importe quelle position horizontale pour eux. Donc ils sont juste assis avant et après le texte du lien. Alors définissons une position horizontale pour eux. Je vais cibler le pseudo élément avant seul. Et j'ajouterai à gauche 0. Cela positionnera dans, sur le côté gauche du lien lui-même, pas dans le texte à l'intérieur du lien. Comme ça. Ensuite, je vais cibler l'après-midi et ajouter écrire 0 aussi bien. Et cela positionnera le cercle après à droite de la longueur cette fois. Bon, maintenant, si vous vous souvenez, quand on a plané sur le lien, il y avait trois cercles, pas trop mal. En fait, il y en a quatre, mais deux d'entre eux sont assis l'un sur l'autre et apparaissent comme un cercle. On verra comment faire ça. Afin de faire les deux autres cercles, nous allons utiliser la propriété box shadow, qui nous permet d'ajouter une ombre aux éléments HTML. Voyons donc comment nous pouvons créer des cercles identiques à ceux que nous avons déjà en utilisant la propriété box shadow. Tout d'abord, je vais commencer par le pseudo élément avant. Je vais aller ici et ajouter box-shadow. Et la box-shadow accepte quatre valeurs. La première valeur est la distance horizontale entre l'élément et l'ombre que nous ajoutons. Donc, si nous ajoutons 10 pixels, l'ombre sera de 10 pixels de l'élément vers la droite. Je veux que l'ombre soit de 100 pixels du pseudo élément avant à gauche. Donc, je vais ajouter moins 100 pixels ensuite, la deuxième valeur de la propriété box-shadow est la distance verticale entre l'élément et l'ombre. Et nous voulons que l'élément et l'ombre soient sur le même plan. Nous allons donc définir la distance verticale à 0. La troisième valeur de la propriété d'ombre de boîte est le flou de l'ombre. Mais nous ne voulons pas que les nôtres soient flous. Nous voulons qu'il soit aussi net que le pseudo élément précédent, donc nous le mettrons à 0 aussi. Enfin, la dernière valeur de la propriété box-shadow est la couleur de l'ombre. Mettons-le au vert pour l'instant. Donc maintenant, quand je vais recharger la page, vous pouvez voir un nouveau cercle vert est apparu à gauche du pseudo élément précédent. Et la distance horizontale entre eux est de 100 pixels, tandis que la distance verticale est de 0. Donc ils sont assis à niveau les uns avec les autres. Et vous pouvez voir qu'il est net parce que nous définissons la valeur de flou pour elle sur 0. Très bien, je vais faire la même chose pour le pseudo après, mais cette fois je vais faire asseoir l'ombre sur la droite. Donc je vais copier cette boîte. Propriété Shadow. Collez-le à l'intérieur du pseudo élément après et enchaînez minus1 100 pixels à 100 pixels. Il sera donc à droite, pas à gauche. Et je changerai aussi la couleur en bleu. Cool. Maintenant, nous avons quatre cercles. Les deux à gauche sont là avant le pseudo élément et son ombre, tandis que les deux à droite sont le pseudo élément après et son ombre. Maintenant, travaillons sur l'effet de vol stationnaire. J' irai juste ici et dirai un deux-points, planer le deux-points avant. Je vais ajouter à gauche 50%. Donc, cela fera le pseudo élément avant déplacé vers la droite de 50% de la largeur de longueur et son ombre va bien sûr, se déplacer avec elle. Donc maintenant, si je passe le curseur sur le lien, vous pouvez voir le pseudo élément précédent se déplace avec son ombre. Mais en survolant, nous ne voulons pas que cette ombre maintienne la même distance de 100 pixels du côté gauche. Nous voulons qu'il se déplace sur le côté droit par, disons 30 pixels. Nous pouvons gérer cela très facilement en allant ici et en ajoutant de l'ombre de boîte, 30 pixels au lieu de moins 100, puis 0, 0 et vert. Donc maintenant, lorsque je passe le curseur sur le lien, vous pouvez voir l'ombre verte se déplace maintenant à droite des pseudo-éléments précédents cercle de 30 pixels. Très bien, faisons la même chose pour le pseudo élément after. Je vais copier tout ce bloc de code, le coller et changer avant à après. Ensuite, je changerai de gauche à droite. Ainsi, il se déplacera vers la gauche de 50% des largeurs de lien avec son ombre bleue. Mais alors nous voulons que l'ombre se déplace vers les éléments du côté gauche de 30 pixels. Donc, nous allons changer 30 pixels ici à moins 30 pixels, et enfin, vert à bleu. Et maintenant, quand je passe la souris sur le lien, vous pouvez voir que le cercle arrière se déplace vers la gauche et son ombre bleue se déplace aussi bien jusqu'à ce qu'il atteigne un point à gauche de l'élément de 30 pixels. Génial. On a presque l'effet que tu cherches. Mais il reste une chose. Nous voulons que les pseudo-éléments avant et après finissent dans la même position afin qu'ils soient affichés un sur l'autre et apparaissent comme un cercle, nous laissant seulement trois cercles. Vous voyez quand j'ai dit à gauche à 50 pour cent ici, cela signifie que le pseudo élément avant se déplacera jusqu'à ce que son bord gauche soit exactement à 50 pour cent. Mais on ne veut pas ça. Nous voulons qu'il soit centré exactement à 50 % des largeurs de liens. Donc, ce que nous pouvons faire, c'est que nous pouvons le traduire à gauche de la moitié de sa largeur. Donc, je vais aller ici et ajouter la transformation, traduire x moins 50%. Et parce que nous avons mis traduire y ci-dessus, à moins 50% est bien, nous devons dire au navigateur que nous voulons qu'il reste moins 50%. Donc, je vais descendre à nouveau et ajouter Traduire Y moins 50% Ensuite, je ferai la même chose pour le pseudo élément after. Je vais le déplacer vers la droite de la moitié de sa largeur afin qu'il soit à la même position que la précédente. Donc, je vais ajouter transformer traduire X 50 pour cent, ce qui va le déplacer vers la droite de 50% de sa largeur et traduire y moins 50%. Donc maintenant, quand je vais et survolez le lien, vous pouvez voir les pseudo-éléments avant et après sont maintenant assis l'un sur l'autre et sont devenus un cercle. Maintenant, allons changer la couleur des cercles d'ombre en jaune aussi. Bon, maintenant nous allons travailler sur le fond jaune. Je vais utiliser la portée que nous avons ajoutée à l'intérieur de notre lien pour le créer. Donc, je vais cibler la portée à la position absolue, top , 0, gauche, 0, largeur, 100%, hauteur, 100% aussi bien. Et la couleur de fond. Notre couleur jaune. Et le rayon de bordure, huit pixels. Donc maintenant, vous pouvez voir le fond jaune se trouve au-dessus du lien et le couvre. Alors continuons. Je vais revenir ici et ajouter la transformation, l'échelle 0, transition 0,3 secondes. Alors je descends ici. Et en survolant le lien, je vais apporter quelques modifications à la portée. J' ajouterai l'échelle de transformation un afin qu'il devienne plus grand. Et puis délai de transition 0,4 seconde. Donc, il va attendre que les cercles entrent. Alors maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir que le fond jaune devient plus grand après que les cercles ont fini de bouger. Maintenant, modifions la couleur du lien en survolant. Je vais retourner ici et dire un sur le vol stationnaire. Et j'ajouterai de la couleur. Cette couleur gris foncé et le délai de transition, 0,4 seconde aussi. Donc maintenant vous pouvez voir quand je survol, rien ne se passe parce que le fond jaune couvre le texte. Donc, ce que nous pouvons faire est que nous pouvons aller ici à l'intérieur du sélecteur de span et ajouter z-index minus1 pour faire apparaître le texte devant l'arrière-plan. Et nous le ferons aussi pour les pseudo-éléments avant et après. Donc maintenant, lorsque nous survolons, vous pouvez voir que le texte apparaît maintenant devant l'arrière-plan jaune. Et enfin, une chose oeil gauche ira juste ici à l'intérieur du sélecteur d'éléments pseudo-avant et après. Et j'ajouterai l'opacité 0. Ensuite, en survolant le lien, je ferai passer leur opacité à un nouveau. Alors maintenant ils ont disparu. Mais quand je vais passer le curseur sur le lien, ils apparaissent à nouveau. Ensuite, le fond jaune apparaît après eux, nous donnant exactement l'effet que nous voulons. 26. 27 - Effet de hover de bouton créatif: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Donc, si vous regardez le bouton et vous pouvez voir qu'il y a deux arrière-plans ici, le bleu et le rouge. Le bleu est légèrement décalé vers le haut à gauche, tandis que le rouge est décalé vers le taux inférieur. Et lorsque vous passez le curseur sur le lien, vous pouvez voir à la fois une rotation dans une perspective 3D sur l'axe x. Alors créons ça ensemble. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage. Et je vais juste dire effet de survol du bouton. Ensuite, je vais aller à mon CSS. Et je vais cibler la balise d'ancrage et ajouter de la largeur. 300 pixels. Hauteur, 60 pixels. Décoration de texte. Aucun. Transformation de texte. majuscules, arrière-plan. Transparent car nous allons utiliser les pseudo-éléments avant et après pour créer nos arrière-plans. Ensuite, afin de centrer le texte à l'intérieur du lien horizontalement et verticalement, je dirai le texte aligner, centre et la hauteur de la ligne. 60 pixels. Encore plus à faire, j'ajouterai le poids de la police, le gras, l'espacement des lettres aux pixels, puis la position, relative. Et enfin la transition ou 0,2 seconde. Cool. Alors maintenant, nous avons fini de concevoir notre bouton. Travaillons sur la création des deux arrière-plans. Je vais y aller et dire un deux-points avant. Et j'ajouterai du contenu. Chaînes vides. Position absolue, haut, 0, gauche 0. Et nous voulons que l'arrière-plan ait la même largeur et la même hauteur que le lien. Donc, je vais ajouter de la largeur, 100%. Hauteur. Puis la couleur de fond. Cette belle couleur bleu clair. Donc maintenant, vous pouvez voir que le fond bleu prend toute la largeur et la hauteur du lien et le couvre. Alors revenons en arrière et rendons le texte du lien visible. Je vais le faire en allant juste ici et en ajoutant z-index moins 1. Bon, maintenant, si vous vous souvenez, le fond bleu a été déplacé un peu vers le coin supérieur gauche de notre lien. Faisons ça. J' irai ici et changerai la valeur supérieure à moins trois pixels au lieu de 0, sorte qu'elle sera décalée un peu vers le haut. Et je changerai de gauche à moins trois pixels aussi. Donc, il sera déplacé vers la gauche. Cool. Maintenant, créons l'arrière-plan rouge. Je vais copier tout ça. Coller à nouveau et changer avant à après. Ensuite, nous voulons qu'il soit déplacé vers le bas et vers la droite. Donc, au lieu de moins trois pixels gauche, je vais le changer à trois pixels et les 23 pixels supérieurs aussi. Ensuite, je vais changer la couleur de fond, bien sûr, à cette couleur rouge clair. Et maintenant, vous pouvez voir le fond rouge est assis sur le dessus du bleu et le couvrir. Mais nous voulons qu'ils soient mélangés les uns aux autres. Nous pouvons le faire facilement en revenant au sélecteur avant et en ajoutant mix, mode de fusion, multiplier. Et nous ferons la même chose pour le pseudo élément after. Et changeons réellement la couleur du lien en blanc au lieu de cette couleur bleue laide. Donc maintenant, vous pouvez voir les deux arrière-plans sont mélangés ensemble et regardant beaucoup plus agréable. Et maintenant, nous devons travailler sur l'effet planant. En survolant le lien. Nous voulons que les deux arrière-plans tournent sur l'axe des x dans un environnement 3D. Donc, pour ce faire, j'irai juste ici et dire un deux-points en vol stationnaire. Un deux-points avant. Et d'abord, nous allons déplacer le fond bleu vers le haut de six pixels et changer sa valeur de gauche à 0. Donc, je vais ajouter haut moins six pixels gauche 0. Ensuite, j'ajouterai la transformation. Et parce que nous voulons que la rotation se produise dans un environnement 3D, je vais ajouter la perspective 10000, puis faire pivoter x 75 degrés. Et pour que le mouvement se déroule en douceur, je vais monter à l'intérieur du pseudo-élément avant et j'ajouterai transition 0, 0,2 secondes. Et maintenant, vous pouvez voir quand je survole le lien, vous pouvez voir que le fond bleu tourne dans un environnement 3D sur l'axe des x, mais ce n'est pas l'effet que nous voulons. Il tourne sur son point central, donc il couvre les balises, mais nous voulons qu'il tourne sur son point central supérieur. Donc, je vais revenir au sélecteur d'élément pseudo-précédent et j' ajouterai l'origine de la transformation en haut. Donc maintenant, quand je retourne en arrière et que je passe en vol stationnaire, vous pouvez voir que le fond bleu tourne sur l'axe des x comme nous le voulons. Maintenant, faisons la même chose pour le fond rouge. Je vais copier ceci, coller, et changer avant à après. Puis haut à six pixels au lieu de moins 6 et tournez x à moins 75 degrés parce que nous voulons qu'il tourne dans l'autre sens. Et pour que le mouvement se produise en douceur, j'irai à l'intérieur du pseudo élément after et ajouterai la transition, tous les zéros. Et enfin, afin de faire tourner l'arrière-plan sur son point central inférieur, j'ajouterai l'origine de la transformation en bas. Et maintenant, quand je vais sur le lien et que je survole, vous pouvez voir les deux arrière-plans tourner sur l'axe des x, ce qui nous donne l'effet que nous voulons. Maintenant, il reste une chose en survolant le lien. Nous voulons changer sa couleur pour la voir. Je vais revenir à mon CSS et dire une couleur de hover deux-points, cette couleur gris foncé. Et maintenant, vous pouvez voir que nous avons finalement exactement l'effet que nous voulons. Et c'est très gentil. 27. 28 - Effet de bouton - créatif créatif de boutons séparés: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer cet effet de survol de bouton. Vous pouvez voir quand je survole le bouton, ces quatre parties avec un fond jaune viennent et couvrent le bouton. En même temps, nous donnant ce bel effet. Nous utiliserons les pseudo-éléments avant et après pour créer ces quatre parties et nous ajouterons une position différente pour chaque pièce. Ensuite, lorsque nous survolons le lien, les quatre parties se déplaceront ensemble pour couvrir le lien et nous donner l'effet agréable. Nous allons également jouer un peu et changer les choses dans notre code pour obtenir des effets plus cool avec la même idée. Alors commençons à faire ça. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage. Puis à l'intérieur de celui-ci, j'ajouterai une travée. Et dis juste que tu me survoles. Nous avons ajouté une portée ici à l'intérieur de la balise d'ancrage parce que nous voulons créer quatre parties de l'arrière-plan jaune qui couvriront le bouton. Nous allons donc créer deux d'entre eux en utilisant le pseudo élément avant et après de la balise d'ancrage elle-même. Et les deux autres seront créés en utilisant les pseudo-éléments avant et après de la travée que nous venons d'ajouter. Ok, allons dans notre CSS pour commencer à créer l'effet que nous voulons. Je vais commencer par cibler la balise d'ancrage elle-même pour la faire ressembler comme nous le voulons. Et j'ajouterai de la décoration de texte. Aucun. Transformation de texte. En majuscules. Taille de la police, 25 pixels. Couleur. Cette belle couleur jaune. Espacement des lettres de trois pixels pour obtenir quelques espaces entre les lettres. Puis rembourrage 25 pixels du haut et du bas, et 50 pixels de la gauche et de la droite, puis bordure de trois pixels, solide. Et notre couleur jaune. Donc, vous pouvez voir que notre bouton est beaucoup plus agréable. Continuons. Je vais retourner à l'intérieur du lien et ajouter la transition 0, 0, 0,5 secondes. Et enfin, position relative. Bon, maintenant nous allons travailler sur les quatre parties du fond jaune qui entrent et couvrir le lien. Lorsque nous survolons, nous créerons les deux premiers en utilisant les pseudo-éléments avant et après de la balise d'ancrage elle-même. Donc, je vais aller juste ici et dire un deux-points avant. Ensuite, j'ajouterai une virgule. Et dis un deux-points après. Et j'ajouterai du contenu. Chaînes vides, position, largeur absolue, 25 pour cent. Ainsi, la largeur de chaque pièce sera de 25 pour cent de la balise d'ancrage. Et cela est logique parce que lorsque vous combinez les quatre parties, elles seront 100% de la longueur, largeur, et elles le couvriront complètement. Ensuite, nous allons ajouter de la hauteur, 100%. Couleur de fond, notre couleur jaune. Et afin de faire apparaître le texte au-dessus de l'arrière-plan, nous ajouterons z-index négatif un. Et enfin, nous allons ajouter la transition 0, 0,5 seconde. Maintenant, vous pouvez voir que nous avons les deux parties, mais nous allons changer leur position maintenant et leur donner la position initiale qu'ils devraient avoir avant de planer. Alors faisons ça. Je ne ciblerai que le pseudo élément avant cette fois. Donc, je vais ajouter un deux-points avant. Et à l'intérieur, j'ajouterai le top 0 et laissé négatif 25 pour cent. Donc maintenant, vous pouvez voir le pseudo élément avant déplacé à gauche de notre lien, et c'est la position dans laquelle nous voulons qu'il se trouve initialement. Changeons également la position du pseudo élément after. Nous allons revenir à notre CSS et ciblé en ajoutant un deux-points après. Et nous dirons top négatif 100% et laissé 25 pour cent. Donc maintenant, vous pouvez voir le pseudo élément après est assis sur le dessus du bouton parce que nous l'avons déplacé de 100% de la hauteur du bouton vers le haut. Et maintenant, il se trouve à 25 pour cent de la largeur du bouton à partir de la gauche aussi. Maintenant, lorsque nous survolons le lien, nous voulons qu'ils passent de leur position à une position qui les fera couvrir la moitié de notre bouton jusqu'à ce que nous créions les deux autres parties. Donc, je vais aller ici et dire en survolant le lien, je veux faire quelques changements qui sont arrivés à l'élément pseudo précédent. Je vais ajouter l'onglet 0 et gauche 0. Donc maintenant, vous pouvez voir quand nous survolons le lien là avant le pseudo élément se déplace pour couvrir le premier quart du bouton. Parce que nous avons dit à gauche à 0 et en haut est déjà 0. Ok, allons travailler sur la deuxième partie. Je vais revenir en arrière et dire quand nous survolons le lien, je veux faire quelques changements se produisent après pseudo élément, je vais changer à 0 au lieu de négatif 100%, de sorte qu'il va se déplacer vers le bas jusqu'à ce qu'il couvre le bouton. Et partez, à gauche comme il est, 25 pour cent. Alors maintenant, quand je vais passer le curseur sur le bouton, vous pouvez voir la deuxième partie se déplace vers le bas, couvrant le quart suivant à côté de la première partie. Et ensemble, ils couvrent la moitié du bouton. Très bien, maintenant nous voulons créer les deux parties restantes, et nous allons les créer en utilisant les pseudo-éléments avant et après. Mais cette fois, ils seront les pseudo-éléments avant et après de la travée que nous avons ajoutée à l'intérieur de la balise d'ancrage. Donc, je vais aller à mon CSS et aller juste ici. Ajoutez une nouvelle virgule et ajoutez le deux-points avant une autre virgule et espacez les deux-points après. Nous les avons ajoutés ici, car ils auront la même largeur et la même hauteur que les deux autres parties. La seule chose qui va changer, c'est la position. Alors maintenant, quand je vais recharger, vous pouvez voir que nous avons les deux parties, mais changeons leur position. Je vais revenir à mon CSS et dire un deux-points de span avant. Et je vais ajouter haut 100%. Donc, il va s'asseoir en dessous du bouton et écrire 25 pour cent. Donc, il sera assis à 25 pour cent de la largeur du bouton à partir de la droite. Donc, vous pouvez voir que la troisième partie est assis dans la position que nous voulons. Et lorsque vous passez le curseur sur le lien, nous voulons changer sa position pour qu'il couvre la troisième partie du bouton. Donc, je vais revenir à mon CSS et dire un deux-points survolants avant. Et j'ajouterai le top 0 pour le faire bouger vers le haut et écrire 25 pour cent tel qu'il est. Alors maintenant, quand je vais et que je passe le curseur sur le lien, vous pouvez voir la troisième partie se déplace vers le haut, couvrant la troisième partie du bouton. Cool. Maintenant, nous allons travailler sur la quatrième partie. Je vais aller ici dans mon CSS et ajouter un deux-points de span après. Et je vais ajouter top 0 et écrire négatif 25 pour cent. Donc, cette quatrième partie sera d'abord vendre sur la droite du bouton, comme ça. Ok, travaillons sur l'effet planant. J' irai juste ici et dirai un deux-points de la travée révélatrice après. Et je vais ajouter le top 0 et écrire 0 aussi. Alors maintenant, quand je passe le curseur sur le lien, vous pouvez voir les quatre parties se déplacer de leur position initiale à leur nouvelle position et couvrir le bouton ensemble. Mais nous devons maintenant changer la couleur du texte en survolant. Donc, je vais revenir à mon CSS et dire un sur le vol stationnaire. Je veux que la couleur change à cette couleur gris foncé. Et aussi afin de cacher les parties à l'extérieur du bouton. Je vais monter ici à l'intérieur du sélecteur de balise d'ancrage. Et j'ajouterai le débordement caché. Donc maintenant, vous pouvez voir quand nous survolons le bouton, les quatre parties entrent et le couvrent complètement, et la couleur du texte change en gris, ce qui nous donne l'effet que nous voulons. Maintenant, créons un autre effet cool avec des changements mineurs dans notre code. abord, je vais remonter ici à l'intérieur du sélecteur de balise d'ancrage et supprimer le débordement caché pour l'instant afin que nous puissions voir ce que nous faisons. Ensuite, j'irai à la première partie des quatre parties, qui est le pseudo élément avant de la balise d'ancrage. Et je vais changer la propriété supérieure à 100% au lieu de 0 et la gauche à 0 au lieu de négatif 25 pour cent. Donc maintenant vous pouvez voir ici, il a une nouvelle position sous le bouton. Ensuite, j'irai à la quatrième partie, représentée par le pseudo élément after de la travée. Et je vais passer à 100 % négatif au lieu de 0 et droit à 0 au lieu de 25 % négatif. Et ici, il a une nouvelle position au-dessus du bouton. Ensuite, je vais revenir à l'intérieur du sélecteur de balise d'ancrage et ajouter un débordement caché. Et maintenant, quand je passe la souris sur le lien, vous pouvez voir que nous avons un effet légèrement différent quand nous avions avant. Et il a l'air de réservoirs aussi. Je veux aussi ajouter quelque chose. Je pense que ce serait bien si nous ajoutons des retards de transition aux quatre parties afin qu'elles apparaissent l'une après l'autre. Nous voulons donc que la première partie apparaisse immédiatement. Je vais aller ici et ajouter un délai de transition 0,1 secondes. Ensuite, à la troisième partie, j'ajouterai le délai de transition 0,2 secondes. Et deux, la quatrième partie, Je vais ajouter le délai de transition 0,3 secondes. Et enfin, montons ici et changeons la durée de transition à 0,2 seconde pour que ce soit un peu plus rapide. Donc maintenant, vous pouvez voir quand je vais et survolez le lien, les quatre parties apparaissent l'une après l'autre, qui nous donne cet effet vraiment cool. 28. 29 - Effet de bouton de remplacement de frontière créatif pour la tranche de bouton de passage à la frontière: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours des animations CSS, transitions et transformations. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir notre bouton a pour de longues bordures autour d'elle. Ils n'ont pas la même hauteur ou largeur que le bouton. Au lieu de cela, les bordures à gauche et à droite ont hauteurs plus grandes et les bordures en haut et en bas ont des largeurs plus grandes. Nous apprendrons à le faire. Une autre chose est les bordures en haut et à gauche ont une couleur rouge, tandis que les bordures en bas et en écriture ont une couleur jaune, comme vous pouvez le voir. Et quand nous survolons le bouton, vous pouvez voir les frontières échangent des places. La bordure rouge supérieure se déplace vers le bas et la bordure jaune inférieure se déplace vers le haut, prenant sa place. Alors que la bordure gauche rouge se déplace vers la droite. Et la bordure droite jaune se déplace vers la gauche. Donc ils changent juste de position. Voyons donc comment nous pouvons créer cet effet. Tout d'abord, j'irai à mon HTML et ajouterai une balise d'ancrage. Et dis juste que tu me survoles. Ensuite, j'irai à mon CSS pour le styliser. Je ciblerai la balise d'ancrage, et je commencerai par ajouter de la décoration de texte, aucun pour supprimer les soulignements. Ensuite, j'ajouterai la transformation de texte en majuscules pour faire toutes les lettres majuscules. Puis taille de la police, 22 pixels pour rendre le texte un peu plus grand afin que nous puissions le voir. Et la famille de polices. Espacement des lettres Verdana, trois pixels pour avoir un espacement entre les lettres. Ok, Maintenant, je vais ajouter la hauteur, 80 pixels, largeur 200 pixels. Et afin de centrer le texte horizontalement et verticalement, nous allons ajouter une hauteur de ligne, 60 pixels pour le centrer verticalement. Et le texte aligné au centre pour le centrer horizontalement. Et changeons la couleur du texte. Nous irons ici et ajouterons de la couleur, cette belle couleur jaune. Ensuite, enfin, j'ajouterai la position relative. Cool. Maintenant, pour voir ce que nous faisons, ajoutons une bordure temporaire à notre bouton. Je vais aller ici et ajouter la frontière. Deux pixels, bleu uni. Ok, donc maintenant nous voulons travailler sur les longues frontières que nous avons vues dans notre démo et trouver comment les créer. Nous travaillerons étape par étape ensemble afin de comprendre comment ils sont créés. Tout d'abord, pour créer les bordures gauche et droite, j'utiliserai le pseudo élément avant. Je vais juste y aller et dire un deux-points avant. Et j'ajouterai du contenu. Chaîne vide, position, hauteur absolue, 60 pixels, largeur, 200 pixels, top 0 et gauche 0. Notez que ce sont la même largeur et la même hauteur que notre maillon. Donc, jusqu'à maintenant, le pseudo élément avant a exactement la même taille que le lien et il est assis au-dessus de lui. Ok, Nous avons dit que nous allons utiliser les pseudo-éléments avant pour créer les bordures gauche et droite. Donc, je vais ajouter bordure, gauche, deux pixels, solide, rouge. Et la frontière droite. Deux pixels solides. Notre couleur jaune. Maintenant, vous pouvez voir que nous avons une nouvelle bordure rouge gauche, puis une nouvelle bordure jaune droite. Et nous pouvons difficilement les voir parce qu'ils sont assis au-dessus de la bordure bleue originale qui entoure le bouton. Et c'est parce que le pseudo élément avant a la même hauteur et la même largeur que le bouton. Donc, afin de rendre ces deux nouvelles frontières plus longues, Changeons la hauteur du pseudo élément avant. Passons à 90 pixels, par exemple. Et maintenant, vous pouvez voir les bordures gauche et droite sont maintenant plus longues et s'étendant au-delà de la hauteur du bouton car elles entourent le pseudo élément précédent, qui a une hauteur de 90 pixels, tandis que le bouton a une hauteur de seulement 60 pixels. Il y a donc 30 pixels de plus que la hauteur du bouton. D' accord ? Mais maintenant, nous voulons déplacer ces deux frontières vers le haut. Nous ne voulons pas qu'ils soient plus longs en bas, mais aussi en haut avec des espaces égaux. Nous pouvons le faire facilement, pas de problème en allant juste ici et en changeant haut en négatif 15 pixels. Donc, cela va déplacer le pseudo élément avant vers le haut de 15 pixels. Et les frontières seront également décalées. Ok, maintenant créons les bordures supérieure et inférieure. Nous allons utiliser le pseudo élément after pour les créer. Donc, je dirai un deux-points après. Et j'ajouterai du contenu. Vide aussi. Position. Absolue, hauteur, 60 pixels, identique au bouton. Et la largeur. 230 pixels, cette fois, pas 200 pixels comme le lien, parce que les bordures supérieure et inférieure des pseudo-éléments après seront plus longues que la largeur du bouton de 15 pixels à gauche et 15 pixels à droite. Ensuite, nous allons ajouter à 0 et gauche 0 pour l'instant. Puis bordures en haut. Deux pixels, rouge massif et bordure inférieure. Deux pixels, jaune massif. Donc maintenant vous pouvez voir que nous avons les bordures supérieure et inférieure et qu'ils sont plus longs que la largeur du bouton de 30 pixels. Maintenant, nous voulons déplacer les frontières vers la gauche. Donc, je vais aller ici et changer à gauche en négatif 15 pixels au lieu de 0. Impressionnant. Maintenant, nous n'avons plus besoin de la bordure bleue, donc je vais aller ici et l'enlever. Cool. Maintenant, nous devons travailler sur l'effet de vol stationnaire. Rappelez-vous, lorsque nous survolons le lien, nous voulons que les frontières changent de place. Le rouge supérieur sera en bas et le rouge gauche sera à droite. Cela peut être fait très facilement. Je vais juste aller ici dans mon CSS et ajouter un. Et en survolant, je vais faire quelques changements au pseudo élément avant, qui représente les bordures gauche et droite. J' ajouterai Transform, Rotate Y. Donc, cela les fera avant que le pseudo élément tourne sur l'axe y de 180 degrés, ce qui signifie qu'il va le faire basculer sur l'axe y. Et un ordonné pour que ce changement se produise en douceur, je vais monter ici à l'intérieur du pseudo élément avant et j' ajouterai une transition ou 1 seconde. Donc maintenant, quand je vais et passe le curseur sur le lien, vous pouvez voir qu'avant que le pseudo élément tourne sur l'axe y de 180 degrés, ce qui fait que les frontières échangent leur position exactement comme nous le voulons. Cool. Maintenant, faisons ça pour les bordures supérieures et inférieures. Je vais copier ce bloc de code, coller à nouveau, et changer avant à après. Et faites pivoter y pour faire pivoter x. puis montez ici dans le pseudo élément after et ajoutez la transition. Oh, 1 seconde. Et nous y voilà. bordures du haut et du bas changent également de place, qui nous donne cet effet vraiment agréable. Et nous pouvons le rendre encore plus agréable en ajoutant un peu de retard pour être après pseudo élément par exemple. Donc, si je vais ici et ajouter le délai de transmission 0,2 seconde, vous pouvez voir les bordures supérieure et inférieure poids 0,2 seconde, puis commencer à bouger. Nous pouvons aussi obtenir un autre effet agréable. Nous pouvons faire bouger les bordures supérieure et inférieure seulement après la gauche et la droite lorsque vous avez fini de bouger. Donc, je vais aller ici à l'intérieur du pseudo élément avant et changer la durée de transition à seulement 0,4 secondes au lieu de 1 seconde. Et je ferai la même chose pour le pseudo élément after. Et aussi, nous allons changer le délai de transition à 0,40 secondes au lieu de 0,2. Donc, en faisant cela, les bordures supérieure et inférieure ne commenceront à se déplacer qu'après que celles de gauche et de droite ont fini de bouger, qui nous donne ce nouvel effet cool. 29. 30 - Effet de bouton créatif de banalisation de bouton: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de survol de bouton cool. Vous pouvez voir que ce bouton a ces bordures dans le coin supérieur gauche et dans le coin inférieur droit. Et quand je survole le lien, vous pouvez voir la largeur et la hauteur des bordures augmente. Et ils nous donnent ce bel effet. Alors commençons à créer ça. Je vais commencer ici dans le HTML et je vais ajouter un bouton et dire Soumettre. Ensuite, je vais aller à mon CSS et cibler ce bouton. Ensuite, ajoutez la bordure, aucune. Rembourrage, 12 pixels du haut et du bas, et 40 pixels de la gauche et de la droite. Ensuite, j'ajouterai la couleur de fond. Cette belle couleur orange. Puis couleur blanche. Et la ligne de banc de la famille de police. Très bien, je vais également ajouter la taille de la police. 22 pixels. Transformer, majuscules, curseur, pointeur, et enfin, position relative. Maintenant, créons les frontières. Nous allons créer les bordures qui sont assis dans le coin supérieur gauche, en utilisant d' abord le pseudo élément avant. Ensuite, nous allons créer ceux qui sont en bas à droite. Donc, je vais cibler le pseudo élément avant du bouton. Et j'ajouterai du contenu. Chaînes vides. Ensuite, positionnez la largeur absolue 24 pixels. Hauteur 24 pixels aussi. Puis en haut 0, à gauche 0. Et ajoutons un arrière-plan rouge temporaire. Donc maintenant, vous pouvez voir le pseudo élément avant est ce fond rouge qui se trouve dans le coin supérieur gauche du bouton. Parce que nous avons dit à la fois ses propriétés haut et gauche à 0. Et il a une largeur et une hauteur de 24 pixels. Mais si vous vous souvenez, nos frontières étaient hors du bouton. Ils ont été décalés un peu vers la gauche et vers le haut, nous ne sommes pas parfaitement assis dans le coin supérieur gauche. Alors revenons et faisons ça. Je vais changer la propriété gauche ici de 0 à cinq négatifs, sorte que le pseudo élément avant sera déplacé vers la gauche de cinq pixels. Ensuite, je ferai également la même chose pour la propriété supérieure afin qu'elle soit décalée vers le haut par cinq pixels négatifs. Et maintenant, vous pouvez voir le fond rouge est décalé de cinq pixels et va à l'extérieur du bouton. Très bien, maintenant ajoutons les bordures haut et gauche. Je vais revenir ici et ajouter la frontière. Deux pixels solides. Notre couleur orange. Et la frontière gauche. Deux pixels solides. La couleur orange aussi. Et maintenant, vous pouvez voir que nous avons ajouté les frontières. Suivant. Nous voulons animer ces frontières. Nous voulons les faire grandir, comme nous l'avons vu dans notre exemple. Ce sera facile à faire. Nous allons juste augmenter la largeur et la hauteur du pseudo élément avant et les frontières augmenteront avec elle. Donc, j'irai ici et quand nous survolons le bouton, je veux faire quelques changements au pseudo élément avant. Je ferai sa hauteur 100% et sa largeur 100% aussi bien. Et pour que ce changement se produise en douceur ici à l'intérieur du pseudo élément avant et ajouter la transition ou 0 à cinq secondes. Bon, maintenant, quand je vais et que je passe au-dessus du bouton, vous pouvez voir le pseudo élément avant devient plus grand, il devient la même largeur et la même hauteur que le bouton et les frontières deviennent plus grandes avec lui. Donc, la seule chose à faire est de supprimer ce fond rouge. Alors je vais retourner ici et faire ça. Et quand je survole le bouton à nouveau, vous pouvez voir les frontières s'agrandissent et ils nous donnent ce bel effet. Et c'est le même effet que nous voulions. Très bien, créons rapidement les frontières. Dans le coin inférieur droit, nous allons utiliser le pseudo élément after pour les créer. Je vais copier le pseudo élément avant. Coller à nouveau, changer avant à après. Alors je vais juste faire quelques changements. Je vais changer de haut en bas et de gauche à droite. Je vais également changer la bordure supérieure deux en bas de la bordure. Et la frontière gauche à la frontière droite. Et maintenant vous pouvez voir que nous avons ces deux frontières assis juste ici dans le coin inférieur droit. Revenons en arrière et animons eux aussi. Je vais juste aller ici et ajouter une virgule, puis cibler le pseudo élément after aussi. Et maintenant, quand je retourne en arrière et que je passe au-dessus du bouton, vous pouvez voir les bordures en bas à droite sont de plus en plus grandes. Et maintenant, nous avons exactement le même effet que nous voulons. 30. 31 - Effet de bouton rotatif de lettres créatif de rotating de rotating de lettres: Bienvenue à cette nouvelle leçon du cours. Dans cette leçon, nous allons créer un autre effet de survol de bouton. Donc, vous pouvez voir quand je survole ce bouton, cet effet cool se produit où nous avons un fond noir qui s'estompe et tourne un peu vers la droite. En outre, la première lettre B devient plus grande en tournant et nous donne ce petit effet cool. Alors créons ça. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage. Puis à l'intérieur, j'ajouterai une travée. Et à l'intérieur de la travée, j'ajouterai juste la lettre b afin que nous puissions l'animer séparément. Ensuite, en dehors de la travée, j'ajouterai le reste du monde. Ensuite, je vais aller à mon CSS et cibler la balise d'ancrage. Ensuite, ajoutez une décoration de texte. Aucun. Largeur, 160 pixels, hauteur, 60 pixels. Couleur, noir, bordure de deux pixels. Solide. Noir. Ensuite, pour centrer le texte horizontalement et verticalement, j'ajouterai le texte aligné, centre et la hauteur de ligne, 60 pixels. Lorsque la taille de la police 25 pixels, position relative. Et enfin la transition ou 0,2 seconde. Très bien, maintenant, créons l'arrière-plan noir qui s'estompe et tourne. Lorsque nous survolons le lien, nous allons utiliser le pseudo élément avant pour créer cela. Donc, je vais le cibler et ajouter du contenu. Chaînes vides. Position, absolu, haut, 0, gauche 0 aussi. Puis largeur 100%. Et hauteur 100%. Couleur de fond, noir. Et pour que le texte apparaisse au-dessus, nous ajouterons l'index z, négatif. Et maintenant, vous pouvez voir que nous avons un fond noir qui a la même largeur et la même hauteur que le lien, et il est assis au-dessus. Donc, si vous vous souvenez, il devrait être invisible, alors quand nous survolons le lien, il devrait s'estomper et tourner. Alors faisons ça. Je vais revenir en arrière et ajouter l'opacité 0, puis la transition, ou 0,8 seconde. Puis en dessous de cela, je vais ajouter un deux-points, planer les deux-points avant l'opacité. Encore une fois et transformez. Faire pivoter 15 degrés. Et maintenant, quand je passe le curseur sur le lien, vous pouvez voir que le fond noir s'estompe en tournant et nous donne l'effet que nous voulons. Mais changeons la couleur du texte en planant sur le blanc afin que nous puissions le voir. J' ajouterai un survol deux-points. Ensuite, je changerai la couleur en blanc. Et maintenant, vous pouvez voir que la couleur du texte change en blanc lorsque je passe le curseur sur le lien. Ok, travaillons sur l'animation de la première lettre. Vous vous souvenez que nous l'avons inclus dans une travée. Donc, nous allons le cibler et ajouter de la couleur. Transparent. Ensuite, la position relative. Et maintenant, vous pouvez voir la première lettre est invisible parce que nous avons mis sa couleur sur transparente. Ensuite, nous allons cibler le pseudo élément avant de cette plage. Ajouter du contenu, la lettre B afin qu'il apparaisse au-dessus de la lettre dont nous avons défini la couleur transparente. Positionnez ensuite la couleur absolue, le noir et la transition, ou 0,2 seconde. Et maintenant, vous pouvez voir la première lettre apparaît à nouveau. Ok, travaillons sur l'effet de vol stationnaire. Lorsque vous passez la souris sur le lien. Je veux faire quelques changements arriver à l'élément pseudo avant de la travée. D' abord, je veux rendre sa couleur blanche. Ensuite, je veux augmenter sa taille. Donc, je vais ajouter la taille de la police, 18 pixels. Et enfin, je veux le faire tourner. Donc, je vais ajouter la transformation, faire pivoter 360 degrés. Et maintenant vous pouvez voir quand je passe la souris sur le bouton, la première lettre devient plus grande en tournant en même temps, mais elle couvre les autres lettres. On doit le déplacer un peu pour qu'il ne cache pas les autres lettres derrière. Je vais revenir ici et ajouter traduire négatif 65 pour cent sur l'axe des x pour le déplacer vers la gauche, et négatif 10 pour cent sur l'axe des y pour le déplacer un peu vers le haut. Et maintenant, quand je passe la souris sur le bouton, vous pouvez voir que la première lettre est maintenant assise dans une nouvelle position et ne cache plus les autres lettres. Et c'est ça les gars. C'est l'effet que nous voulions. 31. 32 - Effet de bouton créatif en 4 frontières de borders créatives en bouton en mode créatif: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir quand je survole le bouton, ces quatre bordures arrivent et font cet effet cool. Ainsi, l'eau du robinet entre de gauche à droite. La ligne de fond entre de droite à gauche. La bordure gauche entre de bas en haut. Et la bordure droite vient de tarte au fond. Et tout cela se passe en même temps, nous donnant cet effet cool. Alors commençons à le créer. Je vais aller ici dans mon HTML et ajouter un bouton. Puis à l'intérieur, je dirai bouton. Ensuite, je vais également ajouter une travée à l'intérieur du bouton. Ensuite, je vais aller à mon CSS, cibler le bouton et ajouter la couleur de fond. Rouge pour l'instant. Frontière. Aucun. Position. Parenté. Largeur, 400 pixels, hauteur, 120 pixels. Ensuite, le texte transforme en majuscules. Et afin de centrer le texte à l'intérieur du bouton verticalement et horizontalement, j'ajouterai la hauteur de la ligne, 120 pixels. Et le texte aligner le centre. Ensuite, j'ajouterai la couleur, le blanc, la taille de la police, 45 pixels. Et enfin, l'espacement des lettres, 15 pixels. Très bien, créons la frontière qui entre de gauche à droite. Nous allons utiliser le pseudo élément avant pour créer cela. Donc, je vais le cibler et ajouter du contenu. Chaînes vides. Position absolue, haut, 0, gauche 0 aussi. Pour l'instant. Puis largeur, 100% de la largeur et de la hauteur du bouton, seulement quatre pixels. Puis enfin, la couleur de fond. Blanc. Et maintenant, vous pouvez voir que nous avons cette ligne en haut, et qu'elle prend toute la largeur du bouton. Alors revenons en arrière et déplacons-le vers la gauche. À côté du bouton. Je vais aller ici et changer de gauche à 100% négatif au lieu de 0. Et maintenant, la ligne est décalée vers la gauche. D' accord, je vais revenir ici et ajouter transition 0, 0, 5 secondes. Ensuite, lorsque vous passez le curseur sur le bouton, nous voulons que la bordure revienne à sa position d'origine. Donc, je vais dire bouton deux-points hover. Je vais faire quelques changements à l'élément pseudo avant. Je remettrai à gauche à 0. Et maintenant, quand je passe la souris sur le bouton, vous pouvez voir la ligne supérieure remonte à elle est positionnée juste au-dessus du bouton. D' accord, créons la ligne en bas. Je vais revenir à l'éditeur de code et copier le pseudo élément avant. Puis collez-le à nouveau et changez avant à après. Ensuite, changez de haut en bas afin qu'il se trouve en bas du bouton. Ensuite, je changerai aussi de gauche à droite. Il sera donc déplacé vers la droite cette fois, pas vers la gauche. Et maintenant, vous pouvez voir la deuxième ligne est assise en bas, la fin est décalée vers la droite. Donc, je passe la souris sur le bouton. Nous voulons le ramener à sa position d'origine. Je vais revenir à mon CSS et le faire. Je vais copier ce code, le coller à nouveau, et changer avant à après. Et changez aussi de gauche à droite. Ainsi, la position de la deuxième ligne sera 0 à droite. Et cela le ramène à son lieu d'origine. Et en survolant le bouton, vous pouvez voir comme prévu, la ligne en bas se déplace de droite à gauche, revenant à sa position. Notre droite, après avoir créé les lignes supérieures et inférieures, nous allons créer celles sur les côtés gauche et droit. Nous allons utiliser les pseudo-éléments avant et après de la travée que nous avons créée à l'intérieur du bouton. Donc, je vais juste copier le pseudo élément avant du bouton. Encore une fois. Collez-le, le bouton Change to span, pour cibler le pseudo élément avant de la plage, pas le bouton. Puis à l'intérieur de cela, je vais changer la largeur à quatre pixels au lieu de 100% et la hauteur à 100% au lieu de quatre pixels, sorte qu'il aura la même hauteur que le bouton et une largeur de quatre pixels. Ce sera la ligne à droite. Donc, je vais changer cela en négatif 100% au lieu de 0 parce qu'il sera assis au-dessus du bouton et changer de gauche à droite et le rendre 0, pas négatif 100%. Et maintenant, vous pouvez voir la ligne sur la droite est assis au-dessus du bouton parce que nous avons dit que c'est la propriété supérieure à 100% négative et c'est la bonne propriété à 0. En survolant, nous voulions également revenir à sa position d'origine. Alors je vais y retourner. Et en survolant le bouton, je veux faire quelques changements au pseudo élément avant de la travée. Je remettrai sa propriété supérieure à 0 à nouveau. Et maintenant, lorsque vous passez le curseur sur le bouton, vous pouvez voir la ligne sur la droite se déplace de haut en bas, de retour à sa position. Maintenant, créons rapidement la ligne finale sur la gauche. Je vais copier tout le code pour la bonne partie. Coller à nouveau, ciblez les pseudo-éléments après, cette fois lorsque vous changez de haut en bas et de droite à gauche. Et je vais aussi changer avant à après ici et de haut en bas. Et maintenant, quand je recharge, vous pouvez voir que nous avons une ligne sur le côté gauche aussi. Et lorsque vous passez le curseur sur le bouton, les quatre lignes reviennent à leur position. Revenons en arrière et retirons ce fond rouge. Ajoutons également un débordement masqué afin que les lignes soient masquées en dehors du bouton. Et maintenant, quand je retourne sur le bouton et que je passe dessus, vous pouvez voir que nous avons ce bel effet dans lequel toutes les lignes entrent en même temps. 32. 33 - Effet de bouton ondulé créatif créatif créatif de bouton ondulé: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton en utilisant des animations CSS. Vous pouvez voir en survolant le bouton, ce bel effet ondulé se produit, ce qui est comme une vague arrive et se déplace jusqu'à ce qu'il couvre le bouton. C' est un effet très intéressant. Alors allons-y et créons-le. Je vais commencer dans mon HTML en ajoutant une balise d'ancrage. Puis à l'intérieur que je dirai bouton. Ensuite, je vais également ajouter un div et lui donner une vague de classe. Ensuite, je vais aller à mon CSS et cibler la balise d'ancrage. Et j'ajouterai de la décoration de texte. Aucun. Rembourrage, 15 pixels du haut et du bas, et 30 pixels de la gauche et de la droite. Ensuite, j'ajouterai de la couleur. Cette couleur bleu clair. Et la taille de la police, 18 pixels. Puis espacement des lettres, bordure, deux pixels, solide, bleu clair. Transformation de texte en majuscules. Et enfin, position, relative. Et maintenant, vous pouvez voir que le bouton semble cool. Maintenant, comment allons-nous créer cet effet ondulé ? Prenons juste ça pas à pas. Je vais cibler la div avec la classe de vague. Et à l'intérieur, j'ajouterai la position absolue, afin que nous puissions la positionner par rapport au bouton. Je vais également définir sa largeur à 100% et sa hauteur à 100% aussi. Ensuite, je vais ajouter à gauche, 0, haut 100%. Puis la couleur de fond, rouge pour l'instant. Et maintenant vous pouvez voir que nous avons un fond rouge qui a la même largeur et la même hauteur que notre bouton se trouve en dessous, parce que nous avons dit que c'est la propriété supérieure à 100%. Bon, continuons à travailler. Nous allons créer cette petite vague en utilisant le pseudo élément avant de R wave div. Donc je vais le cibler. Et à l'intérieur, je vais ajouter du contenu. Chaînes vides. Position absolue, en haut, 0, à gauche 0 aussi. Puis largeur 100% Et hauteur seulement 22 pixels. Et nous saurons pourquoi dans une seconde. Et enfin, j'ajouterai URL d'arrière-plan point PNG. C' est donc la petite image que nous allons utiliser pour l'effet d'onde. Et cette hauteur de l'image est de 22 pixels. C' est pourquoi nous définissons la hauteur du pseudo élément avant à 22 pixels afin qu'il puisse s'adapter à l'image. Et nous voulons le déplacer vers le haut pour le faire asseoir au-dessus du fond rouge. Nous pouvons donc le faire en revenant en arrière et en changeant sa propriété supérieure à 22 pixels négatifs au lieu de 0. Et maintenant, vous pouvez voir l'image d'arrière-plan est décalée vers le haut et assis au-dessus de l'arrière-plan rouge. Mais maintenant, il couvre une petite partie du bouton par le bas. Et on ne veut pas ça. Nous voulons que le point culminant de l'image soit juste en dessous du bouton. Nous pouvons donc le faire en déplaçant à la fois l'image et l'arrière-plan rouge vers le bas de 22 pixels, ce qui est la hauteur de l'image. Donc, pour ce faire, je vais revenir à la div de la vague. Et au lieu de 100% ici sur le dessus, je veux le déplacer de 100% plus 22 pixels. Donc, nous pouvons utiliser la propriété count pour le faire. J' ajouterai 100% plus 22 pixels. Et maintenant, vous pouvez voir à la fois le fond rouge et l'image juste déplacé vers le bas par un autre 22 pixels. Et remarquez que l'image s'est déplacée avec le fond rouge parce que c'est un pseudo élément précédent de celui-ci, donc elle est attachée à elle. D' accord, passons à l'animation de cette image et faisons cet effet ondulé. Je vais créer une nouvelle animation. Nommez-le ondulé. Et à l'intérieur à 0%. J' ajouterai la position d'arrière-plan x 0. Puis à 100%, j'ajouterai position d' arrière-plan x 118 pixels. Et ce 118 pixels est la largeur de l'image. Donc, la position de l'image va changer de 0 à sa pleine largeur, et cela nous donnera l'effet que nous voulons. Maintenant, je vais aller ici et ajouter cette animation. Donc, je vais ajouter animation ondulée 0,5 seconde, linéaire et infini. Je vais également changer la couleur de fond rouge à la couleur bleu clair de notre image. Et maintenant, vous pouvez voir que l'image se déplace en haut du fond bleu clair. Et ça nous donne cet effet vraiment cool. Et on dirait que c'est juste une partie du fond bleu parce qu'ils ont la même couleur. Pour finir notre effet, nous devrons déplacer ce fond bleu vers haut et le faire remplir le bouton en survolant. Alors allons-y et faisons-le. Je dirai en survolant la balise d'ancrage, je ferai quelques changements à la div avec la classe de vague, qui est la div bleu clair. Je vais ajouter top 0, donc il remonte et couvre le bouton. Et pour que cela se produise en douceur, j'irai ici à l'intérieur de la div de vague et ajouterai une transition. Ou 1 seconde. Je vais également monter ici à l'intérieur de la balise d'ancrage et ajouter un débordement. Et maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir le fond bleu se déplace vers le haut jusqu'à ce qu'il couvre complètement le bouton et l'image est animée et nous donne cet effet ondulé vraiment cool. Il nous reste une chose, qui est de changer la couleur du texte à l'intérieur du bouton en survolant afin que nous puissions le voir. Je vais le faire rapidement. Donc, lorsque vous passez la souris sur le lien, je vais faire le changement de couleur en blanc. Ensuite, pour que ce changement se produise en douceur, nous monterons ici et ajouterons la transition 0, 0, 5 secondes. Et aussi je vais aller à l'intérieur de la div d'onde et ajouter un indice Z négatif afin que le texte apparaisse devant lui. Et maintenant, quand je retourne en arrière et que je passe le curseur sur le bouton, vous pouvez voir la couleur du texte change en blanc pendant que l'effet ondulé se produit. Et c'est tout pour cette leçon, tout le monde, et je te verrai dans la prochaine. 33. 34 - Effet de bouton créatif 2 coupes de bouton: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir que nous avons ce bouton et il a cette coupe dans les bordures supérieure et inférieure. Et quand je survole, cet effet se produit là où un fond noir apparaît et grandit, couvrant le bouton. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage. Et je dirai bouton. Puis en dessous de cela, j'ajouterai une travée. Ensuite, je vais aller à mon CSS et cibler le lien. Et je vais ajouter une décoration de texte. Aucun. Largeur, 160 pixels, hauteur, 60 pixels, couleur noire. Ensuite, afin de définir le texte horizontalement et verticalement, j'ajouterai la hauteur de ligne, 60 pixels. Puis le texte s'aligne, au centre. Ensuite, j'ajouterai la transformation de texte. Capitaliser. Taille de la police, 25 pixels, position, relative. Et enfin, transition, tous les 0,2 secondes. Et maintenant vous pouvez voir que nous avons notre lien assis au centre de notre page. Bon, continuons. Je vais cibler la portée à l'intérieur du lien. Et je vais ajouter la position, largeur absolue, 100%, hauteur, 100% aussi bien. Puis en haut 0, à gauche 0. Ensuite, j'ajouterai la couleur de fond, le rouge et la bordure. Deux pixels, noir massif. Et maintenant vous pouvez voir que nous avons un fond rouge qui a la même largeur et la même hauteur que le bouton. Et il est arrondi avec une bordure noire de deux pixels. Nous ne voulons que les frontières. On ne veut pas de ce fond rouge. Donc, je vais revenir en arrière et changer la couleur de l'arrière-plan du rouge au transparent. Bon, maintenant, nous voulons créer les boutures qui existent dans les bordures supérieures et inférieures. Nous allons utiliser le pseudo élément avant de la span pour créer cela. Donc je vais le cibler. Ensuite, ajoutez du contenu. Chaînes vides, position, largeur absolue, seulement 8%, hauteur, 500 pour cent. Puis la couleur de fond, rouge pour l'instant. Et maintenant vous pouvez voir que nous avons ce fond rouge qui a une largeur de 8% de la portée et une hauteur de 500pour cent. Et il est assis juste là. Alors revenons en arrière et centrés à l'intérieur du bouton. Je vais ajouter le haut 50%, à gauche. 50 pour cent. Puis transformez. Traduire, négatif 50 pour cent et négatif 50 pour cent. Et maintenant, vous pouvez voir que l'arrière-plan rouge est maintenant centré à l'intérieur du bouton, mais vous ne pouvez pas voir qu'il couvre le texte à l'intérieur du bouton. Je veux faire apparaître le texte devant lui. Donc, je vais revenir à l'intérieur du sélecteur de span et ajouter z-index négatif. J' irai aussi ici à l'intérieur de l'élément pseudo avant et j'ajouterai une rotation négative de 60 degrés. Et maintenant, vous pouvez voir que le texte apparaît maintenant devant le fond rouge, qui est maintenant tourné de 60 degrés dans le sens inverse des aiguilles d'une montre. Ok, maintenant, allons travailler sur l'effet planant. En survolant le lien, je veux que ce fond rouge ait une largeur de 100% au lieu de 8%. Donc, il va couvrir complètement le lien. Alors je vais retourner ici. Et en survolant le lien, je vais cibler cela avant pseudo élément de la travée. Et je mettrai sa largeur à 100%. Je vais également définir sa couleur de fond sur noir au lieu de rouge. Ensuite, pour que ce changement se produise en douceur, je vais monter ici à l'intérieur du pseudo élément avant et ajouter une transition ou 0,2 seconde. Et maintenant, quand je vais et passe le curseur sur le lien, vous pouvez voir la largeur de l'arrière-plan rouge devient plus large jusqu'à ce qu'il couvre le lien et que la couleur change en noir aussi. C' est pourquoi nous ne pouvons plus voir le texte. Donc, je vais revenir à mon CSS et en survolant le lien, j'aurai son changement de couleur en blanc afin que nous puissions le voir. Et maintenant, quand je passe la souris sur le bouton, vous pouvez voir que nous sommes capables de le voir parce que c'est la couleur est blanche maintenant. D' accord. Maintenant, je suis en vol stationnaire. Je veux faire tourner le fond rouge, pas seulement avoir sa largeur, je voulais faire pivoter de 60 degrés, par exemple. Donc, je vais aller ici et copier cette ligne de code et la coller sur l'effet de vol stationnaire et juste changer négatif 60 degrés à 60 degrés. Et maintenant, vous pouvez voir quand je vais et survolez le lien, le fond rouge tourne de 60 degrés tandis que sa largeur augmente. Bon, maintenant, la seule chose qui reste est de changer la couleur du fond rouge et de le rendre blanc comme le corps, pour que nous ayons ces deux boutures. Donc je vais revenir en arrière et changer cette couleur rouge en blanc. Je vais aussi monter ici à l'intérieur du sélecteur de lien. Et j'ajouterai le débordement caché. Et maintenant vous pouvez voir que nous avons ces boutures sur les bords supérieur et inférieur parce que la couleur de l'arrière-plan est maintenant blanche, comme la couleur du corps, pas rouge. Et quand je passe le curseur sur le bouton, vous pouvez voir cet effet se produit où le fond blanc change en noir et sa largeur augmente tout en tournant de 60 degrés négatifs à 60 positifs, ce qui nous donne l'effet que nous voulons. 34. 35 - Effet de bouton skewed de 2 parties: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir que nous avons ces deux parties sont partie rouge sur la gauche et la partie bleue sur la droite. Et les deux parties sont biaisées le long de l'axe des X. Et vous pouvez également voir la partie rouge est décalée un peu vers le haut, tandis que la partie bleue est déplacée vers le bas. Et quand nous survolons le bouton, cet effet se produit. Vous pouvez voir les deux parties changer de position. La partie bleue se déplace sur le côté gauche et la partie rouge se déplace vers le côté droit. Et le degré biaisé des deux devient à nouveau 0. Alors créons cet effet. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage et dire bouton. Ensuite, je vais aller à mon CSS et cibler la balise d'ancrage et ajouter une transformation de texte. Majuscules, texte, décoration. Aucun. Poids de la police, 700, position, relative. Puis l'espacement des lettres, sept pixels. Rembourrage, 18 pixels du haut et du bas, et 30 pixels de la gauche et de la droite. Ensuite, j'ajouterai fond, transparent, taille de police, 28 pixels. Et enfin, la couleur blanche. Maintenant, vous pouvez voir que le lien ressemble à nous, et il a un arrière-plan transparent parce que nous allons utiliser les pseudo-éléments avant et après pour créer les arrière-plans rouges et bleus. Alors revenons en arrière et faisons ça. Je vais cibler le pseudo élément avant de la balise d'ancrage et ajouter du contenu. Chaînes vides. Position, absolue, puis hauteur. 100% car il a la même hauteur que la balise d'ancrage, la largeur 50 pour cent, car il a la moitié de la largeur du lien. Ensuite, j'ajouterai négatif gauche 1 pour cent. Puis top négatif cinq pixels. Donc ce sera la partie rouge qui se trouve sur le côté gauche et qui est un peu décalée vers le haut. Puis enfin, j'ajouterai la couleur de fond, cette courbe rouge. Et maintenant, vous pouvez voir que la partie rouge est assise juste ici et prend 50% des largeurs de liens. Retournons ici. Et afin d'incliner le fond rouge, j'ajouterai Transform Skew 30 degrés. J' ajouterai également l'index z négatif afin que le texte apparaisse devant la partie rouge. Puis enfin, j'ajouterai la transition ou 0,3 secondes. Et cette valeur de Bézier cubique. Et maintenant, vous pouvez voir la partie rouge est biaisée et le texte apparaît devant elle. D' accord, revenons en arrière et travaillons sur l'effet de vol stationnaire. Lorsque vous passez le curseur sur le lien, nous voulons que l'arrière-plan rouge se déplace vers le côté droit et retourne à un degré d'inclinaison 0. Donc, je vais aller ici et dire en survolant la balise d'ancrage, je vais apporter quelques modifications à l'élément pseudo avant. Je vais ajouter Transform Skew à 0 degrés, puis à gauche 50 pour cent. Donc, il va se déplacer vers le côté droit. Et enfin top 0. Et maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir la partie rouge se déplace pour couvrir le côté droit et son degré biaisé devient 0. D' accord, revenons travailler sur la partie bleue. Je vais aller ici et copier ce code, coller à nouveau, et changer avant à après. Ensuite, je vais changer Top 25 pixels, donc il sera déplacé cinq pixels vers le bas. Je changerai aussi à gauche, 251%, donc il sera assis sur le côté droit, pas sur la gauche. Je vais également changer la couleur de fond à cette couleur bleue. Et maintenant, vous pouvez voir que la partie bleue est assise sur le côté droit. Travaillons sur l'effet stationnaire. Je retournerai ici et je changerai avant après. Et je vais juste changer de gauche à 0 au lieu de 50 pour cent de sorte que le fond bleu se déplace pour couvrir le côté gauche. Et maintenant, vous pouvez voir les gars, quand je vais passer le curseur sur le lien, la partie bleue se déplace pour couvrir le côté gauche avec le fond rouge. Et c'est l'effet exact que nous voulons, qui a l'air vraiment cool. 35. 36 - Effet de bouton pulsing créatif créatif de bouton de pulsing: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir quand je survole le bouton, cet effet se produit quand nous avons un fond blanc qui devient plus grand, bien s'estomper. Et le lien lui-même se déplace un peu vers le haut et une ombre de boîte apparaît en dessous. Et en cliquant sur le lien, il se déplace un peu vers le bas et la valeur de l'ombre change. Voyons donc comment nous pouvons créer cet effet. Je vais aller ici et ajouter une étiquette d'ancrage. Et je dirai, plane-moi. Et j'irai à mon CSS pour cibler la balise d'ancrage et ajouter la position. Absolu. Décoration de texte. Aucun. Transformation de texte. En majuscules. Rembourrage, 25 pixels du haut et du bas, et 50 pixels de la gauche et de la droite. Couleur d'arrière-plan. Couleur blanche. Cette couleur grise. Puis border-rayon, 100 pixels. Taille de la police 24 pixels. Et enfin transitionnel ou 0,2 seconde. Et maintenant, vous pouvez voir que le lien est exactement comme nous le voulons. Retournons en arrière et travaillons sur l'effet stationnaire. Nous allons créer le fond blanc qui devient plus grand en utilisant le pseudo élément avant. Donc, je vais aller ici et sélectionner le pseudo élément avant de la balise d'ancrage. Et j'ajouterai du contenu, des chaînes vides, la position absolue, top 0 et la gauche 0 aussi. Ensuite, nous voulons qu'il prenne toute la largeur et la hauteur du lien. Donc, je vais ajouter la largeur 100% et la hauteur 100% aussi bien. Et puis j'ajouterai la couleur de fond , le blanc et le rayon de bordure 100 pixels. Puis enfin transition 0, 0. Et maintenant, vous pouvez voir que nous avons un fond blanc se trouve devant le lien et le couvre. Et c'est pourquoi le texte n'est pas visible. Alors revenons ici et ajoutons l'indice Z négatif 1. Et maintenant, vous pouvez voir que le texte est à nouveau visible. D' accord ? Je dirai en survolant la balise d'ancrage, je vais sélectionner le pseudo élément avant. Et nous voulons que le fond blanc s'agrandisse. Donc, je vais ajouter l'échelle de transformation x 1.4 et l'échelle pourquoi 1.6. Puis en dessous de cela, j'ajouterai l'opacité 0. Et maintenant vous pouvez voir quand je survole le lien, cet effet se produit avec le fond blanc devient plus grand tandis que son opacité diminue, qui nous donne cet effet cool. D' accord, je planque. Nous voulons également faire un lien pour se déplacer un peu vers le haut et avoir un peu d'ombre en dessous. Donc, je vais revenir ici et dire, en survolant la balise d'ancrage, j'ajouterai la transformation, traduirai y négatif 3 pixels. Ainsi, le lien déplacera trois pixels vers le haut et l'ombre de la boîte, 0 le long de l'axe x, puis 10 pixels le long de l'axe y, puis une valeur de flou de 20 pixels. Et enfin, la couleur de l'ombre sera RGBA, 0.2000. Et maintenant, vous pouvez voir quand je retourne en arrière et que je passe au-dessus du lien, il se déplace un peu vers le haut et nous avons une ombre qui apparaît en dessous. Il ne reste qu'une chose en cliquant sur le lien, nous voulions déplacer un peu vers le bas à nouveau et la boîte à l'ombre pour être plus petite. Donc je vais retourner ici et dire un deux-points actif. Donc, cela signifie en cliquant sur le lien, puis à l'intérieur que je vais ajouter transformation, traduire Y négatif un pixel. Et je vais copier la propriété de l'ombre de la boîte. Coller à nouveau et changer 10 pixels à cinq pixels, 20 pixels à 10 pixels. Et maintenant, quand je vais cliquer sur le lien, vous pouvez voir qu'il se déplace un peu vers le bas et la boîte d'ombre diminue, nous donnant l'effet exact que nous voulons. 36. 37 - Effet de bouton numérisé par glissement diagonale en utilisant des bordures: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de bouton. Vous pouvez voir quand je survole le lien, cet effet cool se produit. Nous allons créer cet effet en utilisant la propriété de bordure et vous verrez comment. Alors. Allons dans notre fichier HTML, puis ajoutez une balise d'ancrage. Ensuite, à l'intérieur de cette étiquette d'ancre, nous dirons bouton. Ensuite, je vais aller à mon CSS et cibler la balise d'ancrage. Ensuite, ajoutez une décoration de texte. Aucun. Position, relative. Deux 150 pixels et hauteur 80 pixels. Ensuite, afin de centrer le texte à l'intérieur du lien, nous ajouterons le texte aligné, centre et la hauteur de ligne, 80 pixels. Ensuite, j'ajouterai de la couleur. Cette belle couleur pourpre et bordure. Pour les pixels. Solide. Notre couleur pourpre. Ensuite, pour agrandir la taille de la police, j'ajouterai la taille de la police 24 pixels. Puis l'espacement des lettres, trois pixels pour obtenir un espacement entre les lettres. Puis la transformation du texte, en majuscules, et enfin la transition ou 0,5 seconde. Donc maintenant, vous pouvez voir que le lien est à la recherche exactement comme nous le voulons. Ok, travaillons sur notre effet de vol stationnaire. Créera cela en utilisant les pseudo-éléments avant et après. Mais commençons par le pseudo élément avant et comprenons comment l'effet se passe. Ensuite, nous allons utiliser le pseudo élément after pour le créer. Donc, je vais cibler le pseudo élément avant de la balise d'ancrage. Et j'ajouterai du contenu des chaînes vides, position absolue 0, la gauche 0, le bas 0, et j'écrirai aussi 0. Ensuite, j'ajouterai une couleur de fond vert temporaire. Donc maintenant vous pouvez voir que nous avons ce fond vert qui couvre le lien complètement parce que nous avons dit les propriétés haut, gauche, bas et droite à 0. D' accord, revenons en arrière et retirons ce fond vert. Et au lieu des arrière-plans, nous allons border les 40 premiers pixels, rouge solide pour l'instant. Donc, comme vous pouvez le voir, nous avons maintenant cette bordure rouge qui a une largeur de 40 pixels. Et nous avons choisi 40 pixels spécifiquement parce que la hauteur du lien est de 80 pixels. La bordure couvre maintenant la moitié de la hauteur de la liaison, comme vous pouvez le voir. D' accord, je vais revenir ici et ajouter la bordure en bas, 40 pixels, solide, vert. Et maintenant, comme vous pouvez le voir, nous avons une bordure inférieure verte qui a une largeur de 40 pixels et qui couvre la moitié inférieure du lien. D' accord, Enfin, je vais revenir en arrière et ajouter une bordure, non ? 40 pixels, jaune massif. Et maintenant vous pouvez voir que nous avons cette bordure jaune droite qui a une largeur de 40 pixels aussi. Et je pense que c'est à peu près le drapeau de l'Afrique du Sud. Bon, et si je retourne ici et que je change la couleur de la bordure droite en transparent au lieu de jaune. Vous pouvez voir maintenant que cette bordure droite est transparente et qu'elle montre le lien derrière elle. D' accord, je vais revenir en arrière et ajouter une transition ou 0,5 seconde. Ensuite, afin de rendre le texte visible derrière l'arrière-plan, j'ajouterai z-index négatif un. Ensuite, je vais enfin ajouter transformer traduire x négatif 100%. Et maintenant, vous pouvez voir le pseudo élément avant est maintenant déplacé vers la gauche et les frontières sont décalées avec elle. Parce qu'on a dit qu'ils sont la fonction Traduire en négatif 100. Très bien, en survolant le lien, nous voulons faire revenir le pseudo élément avant à sa position d'origine pour couvrir le lien. Donc, j'irai ici et je dirai quand nous survolons la balise d'ancrage, je veux faire quelques changements au pseudo élément avant. Je vais ajouter la transformation, traduire X à nouveau à 0%. Et maintenant, vous pouvez voir quand je survole le lien qu' avant le pseudo élément revient à sa position d'origine. Très bien, la seule chose qui reste est de changer la couleur des bordures pour notre couleur violette. Je vais aller ici et changer la couleur de la bordure supérieure en violet. Et je ferai la même chose pour la frontière inférieure aussi. Génial. Maintenant, nous allons créer le pseudo élément after pour compléter notre effet, j'irai ici et copierai le pseudo élément avant, coller à nouveau et changer avant à après. Ensuite, je changerai de bordure à gauche pour que la partie transparente soit assise sur le côté gauche, pas sur la droite. Ensuite, je vais également changer la valeur de la fonction translate à 100% au lieu de négatif 100% de sorte que le pseudo élément after se déplace vers la droite, pas vers la gauche. Je vais également copier l'effet de vol stationnaire. Coller et changer avant à après. Et maintenant, vous pouvez voir le pseudo élément après est situé sur le côté droit du lien et il a la partie transparente sur la gauche. Lorsque vous passez la souris sur le lien, les deux parties entrent pour couvrir le lien, qui nous donne cet effet cool. Enfin, nous allons changer la couleur du texte du lien en blanc. Quand on survolera. Je dirai en survolant la balise d'ancrage, je changerai la couleur en blanc. Je vais également monter ici à l'intérieur du lien et ajouter débordement caché pour rendre les deux parties cachées à l'extérieur de la balise d'ancrage. Et maintenant vous pouvez voir quand je retourne en arrière et que je passe au-dessus du lien, les deux pseudo-éléments se rassemblent pour couvrir la balise d'ancrage et ils nous donnent notre effet vraiment cool. 37. 39 - Effet d'images créatif 1: Bonjour tout le monde. Dans cette nouvelle leçon du cours, nous allons créer cet effet de fondu en survol pour cette image. Donc, lorsque je survole l'image, vous pouvez voir qu'elle fait un zoom avant et tourne un peu vers la droite. Et la légende s'estompe avec un titre de fond noir semi-transparent et un paragraphe. Voyons comment on peut faire ça. J' irai à mon HTML et à l'intérieur du corps, je vais ajouter un div et lui donner une classe de conteneur. Ce div contiendra à la fois l'image et la légende, ce qui signifie qu'il sera le conteneur externe pour eux. Puis à l'intérieur de celui-ci, j'ajouterai d'abord notre image. Donc, je vais dire source de l'image, et nous allons ajouter notre image. Super. Maintenant, nous devons ajouter notre légende. Je vais aller au-dessous de l'image et ajouter un div avec une classe de légende. Et puis à l'intérieur de celui-ci, nous allons ajouter un H1 et nous allons juste dire une légende incroyable. Ensuite, j'ajouterai une balise de paragraphe. Et à l'intérieur, je dirai juste que vous pouvez écrire tout ce que vous voulez ici. Maintenant, quand nous voyons cela dans le navigateur, vous pouvez voir que ce n'est pas si bon. Nous devons ajouter quelques styles pour le rendre meilleur. Revenons à notre CSS. Vous pouvez voir que j'ai déjà ajouté quelques styles au corps pour simplement centrer n'importe quoi verticalement et horizontalement en utilisant Flexbox. En outre, j'ai ajouté cette famille de polices Leto, que j'ai également obtenu de polices Google. Maintenant, commençons par cibler la div avec la classe de conteneur. Je vais ajouter la largeur, 500 pixels, hauteur 500 pixels ainsi. Position relative. Et maintenant, vous pouvez voir que l'image est en fait trop grande pour le conteneur. Nous pouvons corriger cela en retournant simplement à notre CSS et en ciblant l'image et en ajoutant 100% de largeur. Donc, il se redimensionne pour prendre toute la largeur de son conteneur. Et vous pouvez voir que c'est maintenant mieux. Et nous avons une légende en dessous juste ici. Maintenant, continuons. Je vais cibler le div avec la classe de légende, qui contient le H1 et le paragraphe. Ensuite, j'ajouterai la position absolue, en haut 0, à gauche 0, puis la hauteur 100% pour prendre toute la hauteur du conteneur. Et la largeur 100% pour prendre toute la largeur du conteneur ainsi. Et maintenant, vous pouvez voir que la légende est assis au-dessus de notre image en prenant toute sa largeur et sa hauteur. Donc, par exemple, si je vais juste ici et ajouter la couleur de fond, noir pour la légende. Vous pouvez voir qu'il prend toute la largeur et la hauteur. Bien. Revenons en arrière et retirons ce fond noir et continuons à travailler. Maintenant, nous devons envoyer au contenu à l'intérieur de la légende, ce qui signifie le H1 et le paragraphe. Nous le ferons en utilisant Flexbox. Donc, je vais aller ici et ajouter l'affichage, flex, puis la colonne de direction flex, sorte que le H1 et le paragraphe vont en quelque sorte empiler l'un au-dessus de l'autre. Ensuite, j'ajouterai justifier le centre de contenu. Alignez également les éléments centrés, sorte que le contenu soit centré verticalement et horizontalement à l'intérieur de la légende. Et puis j'irai ajouter de la couleur blanche. Maintenant, ajoutons quelques styles au H1 et au paragraphe. Je vais cibler le H1 à l'intérieur de la légende. Et j'ajouterai la transformation de texte, majuscules et la marge 0, sorte qu'il semble beaucoup plus agréable et plus serré. Ensuite, je vais cibler le paragraphe à l'intérieur de la légende et ajouter la taille de police 18 pixels. Puis la transformation du texte. Capitaliser. Super. Maintenant, nous avons tout exactement comme nous voulons et nous devons nous concentrer sur l'effet fondu en vol stationnaire. Donc, si nous regardons notre démo, vous pouvez voir que la légende est invisible et lorsque vous passez la souris dessus, la phase de capture s'ouvre avec un fond vide qui a une certaine transparence. Alors faisons vraiment ça. Tout d'abord, nous devons rendre la légende invisible. Donc, j'irai ici à l'intérieur du sélecteur de légende et j'ajouterai l'opacité 0. Et maintenant vous pouvez voir le H1 et le paragraphe ne sont plus visibles. Et je veux qu'ils soient à nouveau visibles quand je survolerai la div. Alors j'irai ici. Et quand je passe la souris sur le conteneur, je veux faire quelques changements qui sont arrivés à la div de la légende et je voulais en faire une à nouveau l'opacité. Et pour voir le changement en douceur, je vais monter ici à l'intérieur de la légende et ajouter la transition. Tous les zéros. Cinq secondes. Bien. Maintenant, quand je vais et que je passe au-dessus de la div, vous pouvez voir les fondus de capture dans magnifiquement. Et maintenant, nous voulons ajouter l'arrière-plan aussi. Donc, je vais aller à l'intérieur de la div avec la classe de légende et ajouter l'arrière-plan RVB, 0, 0, 0. Ce sera donc une couleur noire avec une opacité de 0, ce qui signifie qu'elle sera transparente. Je vais copier ça et descendre ici, coller à nouveau. Et je changerai l'opacité à 0,5, donc elle ne sera plus visible. Et maintenant, quand je retourne en arrière et que je passe au-dessus de la div, vous pouvez voir l'arrière-plan s'estomper avec la légende. Bien. Maintenant, nous voulons faire zoomer l'image et faire pivoter en survolant. Donc je vais descendre ici et copier ça. Je veux faire des modifications sont arrivées à l'image cette fois. Donc, je vais ajouter l'échelle de transformation de 1.3. Ainsi, l'image va augmenter 1,3 fois, ce qui nous donne le zoom en effet. Ensuite, je vais ajouter rotation de 15 degrés. Maintenant, quand je retourne en arrière et que je passe au-dessus de la div, vous pouvez voir que l'image se met à l'échelle et tourne, mais elle déborde en dehors du conteneur. Et nous pouvons corriger cela facilement en retournant au conteneur et en ajoutant trop-plein caché afin que l'image reste dans les limites du conteneur. Maintenant, essayons-le. Impressionnant. Maintenant, nous avons le fondu en vigueur avec le zoom et la rotation. Et ça a l'air super. 38. 40 - Effet d'images créatives 2: Bonjour tout le monde. Dans cette leçon, nous allons créer cet intéressant effet de glissement stationnaire. Donc, lorsque je survole l'image, la légende glisse de gauche à droite avec un fond noir semi-transparent. Et l'image effectue un zoom avant et une rotation, comme dans la leçon précédente. Voyons comment on peut faire ça. Nous continuerons à travailler avec la même image et la même légende que nous avons créées dans la leçon précédente. Pour cela et quelques leçons futures, nous ne changerons que dans l'effet lui-même. Donc, ici dans mon CSS, j'ai les mêmes styles que nous avons ajoutés auparavant, mais je viens de supprimer les styles responsables de l'effet de survol. Donc, vous pouvez dire que ce seront les styles de départ pour les prochaines leçons, et nous allons les entrer pour créer un effet différent et chaque leçon. Donc, si nous regardons cela dans le navigateur, vous pouvez voir que nous avons tout en place. L' image prend toute la largeur du conteneur dans la légende qui se trouve au-dessus de celle-ci. Bien. Maintenant, commençons à travailler. J' irai ici à l'intérieur du sélecteur de légende et j'ajouterai la couleur de fond R, G, B un 0.500, sorte qu'il faudra une couleur de fond semi-transparent. Maintenant, si nous regardons notre démo, vous pouvez voir que la légende se traduit à nouveau du côté gauche du conteneur dans le conteneur. Donc, la position initiale est à gauche du conteneur. Donc, je vais revenir à mon CSS et à l'intérieur de la légende div, j'ajouterai transform translate X moins 100 afin qu'il se déplace vers la gauche de 100% de sa largeur. Alors je descends ici. Et quand je survole le conteneur, je veux faire quelques modifications qui sont arrivées à la légende. Je veux qu'il revienne à sa position d'origine. Donc, je vais ajouter la transformation, traduire X 0. Et maintenant, quand je retourne en arrière et que je passe au-dessus du conteneur, vous pouvez voir les légendes blanches en douceur de gauche à droite. Maintenant, il reste une chose, faire de l'image zoom avant et tourner. Nous l'avons fait dans la leçon précédente. Alors faisons la même chose ici. Ici, dans mon CSS. Lorsque nous survolons le conteneur, je veux faire quelques modifications sont arrivées à l'image. J' ajouterai l'échelle de transformation 1,3 et je tournerai de moins 15 degrés cette fois. Ainsi, lorsque je passe le curseur sur le conteneur, vous pouvez voir l'effet de balayage se produit avec le zoom avant et la rotation de l'image se produisant en même temps. Maintenant que nous comprenons le concept derrière cet effet de balayage, nous pouvons facilement faire le balayage de droite à gauche ou de haut en bas. Donc, disons que nous voulons le faire glisser de haut en bas. La position initiale doit être au-dessus de l'image. Donc, nous allons juste changer ça. Donc, je vais aller à mon CSS et aller à la div de la légende et changer cela, traduire x en y. et je vais descendre ici et changer ce x à y aussi. Et en faisant cela, la légende sera placée au-dessus de l'image et nous nous déplacerons verticalement pour couvrir l'image lorsque je survolerai le conteneur. Donc, je veux que vous essayiez de faire glisser la légende de droite à gauche, puis de bas en haut. Et vous pouvez me dire si vous êtes capable de le faire dans le Q et une section. 39. 41 - Effet d'images créatives 3: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet d'effacement. Donc, quand je survole la div, vous pouvez voir l'image se déplace de sa position vers la droite et la légende vient de la gauche pour prendre sa place. Ceci est très similaire à la leçon précédente, mais il y a quelques différences. Tout d'abord, la couleur de fond ici est un noir solide. Ce n'est plus semi-transparent. Et le comportement de l'image est différent. Je pense que vous vous souvenez dans la leçon précédente de l'image avec zoom avant et rotation. Mais dans cette leçon, l'image se traduit en fait, en quelque sorte donne sa place à la légende. Voyons comment on peut faire ça. Ici. J'ai mon fichier CSS de départ et voici ce que nous en obtenons. Donc, tout d'abord, je vais aller à la légende juste ici et ajouter la couleur de fond noir. Ensuite, afin de le faire prendre sa position initiale sur le côté gauche de la div, nous allons ajouter transform translate X moins 100% afin qu'il se déplace vers la gauche. Bien. Maintenant, vous pouvez voir la légende déplacée vers la gauche et n'est plus au-dessus de l'image. Maintenant, nous voulions revenir à sa position. Quand on survolera la div, je descends ici. Et quand nous survolons le conteneur, j'ajouterai transform translate X 0, sorte qu'il retourne à sa position. Et je veux que l'image se déplace vers la droite, laissant l'endroit ouvert pour la légende. Donc, je vais aller ici et ajouter la transformation, traduire X 100% cette fois. Et maintenant, quand je vais et que je passe au-dessus de la div, vous pouvez voir l'image se déplace vers la droite, laissant sa place pour une légende qui vient de la gauche. Et c'est exactement comme ça que nous voulons qu'il ressemble. Nous pouvons également faire en sorte que cela se produise de haut en bas. Tout ce que nous avons besoin de changer est tout le Translate X dans notre code pour traduire y. Donc, je vais revenir à mon CSS et le faire. Et maintenant, vous pouvez voir que ça se passe de haut en bas. Maintenant, je veux que tu essaies de faire que ça arrive de droite à gauche et de bas en haut. Et faites-le moi savoir dans la section Q&R, si vous êtes en mesure de le faire. 40. 42 - Effet d'images créatif 4: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer cet effet de survol d'image. Donc, si vous le regardez, vous pouvez voir que la légende se déplace du bas et qu'elle ne prend pas toute la hauteur de la div, elle ne prend que toute la largeur. Vous pouvez également voir que l'image se déplace vers le haut à la même distance que la légende se déplace vers le haut. Voyons comment on peut faire ça. Donc ici, dans mon co-éditeur, j'ai les fichiers de départ pour tous nos effets d'image. Et voici à quoi cela ressemble dans le navigateur. Commençons donc à travailler sur cet exemple spécifique. Tout d'abord, je vais aller ici dans la légende donner, et je vais ajouter la couleur de fond. Noir. Rappelez-vous, nous ne prenons pas toute la hauteur. Donc, je vais monter ici et changer la hauteur à seulement 30 pour cent de la hauteur du conteneur. Maintenant, vous pouvez voir que la légende ne prend que 30 pour cent de la hauteur de la div. Mais il y a un problème. La carte apparaît en haut de la div et nous voulons qu'elle apparaisse en bas. Pas un gros problème. Nous pouvons le réparer facilement en allant ici et en changeant de haut en bas. Maintenant, vous pouvez voir que la légende est au bas de la div. Bien. Maintenant, nous voulons qu'il se déplace vers le bas afin qu'il retourne à sa position lorsque je survole la div. Donc, je vais aller à la légende et ajouter la transformation, traduire y 100%. Donc ce qui va se déplacer vers le bas de 100% de sa hauteur, qui est en fait 30% de la hauteur du conteneur. Maintenant, vous pouvez voir qu'il n'est plus visible car il se déplaçait derrière la div. Maintenant, quand nous survolons la div, nous voulons qu'elle retourne à sa place d'origine. Donc, je vais aller ici et ajouter la transformation, traduire Y 0. Et maintenant ça remonte. Nous voulons également déplacer l'image vers le haut à la même distance. Donc, je vais aller ici et ajouter transform, traduire y moins 30 pour qu'il se déplace vers le haut, laissant un espace pour la légende. Et maintenant, vous pouvez voir l'image se déplace vers le haut, qui nous donne ce bel effet. 41. 43 - Effet d'images créatif 5: Bonjour tout le monde. Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons apprendre comment créer cet effet de vol stationnaire intéressant. Donc, lorsque je survole l'image, vous pouvez voir qu'un arrière-plan semi-transparent apparaît du bas et se déplace vers le haut et la légende apparaît au-dessus. Mais si nous regardons de près, nous pouvons voir la capture et apparaît un peu plus tard que l'arrière-plan. Et lorsque nous survolons, la légende disparaît d'abord avant le fond bleu. Nous utiliserons donc certains délais de transition pour le faire. Bon, comme d'habitude, commençons par écrire le balisage de notre HTML. Je vais commencer ici en ajoutant un div et en lui donnant une classe de fig. Puis à l'intérieur de celui-ci, j'ajouterai une balise d'image, et nous ajouterons notre image. Ensuite, nous devons ajouter la légende. Donc, en dessous de l'image, je vais ajouter un autre div et lui donner une classe de légende. Et à l'intérieur de cette div, je vais ajouter un H3, dire une légende étonnante. Et en dessous, je vais ajouter H5 et dire que vous pouvez écrire n'importe quoi ici. Donc, quand nous voyons cela dans le navigateur, vous pouvez voir que cela semble laid. Alors allons à notre CSS et le rendre un peu plus agréable. Tout d'abord, je vais cibler la div avec la classe de fig. Et je vais ajouter une largeur de 500 pixels. Puis couleur, blanc, famille de polices, chemin de fer, border-rayon 10 pixels. Position relative. Bon, continuons à bouger. Je vais cibler l'image à l'intérieur de la fig div. Et je mettrai sa largeur à 100%. Donc, il prendra toute la largeur de son div parent, qui est de 500 pixels. ce moment, ça a l'air beaucoup mieux. Nous avons notre image et la légende se trouve en dessous. Coup d'État Maintenant, nous allons travailler sur l'arrière-plan semi-transparent qui glisse vers le bas pour couvrir l'image. Nous allons le créer en utilisant le pseudo élément avant. Donc, je vais aller à mon CSS et deux-points vagues sûr avant. Et je vais ajouter du contenu, position vide, absolu, haut, 0, gauche 0. Et nous voulons qu'il prenne toute la largeur et la hauteur de la figue. Donc, nous allons dire largeur 100% et hauteur 100% aussi bien. Puis la couleur de fond, cette couleur verdâtre. Et parce qu'il est semi-transparent, nous allons ajouter l'opacité 0,5. On y va. Vous pouvez voir que l'arrière-plan prend maintenant toute la largeur et la hauteur de la figue de sorte qu'il couvre même la légende. Maintenant, travaillons sur la légende et centrons-la horizontalement et verticalement à l'intérieur de la figue. Donc, je vais revenir à mon CSS et cibler la div avec la classe de légende à l'intérieur de la fig. Ensuite, je vais ajouter la position, absolu, top, 0, largeur 100%, et hauteur 100% aussi bien. Ensuite, nous enverrons au H3 et H5 à l'intérieur en utilisant flexbox. Donc, nous allons ajouter un flex d'affichage, puis une colonne de direction de flexion pour faire le H3 et H5 assis l'un en dessous de l'autre. Vous voyez qu'il est défini sur ligne par défaut, ce qui les affichera côte à côte dans une ligne. Mais nous voulons qu'ils soient dans une colonne. Ensuite, afin de les centrer, nous ajouterons un centre d'éléments de ligne. Et enfin, justifier le centre de contenu aussi bien. Et maintenant, vous pouvez voir que la légende est centrée horizontalement et verticalement à l'intérieur de la fig. div. Mais le contenu à l'intérieur de la légende, qui est le H3 et H5 juste ici. Et elle a l'air bien. Alors, nous allons les cibler et les rendre plus beaux. Je vais aller à mon CSS et ajouter la virgule fig. H3, puis la figure H5. Et j'ajouterai la marge 0, puis l'espacement des lettres. Un pixel. Puis en dessous de cela, je vais cibler le H3 individuellement. Ensuite, j'ajouterai la transformation du texte, majuscules et le poids de la police 400. Ensuite, nous avons besoin d'un peu d'espacement en dessous. Donc, nous allons ajouter le bas de la marge, juste cinq pixels. Et en dessous de ça, je vais cibler le H5 cette fois. Et nous voulons y ajouter un peu d'arrière-plan. Donc, je vais ajouter la couleur de fond, cette couleur brunâtre. Et j'ajouterai également un rembourrage de trois pixels de haut en bas et de cinq pixels de gauche et de droite. Impressionnant. Alors voici à quoi ressemble la figue. Vous pouvez voir l'arrière-plan semi-transparent est couvert et la légende depuis juste là au centre. Maintenant, nous devons travailler sur l'effet stationnaire. Donc, si nous regardons rapidement notre démo, vous pouvez voir que l'arrière-plan se déplace du bas vers le haut. Et nous pouvons le faire. Pas de problème. Je vais juste revenir à mon CSS et aller à l'intérieur du pseudo élément avant. Et nous voulons positionner l'arrière-plan au-dessous de la figée de sorte que lorsque nous survolons, il revienne à sa position d'origine. Donc, je vais ajouter transformer, traduire et pourquoi ? 100% ? Donc maintenant, vous pouvez le voir déplacé vers le bas de 100% de sa hauteur. Et parce que sa hauteur est égale à 100% de la hauteur de la figue, il a déplacé une distance égale à la hauteur de la figue. Donc il est maintenant positionné juste en dessous de la figue. D' accord, ensuite, rendons ça invisible. À l'extérieur de la figue. Je vais aller à l'électeur de figues, et j'ajouterai débordement caché. Et maintenant, vous pouvez voir que ce n'est plus visible. Maintenant, je planque sur la figue. Nous voulons que l'arrière-plan glisse à nouveau vers sa position d'origine. Alors faisons ça. Dans mon CSS, j'irai ici. Et en survolant la figue, je veux faire quelques changements qui sont arrivés à l'arrière-plan, qui est le pseudo élément avant. Je veux le faire revenir à sa position d'origine. Donc, je vais ajouter la transformation, traduire Y 0. Et bien sûr, nous voulons que cela se produise sans heurts. Donc, je vais monter ici à l'intérieur du sélecteur d'élément pseudo-précédent, et j'ajouterai la transition toutes les 0,25 secondes afin que le mouvement vers le haut se produise en douceur. Et maintenant, quand je vais planer sur la figue, vous pouvez voir que l'arrière-plan se déplace de bas en haut couvrant la figue. Et quand je survole, il revient et se trouve en dessous de la figure à nouveau. Mais si on jette un coup d'oeil à notre démo, tu peux voir que je planque. L' arrière-plan se déplace immédiatement pour couvrir la figue. Mais lorsque vous planez loin dans attend très peu de temps jusqu'à ce que la légende disparaisse et après cela, elle disparaît également. Tu vois ça ? D'accord. Nous pouvons le faire en utilisant la fonction de délai de transition. Revenons à notre CSS. J' irai à nouveau à l'intérieur du pseudo élément précédent, et j'ajouterai le délai de transition, juste 0,25 seconde. Et maintenant, quand je vais planer sur la figue, vous pouvez voir les poids de fond pendant un temps très court, 0,25 seconde pour être exact, puis apparaît. Et en survolant dans le poids 0,25 seconde puis disparaît. Mais nous voulons qu'il attende seulement avant de disparaître. On ne veut pas qu'il attende quand on survolera la figue. En d'autres termes, nous voulons qu'il apparaisse immédiatement, mais attendez 0,25 seconde avant de disparaître. Ce qu'on devrait faire, c'est aller ici. Et je survole la figée, nous allons ajouter un délai de transition 0 secondes pour notre arrière-plan. Donc maintenant ce qui va se passer ici, c'est quand je survolerai la figue, l'arrière-plan va commencer à se déplacer immédiatement parce que j'ai dit le retard de transition à 0 ici. Quand je survolerai, il va attendre et 0.25 secondes, puis il disparaîtra. Jetons un coup d'oeil. Cool. Maintenant, nous devons travailler sur la légende. Si nous jetons un dernier coup d'œil à notre démo, vous pouvez voir que lorsque nous survolons, la légende attend que l'arrière-plan couvre la figure et qu'elle apparaisse. Nous allons donc utiliser le délai de transition pour le faire attendre 0,25 seconde avant d'apparaître. Vous pouvez également voir qu'il s'estompe à partir du haut d'une distance d'environ 20 pixels. Et enfin, quand on survole, il disparaît immédiatement. Maintenant. Bon, alors allons à notre CSS et allons au sélecteur de légende. Ensuite, ajoutez la transformation, traduisez y moins 20 pixels, sorte qu'il se déplace vers le haut de 20 pixels. Ensuite, nous voulons qu'il soit transparent. Donc, nous allons ajouter l'opacité 0 et enfin passer notre 0.25 seconde. Bon, maintenant, en survolant la figue, je voulais apporter quelques modifications à la légende. Je veux que la légende s'estompe à nouveau. J' ajouterai donc une opacité, et je veux qu'elle revienne à sa position. Donc, je vais ajouter transform translate Y 0. Et je voulais attendre avant qu'il apparaisse. Il devrait apparaître après l'affichage de l'arrière-plan. Donc, je vais lui donner un délai de transition 0,3 secondes. Et maintenant, quand je vais planer sur la figue, vous pouvez voir que la légende s'estompe bien de haut en bas. 42. 44 - Effet d'images créatif 6: Bonjour tout le monde. Dans cette leçon, nous allons créer ce joli zoom en effet, en survolant une image. Vous pouvez le voir zoomer et faire pivoter un peu. Et nous pouvons le faire en utilisant la fonction d'échelle et la fonction de rotation. Donc, tout d'abord, je vais aller ici dans mon HTML et ajouter un div. Et à l'intérieur, j'ajouterai mon image. Vous pouvez voir que la taille de l'image est si grande qu'elle prend tout l'écran. Alors allons à notre CSS. Je vais cibler le div qui contient l'image. Ensuite, je vais définir sa largeur à 300 pixels et sa hauteur à 400 pixels. Ensuite, j'ajouterai la bordure, 50 pixels, blanc massif. Ensuite, je vais cibler l'image et définir sa largeur à 100, sorte qu'elle obtienne 100% de son conteneur, qui est de 300 pixels, puis je vais régler sa hauteur à 100% également. Oui, maintenant ça a l'air beaucoup plus agréable. Ensuite, j'ajouterai la transformation de transition 1 seconde. Et ensuite, quand je survolais l'image, je voulais être plus grande en taille et tourner un peu dans le sens des aiguilles d'une montre, comme dans notre démo. Donc, je vais dire image sur l' échelle de transformation de vol stationnaire, disons 1.2. Ainsi, la largeur et la hauteur augmenteront de ce rapport. Ensuite, je vais ajouter un espace et ajouter tourner juste neuf degrés. Maintenant, quand je vais et passe la souris sur l'image, vous pouvez voir qu'elle devient plus grande et sort du conteneur div, ne vous inquiétez pas, nous pouvons corriger cela facilement en allant juste ici à l'intérieur du conteneur et en ajoutant débordement caché afin que l'image ne sortent plus du conteneur. Et maintenant, quand je passe la souris sur l'image, vous pouvez voir que nous obtenons le bon zoom dans les effets de rotation. Nous voulions. 43. 45 - Effet d'images créatives 7: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce bel effet de survol d'image. Vous pouvez voir quand je survole l'image, cet effet se produit où nous avons un fond gris qui vient du coin inférieur droit jusqu'à ce qu'il couvre l'image. Ensuite, ce texte s'affiche. Nous avons un titre qui vient du côté supérieur droit, un paragraphe qui vient du côté inférieur gauche, et un lien qui vient du bas. Nous allons apprendre à créer tout cela. Commençons donc par créer la mise en page de cet exemple. Je vais commencer dans mon HTML et je vais ajouter un div, lui donner une classe de conteneur. Puis à l'intérieur, j'ajouterai une image. Donc, ce sera notre image. Puis en dessous, je vais ajouter un autre div, lui donner une classe de légende. Donc, ce serait le div qui contient tous les autres éléments. Et à l'intérieur, je vais ajouter un h2 et dire l'image hover. Puis en dessous de cela, j'ajouterai un paragraphe et ajouterai du texte de démonstration. Puis enfin, je vais ajouter une balise d'ancrage et dire Lire la suite. D' accord, allons dans notre CSS pour que ces éléments soient comme nous le voulons. Je vais cibler le div avec la classe de conteneur qui a tous les éléments à l'intérieur. Et je vais ajouter la largeur, 450 pixels, hauteur 300 pixels. Ensuite, la position relative. Ensuite, je vais cibler l'image et ajouter de la largeur 100%. Et maintenant, vous pouvez voir que le conteneur a maintenant une largeur de 450 pixels et une hauteur de 300 pixels, et l'image est contenue à l'intérieur. Bon, continuons à travailler. Nous allons créer l'arrière-plan de superposition en utilisant le pseudo élément avant du conteneur. Donc, je vais cibler cela et ajouter du contenu. Chaînes vides. Position absolue, haut, 0, gauche 0, largeur 101%, 100%. Couleur d'arrière-plan. Cette couleur grise. Opacité, 0,8. Et enfin la transition ou 0,25 seconde. Et maintenant, vous pouvez voir que le fond gris a maintenant la même largeur et la même hauteur que le conteneur et le couvre. Mais si vous vous en souvenez, cet arrière-plan gris n'apparaît pas tant que nous survolons l'image et qu'il apparaît dans le coin inférieur droit. Et il a également été tourné de 45 degrés. Alors changeons sa position et faisons pivoter. Je vais revenir ici et ajouter de la transformation. Traduisez 550 pixels sur l'axe des x et 300 pixels sur l'axe des y. Donc maintenant, vous pouvez voir le fond gris est assis dans cette nouvelle position. Bon, faisons aussi pivoter de 45 degrés. Je vais revenir ici et ajouter faire pivoter 45 degrés. Maintenant, il est tourné. Et enfin, en survolant, nous voulons qu'elle se déplace sur l'image et la couvre complètement. Donc, je vais retourner ici et je planque sur la div avec la classe de conteneur. Je vais faire des changements qui se sont produits à l'élément pseudo précédent, qui est le fond gris. J' ajouterai la transformation, la traduction, les 50 pixels négatifs sur l'axe des x et les 150 pixels négatifs sur l'axe des y. Ensuite, nous voulons le garder en rotation. Donc, je vais également ajouter tourner 45 degrés. Et maintenant, quand je retourne en arrière et que je passe le curseur sur le div conteneur, vous pouvez voir le fond gris se déplace vers l'image, mais il ne le couvre pas complètement. Il ne couvre qu'une petite partie de celui-ci. Nous devons donc augmenter sa largeur et sa hauteur afin qu'il le couvre complètement. Donc, je vais revenir en arrière et changer la largeur à 120% et la hauteur à 205%. Et maintenant, le fond gris est beaucoup plus grand. Et quand je passe la souris sur l'image, vous pouvez voir que le fond gris arrive et le couvre complètement, nous donnant l'effet que nous voulons. Ok, maintenant allons travailler sur la légende et le styliser. Je vais cibler la div avec la classe de légende. Ensuite, j'ajouterai la position, absolue , top, 0, gauche 0 aussi. Puis largeur 100%, et hauteur 100% aussi bien. Ensuite, j'ajouterai une couleur de fond temporaire rouge. Et maintenant, vous pouvez voir la légende est assise sur le conteneur div, parce que nous avons dit que c'est la propriété de position à absolu. Donc, il est positionné par rapport au conteneur div qui a une propriété de position relative. Et il a aussi la même largeur et la même hauteur que le conteneur div parce que nous définissons sa largeur et sa hauteur à 100%. D' accord. Maintenant, nous voulons donner la capture de la mise en page de notre démo. Nous voulons le H2 en haut, puis le paragraphe au centre, et le lien en bas. Et tous doivent être centrés et avoir un espacement approprié entre eux. Nous pouvons le faire en utilisant Flexbox. Alors, allons ici et ajouter un flex d'affichage. Ensuite, pour aligner les éléments au-dessus de l'autre verticalement, nous allons ajouter une colonne de direction flexible. Ensuite, pour les séparer, nous allons ajouter de l'espace de contenu justifié autour. Puis la couleur, le blanc et le texte transforment en majuscules. Alors maintenant, vous pouvez voir les éléments de la Catherine Deneuve sont assis un au-dessus de l'autre et ont un peu d'espace entre eux. Continuons. Je vais cibler le H2. Ensuite, pour le centrer, j'ajouterai du texte aligner, au centre. Puis taille de police, 17 pixels, remplissage, 20 pixels, marge supérieure 20 pixels. Et enfin, la couleur de fond, RGB, 0.8000. Et maintenant, vous pouvez voir le H2 est assis dans cette position au sommet de la div conteneur. D' accord ? Si vous vous souvenez, lorsque vous passez la souris sur l'image, le H2 se déplacerait du coin supérieur droit et commencerait à cette position. Alors revenons en arrière et faisons ça. Je vais aller ici et ajouter la transformation, traduire 200 pixels sur l'axe des x. Donc, il se déplace à un 100 pixels vers la droite et négatif 200 pixels sur l'axe Y. Donc, il déplace 200 pixels vers le haut. Ensuite, j'ajouterai la transition 0, 0, 0,25 secondes. Ensuite, lorsque vous passez le curseur sur le div conteneur, nous voulons que le H2 revienne à sa position d'origine. Donc, je vais dire conteneur hover H2. Et j'ajouterai la transformation, traduirai 0 et 0. Et maintenant, vous pouvez voir l'élément H2 est assis sur le dessus de la div conteneur dans son coin supérieur droit. Et lorsque nous survolons le conteneur, il revient à sa position d'origine. Ok, travaillons sur le paragraphe que je vais cibler. Ajoutez ensuite la taille de la police 16 pixels, largeur, 80% de la largeur du conteneur. Et pour l'aligner au centre, je le ferai. Aligner soi-même, centrer, puis aligner le texte, centrer pour centrer le texte. Et enfin la transition 0, 0. Et maintenant, vous pouvez voir que le texte est centré à l'intérieur du div conteneur et prend 80 pour cent de sa largeur. Et dans notre effet, le texte vient du coin inférieur gauche. Alors revenons en arrière et faisons ça. Je vais revenir en arrière et ajouter la transformation, traduire négatif 200 pixels sur l'axe des x. Ainsi, il sera déplacé vers la gauche de 200 pixels et 200 pixels sur l'axe y. Donc, il sera déplacé 200 pixels vers le bas. Alors je descends ici. Et en survolant le conteneur, je vais apporter quelques modifications au paragraphe. Je vais ajouter la transformation, traduire 00. Et maintenant, le paragraphe est assis en bas à gauche. Et quand nous survolons le conteneur, il revient à sa position d'origine. Bon, maintenant ce qui reste, c'est le bouton ou le lien. Alors appelons-le. Je vais le cibler. Ensuite, ajoutez du texte, de la décoration. Aucun. Couleur de fond, couleur noire. Blanc. Largeur : 100 pixels. Puis rembourrage, 15 pixels. Marge, 20 pixels du bas. Puis encore une fois pour le centrer horizontalement, je vais ajouter aligner auto, centre. Puis enfin la transition ou 0,25 seconde. Et maintenant, vous pouvez voir que le bouton ressemble exactement à ce que nous voulons, et il est assis sur le fond. D'accord. Nous savons que le bouton vient du bas en survolant le div conteneur. Alors positionnons-le en bas. Je vais revenir ici et ajouter la transformation, traduire y 100 pixels. Ensuite, lorsque vous passez la souris sur le conteneur, je vais apporter quelques modifications au lien. Je vais ajouter la transformation, traduire Y 0 à nouveau, donc il revient à sa position. Et maintenant, quand je reviens, vous pouvez voir que le bouton est assis à 100 pixels en dessous du div conteneur. Et quand je survole, le bouton revient à sa position d'origine. Maintenant, il nous reste une chose, c'est de cacher tous ces éléments. Donc, ils n'apparaissent que lors du vol stationnaire. Je retournerai à l'intérieur du conteneur div et j'ajouterai un débordement caché. Et maintenant, vous pouvez les voir tous disparaître. Et en survolant notre div conteneur, ils apparaissent à nouveau et notre effet se produit. Mais vous pouvez voir en survolant, tous apparaissent immédiatement. En même temps. Ce serait bien que nous ayons des retards dans la transition. Nous voulons donc que l'arrière-plan de superposition apparaisse immédiatement sans délai. Ensuite, nous voulons que le H2 apparaisse. Puis le paragraphe et enfin le lien en bas. Alors revenons en arrière et ajoutons ça. Je vais y aller et ajouter un délai de transition 0,3 secondes. Donc, quand je survolerai le conteneur, nous attendrons 0,3 seconde. Donc, il apparaîtra après que l'arrière-plan soit complètement visible. Ensuite, je vais aller ici et ajouter le délai de transition 0,4 seconde cette fois de sorte que le paragraphe apparaît légèrement après le H2. Puis enfin ici et ajouter le délai de transition 0,5 secondes. Ainsi, le lien apparaîtra après 0,5 secondes de survol du conteneur div. Et maintenant, quand je retourne en arrière et que je passe le curseur sur l'image, vous pouvez voir l'arrière-plan apparaît immédiatement. Et puis après cela, les trois éléments apparaissent, un après l'autre avec une très légère différence de temps. Et en planant, ils disparaissent tous immédiatement en même temps. Ils n'attendent pas car la propriété de délai de transition est appliquée en survolant uniquement. Donc, le retard arrive quand nous planons, et ça n'arrive pas quand nous planons. C' est pourquoi tous les éléments disparaissent immédiatement. Et en faisant cela, nous avons fini cet effet, et dans les prochaines leçons, nous verrons d'autres effets comme ceux-ci dans cet exemple. Alors on se voit dans la leçon suivante. 44. 46 - Effet d'images créatif 8: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer une autre image, effet de vol stationnaire. Vous pouvez voir quand je survole l'image, cet effet se produit lorsque nous avons l'arrière-plan de superposition venir de droite à une position et vous pouvez voir qu'il a été tourné alors que c'était un moyen. Puis quand il revient, degré de rotation devient 0. Donc il n'est plus tourné. Ensuite, nous avons le lien venir du haut vers cette position. Ensuite, le paragraphe vient de la droite à sa position et a également tourné alors qu'il était un moyen. Puis enfin, le H2 vient du sommet à sa position. Alors commençons à créer cet effet. Vous pouvez voir que nous avons nos styles de la leçon précédente. Donc tout est à sa place et nous n' ajouterons que les styles responsables de notre effet ici. Commençons donc par l'arrière-plan de superposition. Je vais cibler le pseudo élément avant du conteneur. Et je vais ajouter la transformation, traduire 650 pixels. Ainsi, il sera traduit 650 pixels vers la droite le long de l'axe des x, puis négatif 100 pixels. Ainsi, il sera déplacé 100 pixels vers le haut. Sur l'axe des y. Je vais également ajouter tourner 180 degrés. Donc, il sera tourné de 180 degrés quand il est loin. Et enfin, j'ajouterai la transition 0, 0. Puis en dessous de ça. Et en survolant le div conteneur, je vais faire quelques changements qui leur sont arrivés avant pseudo élément. J' ajouterai la transformation, traduirai 0 et 0. Ainsi, il reviendra à sa position d'origine, puis fera pivoter 0 degrés. Donc, il retournera à 0, nous donnant l'effet que nous voulons. Et maintenant, vous pouvez voir l'arrière-plan est assis dans cette position, 650 pixels vers la droite et 100 pixels vers le haut. Et il est également tourné de 180 degrés. Et quand je passe la souris sur l'image, vous pouvez voir que l'arrière-plan retourne à sa position d'origine tout en retournant à 0 degrés, qui nous donne ce bel effet. Ok, allons travailler sur le H2. Je vais le cibler et ajouter la transformation, traduire y négatif 150 pixels. Ainsi, le h2 sera déplacé vers le haut de 150 pixels. Ensuite, j'ajouterai la transition toutes les 0,2 secondes. Ensuite, en survolant le div conteneur, je ciblerai le H2. Et ajouter transformer traduire Y 0 pixels de sorte qu'il retourne à sa position. J' ajouterai également un délai de transition 0,5 secondes afin qu'il apparaisse après l'affichage de l'arrière-plan. Et maintenant, vous pouvez voir le H2 est assis sur le dessus de l'image. Et quand je passe la souris sur l'image, elle pèse 0,5 seconde, puis se déplace à nouveau à sa position. Et remarquez que lorsque je survole, il a immédiatement déplacé vers le haut à nouveau. Il ne se réveille pas 0,5 seconde en survolant car nous avons ajouté le délai de transition uniquement en survolant. D' accord, passons au paragraphe. Il a été déplacé vers la droite et faire pivoter. Donc je vais le cibler. Ensuite, ajoutez la transformation, traduisez X 300 pixels, puis faites pivoter 90 degrés. Ensuite, j'ajouterai la transition ou 0,2 secondes. Ensuite, en survolant le div conteneur, je ciblerai le paragraphe. Ensuite, j'ajouterai la transformation, traduirai X à 0 à nouveau et retournerai à 0 aussi. Ensuite, en dessous de cela, j'ajouterai le délai de transition 0,4 secondes. Et maintenant, vous pouvez voir que le paragraphe a été déplacé vers la droite 300 pixels et il est tourné de 90 degrés. Et en survolant l'image, elle pèse 0,4 seconde. Ensuite, il retourne à 0 degrés tout en revenant à sa position d'origine. Et quand je survole, il revient immédiatement à la vitesse et tourne. Enfin, nous allons travailler sur le lien. Je vais revenir en arrière et ciblé. Ensuite, je vais ajouter la transformation, traduire y négatif 300 pixels. Ainsi, il sera déplacé vers le haut de 300 pixels, puis transition 0, 0, 0,2 secondes. Et encore une fois, en survolant le conteneur div, je vais cibler la balise d'ancrage et ajouter la transformation, traduire Y 0 pixels, sorte qu'il retourne à sa position. Ensuite, j'ajouterai le délai de transition 0,3 secondes. Et maintenant, vous pouvez voir le lien est assis sur le dessus de l'image. Et quand je survole, le lien pèse 0,3 seconde, puis descend à sa position d'origine. Maintenant, je vais revenir en arrière et cibler le div conteneur et ajouter un débordement caché. Et maintenant, vous pouvez voir tous les éléments sont invisibles. Et quand nous survolons l'image, ils apparaissent à nouveau. Et l'effet que nous voulons se passe parfaitement. 45. 47 - Effet d'images créatif 9: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons continuer avec effets de vol stationnaire d' image et nous allons créer ce bel effet de vol stationnaire. Vous pouvez voir quand je passe la souris sur l'image, elle descend à 0 jusqu'à ce qu'elle disparaisse. Et les compétences de fond en rotation et tous les éléments s'estompent bien. Alors créons cet effet. Vous pouvez voir que nous avons tous les styles des leçons précédentes qui sont responsables de localiser les éléments dans leurs positions comme ça. Très bien, nous allons commencer à ajouter les styles pour cette leçon ici. Et nous allons cibler la div avec la classe de conteneur. Ensuite, j'ajouterai la couleur de fond. Cette couleur grise. Puis bordure 10 pixels, solide et blanc. Quand je vais revenir en arrière et cibler l'image à l'intérieur du conteneur div. Et j'ajouterai la transition 0, 0, 5 secondes. Puis en dessous de ça. Et en survolant le conteneur, je ciblerai l'image et ajouterai l'échelle de transformation 0. Et maintenant, quand je passe la souris sur l'image, vous pouvez voir qu'elle descend à 0 et disparaît. Et en survolant, il revient à sa taille d'origine. Bon, continuons. Je vais cibler le pseudo élément avant du conteneur, c'est-à-dire ce fond gris. Et je vais changer cette couleur de fond pour cette couleur verte. Nous avons vu qu'il se développe en tournant. Donc, ajoutez transformée, échelle 0, rotation négative 180 degrés, et enfin transition 0, 0, 5 secondes. Ensuite, en dessous de cela, je dirai en survolant le conteneur, je vais faire quelques changements à l'élément pseudo avant. J' ajouterai de la transformation, de l'échelle un et de la rotation de 0 degrés afin qu'elle monte de 0 à un tout en tournant de 180 degrés à 0 degrés, ce qui nous donne l'effet que nous voulons. Et maintenant, quand je passe la souris sur l'image, vous pouvez voir pendant que l'image est réduite, l'arrière-plan vert est en train de monter à l'échelle et de tourner, qui nous donne ce bel effet. Mais il serait préférable que l'arrière-plan vert ne soit mis à l'échelle qu'après que l'image soit réduite à 0. Nous ajouterons donc quelques retards de transition au fond vert. En survolant. Je vais revenir ici et ajouter un délai de transition 0,5 seconde. Et nous avons ajouté cette valeur spécifiquement parce que la durée de transition de l'image est de 0,5 seconde, ce qui signifie que l'image sera réduite à 0,50 seconde. Ainsi, l'arrière-plan vert apparaîtra après la disparition complète de l'image. Et maintenant, lorsque je passe le curseur sur le conteneur, vous pouvez voir l'image recule à 0 d'abord, puis l'arrière-plan vert s'adapte en tournant. Après ça. Nous devons maintenant faire en sorte que le texte s'estompe également. Donc, je vais revenir en arrière et cibler l'élément H2. Ensuite, j'ajouterai l'opacité 0 et la transition ou 0,5 secondes. Ensuite, lorsque vous passez le curseur sur le conteneur, je ciblerai le H2 et ajouterai de nouveau l'opacité. Donc, il va s'estomper bien. Et je veux faire la même chose pour les deux autres éléments aussi. Donc, je vais aller ici à côté de l'élément h2 et ajouter le paragraphe ainsi que le lien. Et je ferai la même chose pour l'effet planant. Et maintenant, vous pouvez voir les trois éléments sont maintenant cachés parce que leur opacité est 0. Et quand je survole l'image, ils apparaissent à nouveau. Mais comme vous pouvez le voir, ils apparaissent immédiatement. Nous voulons qu'ils apparaissent seulement après l'affichage de l'arrière-plan vert. Nous y ajouterons donc quelques retards de transition. Donc, je vais revenir en arrière et sous effet stationnaire, j'ajouterai délai de transition 1 seconde. En survolant l'image, ces éléments attendent 1 seconde, puis ils apparaissent. Et j'ai choisi 1 seconde parce que l'image prend 0,5 seconde, puis le fond vert prend encore 0,5 seconde. Donc, les deux combinés prennent 1 seconde avant qu'ils apparaissent. C' est pourquoi j'ai utilisé 1 seconde comme valeur de retard de transition pour nos trois éléments. Et maintenant, quand je passe le curseur sur le div conteneur, vous pouvez voir l'image s'échelle en premier, puis l'arrière-plan vert s'adapte en tournant. Et enfin, les trois éléments s'estompent bien. Mais en survolant, vous pouvez voir tous les éléments disparaître immédiatement, complètement. Mieux vaut si l'arrière-plan vert et les trois éléments disparaissent d'abord, puis après cela, l'image entre et apparaît à nouveau. Donc, en survolant, nous voulons faire attendre l'image jusqu'à ce que le fond vert et les trois éléments disparaissent complètement. Ensuite, après cela, l'image devrait remonter à l'échelle. Pour ce faire, nous allons aller ici à l'intérieur du sélecteur d'image et ajouter un délai de transition 0,5 seconde. Et maintenant, quand je vais passer la souris sur le conteneur div, puis passer la souris. Vous pouvez voir le fond vert et les trois éléments disparaissent en premier. Ensuite, l'image remonte à nouveau. Donc, l'image attend juste 0,5 seconde, puis se met à l'échelle, mais il y a un problème. L' image pèse également 0,5 seconde en survolant le conteneur. Mais nous voulons qu'il apparaisse immédiatement. Donc, nous voulons qu'il attende 0,5 seconde seulement en planant loin du conteneur, pas un planant dessus. Nous pouvons le faire en retournant ici et en ajoutant le délai de transmission 0. Cela signifie donc que lorsque nous survolons le div conteneur, le délai de transmission de l'image sera 0. Donc, il apparaîtra immédiatement parce que nous avons ajouté le délai de transition 0,5 ici à l'image. Cela ne fonctionnera que lorsque nous survolerons, et c'est exactement ce que nous voulons. Donc, quand je vais et que je passe le curseur sur le div conteneur, l'image diminue immédiatement, puis l'arrière-plan vert s'adapte tout en tournant. Et enfin, les trois éléments s'estompent. Et en survolant, le fond vert et les éléments disparaissent immédiatement et l'image apparaît après cela, nous donnant l'effet que nous voulons. J' espère donc que vous êtes maintenant plus familier avec la propriété de délai de transition et comment elle est utilisée dans différentes situations. Que vous vouliez qu'il fasse peser votre élément en survolant seulement ou en survolant seulement, ou dans les deux cas. Donc, si vous voulez l'appliquer uniquement en survolant, vous pouvez le faire facilement en l'ajoutant dans le bloc de code survolant. Et si vous voulez l'appliquer uniquement en survolant, vous pouvez l'appliquer dans le code de l'élément. Ensuite, dans le code de vol stationnaire, vous pouvez le définir sur 0. Donc, il sera 0 en planant seulement. Donc, il sera 0 seulement en survolant, et en survolant, il aura la valeur que vous l'appliquez dans le code de l'élément. Et enfin, si vous voulez l'appliquer dans les deux cas, en survolant et en survolant, vous l'ajoutez simplement dans le code de l'élément. 46. 48 - Effet d'images créatives 10: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de survol d'image. Vous pouvez voir lorsque je survole l'image, l'arrière-plan vert s'estompe n et le H2 et le paragraphe se fondent également. Vous pouvez voir qu'ils étaient plus gros qu'en planant. Nous sommes plus petits et retournons à leur taille d'origine et le lien se déplace du bas à sa position. Donc ça va être un bon effet. Voyons comment nous pouvons le créer. Donc ici vous pouvez voir que nous avons nos styles des leçons précédentes et nous allons juste ajouter les styles responsables de notre effet. Donc, tout d'abord, nous allons créer l'arrière-plan fané. En effet, je vais cibler le pseudo élément avant du conteneur. Et j'ajouterai l'opacité 0, puis la transition ou 0,3 secondes, puis en dessous de cela. Et en survolant le div conteneur, je ciblerai le pseudo élément avant. Ensuite, ajoutez l'opacité. Encore une fois. Et maintenant, vous pouvez voir que le fond vert a disparu. Et quand je passe la souris sur l'image, elle s'estompe bien. Ok, travaillons à la fois sur le H2 et le paragraphe. On va les cibler tous les deux. Ensuite, j'ajouterai l'échelle de transformation 10, sorte qu'il y aura 10 fois plus grand. Puis en dessous de cela, j'ajouterai l'opacité 0. Puis enfin la transition. Les trois secondes. Puis en dessous de cela, en survolant le conteneur div, je ciblerai la balise H2, et je ferai la même chose pour le paragraphe. Ensuite, j'ajouterai une opacité, puis Transformer l'échelle une à nouveau. Et maintenant, vous pouvez voir le H2 et le paragraphe sont maintenant cachés. Et en survolant l'image, ils apparaissent à nouveau. Vous pouvez voir qu'ils deviennent plus petits jusqu'à ce qu'ils reviennent à la taille d'origine. Enfin, nous voulons travailler sur le lien. Nous voulons qu'il se déplace du bas vers le haut lorsque nous survolons l'image. Donc je vais retourner ici et cibler le lien. Ensuite, je vais ajouter la transformation, traduire y, 150 pixels. Ainsi, le lien sera déplacé vers le bas de 150 pixels. Ensuite, j'ajouterai la transition ou 0,3 secondes. Et en dessous de cela, en survolant le div conteneur, je ciblerai la balise d'ancrage et ajouterai la transformation. Traduire Y 0 à nouveau, sorte qu'il retourne à sa place d'origine. Et maintenant, quand je reviens, vous pouvez voir que le lien disparaît aussi. Il est en fait assis derrière l'image, mais il n'apparaît pas parce que nous avions la propriété overflow définie comme cachée dans le conteneur div. Et quand je survole l'image, vous pouvez voir que le lien vient de bas en haut, qui nous donne ce bel effet. Et tous les éléments ont maintenant l'effet planant que nous voulons. Mais ajoutons un peu de retard à nos éléments en survolant afin qu'ils apparaissent légèrement après le fond vert. J' ajouterai un délai de 0,2 pour chacun d'entre eux. Donc, je vais aller ici et ajouter un délai de transition, 0,2 seconde. Puis ci-dessous, je vais ajouter le délai de transition 0,2 secondes aussi. Et maintenant, quand je vais passer le curseur sur le div conteneur, vous pouvez voir les éléments apparaissent légèrement après le fond vert. Et en planant, tous disparaissent immédiatement ensemble. Le délai ne s'applique pas dans ce cas car nous le définissons pour le vol stationnaire uniquement. 47. 49 - Effet d'images créatives: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de survol d'image. Vous pouvez voir lorsque je passe la souris sur l'image, elle descend à 0 pendant la rotation et son opacité diminue également à 0. Ensuite, un arrière-plan vert s'estompe. Ensuite, les trois éléments se déplacent du haut vers leur position d'origine, un après l'autre. Le lien apparaît d'abord, puis le paragraphe, puis l'en-tête. Nous allons utiliser la propriété de délai de transition pour faire apparaître l'arrière-plan vert après la disparition de l'image. Nous l'utiliserons également pour faire apparaître nos éléments les uns après les autres. Voyons donc comment nous pouvons créer ça. Vous pouvez voir que nous avons les styles des leçons précédentes. Nous avons donc nos éléments assis dans leur position. Revenons maintenant et créons les styles pour cette leçon. Tout d'abord, je vais cibler le div avec la classe de conteneur. Et j'ajouterai la couleur de fond. Cette couleur gris foncé, sorte qu'il apparaîtra lorsque l'image recule et bordure 10 pixels, blanc massif. Donc maintenant, vous pouvez voir que nous avons cette bordure blanche autour du div conteneur, et nous avons aussi un fond gris. D' accord, je vais retourner en arrière et cibler l'image à l'intérieur du conteneur. Et j'ajouterai la transition 0, 0, cinq secondes. Puis en dessous de cela, en survolant le conteneur, je vais cibler l'image. Et nous voulons réduire l'échelle de l'image tout en tournant. Donc, je vais ajouter la transformation, faire pivoter 720 degrés, puis l'échelle 0. Nous voulons également qu'il disparaisse pendant que l'effet se produit. Donc, je vais ajouter l'opacité 0. Et maintenant, vous pouvez voir quand je vais passer le curseur sur le conteneur, l'image se réduit en tournant et son opacité diminue jusqu'à ce qu'elle disparaisse. Ok, travaillons sur le fond vert. Je vais cibler le pseudo élément avant du conteneur. Et j'ajouterai une couleur de fond. Cette couleur verte, puis opacité 0 et transition 0, 0. Puis en dessous de ça. Et en survolant le conteneur, je ferai des changements au pseudo élément avant. Je vais faire de l'opacité. Encore une fois. Donc, il aura ce bel effet de décoloration, et je veux que cela se produise après la disparition de l'image. Donc, alors que nous allons ajouter le délai de transmission 0,5 seconde. Et maintenant, vous pouvez voir que l'arrière-plan de superposition a disparu parce que nous avons réglé son opacité sur 0. Et en survolant le conteneur, il apparaît à nouveau au-dessus du fond gris du conteneur après que l'image disparaisse complètement. Bon, revenons en arrière et créons l'effet de nos trois éléments. Je vais commencer par le lien. Je vais le cibler. Et nous voulons qu'il passe du haut à sa position d'origine. Donc, je vais ajouter la transformation, traduire y négatif 300 pixels, puis la transition ou 0,2 secondes. Et au-dessous de cela va planer sur le conteneur. Je vais cibler la balise d'ancrage et ajouter la transformation. Traduire Y 0 à nouveau, sorte qu'il retourne à sa position d'origine. Je vais également ajouter le délai de transition 0,5 secondes. Et maintenant, vous pouvez voir le lien est assis sur le dessus du conteneur. Et quand je passe la souris sur le conteneur, le lien pèse 0,5 seconde, puis revient à sa position. Faisons rapidement le même effet avec un paragraphe et l'en-tête. Je vais revenir en arrière et copier ce code. Puis collez-le à nouveau deux fois. Ensuite, je vais cibler le paragraphe. Cette fois. Je vais également cibler le paragraphe ici dans l'effet de vol stationnaire. Et je vais juste changer le délai de transition à 0,7 seconde. Donc, il apparaîtra légèrement après le lien. Puis en dessous de cela, je vais cibler le titre cette fois et changer le délai de transition à 0,9 seconde. Donc, il apparaîtra après le paragraphe. Ensuite, je vais monter ici à l'intérieur du conteneur div et ajouter un débordement caché afin que les éléments soient cachés à l'extérieur du conteneur. Et maintenant, vous pouvez voir tout en dehors du div conteneur est caché. Et quand je survole, les trois éléments apparaissent l'un après l'autre. Donc ce qu'on a fait, c'est simple. Nous venons de réduire l'échelle de l'image en tournant. Ensuite, nous avons fait fondre le fond vert. Et enfin, nous avons fait apparaître nos éléments l'un après l'autre. Et cela nous donne l'effet que nous voulons. 48. 51 - Effet de menu bordures créatifs de banales: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet de survol de menu. Lorsque je survole un lien dans le menu, vous pouvez voir deux lignes sont mises à l'échelle. Le haut quand nous mettons à l'échelle de la gauche et le bas un moustache de la droite. L' idée derrière cet effet est simple. Nous allons simplement utiliser les pseudo-éléments avant pour créer la ligne supérieure, qui sera toute la largeur du lien. Ensuite, nous allons ajouter l'échelle x 0 pour cela, sorte qu'il disparaîtra. Lorsque nous survolons le lien, nous le ferons de sorte que l'échelle x soit un. Donc, il apparaît à nouveau. Mais nous ferons l'origine de la transformation à gauche. Donc, il va croître de gauche à droite. Cool, mais construisons dans le style notre menu d'abord, je vais aller à mon HTML et ajouter un UL LI et une balise d'ancrage à l'intérieur de celui-ci. Et je dirai à la maison. Ensuite, je vais copier cela et le coller à nouveau plusieurs reprises. Et je vais changer le texte. Maintenant, vous pouvez voir notre menu et il est centré horizontalement et verticalement à l'intérieur du corps, grâce à certains styles Flexbox qui sont ajoutés au corps juste ici. Bien. Maintenant, nous allons travailler sur le menu lui-même. Je vais cibler l'UL, puis ajouter le remplissage 0 et la marge 0, puis afficher flex pour que l'élément de liste soit assis l'un à côté de l'autre. Et enfin, flex wrap. Enveloppez de manière à ce que les éléments de la liste passent à la ligne suivante lorsqu'ils n'ont pas d'espace disponible. Ensuite, je vais cibler les éléments de la liste à l'intérieur de la liste non ordonnée. Et je vais ajouter aucun style de liste pour me débarrasser de la puce qui apparaît à côté des éléments de la liste. Ensuite, je vais cibler les liens. Et je vais ajouter une décoration de texte, aucun pour supprimer les soulignements. Puis coloriez cette belle couleur gris foncé et la taille de la police. 22 pixels. Affichez ensuite le remplissage du bloc, dix pixels du haut et du bas, et 15 pixels de la gauche et de la droite. Puis enfin, position relative. Et regarde ça. Incroyable. Maintenant, notre menu ressemble exactement à ce que nous voulons et nous sommes prêts à travailler sur l'effet de vol stationnaire. Donc, je vais aller ici et ajouter un deux-points. Avant. Ensuite, j'ajouterai du contenu, une chaîne vide, puis la position absolue, haut , 0, gauche, 0, largeur, 100%. Hauteur. Seulement deux pixels. Couleur d'arrière-plan. Notre belle couleur gris foncé. Maintenant, vous pouvez voir la ligne apparaît en haut et il a toute la largeur. Et c'est une petite hauteur de deux pixels. Continuons à travailler. J' irai ici et ajouterai l'échelle de transformation x 0 afin que sa largeur soit 0. Et j'ajouterai la transition 0, 0, 5 secondes. Ensuite, lorsque nous survolons le lien, je veux que la ligne apparaisse à nouveau. Donc, je vais aller ici et ajouter un deux-points, planer le deux-points avant. Et j'ajouterai l'échelle de transformation x un à nouveau. Et maintenant, quand je survole n'importe quel lien, vous pouvez voir que la ligne croît à nouveau. Mais il se développe à partir de son centre parce que l'origine de la transformation est définie sur le centre par défaut. Mais nous voulons qu'il évolue ou grandisse de son côté gauche. Donc, je vais revenir à l'avant un pseudo élément ajouter l'origine de la transformation à gauche. Et maintenant, quand je survole un lien à nouveau, vous pouvez voir que la ligne est en train de croître à partir de son point d'extrémité gauche, ce qui nous donne l'effet exact que nous voulons. Enfin, nous devons créer la ligne de fond est, eh bien, ne vous inquiétez pas, ce sera très facile. Ce que je vais faire, c'est que je vais copier le pseudo élément avant, coller à nouveau, et je vais juste faire quelques changements. Donc, tout d'abord, je vais changer le mot avant pour après. Ensuite, je vais changer ce haut en bas. Donc, la ligne sera en bas du lien. Ensuite, je vais changer l'origine de la transformation pour écrire afin qu'elle grandisse de son côté droit, pas à gauche. Et bien sûr, j'irai ici et inclus dans l'effet de vol stationnaire. Donc, quand je passe la souris sur le lien, le pseudo élément after devrait croître aussi. Et c'est tout. Si je passe le curseur sur n'importe quel lien, vous pouvez voir que l'effet est exactement ce que nous allions. 49. 52 - Effet de menu écrits créatifs et bordages de bordages: Bonjour tout le monde. Bienvenue à cette nouvelle leçon dans le cours où nous allons créer cet effet de survol lorsque vous survolez les éléments de menu sont des liens. Ainsi, vous pouvez voir que nous avons un arrière-plan qui s'estompe avec ces deux bordures à partir des coins supérieur droit et inférieur gauche. ai eu. Voyons donc comment nous pouvons créer cet effet. J' irai ici dans mon HTML et j'ajouterai un UL LI à l'intérieur de celui-ci et une balise d'ancrage à l'intérieur du LI. Et je dirai à la maison. Ensuite, je vais copier ceci, le coller quatre fois. Et je dirai sur les services de portefeuille et de contact. Ensuite, nous irons à notre CSS pour ajouter quelques styles. abord, je vais cibler l'UL, ajouter la marge 0 , le remplissage 0 et afficher le flex afin d'afficher tous les éléments de la liste côte à côte. Et enfin, pour se débarrasser des puces, nous allons ajouter list-style. Aucun. Bon, continuons à bouger. Je vais cibler la balise d'ancrage et je vais définir sa couleur à cette couleur gris foncé. Ensuite, nous voulons rendre la taille de la police un peu plus grande. Donc, je vais ajouter la taille de la police 20 pixels. Puis texte-décoration. Aucun pour supprimer les soulignements. Transformation de texte. majuscules pour faire toutes les lettres majuscules. Rembourrage, cinq pixels du haut et du bas, et dix pixels de la gauche et de la droite. Et nous voulons ajouter des espaces entre les liens. Nous allons donc ajouter la marge 0 pixels du haut et du bas, et dix pixels de la gauche et de la droite. Ok, maintenant nous allons ajouter la position, la relation et la transition. 0, 0, 5 secondes. Bien. Maintenant, nos liens sont assis côte à côte avec quelques espaces entre eux et ils sont beaux. Ensuite, nous allons travailler sur l'effet de vol stationnaire. Nous allons créer les bordures qui apparaissent dans le coin supérieur droit et dans le coin inférieur gauche en utilisant les pseudo-éléments avant et après. Donc je vais aller ici et dire un deux-points avant. Puis à l'intérieur de celui-ci, j'ajouterai du contenu. Chaînes vides, position absolue. Et ce sera la bordure qui apparaît dans le coin inférieur gauche. Donc, nous allons dire en bas 0 et à gauche 0. Ensuite, nous allons faire cela avant pseudo élément ou carré et y ajouter des bordures. Donc, je vais ajouter la largeur, 12 pixels, hauteur 12 pixels. Ensuite, afin de voir ce que nous avons maintenant, ajoutons une couleur d'arrière-plan temporaire. Donc, je vais ajouter la couleur de fond, bleu, par exemple. Donc, ici, vous pouvez voir les pseudo-éléments avant se trouve juste ici dans le coin inférieur gauche, et il a une largeur et une hauteur de 12 pixels et une couleur de fond bleu. Maintenant, nous voulons ajouter une bordure autour juste du côté gauche et du côté inférieur. Alors faisons ça. Je reviendrai à l'élément pseudo précédent, et j'ajouterai une bordure, trois pixels solides. Et j'ajouterai cette belle couleur rouge. Maintenant, cette ligne de code que nous venons d'ajouter mettra une bordure autour de tous les côtés du fond bleu. Donc, si nous regardons, vous pouvez voir que nous avons maintenant une bordure rouge autour du fond bleu ici, mais nous voulons seulement que la bordure soit autour du bas et du côté gauche. Pour ce faire, nous pouvons utiliser la propriété border width. Donc, je vais revenir ici à l'intérieur du pseudo élément avant, et j'ajouterai la largeur de la bordure. Et la propriété border width accepte quatre valeurs. La première valeur indique le côté supérieur, puis le côté droit, le côté inférieur après cela, puis enfin le côté gauche. Donc en haut, à droite, en bas, à gauche. Et parce que nous ne voulons que des bordures sur les côtés gauche et inférieur, nous ajouterons 0 pour le côté supérieur, puis 0 pour le côté droit, puis trois pixels, et trois pixels pour le côté inférieur et gauche. Et c'est là. Maintenant, vous pouvez voir que nous avons la frontière que nous voulons, ce qui signifie que nous n'avons plus besoin de ce fond bleu. Donc, je vais aller ici et l'enlever. Maintenant. ce moment, nous voulons créer la bordure dans le coin supérieur droit. Ce sera vraiment facile. Nous copions simplement cela avant pseudo élément, collez-le et changez avant à après. Ensuite, au lieu de bas et à gauche, nous allons ajouter haut et droite. Et nous savons que nous voulons une bordure en haut et à droite. Donc, nous allons fixer cette largeur de bordure juste ici et en faire trois pixels. Trois pixels, 00, au lieu de 003 pixels, trois pixels. On y va. Maintenant, nous avons les deux bordures, et elles sont mises en place dans le coin supérieur droit, dans le coin inférieur gauche. Ensuite, nous voulons travailler sur l'effet de vol stationnaire. Nous voulons donc déplacer les frontières un peu vers l'intérieur, puis définir l'opacité à 0 pour les rendre invisibles. Et en planant, nous les ferons reculer vers extérieur et nous rendrons l'opacité une nouvelle fois. Tout cela aura du sens une fois que nous l'aurons fait. Alors allons-y. Je vais aller ici à l'intérieur du pseudo élément avant, qui est le coin inférieur droit ici. Et je vais changer à gauche et en bas à 12 pixels au lieu de 0. Donc maintenant vous pouvez voir cela pousse la frontière vers l'intérieur vers le lien lui-même. Et j'ajouterai l'opacité 0 pour rendre cela invisible. Droit ? Maintenant, je survole le lien. Nous voulons faire remonter la frontière vers l'extérieur et nous montrer. Donc, je vais dire un et je planque sur le lien. Je veux faire quelques changements arriver à l'élément pseudo avant. Je vais ajouter de l'opacité, un. Puis en bas. Nous voulons que ce soit vers l'extérieur. Donc, disons moins huit pixels et moins huit pixels gauche aussi. Maintenant, nous voulons que ce changement se produise sans heurts. Donc, nous allons monter ici à l'intérieur du pseudo élément avant, et nous allons ajouter la transition tous les zéros. Donc maintenant, quand je vais et que je passe au-dessus du lien, vous pouvez voir le coin inférieur gauche apparaît dans les mouvements vers l'extérieur, ce qui nous donne l'effet que nous visions. Maintenant. Très bien, faisons vite ça pour le coin supérieur droit. J' irai ici et changerai haut et à droite en 12 pixels et 12 pixels au lieu de 00. Ensuite, je vais ajouter l'opacité 0, puis passer nos 0.3 secondes. Et après cela, nous allons copier ceci. Coller à nouveau, changer avant à après, bas en haut, de gauche à droite. Et maintenant, quand je passe la souris sur le lien, vous pouvez voir que les frontières se déplacent vers l'extérieur, qui nous donne ce bel effet. Maintenant, il reste une chose, qui est de changer l'arrière-plan du lien lorsque nous survolons. Faisons ça vite. Je vais y aller et dire que je planque. J' ajouterai la couleur de fond, la même couleur rouge que la bordure, et la couleur blanche pour rendre la couleur du texte blanche, bien sûr. Et maintenant, quand je passe la souris sur n'importe quel lien, vous pouvez voir que nous avons l'effet que nous voulons, ce qui est, comme toujours, très gentil. 50. 53 - Effet de menu d'arrière-plan divisé créatif créatif de: Bonjour tout le monde. Bienvenue à cette nouvelle leçon dans le cours où nous allons créer ce joli effet de vol stationnaire de menu. Donc, vous pouvez voir que lorsque nous survolons, nous avons cette très belle action en cours. L' arrière-plan se divise en quatre parties et ils se déplacent de haut en bas, une après l'autre, qui nous donne ce résultat. Donc, afin de créer cet effet, nous allons d'abord créer les quatre parties de l'arrière-plan, puis les mettre à l'échelle de haut en bas en utilisant la fonction scale y. Et enfin, utilisez la propriété de délai de transition pour rendre le délai pour chacun d'entre eux et les faire apparaître l'un après l'autre. Alors allons-y. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage UL LI. Et je dirai à la maison. Ensuite, afin de créer les quatre parties, nous utiliserons des travées. Je vais donc ajouter quatre travées à l'intérieur de la balise d'ancrage. Et chaque travée sera une partie de l'arrière-plan gris qui apparaît lorsque nous survolons. Ensuite, je vais copier le LI entier, le coller quatre fois. Et je vais juste changer le texte à chaque fois. Je vais donc dire sur les services, l'équipe et le contact. Donc, ici, nous avons notre URL, mais faisons en sorte que ça ressemble mieux. Je vais aller à ma cible CSS, l'URL. Et j'ajouterai la marge 0, le rembourrage 0. Et pour que l'élément de liste soit assis côte à côte, nous ajouterons un flex d'affichage à l'URL. Ensuite, nous voulons nous débarrasser des balles. Donc, nous allons ajouter list-style, none. D' accord, maintenant stylisons les liens eux-mêmes. Je vais cibler les balises d'ancrage, et j'ajouterai un bloc d'affichage afin que nous puissions leur ajouter de la largeur et de la hauteur. Et c'est ce que je ferai ensuite. Donc, je vais ajouter avec 120 pixels, hauteur, 40 pixels. Ensuite, afin de centrer le texte verticalement et horizontalement, nous ajouterons la hauteur de la ligne, 40 pixels et le texte aligné. Au centre. Cool. Maintenant, nous allons ajouter la couleur rouge pour l'instant. Ensuite, la transformation de texte majuscule. Et pour supprimer les soulignements, nous allons ajouter une décoration de texte. Aucun. Ensuite, la position relative. Et enfin la transition ou 0,5 seconde. Bon, maintenant nous avons notre configuration de lien côte à côte et belle apparence. Ensuite, nous allons travailler sur les travées pour créer l'arrière-plan. Je vais donc cibler les travées à l'intérieur des balises d'ancrage. Et j'ajouterai la position, absolue. Et comme nous avons quatre travées, nous allons définir la largeur à 25 pour cent pour chacune d'entre elles. Ensuite, nous allons utiliser la propriété gauche pour contrôler leur positionnement. Donc, je vais ajouter la largeur, 25 pour cent, puis la hauteur, 100% bien sûr, parce qu'ils prennent toute la hauteur. Puis la couleur de fond, cette couleur gris foncé. Et nous ne voulons pas qu'ils cachent le texte sur le lien. Donc, nous allons ajouter z-index minus1, puis à gauche 00. Et ce que cela fera, c'est que les quatre travées prendront 25 pour cent de la largeur de la liaison à partir de la gauche. Donc tous seront empilés les uns sur les autres. Nous les ciblerons individuellement pour changer la position de chacun. Donc, quand je vais recharger la page, vous pouvez voir pour le premier lien, par exemple, il y a un fond gris foncé prenant 25 pour cent du lien avec et ce sont en fait les étendues de forêt, mais ils sont tous assis sur l'un de l'autre. D' accord. Allons changer leurs positions pour couvrir toute la largeur du lien. Nous allons cibler chaque étendue individuellement. Je vais aller ici et dire « Span nième enfant aussi ». Et je vais ajouter à gauche 25 pour cent. Ainsi, il commencera à 25 pour cent de la largeur du lien à partir de la gauche. Donc maintenant, vous pouvez voir qu'il est maintenant déplacé vers la gauche et nous couvrons 50 pour cent du lien, pas 25 pour cent plus. Donc, je vais copier ceci, le coller à nouveau deux fois. Et je vais cibler la troisième portée. Changez à gauche à 50%. Puis la quatrième portée et le changement à gauche à 75 pour cent. Donc maintenant, vous pouvez voir que les quatre travées sont situées côte à côte. Chacun d'entre eux a 25 % des largeurs de liens. Et ensemble, ils sont 100% et couvrent le lien. instant, nous devons travailler sur l'effet de vol stationnaire. J' irai ici à l'intérieur du sélecteur de travée générale et j'ajouterai l'échelle de transformation y 0 afin que les travées disparaissent. Ensuite, en dessous de cela, je dirai que lorsque nous survolons les liens, nous apporterons quelques changements aux travées. Nous allons ajouter l'échelle de transformation y, une pour les retourner à leur taille d'origine à nouveau. Et pour que l'effet se produise en douceur, nous monterons ici et ajouterons une transition ou 0,5 seconde. Maintenant, n'est-ce pas ? Maintenant, quand je vais passer le curseur sur les liens, vous pouvez voir que les travées sont à l'échelle jusqu'à leur position d'origine. Mais cela se passe à partir du point central. Et nous voulons que ça arrive du haut centre. Donc, nous allons aller au sélecteur de span et nous allons ajouter l'onglet d'origine de transformation. Et maintenant, quand nous survolons à nouveau, ils sont à l'échelle du haut, pas du centre plus. Mais en ce moment, toutes les travées sont à l'échelle en même temps. On dirait que c'est un fond sombre, pas quatre. Nous voulons qu'ils soient mis à l'échelle l'un après l'autre, et nous pouvons gérer ce problème en utilisant la propriété de délai de transition. Donc, je vais aller ici à l'intérieur de la deuxième travée. Et je vais ajouter le délai de transmission zéro point 15 secondes. Ensuite, à l'intérieur du troisième, j'ajouterai le délai de transition 0,3 secondes. Ensuite, pour le quatrième, j'ajouterai le délai de transition zéro point pendant cinq secondes. Et maintenant, quand je passe la souris sur le lien, vous pouvez voir qu'ils sont à l'échelle l'un après l'autre, ce qui nous rapproche de notre effet terminé. Maintenant, il reste une chose, qui est de changer cette couleur rouge sur le texte du lien. Donc, je vais aller au sélecteur de balise d'ancrage, changer cette couleur rouge en gris foncé. Et en dessous, je dirai que lorsque nous survolons le lien, la couleur changera en blanc. Donc là, vous l'avez, un très bel effet de vol stationnaire. Et le truc cool à ce sujet, c'est que vous pouvez facilement le contrôler comme vous le souhaitez. Par exemple, vous pouvez ajouter plus de quatre travées dans changer la largeur. Et vous pouvez même changer la couleur de chaque plage. Alors jouons un peu et changeons quelques valeurs et voyons ce que nous pouvons obtenir. Au lieu de faire la largeur 25 pour cent et la hauteur 100%, Inverser cela. Je vais changer la largeur à 100% et la hauteur à 25 pour cent. Et maintenant, chaque travée aura toute la largeur et une hauteur égale à 25 pour cent de la hauteur de la liaison. Dans ce cas, nous voulons qu'ils soient assis l'un en dessous de l'autre. Donc, nous irons ici et changerons ces gauches en haut. Et comme ça, nous avons maintenant un effet totalement différent où la travée est assise l'une en dessous de l'autre, prenant toute la largeur et 25 pour cent de la hauteur. Allons aussi changer l'échelle y à l'échelle x et voir ce que nous obtiendrons. Maintenant, les travées seront mises à l'échelle le long de l'axe des x, pas de l'axe des y. Donc, si je vais planer, vous pouvez voir que cela nous donne un effet totalement différent, ce qui a toujours l'air vraiment bon. Et peut-être que nous pouvons changer l'origine de la transformation à gauche au lieu de l' onglet afin que les travées augmentent à partir de la gauche et non à partir du haut. Et tout comme cela, en utilisant des transformations CSS, nous pouvons obtenir une grande variété d'effets avec des changements très mineurs dans notre code. 51. 54 - Effet de menu bords mobiles de fond de la nature créatifs de 2 frontières de fond: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Donc, vous pouvez voir quand je survole le menu, ces deux soulignements apparaissent bien et nous donnent cet effet. Ainsi, le bleu souligné apparaît de la gauche et se déplace vers la droite, tandis que le rose apparaît de la droite et se déplace vers la gauche. C' est un effet facile mais agréable. Alors créons ça ensemble. Je vais commencer ici dans mon HTML en ajoutant un UL. Puis à l'intérieur, j'ajouterai un L, puis une balise d'ancrage à l'intérieur de cela. Et je vais copier ceci et le coller quatre fois. Ensuite, je dirai à la maison sur les services, le contact du portefeuille. Ok, maintenant je vais aller à mon CSS pour styler ce menu. Je vais cibler l'UL et ajouter le rembourrage 0. Affichez ensuite flex pour que l'élément de liste soit assis l'un à côté de l'autre. Ensuite, en dessous de cela, je vais cibler le LI à l'intérieur de l'URL, et j'ajouterai list-style, aucun pour supprimer les puces qui apparaissent en plus des éléments de la liste. Ensuite, j'ajouterai du remplissage, 10 pixels du haut et du bas, et 20 pixels de la gauche et de la droite. Cool. Maintenant, nous allons cibler les balises d'ancrage elles-mêmes et ajouter une décoration de texte. Aucun pour supprimer les soulignements. Puis la transformation du texte. En majuscules. Taille de la police : 20 pixels. Couleur. Cette couleur gris foncé. Et enfin, position. Parenté. Impressionnant. Donc maintenant, vous pouvez voir notre menu est à la recherche exactement comme nous le voulons. Maintenant, nous allons travailler sur les soulignements qui apparaissent et se déplacent. Lorsque nous survolons un élément de menu, nous utiliserons les pseudo-éléments avant et après pour créer ceux soulignés. Commençons par créer le premier en utilisant V avant pseudo élément. J' irai ici à l'intérieur de mon CSS et je dirai UL LI un deux-points avant. Et j'ajouterai du contenu. Chaîne vide, largeur, disons 15 pixels pour l'instant. Et la hauteur, cinq pixels. Couleur d'arrière-plan. Cette belle couleur bleue. Position. Absolu. En haut, 120% à gauche 0. Donc maintenant vous pouvez voir que nous avons notre ligne bleue avec la largeur de 15 pixels et une hauteur de 50 pixels. Et il est assis sous nos liens parce que nous avons dit que c'est la meilleure propriété à 120%. Ok, maintenant ajoutons l'autre ligne rose. Je vais juste copier le pseudo élément avant. Coller à nouveau et changer avant à après. Et je vais changer la couleur de fond à cette couleur rose. Et au lieu de gauche, je vais le changer pour évaluer. Et comme ça, nous avons maintenant le rose sur le côté droit de nos liens. Cool. Maintenant, nous allons travailler sur l'effet de vol stationnaire. Lorsque vous survolez l'un de ces liens, nous voulons que le soulignement bleu augmente jusqu'à ce qu'il devienne 50% des largeurs de liens et se déplace vers la droite en même temps. Et nous voulons aussi que le rose atteigne 50 pour cent des largeurs de maillons et se déplace vers la gauche. Alors faisons ça. Tout d'abord, je vais monter ici à l'intérieur du pseudo élément avant et changer la largeur à 0 au lieu de 15 pixels afin qu'il disparaisse. Ensuite, je ferai la même chose pour la ligne rose. Ensuite, je vais descendre ici et dire UL LI, un deux-points, planer le deux-points avant. Et je vais ajouter la largeur 50 pour cent et transformer traduire X 100%. Et pour que cet effet se produise en douceur, je vais monter ici à l'intérieur du pseudo élément avant et j'ajouterai une transition ou 0,5 seconde. Donc maintenant, quand je passe et survole un lien, vous pouvez voir la ligne bleue se déplace de gauche à droite et sa largeur devient 50 pour cent des largeurs de lien en même temps. Cool. Maintenant, faisons la même chose pour la ligne rose. Je vais copier ce bloc de code. Coller à nouveau, changer avant à après pour cibler la ligne rose. Et il suffit de changer la fonction Translate X en négatif 100% au lieu de 100% parce que nous voulions passer à gauche, pas à droite. Et enfin, je vais monter ici à l'intérieur du pseudo élément after et ajouter transition 0, 0, cinq secondes. Et maintenant, quand je vais et que je passe au-dessus de n'importe quel lien, vous pouvez voir la ligne bleue se déplace vers la gauche et la rose se déplace vers la droite, qui nous donne cet effet cool. 52. 55 - Effet de menu flou créatif de menu flou: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Comme vous pouvez le voir, quand je survole un lien dans notre menu, il devient plus grand et a un fond orange. Mais ce qui est cool, c'est que les autres liens deviennent flous. Donc, le lien sur lequel nous planons est mis au point et les autres liens deviennent flous. D' accord, créons cet effet. Je vais aller ici dans mon HTML et ajouter une URL. Puis à l'intérieur, j'ajouterai un LI, puis une balise d'ancrage. Et à l'intérieur, je dirai à la maison. Ensuite, je le reproduirai quatre fois. Et dire sur les services, le portefeuille et le contact. Donc ici, vous pouvez voir tous les éléments de la liste sont là. D' accord, je vais aller à mon CSS et cibler l'UL. Ensuite, j'ajouterai la marge 0, remplissage 0 aussi. Ensuite, afin d'afficher les éléments côte à côte, j'ajouterai le flex d'affichage. Ensuite, je vais cibler les éléments de liste à l'intérieur de l'UL et ajouter aucun style de liste. Marge, 0 pixels du haut et du bas, et 20 pixels de la gauche et de la droite. Ensuite, j'ajouterai la transition 0,5 secondes. Bon, maintenant je vais cibler les balises d'ancrage à l'intérieur des éléments de la liste et ajouter bloc d' affichage afin que nous puissions contrôler sa taille et le rendre plus grand. Ensuite, après cela, j'ajouterai la position. Parenté. Décoration de texte. Aucun. Rembourrage Cinq pixels. Taille de la police, 22 pixels, couleur blanche. Puis la transformation du texte, en majuscules. Et enfin la transition 0, 0, 0.3 secondes. Comme vous pouvez le voir, le menu est maintenant exactement comme nous le voulons. Ok, travaillons sur l'effet planant. Nous voulons que les liens deviennent plus grands et aient un fond orange lorsque nous survolons. Donc, je vais aller ici et dire quand nous survolons le lien, j'ajouterai l'échelle de transformation 1.5 afin qu'il devienne plus grand de 1,5 fois sa taille d'origine. Et maintenant vous pouvez voir quand je survole n'importe quel lien, il devient plus grand. D' accord, revenons pour créer le fond orange. Nous allons le créer en utilisant le pseudo élément avant. Donc je vais dire un deux-points avant. Et à l'intérieur, j'ajouterai du contenu. Chaînes vides, position absolue, haut, 0, gauche 0 aussi. Ensuite, nous voulons qu'il prenne la pleine taille de l'étiquette d'ancrage. Nous allons donc ajouter une largeur, 100%, et une hauteur 100% également. Ensuite, nous allons ajouter la couleur de fond, notre couleur orange. Puis enfin, transition zéro point trois secondes. Et maintenant vous pouvez voir que nous avons ce fond orange et qu'il couvre tous les liens, mais nous voulons qu'il apparaisse seulement lorsque nous survolons les liens. Donc, je vais revenir ici et ajouter l'échelle de transformation 0. Puis en dessous de cela, je dirai quand nous survolons le lien, Notre faire quelques changements sont arrivés à l'élément pseudo avant. J' ajouterai la transformation. Récupérez à un nouveau. Donc maintenant, vous pouvez voir le fond orange est maintenant caché. Et quand on survole, il redevient plus grand. Le problème est, est de couvrir le texte. Donc, revenons ici à l'intérieur du fond orange et ajoutons z-index négatif un. Donc maintenant, vous pouvez voir le texte apparaît devant l'arrière-plan orange. Maintenant, il ne nous reste qu'une chose, et c'est brouiller les autres liens lorsque nous survolons un lien. Alors revenons en arrière et faisons ça. Je vais revenir ici et ajouter un flou de filtre, cinq pixels. Donc, cela signifie simplement que lorsque nous survolons le puits, nous appliquerons ce filtre de flou aux balises d'ancrage. Nous voulons également que les liens soient un peu transparents. Donc, je vais ajouter l'opacité 0.2. Et maintenant, vous pouvez voir quand je survole les liens, tous deviennent flous et ils deviennent semi-transparents parce que nous avons réglé l'opacité à 0.2. Mais nous voulons que cela arrive aux liens qui ne planaient pas. Nous voulons donc que le lien que nous survolons apparaisse clairement. Donc, je vais revenir ici et ajouter l'opacité une pour qu'elle redevienne visible lorsque Filter flou 0. Donc, cela signifie que la longueur sur laquelle nous planons, nous aurons une opacité d'une et le filtre de flou sera 0, ce qui signifie qu'il sera clairement visible à nouveau. Et maintenant, quand je retourne en arrière et que je passe au-dessus d'un lien, vous pouvez voir qu'il devient plus grand et a un fond orange tandis que les autres liens deviennent flous. Et c'est exactement l'effet que nous recherchons. 53. 56 - Effet de menu créatif à l'aide de la propriété de transition delay la: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Vous pouvez voir lorsque je survole les éléments de menu, le lien se déplace vers le haut et un autre lien vient du bas et prend sa place. Ensuite, un fond vert se développe de gauche à droite. Ensuite, en survolant, le fond vert se rétrécit de droite à gauche. Et qui a attiré, il disparaît. Le lien se déplace vers le bas et l'autre entre par le haut. Alors commençons à créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un UL. Puis à l'intérieur, j'ajouterai une LLI, puis une balise d'ancrage à l'intérieur de cela. Et à l'intérieur de la balise d'ancrage, je vais ajouter une travée et dire la maison. Quand je vais ajouter une autre travée et dire à la maison aussi bien. Donc le premier groupe est celui que nous allons déplacer vers le haut et la deuxième travée va se déplacer du bas pour prendre sa place. D' accord. Je vais le copier, le coller quatre fois. Et comme vous pouvez le voir, je viens de changer le texte. Nous avons donc sur les services, le portefeuille et le contact. Bon, allons à notre CSS et commençons à coiffer notre menu. Je vais cibler l'UL. Ensuite, ajoutez l'affichage, flex. Ensuite, nous voulons que tous les éléments de la liste soient placés l'un au-dessus de l'autre. Donc, je vais ajouter une colonne de direction flexible. Justifiez ensuite le centre de contenu et alignez également le centre des éléments. D' accord, je vais cibler les éléments de la liste à l'intérieur de l'UL. Ensuite, j'ajouterai la position, relative, list-style, none, et la marge, cinq pixels. Maintenant, je vais cibler la balise d'ancrage à l'intérieur des éléments de liste. Ensuite, ajoutez la position, relative. Affichage, bloc, hauteur, 40 pixels. Décoration de texte Aucun. Lors du rembourrage. Cinq pixels du haut et du bas, et dix pixels de la gauche et de la droite. Quand je vais ajouter le poids de la police de 300, espacement des lettres aux pixels. Et enfin, débordement. Caché. Ok, nous allons travailler sur les travées à l'intérieur des balises d'ancrage. Je vais les cibler quand ajouter la position, la largeur relative. 100 % Hauteur 100 %. Donc, ils prennent toute la largeur et la hauteur de la balise d'ancrage. Ensuite, afin de faire passer la deuxième travée au bas de la première travée, nous ajouterons un flex d'affichage. Donc, ce que cela fera, c'est que la deuxième travée sera assise côte à côte avec la première s'il y a un espace. Mais puisque nous avons réglé la largeur de nos travées 2 à 100 %, la deuxième travée n'aura pas d'espace pour s'asseoir à côté de la première. Donc, il va se déplacer vers le bas et s'asseoir en dessous. Ensuite, je vais ajouter aligner les éléments centre et justifier le centre de contenu. Donc, comme vous pouvez le voir, les deuxièmes travées sont décalées et sont assis en dessous des premières parce qu'elles n'ont pas assez d'espace et nous ne pouvons pas les voir parce que nous avons dit débordement dans la balise d'ancrage ici pour cacher. Donc, si nous supprimons cela, vous pouvez voir que les deuxièmes travées apparaissent maintenant sous les premières. D' accord, j'ajouterai un trop-plein caché à nouveau pour que les deuxièmes travées disparaissent à nouveau. Continuons à coiffer les travées. Je vais aller ici et ajouter la transition 0,5 seconde. Ensuite, coloriez blanc, taille de police 20 pixels. Et enfin, le texte se transforme. Capitaliser. Maintenant, les travées sont beaucoup mieux. Maintenant, lorsque vous passez la souris sur la balise d'ancrage, nous voulons que la première travée se déplace de sa position vers le haut, et la seconde travée se déplace du bas et prenne sa place. Donc, je vais dire en survolant la balise d'ancrage, je veux apporter quelques modifications à la première travée. Donc, je dirai au nième enfant un. Et je vais ajouter la transformation, traduire Y négatif 100%. Alors maintenant, quand je pars et que je passe au-dessus du premier groupe, vous pouvez voir qu'il se déplace vers le haut et disparaît. Maintenant, nous voulons que la deuxième travée se déplace du bas et prenne sa place. Alors revenons en arrière et faisons ça. Je vais copier ce bloc de code collé et cibler la deuxième plage au lieu de la première. Et je ne changerai rien. Donc, quand je vais planer, maintenant vous pouvez voir quand la première travée se déplace vers le haut, la seconde travée vient du bas et prend sa place. Et c'est exactement l'effet que nous voulons. Ok, travaillons sur le fond vert. Je vais aller ici et dire un deux-points avant. Et puis j'ajouterai du contenu. Chaînes vides, position, absolu. En haut 0, à gauche 0. Et nous voulions prendre toute la largeur et la hauteur de l'étiquette d'ancrage. Donc, nous allons ajouter la largeur, 100%, hauteur, 100% aussi bien. Puis la couleur de fond, notre couleur verte. Et maintenant, vous pouvez voir que nous avons un fond vert qui a la même largeur et la même hauteur que la balise d'ancrage. Très bien, nous voulons que l'arrière-plan vert apparaisse seulement en survolant la balise d'ancrage. Donc, je vais revenir ici et ajouter l'échelle de transformation x 0. Et nous voulions grandir de gauche à droite. Nous allons donc ajouter l'origine de la transformation à gauche. Puis, enfin, la transition 0,5 seconde. Et en survolant le lien, nous voulions grandir à nouveau et apparaître. Donc, je vais dire en survolant le lien, je vais apporter quelques modifications à l'élément pseudo avant. J' ajouterai l'échelle de transformation x un à nouveau. Et maintenant, vous pouvez voir le fond vert est invisible. Et en survolant le lien, il croît à nouveau de gauche à droite parce que nous définissons sa propriété d'origine de transformation à gauche. Et en planant, il se rétrécit aussi de son côté gauche, mais nous voulions rétrécir de son côté droit. Donc, ce qu'on peut faire, c'est retourner ici et ajouter l'origine de la transformation, n'est-ce pas ? Et maintenant, vous pouvez voir quand je survole le lien, le fond vert se développe de gauche à droite. Et en le planant, il se rétrécit dans son côté droit. Bon, maintenant nous devons ajouter quelques retards de transition pour mélanger le fond vert, attendre que le premier groupe se déplace vers le haut. Donc, je vais aller ici et ajouter un délai de transition 0,5 seconde. Et maintenant, quand je retourne en arrière et que je passe le curseur sur le lien, vous pouvez voir que le lien se déplace en premier. Puis, après cela, le fond vert apparaît nous donnant l'effet que nous voulons. Le problème est que lorsque nous survolons, nous voulons que le fond vert se rétrécit en premier. Ensuite, nous voulons que le mouvement de la travée se produise. Nous voulons donc appliquer un délai de transition à la travée lors du vol stationnaire. Donc, je vais revenir ici à l'intérieur du sélecteur de travée et ajouter un délai de transition 0,5 seconde. Mais cela entraînera le déplacement de la portée à être retardé lors du vol stationnaire également. Donc, pour éviter cela et faire apparaître la balise d'ancrage immédiatement en survolant, nous pouvons aller ici et dire délai de transition 0. Ensuite, je ferai aussi la même chose ici sur la deuxième travée. Donc, ce que cela fera, c'est qu'il fera animer les deux travées immédiatement en planant. Et il n'y aura pas de retard. Mais en survolant, il attendra 0,5 seconde car nous définissons le délai de transition à 0,5 seconde ici. Donc, en planant, ils s'animent immédiatement. En survolant, nous attendrons. Et maintenant, quand je vais passer le curseur sur les liens, les travées se déplacent immédiatement et le fond vert apparaît. Et en survolant, le fond vert se rétrécit, puis le mouvement de travée se produit après cela. Et c'est exactement l'effet que nous voulons. 54. 57 à 2 frontières et un effet de menu de fond: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer une autre image, effet de vol stationnaire. Vous pouvez voir quand je survole l'image, cet effet se produit lorsque nous avons l'arrière-plan de superposition venir de droite à une position et vous pouvez voir qu'il a été tourné alors que c'était un moyen. Puis quand il revient, degré de rotation devient 0. Donc il n'est plus tourné. Ensuite, nous avons le lien venir du haut vers cette position. Ensuite, le paragraphe vient de la droite à sa position et a également tourné alors qu'il était un moyen. Puis enfin, le H2 vient du sommet à sa position. Alors commençons à créer cet effet. Vous pouvez voir que nous avons nos styles de la leçon précédente. Donc tout est à sa place et nous n' ajouterons que les styles responsables de notre effet ici. Commençons donc par l'arrière-plan de superposition. Je vais cibler le pseudo élément avant du conteneur. Et je vais ajouter la transformation, traduire 650 pixels. Ainsi, il sera traduit 650 pixels vers la droite le long de l'axe des x, puis négatif 100 pixels. Ainsi, il sera déplacé 100 pixels vers le haut. Sur l'axe des y. Je vais également ajouter tourner 180 degrés. Donc, il sera tourné de 180 degrés quand il est loin. Et enfin, j'ajouterai la transition 0, 0. Puis en dessous de ça. Et en survolant le div conteneur, je vais faire quelques changements qui leur sont arrivés avant pseudo élément. J' ajouterai la transformation, traduirai 0 et 0. Ainsi, il reviendra à sa position d'origine, puis fera pivoter 0 degrés. Donc, il retournera à 0, nous donnant l'effet que nous voulons. Et maintenant, vous pouvez voir l'arrière-plan est assis dans cette position, 650 pixels vers la droite et 100 pixels vers le haut. Et il est également tourné de 180 degrés. Et quand je passe la souris sur l'image, vous pouvez voir que l'arrière-plan retourne à sa position d'origine tout en retournant à 0 degrés, qui nous donne ce bel effet. Ok, allons travailler sur le H2. Je vais le cibler et ajouter la transformation, traduire y négatif 150 pixels. Ainsi, le h2 sera déplacé vers le haut de 150 pixels. Ensuite, j'ajouterai la transition toutes les 0,2 secondes. Ensuite, en survolant le div conteneur, je ciblerai le H2. Et ajouter transformer traduire Y 0 pixels de sorte qu'il retourne à sa position. J' ajouterai également un délai de transition 0,5 secondes afin qu'il apparaisse après l'affichage de l'arrière-plan. Et maintenant, vous pouvez voir le H2 est assis sur le dessus de l'image. Et quand je passe la souris sur l'image, elle pèse 0,5 seconde, puis se déplace à nouveau à sa position. Et remarquez que lorsque je survole, il a immédiatement déplacé vers le haut à nouveau. Il ne se réveille pas 0,5 seconde en survolant car nous avons ajouté le délai de transition uniquement en survolant. D' accord, passons au paragraphe. Il a été déplacé vers la droite et faire pivoter. Donc je vais le cibler. Ensuite, ajoutez la transformation, traduisez X 300 pixels, puis faites pivoter 90 degrés. Ensuite, j'ajouterai la transition ou 0,2 secondes. Ensuite, en survolant le div conteneur, je ciblerai le paragraphe. Ensuite, j'ajouterai la transformation, traduirai X à 0 à nouveau et retournerai à 0 aussi. Ensuite, en dessous de cela, j'ajouterai le délai de transition 0,4 secondes. Et maintenant, vous pouvez voir que le paragraphe a été déplacé vers la droite 300 pixels et il est tourné de 90 degrés. Et en survolant l'image, elle pèse 0,4 seconde. Ensuite, il retourne à 0 degrés tout en revenant à sa position d'origine. Et quand je survole, il revient immédiatement à la vitesse et tourne. Enfin, nous allons travailler sur le lien. Je vais revenir en arrière et ciblé. Ensuite, je vais ajouter la transformation, traduire y négatif 300 pixels. Ainsi, il sera déplacé vers le haut de 300 pixels, puis transition 0, 0, 0,2 secondes. Et encore une fois, en survolant le conteneur div, je vais cibler la balise d'ancrage et ajouter la transformation, traduire Y 0 pixels, sorte qu'il retourne à sa position. Ensuite, j'ajouterai le délai de transition 0,3 secondes. Et maintenant, vous pouvez voir le lien est assis sur le dessus de l'image. Et quand je survole, le lien pèse 0,3 seconde, puis descend à sa position d'origine. Maintenant, je vais revenir en arrière et cibler le div conteneur et ajouter un débordement caché. Et maintenant, vous pouvez voir tous les éléments sont invisibles. Et quand nous survolons l'image, ils apparaissent à nouveau. Et l'effet que nous voulons se passe parfaitement. 55. 58 - Effet de menu coupeur de frontière: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Vous pouvez voir lorsque nous survolons un lien dans ce menu, cet effet cool se produit où nous avons ces quatre petites bordures jaunes qui apparaissent. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un UL. Puis à l'intérieur, un LI, puis une étiquette d'ancrage. Et je dirai à la maison. Ensuite, j'ajouterai deux travées à l'intérieur de la balise d'ancrage à côté du texte. Donc, nous allons utiliser ces travées degré les quatre frontières entourant les liens, et nous allons voir comment. Ensuite, je vais copier cet élément de liste, coller à nouveau quatre fois. Et je dirai au sujet des services. Contact. Voici les éléments du menu. Allons à notre CSS et stylisez-les. Je vais cibler l'UL. Quand je vais ajouter le rembourrage 0. Ensuite, afin de rendre l'élément de liste assis côte à côte, j'ajouterai un flex d'affichage. Ensuite, je vais cibler les éléments de la liste et ajouter aucun style de liste. Puis rembourrage 10 pixels du haut et du bas et 40 pixels de la gauche et de la droite. Ensuite, je vais cibler la balise d'ancrage et ajouter une décoration de texte. Aucun. Lorsque le texte se transforme. En majuscules. Taille de la police 24 pixels, où en couleur, blanc, position, relative. Et enfin, rembourrage, cinq pixels. Et maintenant, vous pouvez voir que le menu est tellement mieux. Maintenant, je veux que la couleur des liens change en jaune lorsque vous passez la souris sur eux. Donc, je vais dire où planer sur le lien. Je vais changer la couleur pour cette couleur jaune. Bon, continuons. Créons les quatre petites bordures qui entourent les liens. Nous allons le faire en utilisant les pseudo-éléments avant et après des deux travées que nous avons ajoutées à l'intérieur du lien. Alors je dirai « span ». Premier enfant, côlon avant. Donc, ce sélecteur cible ici cela avant pseudo-élément de la première travée. Et à l'intérieur de cela, je vais ajouter du contenu, des chaînes vides, la position absolue. Et ce sera la frontière qui se trouve dans le coin supérieur gauche. Donc, nous allons ajouter le top 0 et gauche 0 aussi. Puis largeur huit pixels et hauteur huit pixels. Ensuite, j'ajouterai la couleur de fond. Transparent car nous ne voulons pas que l'arrière-plan apparaisse. On veut juste les frontières. Nous ajoutons maintenant bordure, deux pixels, jaune massif. Et la frontière est à gauche. Deux pixels solides. Notre couleur jaune aussi. Et enfin, j'ajouterai la transition 0,2 secondes. Donc maintenant vous pouvez voir que nous avons ces deux petites bordures dans le coin supérieur gauche, et ce sont les bordures gauche et supérieure. D' accord, créons les bordures en haut à droite. Donc, je vais revenir en arrière et copier ce bloc de code, coller à nouveau, et changer avant à après. Donc, nous allons cibler le pseudo élément after de la première travée. Quand à l'intérieur, je changerai de gauche à droite pour le positionner sur la droite. Ensuite, je changerai aussi la frontière laissée ici pour le taux frontalier. Vous pouvez donc voir que nous avons maintenant ces bordures dans le coin supérieur droit. D' accord, créons la bordure qui se trouve dans le coin inférieur gauche. Je vais les coller avant le code pseudo-élément à nouveau. Ensuite, je vais cibler le pseudo élément avant du dernier enfant, pas le premier. Puis à l'intérieur, je vais changer de haut en bas parce que nous voulons que ces bordures apparaissent dans le coin inférieur gauche. Ensuite, je vais aussi changer la frontière en bas de la frontière. Et comme vous pouvez le voir, nous avons la frontière assise dans le coin inférieur gauche. Créons la dernière bordure qui se trouve dans le coin inférieur droit. Je vais copier ce code. Puis collez-le à nouveau et ciblez le dernier enfant du pseudo élément after. Ensuite, changez de gauche à droite. Et aussi changer la frontière gauche à la frontière droite. Et maintenant, comme vous pouvez le voir, nous avons la dernière bordure qui se trouve dans le coin inférieur droit. D' accord ? Enfin, nous voulons créer notre effet de vol stationnaire. Lorsque vous passez le curseur sur les liens. Nous voulons que les frontières changent de position pour nous donner l'effet que nous voulons. Alors faisons ça. Je dirai en survolant le lien, je ciblerai le pseudo élément avant de la première travée. Et si vous vous souvenez, c'est la bordure qui se trouve dans le coin supérieur gauche. Quand à l'intérieur de cela, je changerai haut en négatif 10 pixels et gauche à négatif 10 pixels aussi bien. Et maintenant, quand je vais et que je passe le curseur sur le lien, vous pouvez voir la bordure dans le coin supérieur gauche se déplace et change sa position à cette nouvelle position. Très bien, faisons aussi la même chose pour les autres frontières. Je vais revenir à mon CSS et copier ce code. Et encore une fois et ciblez les pseudo-éléments après cette fois. Et si vous vous souvenez, c'est la frontière qui se trouve dans le coin supérieur droit, alors je changerai de gauche à droite. Quand je vais coller le code à nouveau. Et Cibler D avant un pseudo élément du dernier enfant avec le temps, puis changer de haut en bas. C' est donc la bordure qui se trouve dans le coin inférieur gauche. Et je vais coller le code une fois de plus et cibler les pseudo-éléments after du dernier enfant. Et je changerai de haut en bas et de gauche à droite. Et maintenant, quand je passe la souris sur n'importe quel lien, vous pouvez voir que les quatre frontières changent de position, ce qui nous donne l'effet que nous voulons. Il ne reste plus qu'une chose à rendre les frontières invisibles. Ensuite, faites-les apparaître seulement lorsque nous survolons. Alors revenons en arrière et faisons ça. Je vais définir l'opacité pour toutes les frontières à 0. Et en planant, je remettrai l'opacité à une. Et maintenant, vous pouvez voir les frontières sont invisibles. Et lorsqu'ils survolent un lien, ils apparaissent à nouveau et se déplacent de leur position à cette nouvelle position, qui nous donne notre effet cool. 56. 59 - Effet de rotation créatif de frontière de menu: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Vous pouvez voir quand je survole un lien dans le menu, cet effet se produit où nous avons les bordures haut et gauche tournent 360 degrés et ils rétrécissent en même temps jusqu'à ce qu'ils deviennent plus petits. Le même effet se produit également aux bordures droite et inférieure. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un UL. Puis à l'intérieur de cela, j'ajouterai un LI, puis une balise d'ancrage à l'intérieur de cela. Et je dirai à la maison. Ensuite, je vais copier l'URL, coller à nouveau quatre fois, et dire sur les services, l'équipe et les contacts. Quand j'irai à ma cible CSS, l'UL, et j'ajouterai la marge 0, remplissage 0 aussi. Ensuite, afin de rendre le lien assis côte à côte, j'ajouterai un flex d'affichage. D' accord, maintenant je vais cibler le LI à l'intérieur de l'UL et ajouter aucun style de liste. Ensuite, je vais cibler la balise d'ancrage et ajouter la position relative. Puis afficher le bloc, le remplissage, 15 pixels du haut et du bas, et 30 pixels de la gauche et de la droite. Ensuite, j'ajouterai la marge, 0 du haut et du bas, et 15 pixels de gauche et de droite. Ensuite, j'ajouterai une décoration de texte. Aucun. Transformation de texte en majuscules. Et enfin, la couleur, cette couleur jaune. Très bien, vous pouvez voir les liens sont maintenant beaucoup mieux. Revenons en arrière et créons les frontières. Nous commencerons par les frontières qui sont situées sur les côtés supérieur et gauche des liens. Et nous allons utiliser le pseudo élément avant pour le faire. Je vais aller ici et sélectionner le pseudo élément avant du lien. Ensuite, j'ajouterai du contenu. cordes. Position absolue, top 0, gauche 0 aussi. Lorsque la largeur 100%, et la hauteur 100% aussi bien. Ajoutons les bordures. Je vais ajouter la bordure supérieure deux pixels. Solide. Cette couleur jaune. Lorsque la bordure gauche, deux pixels, jaune solide aussi. Ensuite, j'ajouterai la transition 0,5 secondes. Et enfin la boîte de taille de la bordure de la boîte. Et comme vous pouvez le voir, nous avons maintenant les bordures sur les côtés supérieur et gauche. Bon, commençons à créer notre effet. Je reviendrai ici et je dirai en survolant la balise d'ancrage, j'apporterai quelques modifications à l'élément pseudo avant. Je vais définir sa largeur à 15 pixels et sa hauteur à 15 pixels, sorte que le pseudo élément avant rétrécit et les bordures se rétrécir avec lui. Donc maintenant, quand je vais et passe le curseur sur les liens, vous pouvez voir la bordure rétrécir et devenir plus petit jusqu'à ce qu'ils aient une largeur et une hauteur de seulement 15 pixels. Maintenant, faisons pivoter les bordures tout en les rétrécissant également. Je vais aller ici sur l'effet stationnaire et ajouter la transformation, faire pivoter 360 degrés. Ensuite, je veux qu'il tourne le long du côté gauche. Donc, je vais aller ici à l'intérieur du pseudo élément avant et ajouter l'origine de la transformation à gauche. Et maintenant vous pouvez voir quand je survole les liens, nous tournons tout en rétrécissant, qui nous donne cet effet cool. Très bien, créons les Bordures droite et inférieure. Je vais utiliser le pseudo élément after pour les créer. Donc, je vais juste copier le pseudo élément avant, coller et le changer avant à après. Je vais également changer de haut en bas et de gauche à droite. Je vais également changer la frontière supérieure deux frontière inférieure et frontière gauche à la frontière taux frontière. Ensuite, nous voulons le faire tourner le long du côté droit. Donc, je vais changer la propriété d'origine de transformation à droite au lieu de gauche. Donc maintenant, vous pouvez voir que nous avons créé les bordures droite et inférieure en utilisant le pseudo élément after. Créons l'effet de vol stationnaire. Je vais revenir en arrière et copier l'effet planant sur le pseudo élément avant. Coller et changer avant à après. Et maintenant, quand je retourne en arrière et que je passe au-dessus des liens, vous pouvez voir que les bordures droite et inférieure sont également rétrécies tout en tournant autour du côté droit. Et maintenant, nous avons l'effet exact. On veut. 57. 60 - Effet de menu créatif coloré coloré: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Vous pouvez voir que nous avions ces liens et leur couleur est transparente et nous avons un trait de texte autour d'eux. Et quand je survole un lien, cet effet se produit là où nous avons trois couches des liens. Le calque blanc d'origine dont la couleur change en blanc, et un calque rouge sur le dessus, puis un calque bleu clair sur les deux. C' est un effet vraiment cool. Alors commençons à le créer. Je vais aller ici dans mon HTML, ajouter un UL. Puis à l'intérieur de cela, j'ajouterai un LI, puis une balise d'ancrage, et je dirai la maison. Ensuite, j'ajouterai du texte de données, à la maison aussi. Ensuite, je vais copier cet élément de liste, coller à nouveau quatre fois, et dire à propos des services, l'équipe et du contact. Ensuite, je vais aller à mon CSS, cibler l'UL et ajouter la marge 0, remplissage 0 aussi. Ensuite, je vais cibler les éléments de liste à l'intérieur de l'UL et ajouter aucun style de liste. Ensuite, je vais cibler les liens et ajouter la position relative bloc d'affichage. Et nous voulons juste un coup autour, donc nous allons ajouter de la couleur, transparente. Et puis nous allons ajouter webkit. Coup de texte, un pixel blanc. J' ajouterai la taille de la police, 80 pixels, poids de la police, 900. Et enfin, la décoration de texte, aucun. Et maintenant, vous pouvez voir les liens ressemblent exactement à ce que nous voulons. Ils ont une couleur transparente et un trait blanc autour d'eux. Très bien, créons le calque rouge qui se trouve au-dessus du lien. Et nous allons le créer en utilisant le pseudo élément avant. Donc, je vais aller ici et cibler cela et ajouter du contenu. UN TTR. Texte de données pour saisir le texte à l'intérieur de l'attribut de texte de données de chaque lien. Ensuite, j'ajouterai la position, absolue, puis en haut 0, à gauche 0, et la transition 0,5 secondes. D'accord ? Lorsque vous passez le curseur sur le lien, nous voulons que le pseudo élément avant apparaisse et prenne le fond rouge. Donc, je vais dire en survolant la balise d'ancrage, je vais sélectionner le pseudo élément avant et ajouter de la couleur. Cette couleur rouge. Puis Z index un, puis webkit texte tracé un pixel noir. Donc, nous aurons un coup noir autour du fond rouge. Puis enfin, j'ajouterai la transformation, traduirai 10 pixels le long de l'axe x vers la droite et 10 pixels négatifs le long de l'axe y vers le haut. Et maintenant, vous pouvez voir quand je survole les liens, ce fond rouge apparaît et se déplace en haut à droite de dix pixels, qui nous donne ce bel effet. Ok, on va travailler sur la couche bleu clair. Nous allons le créer en utilisant le pseudo élément after. Donc, je vais aller ici et ajouter un deux-points après, à côté de l'élément pseudo avant. Ensuite, je vais copier l'effet de vol stationnaire. Collez-le à nouveau, et sélectionnez le pseudo élément after au lieu de l'avant. Et je vais changer la couleur pour cette couleur bleu clair. Ensuite, je vais changer l'index z à deux au lieu d'un. Ensuite, je vais modifier la propriété de transformation à 20 pixels et 20 pixels négatifs. Donc, il sera déplacé plus vers le haut et vers la droite. Maintenant, vous pouvez voir lorsque je survole les liens, le calque bleu clair apparaît et se déplace dans le coin supérieur droit du calque rouge, qui nous donne cet effet cool. La seule chose qui reste maintenant est de changer la couleur du premier calque en blanc au lieu de transparent en survolant. Donc, je vais revenir en arrière et dire, quand nous survolons le lien, j'ajouterai la couleur blanche. Ensuite, le trait de texte webkit, un pixel, noir. Puis, enfin, la transition 0,5 seconde. Et maintenant, vous pouvez voir lorsque je survole les liens, le premier calque a maintenant une couleur blanche et un trait de texte noir. Et c'est exactement l'effet que nous voulons. 58. 62 - Effet de cartes de traduction de carte de carte de traduction de fond: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de vol stationnaire de carte. Vous pouvez voir que nous avons cette carte qui est un fond blanc avec une ombre de boîte autour d'elle, séparant du fond blanc du corps. Et il contient du contenu. Et nous avons aussi cette fine ligne rose qui se trouve sur le fond. Et en survolant la carte, la ligne rose devient plus grande et couvre la carte et la couleur du texte devient blanche en même temps. Alors commençons à créer ça. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de carte. Puis à l'intérieur, un autre avec une classe de contenu. Et à l'intérieur, je vais ajouter un H2 et dire design. Puis ci-dessous que je vais ajouter un paragraphe et ajouter du texte Lorem Ipsum. Puis enfin une étiquette d'ancrage. Et dites Lire la suite. Bon, allons à notre CSS et sélectionnez la div de la carte. J' ajouterai la position, la largeur relative, 320 pixels. Puis panoramique, 40 pixels. Couleur de fond, blanc. Puis enfin, box-shadow, 010 pixels, 30 pixels. Et enfin RGBA, 0, 0, 0, 0, 0,1. Donc maintenant vous pouvez voir que nous avons ce fond blanc qui a cette ombre de boîte autour d'elle. Ok, nous allons travailler sur le fond rose qui se trouve au bas de la carte. Nous allons le créer en utilisant le pseudo élément avant. Donc, je vais le cibler et ajouter du contenu. Chaînes vides. Position absolue, gauche, 0, bas. Et nous voulons le positionner juste cinq pixels au-dessus de la ligne inférieure de la carte. Donc, je vais ajouter calc négatif 100% plus cinq pixels. Et puis nous avons voulu prendre la pleine taille de la voiture. Donc, nous allons ajouter la largeur, 100%, hauteur, 100% aussi bien. Puis la couleur de fond, cette couleur rose, puis z-index un, et enfin la transition, 0,5 seconde. Très bien, vous pouvez voir que le fond rose est assis en bas. Allons ici à l'intérieur de la div de la carte et ajoutons un débordement caché. Et maintenant, vous pouvez voir le fond rose est positionné en bas et seulement cinq pixels de celui-ci sont visibles. Maintenant, lorsque vous passez la souris sur la carte, nous voulons que le fond rose se déplace vers le haut et cache le carton blanc. Donc, je vais retourner ici et dire, en survolant la carte. Je vais sélectionner le pseudo élément avant, qui est le fond rose. Et j'ajouterai le bas 0. Et maintenant, quand je retourne en arrière et que je passe au-dessus de la carte, le fond rose se déplace dans, se trouve exactement au-dessus de la carte. D' accord, continuons à travailler et nous allons revenir en arrière et cibler le div de contenu. Ensuite, j'ajouterai la position, relative, transformation du texte, majuscule, couleur. Cette couleur grise. Ensuite, afin de faire apparaître le contenu devant le fond rose, j'ajouterai l'index Z 2. Et enfin, j'ajouterai la transition 0,5 seconde. Et maintenant, le contenu a cette couleur grise. Et quand nous avons plané, le contenu apparaît devant le fond rose. Bon, revenons en arrière et sélectionnons le H2. Ajoutez ensuite la marge inférieure dix pixels, et la marge supérieure 0. Puis taille de police 30 pixels. Ensuite, je vais cibler le paragraphe et ajouter la taille de police 18 pixels. Puis enfin, je vais cibler la balise d'ancrage et ajouter la marge supérieure 10 pixels. Lorsque la taille de police de 14 pixels, affichez la décoration de texte en bloc en ligne. Aucun. Couleur. Cette couleur grise. Rembourrage Six pixels du haut et du bas, et dix pixels de la gauche et de la droite. Puis font-weight, 600, couleur de fond, blanc. Et enfin, l'ombre de boîte 0, deux pixels, 20 pixels, RGBA, 0, 0, 0, 0, 0,05. Et maintenant, vous pouvez voir que le lien est beaucoup mieux. Enfin, lorsque nous survolons la carte, nous voulons que la couleur du texte passe au blanc. Donc, j'irai ici et je dirai, en survolant la balise d'ancrage, je changerai la couleur du texte en blanc. Et maintenant, quand je retourne en arrière et que je survole, vous pouvez voir que la couleur du texte change en blanc, ce qui nous donne l'effet exact que nous voulons. 59. 63 - Effet de cartes expansible créatif créatif: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de vol stationnaire de carte. Vous pouvez voir que nous avons cette image qui se trouve sur un fond blanc. Et quand nous survolons cela, la carte se développe verticalement et l'image se déplace vers le haut. Ensuite, ce texte vient du haut et se déplace à sa position. C' est un effet vraiment cool. Voyons donc comment nous pouvons le créer. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de carte. Ensuite, à l'intérieur de cela, je vais ajouter un autre div et lui donner une classe de boîte d'image. Donc, évidemment, ce sera la div qui contient notre image. Ensuite, à l'intérieur, nous ajouterons notre image. Ensuite, en dessous de la div de la boîte d'image, nous allons ajouter un autre avec une classe de contenu pour ajouter le texte qui apparaît en survolant à l'intérieur de cette div. Ensuite, je vais ajouter un H2 et dire la carte hover. Puis enfin un paragraphe avec un texte fictif Lorem Ipsum. Bon, allons à notre CSS pour le style. Nous allons créer le fond blanc qui se trouve derrière l'image en utilisant la carte div. Donc je vais cibler ça. Et j'ajouterai la position relative. Puis largeur, 300 pixels, hauteur 260 pixels. Ensuite, j'ajouterai border-rayon, 10 pixels. Ensuite, pour que le fond blanc soit visible devant le corps blanc, nous ajouterons box-shadow, 0 pixels, cinq pixels, 20 pixels. Puis RVB a, 0 , 0, 0, 0, 0.5. Et enfin, j'ajouterai la transition 0,3 secondes. Très bien, comme vous pouvez le voir, le fond blanc n'apparaît pas parce que l'image le couvre, mais il est là. Donc, si je retourne en arrière et que je change sa largeur à 800 pixels, par exemple, vous pouvez voir qu'il est maintenant visible. D' accord ? Je vais revenir en arrière et régler la largeur à 300 pixels à nouveau. Ensuite, j'ajouterai du rembourrage, 20 pixels du haut et du bas et 40 pixels de la gauche et de la droite. Et vous pouvez voir que le fond blanc est visible maintenant grâce au rembourrage que nous avons ajouté à lui. D' accord, ciblons la div avec la classe de la boîte d'image pour styliser l'image. J' ajouterai la position, largeur relative, 100%, la hauteur, 100% aussi bien. Ensuite, je vais cibler l'image elle-même et ajouter de la largeur, 100% de sa largeur de conteneur et de son rayon de bordure, 10 pixels. Comme vous pouvez le voir, l'image est maintenant réduite. 60. 64 - Effet de cartes de marvel créative captant au capain: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de vol stationnaire de carte. Comme vous pouvez le voir, nous avons cette carte qui a une image de capitaine Marvel au centre. Et en survolant la carte, cet effet se produit là où l'image devient plus grande et se déplace vers la droite. Et en même temps, ce texte sur la gauche apparaît et se déplace du centre pour être positionné sur la gauche. Et comme vous pouvez le voir, il contient un titre, un paragraphe et un lien. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de carte. Ensuite, à l'intérieur de cela, j'ajouterai un autre div avec la classe de contenu. Et à l'intérieur, nous allons ajouter le contenu. Je commencerai par ajouter un H2 et dire Capitaine Marvel. Puis en dessous, j'ajouterai un paragraphe et ajouterai du texte fictif. Puis enfin une étiquette d'ancrage. Et dire lire plus. C' est tout pour le contenu, je vais aller en dessous du div de contenu et ajouter une image. Ensuite, j'ajouterai notre image. Comme vous pouvez le voir, nous avons le contenu en haut et notre image est en bas. Bon, passons à notre CSS et ciblez la div de la carte. Ensuite, j'ajouterai la position, la largeur relative, 500 pixels et la hauteur 300 pixels. Ensuite, j'ajouterai un flex d'affichage pour rendre le contenu et l'image assis côte à côte, comme ça. Ensuite, nous voulons leur envoyer verticalement. Donc, je vais revenir en arrière et ajouter des éléments d'alignement. Centre. Je vais également ajouter un dégradé linéaire de fond. Et j'ajouterai cette valeur de gradient. Puis enfin, j'ajouterai border-rayon 20 pixels. Et maintenant, vous pouvez voir la carte div a maintenant ce fond dégradé et un rayon de bordure autour des coins. Ok, travaillons sur notre image et centrons-la à l'intérieur de la carte. Je vais le cibler et ajouter la position absolue en bas 0. Et afin de le centrer, je vais ajouter à gauche 50%. Puis transformer, traduire X négatif 50 pour cent. Ensuite, nous voulons diminuer un peu sa hauteur. Donc, je vais ajouter une hauteur de 400 pixels. Et enfin, transition 0,5 seconde. Et maintenant, vous pouvez voir l'image est centrée à l'intérieur du Cardiff et sa hauteur est plus petite. Ok, travaillons sur l'effet planant. Lorsque vous passez la souris sur la carte, nous voulons que l'image devienne un peu plus grande et ensuite passer à droite. J' irai donc dire, quand on survolera la carte. Je vais faire quelques changements qui sont arrivés à l'image. Je vais définir sa hauteur à 450 pixels au lieu de 400 pixels. Je vais également ajouter gauche 80 pour cent pour le déplacer vers la gauche. Et maintenant, quand je retourne en arrière et que je passe au-dessus de la carte, vous pouvez voir que l'image devient plus grande et se déplace pour s'asseoir sur le côté droit et le côté gauche devient vide parce que c'est là que nous allons positionner le contenu. Revenons donc à notre CSS et ciblons le div de contenu. Ensuite, nous allons ajouter la position relative 40% de la largeur de la carte. Puis à gauche, 20 pour cent. Couleur, blanc. Transformer le texte, mettre en majuscule. Et enfin, transition 0,5 seconde. Et maintenant, vous pouvez voir que le contenu est assis 20% de la largeur de la carte à partir de la gauche, donc nous voulons le cacher. Et en survolant la carte, nous voulons qu'elle apparaisse à nouveau et se déplace pour s'asseoir sur la gauche. Donc, je vais revenir à l'intérieur du div de contenu et ajouter l'opacité 0. Puis en dessous de cela, je dirai en survolant la carte, je vais sélectionner le contenu et ajouter à gauche 5% au lieu de 20%. Et l'opacité encore une fois. Et maintenant, vous pouvez voir que le texte est caché. Et en survolant la carte, le texte apparaît à nouveau et se déplace pour s'asseoir sur la gauche. Il ne reste plus qu'une chose à faire maintenant, c'est styliser les éléments à l'intérieur du contenu. C' est ce que je vais cibler le H2 et ajouter la marge 0, remplissage 0 aussi. Ensuite, je vais cibler le paragraphe et ajouter une marge inférieure de 20 pixels. Puis enfin, je vais cibler la balise d'ancrage et ajouter la position. Parenté. Affichage. Couleur du bloc en ligne. Cette couleur gris foncé. Puis rembourrage, cinq pixels du haut et du bas et dix pixels de la gauche et de la droite. Puis fond, blanc, décoration de texte, aucun. Et enfin, border-rayon 10 pixels. Donc maintenant, vous pouvez voir les éléments de contenu et le lien sont beaucoup mieux. Et nous avons maintenant terminé ce bel effet de carte. C' était simple mais cool. Alors je te verrai dans la prochaine leçon. 61. 65 - Effet de cartes de frontière créatives: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de vol stationnaire de carte. Vous pouvez voir que nous avions ce fond bleu foncé avec le numéro 88 dessus. Et en survolant cela, le fond bleu se rétrécit et se transforme en un petit cercle avec une bordure bleue autour de lui. Et le nombre 88 devient plus petit et sa couleur change en bleu foncé. En outre, ce texte apparaît ici, et nous avons un titre, un paragraphe et un lien. D' accord, créons cet effet. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de carte. Puis à l'intérieur, j'ajouterai un autre div avec une classe de visage et de face un. Donc, ce sera le div qui contient le titre et le paragraphe et le lien. Très bien, à l'intérieur, je vais ajouter un H2 et dire des services. Puis en dessous, j'ajouterai un paragraphe et ajouterai du texte fictif. Et enfin une étiquette d'ancrage. Et dites-en lire plus. Puis en dessous de ce div, j'ajouterai un autre div avec la classe de phase et de phase deux. Donc, ce sera la div qui a un fond bleu foncé. Et à l'intérieur, j'ajouterai un H2 et ajouterai le numéro 88. Ok, alors je vais passer à notre CSS et cibler la div avec la classe de carte. Et ajouter la position, la largeur relative, 300 pixels, 400 pixels, puis l'arrière-plan, blanc. Et enfin la transition, 0,5 seconde. Bon, maintenant nous avons un fond blanc qui est centré à l'intérieur du navigateur. En survolant cette carte, nous voulions avoir une ombre de boîte. Donc, je vais dire en survolant la div avec la classe de la carte, j'ajouterai box-shadow, 030 pixels, 50 pixels, et RGBA. 0, 0, 0, 0 point vers. Et maintenant, quand je passe la souris sur la carte, nous avons cette belle ombre de boîte sous la carte. Bon, continuons. Je vais cibler la div avec la classe de visage. Et cette classe est appliquée à la fois à la première et à la deuxième phase. C' est donc une classe commune. Ensuite, j'ajouterai la position absolue, top 0, gauche 0 aussi. Ensuite, nous voulions prendre la pleine taille de la div de la carte. Donc, nous allons ajouter la largeur 100% et la hauteur 100% aussi bien. Je vais ajouter un flex d'affichage. Justifiez ensuite le contenu. Centrer le texte horizontalement et aligner les éléments au centre pour le centrer verticalement. Et comme vous pouvez le voir, le texte est maintenant centré horizontalement et verticalement. Ok, nous allons travailler sur la première phase qui a notre contenu. Je vais cibler la div avec la classe de la phase un, et j'ajouterai du remplissage, 20 pixels. Puis le texte aligner le centre pour centrer la couleur d'arrière-plan du texte en blanc. Et enfin, la couleur, cette couleur bleu foncé. Ensuite, je vais cibler le H2 à l'intérieur de cette div. Et je vais ajouter la marge supérieure 80 pixels. Il y aura donc assez d'espace au-dessus du H2 pour que le numéro 88 s'installe à l'intérieur. Nous allons également styler la balise d'ancrage. Je vais le cibler. Et ajoutez l'affichage, inline-block. Ensuite, faites une marge supérieure de 20 pixels pour obtenir un espacement entre elle et le paragraphe. Puis rembourrage cinq pixels du haut et du bas et dix pixels de la gauche et de la droite. Puis texte-décoration. Aucun. Couleur. Ce bleu foncé. Et enfin, frontière. Deux pixels, solide. Notre couleur bleu foncé. Transformation de texte Var1. Majuscule, poids de la police, gras. Et enfin la transition 0,3 secondes. Et comme vous pouvez le voir, la balise d'ancrage est beaucoup mieux. Ok, nous allons styler la deuxième phase. Maintenant, je vais le cibler et ajouter la couleur de fond. Notre couleur bleu foncé, puis transition 0,5 seconde. Et maintenant, vous pouvez voir que nous avons ce fond bleu foncé qui se trouve au-dessus du premier. Vendons aussi le H2 à l'intérieur. Je vais le cibler et ajouter la taille de la police, 120 pixels, couleur blanche. Et enfin la transition 0,5 seconde. Ok, nous allons travailler sur l'effet planant. Maintenant. On va planer sur la carte. Nous voulons que ce fond bleu diminue et devienne un cercle. Donc, je vais dire en survolant la carte, je vais sélectionner la deuxième phase et ajouter serré 80 pixels. Largeur 80 pixels, puis rayon de bordure, 50 pour cent pour en faire un cercle. Et comme vous pouvez le voir, lorsque nous survolons, l'arrière-plan devient plus petit, entre dans un cercle. Positionnons-le correctement. Je vais revenir en arrière et ajouter les 40 premiers pixels. Gauche. 50 pixels. Puis transformez, traduisez X négatif 50% pour le centrer horizontalement. Ensuite, j'ajouterai la couleur de fond, transparente. Et enfin, bordure, deux pixels, solide, notre couleur bleu foncé. Et maintenant, quand je passe la souris sur la carte, vous pouvez voir que le cercle est maintenant positionné correctement au-dessus de la div de contenu. Maintenant, nous allons maintenant le H2. En survolant, je dirai que lorsque nous survolons la div de la carte, je sélectionnerai le H2 qui est à l'intérieur de la deuxième phase. Et je changerai sa couleur pour notre couleur bleu foncé. Et j'ajouterai la taille de la police 32 pixels. Et maintenant, quand je retourne en arrière et que je passe en vol stationnaire, vous pouvez voir que la couleur du titre devient bleue et sa taille devient plus petite, ce qui nous donne l'effet que nous voulons. Enfin, nous voulons juste changer l'arrière-plan du lien lorsque nous survolons le curseur. Donc, je vais aller ici et dire en survolant la balise d'ancrage, je vais changer la couleur de fond en bleu foncé. Et je changerai la couleur en blanc. Et maintenant, lorsque je passe le curseur sur le lien, vous pouvez voir sa couleur d'arrière-plan change en bleu, et la couleur du texte change en blanc. Et c'est tout, tout le monde. Nous avons maintenant créé l'effet de carte. On veut. 62. 66 - Effet de hover de cartes doubles visage créatives à double visage et créatif de cartes de pde chevaux: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de vol stationnaire de carte. Vous pouvez voir que nous avons ce fond gris foncé qui a une ombre de boîte autour d'elle. Et il a aussi une image et le mot design sous l'image. Et quand nous survolons, il se déplace vers le haut et sa couleur change à cette couleur rose. Et un autre fond blanc qui contient un paragraphe et un lien se déplace vers le bas et se trouve derrière ce fond rose. Bon, commençons à créer cet effet de carte. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de carte. Puis à l'intérieur de cela, j'ajouterai un autre div avec une classe de phase un. Donc, ce sera le visage de la carte qui contient l'image et le mot design. Donc, à l'intérieur, je vais ajouter un autre div avec une classe de boîte d'image. Et à l'intérieur, j'ajouterai une balise d'image et ajouterai notre image. Ensuite, j'ajouterai un h3 et ajouterai le mot design. Puis en dessous de cela, j'ajouterai un autre div avec la classe de la phase 2. Et à l'intérieur, je vais ajouter un div avec une classe de contenu. Puis un paragraphe à l'intérieur de ce div avec du texte Lorem Ipsum. Puis enfin une balise d'ancrage en dessous de cela. Et je dirai lire plus. Maintenant, je vais aller à mon CSS et cibler la div de la carte. Ensuite, j'ajouterai la position, relative , curseur, pointeur et largeur 300 pixels. Donc maintenant, vous pouvez voir la carte div a une largeur de 300 pixels et il se trouve au centre du navigateur. D' accord, revenons en arrière et ciblons la div avec la classe de face 1 qui contient l'image et le h3. Puis à l'intérieur, j'ajouterai la position, largeur relative, 300 pixels, 200 pixels. Couleur de fond, noir pour l'instant. Ensuite, je vais revenir en arrière et ajouter le flex d'affichage, la colonne de direction de flexion pour rendre l'image et le H3 assis l'un au-dessus de l'autre. Ensuite, pour les centrer horizontalement et verticalement à l'intérieur la face un div, j'ajouterai justifier le centre de contenu, et aligner les éléments centre également. Puis enfin, je vais ajouter la transition 0,5 secondes. Ok, maintenant ciblons la deuxième div avec la classe de la phase 2. Puis à l'intérieur, j'ajouterai la position. Largeur relative, 300 pixels, hauteur, 200 pixels. Couleur de fond, blanc. Puis afficher également flex, direction de flexion, colonne. Justifier le contenu, au centre. Aligner également les éléments centrés. Puis taille de boîte, border-box, et enfin remplissage 20 pixels. Donc maintenant, comme vous pouvez le voir, nous avons ce fond blanc qui contient le paragraphe et le lien, et il se trouve derrière le noir. Très bien, Ajoutons aussi de l'ombre de boîte à ce fond blanc. Je vais aller ici et ajouter box-shadow, 020 pixels, 50 pixels, RVB, 0.8000. Puis enfin, j'ajouterai la transition 0,5 seconde. Et comme vous pouvez le voir, le fond blanc a maintenant cette ombre autour. Ok, maintenant, nous allons travailler sur les effets de vol stationnaire. Nous voulons que les deux phases se situent l'une au-dessus de l'autre. Et en planant, nous voulons que la première phase se déplace vers le haut et la deuxième phase se déplace vers le bas. Donc, pour ce faire, j'irai ici à l'intérieur de la div avec la classe de la phase 1 et ajouter la transformation, traduire y 100 pixels. Puis en dessous de cela, je dirai en survolant la carte div, je vais sélectionner le visage un div. Ensuite, je vais changer le fond noir à cette couleur rose. Je vais également ajouter transform, traduire y à 0 à nouveau. Et maintenant, vous pouvez voir que le fond noir a déplacé vers le bas de 100 pixels. Et quand nous survolons la carte, elle revient à sa position en haut et sa couleur change à cette couleur rose. Faisons la même chose pour la deuxième div. En bas, j'irai à l'intérieur de la div avec la classe de la phase 2, et j'ajouterai la transformation, traduirai Y négatif 100 pixels, puis en dessous. Et en survolant la carte, je vais sélectionner le visage à div. Et ajoutez de la transformation. Traduire Y 0 à nouveau. Et maintenant, vous pouvez voir que le fond blanc est décalé vers le haut et il couvre le noir. Et en survolant la carte, cet effet se produit lorsque le fond blanc se déplace vers le bas et le fond rose se déplace vers le haut, ce qui nous donne l'effet exact que nous voulons. Mais nous voulons que le fond rose apparaisse devant le blanc, pas le contraire. Donc, je peux retourner ici à l'intérieur de la face un div et ajouter z-index 1. Changons également la couleur de fond du noir à cette couleur gris foncé. Et comme vous pouvez le voir, le visage un div a cette couleur grise et il est assis devant le blanc fait, et en survolant la carte, sont des effets encore fonctionne correctement. Ok, maintenant, nous allons travailler sur le style de notre carte. Je vais cibler la div avec la classe de la boîte d'image qui contient notre image. Et j'ajouterai l'opacité 0,2 et la transition 0,5 seconde. Puis en dessous de cela, je dirai, en survolant la carte, je vais sélectionner la boîte d'image div et en ajouter une à nouveau l'opacité. Et comme vous pouvez le voir, l'image et le H3 sont maintenant un peu transparents. Et en survolant la carte, ils redeviennent complètement visibles. Retournons en arrière et ciblons l'image à l'intérieur du visage, un div. Ensuite, j'ajouterai la largeur 100 pixels. Ensuite, je vais également cibler le H3, qui est le mot design, et ajouter la marge dix pixels 00. Ensuite, je vais ajouter rembourrage, 0, couleur, blanc, texte, aligner, centre. Et enfin, la taille de la police, 25 pixels. Donc maintenant, vous pouvez voir l'image et le H3 sont beaucoup mieux. Ensuite, travaillons sur le paragraphe et la balise d'ancrage à l'intérieur de la deuxième phase div, je vais cibler le paragraphe en premier. Ensuite, j'ajouterai la marge 0, le remplissage 0. Eh bien, alors je vais cibler la balise d'ancrage et ajouter la marge 15 pixels 00. Ensuite, j'ajouterai affichage, inline-block, puis text-decoration. Aucun, poids de la police, couleur 900. Cette couleur grise. Puis rembourrage de cinq pixels. Et enfin à la frontière. Un pixel, solide, cette couleur grise aussi. Et maintenant, vous pouvez voir quand je passe la souris sur la carte, le paragraphe et la balise d'ancrage sont beaucoup mieux. Faisons juste une dernière chose et c'est changer la couleur d'arrière-plan du lien en survolant. Je vais aller ici et dire, en survolant la balise d'ancrage, j'ajouterai la couleur de fond, notre couleur grise, puis la couleur blanche. Et maintenant, quand je vais passer le curseur sur le lien, vous pouvez voir ses changements de couleur d'arrière-plan et ses changements de couleur en blanc aussi. C' est tout, tout le monde. Nous avons maintenant terminé cet effet de carte cool, et je pense que c'est incroyable. 63. 67 - Effet de hover de cartes créatifs en calques: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cet effet de vol stationnaire de carte superposé. Vous pouvez voir quand je survole la carte, cet effet se produit où les couches blanches de la carte sont tournées d'un degré spécifique, qui nous donne cet effet. En outre, il y a un espace en bas qui apparaît et il contient ce texte. Bon, commençons à créer cet effet. Je vais aller ici à l'intérieur de mon HTML et ajouter un div, lui donner une classe de carte. Ensuite, à l'intérieur, je vais ajouter un autre div avec la classe de la boîte d'image. Donc, ce sera le div qui contient l'image. Puis en dessous de cela, j'ajouterai un autre div avec une classe de détails. Et à l'intérieur, je vais ajouter un H2 et dire John Doe. Et puis j'ajouterai une balise de saut de ligne. Et je vais ajouter une travée et dire juste fondateur. Ensuite, je vais aller à mon CSS et cibler la div de la voiture. Ensuite, j'ajouterai la position, la largeur relative, 320 pixels, la hauteur, 350 pixels. Arrière-plan, blanc, rayon de bordure, quatre pixels. Puis box-shadow, 02 pixels. Dix pixels, RGBA, 0, 0, 0, 0, 0,2. Et maintenant vous pouvez voir que nous avons ce fond blanc qui se trouve au centre du navigateur. Très bien, créons les deux couches blanches qui se trouvent sous notre carte. Nous allons les créer en utilisant les pseudo-éléments avant et après. Donc, je vais sélectionner V avant pseudo élément de la carte div. Je vais également sélectionner l'après-midi. Et j'ajouterai du contenu. Chaînes vides. Position, absolu, haut, 0, gauche, 0, largeur, 100%, hauteur, 100% aussi bien. Lorsque border-rayon. Pour les pixels, couleur d'arrière-plan, rouge pour l'instant. Puis, enfin, la transition 0,5 seconde. Et maintenant vous pouvez voir que nous avons ce fond rouge qui se trouve sur le dessus de la carte. Revenons en arrière et changeons la couleur d'arrière-plan en blanc. Encore une fois. Je vais également ajouter z-index minus1. Pour que le fond blanc soit assis derrière la carte. Bon, maintenant, en survolant la carte, nous voulons que les pseudo-éléments avant et après tournent afin que nous puissions obtenir notre effet. Donc, je vais aller ici et dire en survolant la carte, je vais faire quelques changements au pseudo élément avant. Je vais ajouter la transformation, faire pivoter 20 degrés. Je vais également ajouter box-shadow, 02 pixels, 20 pixels, RGB, 0, 0, 0, 0 point 2. Faisons la même chose pour le pseudo élément after. Je vais copier cela, le coller à nouveau et changer avant à après. Ensuite, je vais juste changer le degré de rotation à dix degrés au lieu de 20. Et maintenant vous pouvez voir quand je survole la carte, cet effet se produit lorsque nous avons deux arrière-plans blancs qui tournent selon des angles différents, nous donne cet effet de carte superposé. Ok, travaillons sur la div de la boîte d'image qui devrait contenir notre image. Je vais le cibler et ajouter la position absolue, top 10 pixels, gauche, 10 pixels, dix pixels bas, droit ? Dix pixels aussi. Donc, cette div aura dix pixels d'espace autour d'elle. Ensuite, j'ajouterai la couleur de fond. Cette couleur gris foncé. Puis, enfin, la transition 0,5 seconde. Donc, ici, nous avons un fond sombre qui est entouré par v carte div. Ensuite, lorsque vous passez la souris sur la carte, nous voulons que ce fond gris foncé soit décalé un peu vers le haut. Donc, je vais aller ici et dire, en survolant la carte, je vais sélectionner la boîte d'image div. Et je vais changer le bas à 80 pixels au lieu de 10 pixels. Et maintenant, vous pouvez voir quand je passe la souris sur la carte, le fond gris foncé se rétrécit un peu par le bas, laissant cet espace blanc. Et c'est là que nous allons positionner notre contenu. Donc, je vais retourner ici et cibler la div avec la classe des détails. Ensuite, j'ajouterai la position, absolue , gauche, 10 pixels, droite ? Dix pixels, bas, dix pixels aussi. Ensuite, j'ajouterai de la hauteur, juste 60 pixels. Et enfin, le texte aligner au centre. Et maintenant, vous pouvez voir que nous avons nos détails assis sur le fond. D' accord, continuons à travailler et nous irons ici et ciblons le H2. Ensuite, j'ajouterai la marge 0, remplissage 0 aussi. Puis le poids de la police, 600. Taille de la police, 20 pixels. Couleur. Cette couleur grise. Puis enfin, le texte transforme en majuscules. Et maintenant, vous pouvez voir le H2 a cette couleur grise et est assis exactement à la position que nous voulons. Continuons. Je vais cibler la portée à l'intérieur de ce H2, qui est le mot fondateur. Ensuite, j'ajouterai le poids de la police, 500. Taille de la police, 16 pixels. Puis coloriez cette couleur rouge. Et maintenant, les détails sont exactement comme nous le voulons. Et en survolant la carte, l' arrière-plan gris se rétrécit et les détails apparaissent. Cachons juste les détails derrière le fond gris. Je vais retourner ici à l'intérieur de la div de la boîte d'image. Et j'ajouterai aussi z-index. Et maintenant, vous pouvez voir les détails sont cachés. Et en survolant la carte, ils apparaissent à nouveau sous le fond gris foncé comme nous le voulons. Cool. Maintenant, revenons en arrière et ajoutons notre image. Je vais aller à mon HTML et j'irai à l'intérieur de la boîte d'image div et ajouter l'image. Ensuite, j'ajouterai notre image. Ensuite, je vais aller à mon CSS et cibler l'image et ajouter la position. Absolu, haut, 0, gauche, 0, largeur, 100%, hauteur, 100%. Puis enfin, l'ajustement de l'objet, la couverture. Et maintenant, vous pouvez voir notre image apparaît maintenant à l'intérieur de la div. Et en survolant le coin de l'image, DIV se rétrécit vers le bas et les détails de la carte apparaissent nous donnant l'effet exact que nous voulons. 64. 68 - Effet de cartes créatives de calques: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de vol stationnaire de carte. Vous pouvez voir que nous avions cette image et ce texte en bas dit titre du post. Et lorsque nous survolons la carte, cet effet se produit lorsque le titre se développe et prend la pleine taille de la carte Dans ce paragraphe et le lien apparaissent sous le titre, l'image disparaît également. Alors commençons à créer cet effet. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de carte. Ensuite, à l'intérieur de cela, je vais ajouter un autre div, lui donner une classe de boîte d'image. Donc, cela contiendra notre image, mais nous l'ajouterons plus tard. Puis en dessous de cela, j'ajouterai notre contenu. Je vais ajouter un div, lui donner une classe de contenu. Puis à l'intérieur de cela, je vais ajouter un h3 et dire le titre du post, puis une balise de paragraphe, puis un texte fictif Lorem Ipsum. Et enfin une étiquette d'ancrage. Et dites Lire la suite. Ensuite, je vais passer à mon CSS et cibler le div avec la classe de carte. Et ajouter la position. Largeur relative, 300 pixels, hauteur 400 pixels. Ensuite, j'ajouterai une couleur de fond. Et enfin, l'ombre de la boîte, 0 pixels le long de l'axe x, puis 30 pixels le long de l'axe y, sorte que nous ayons une ombre sous notre carte quand une valeur de flou de 30 pixels aussi, alors la couleur de l'ombre sera RGBA, 0.5000. Et maintenant vous pouvez voir que nous avons cette carte avec un fond noir et quelques textes ombre en dessous. Ok, nous allons travailler sur le style du contenu pour qu'il ressemble à ce que nous voulons. Je vais aller ici et cibler la div avec la classe de contenu. Ensuite, je vais ajouter la position Absolue pour le positionner relativement à la voiture fait alors nous voulons le positionner au bas de la carte. Donc, nous allons ajouter le bas 0 pixels. Puis largeur, 80% de la largeur de la carte, et hauteur, seulement 80 pixels. Ensuite, j'ajouterai la couleur de fond, blanc. Donc maintenant vous pouvez voir que nous avons ce fond blanc qui contient notre titre et notre paragraphe, et il se trouve dans le coin inférieur de la carte. Très bien, centrons ce fond blanc horizontalement. Comme il a une largeur de 80 pour cent de la largeur de la carte, cela signifie que l'espace restant ici est de 20 pour cent de la largeur de la carte. Et si nous déplaçons le contenu vers la droite de 10 % de la largeur de la carte, il reste 10 % d'espace gauche et 10 % d'espace à droite. Et cela sera envoyé au contenu. Alors faisons ça. Je vais aller ici et ajouter à gauche 10 pour cent pour déplacer le div de contenu vers la droite de 10 pour cent. Comme vous pouvez le voir, il est centré maintenant. Bon, revenons en arrière et continuons à travailler. J' ajouterai le centre d'alignement du texte pour centrer le texte à l'intérieur du div de contenu. Puis enfin, transition 0,5 seconde. Très bien, afin de voir ce que nous faisons, faisons juste la hauteur du contenu div 100% au lieu de 80 pixels. Ok, stylisons les éléments à l'intérieur de la div de contenu. Maintenant, je vais cibler le H3 et ajouter la taille de police, 30 pixels. Transformation de texte. Majuscules, la marge, 25 pixels. Très bien, stylisons le paragraphe que je vais cibler et ajouter de la largeur. 80% de la largeur du contenu lorsque la marge de dix pixels de haut et de bas et de gauche et de droite pour le centrer horizontalement. Puis taille de police 18 pixels. Et enfin, transition, 0,5 seconde. Cool. Maintenant, nous allons cibler la balise d'ancrage et ajouter du texte, de la décoration. Aucun, couleur de fond, noir, couleur blanche. Puis rembourrage, 10 pixels du haut et du bas, et 15 pixels de la gauche et de la droite. Affichez ensuite la marge de bloc en ligne, les 10 premiers pixels. Lors de la transition finale, 0,5 seconde. Très bien, vous pouvez voir qu'il n'y a pas assez d'espace, mais c'est parce que nous avons réglé la largeur du contenu à seulement 80% de la dette de la carte. Mais quand nous le définissons à 100%, notre div de contenu sera beaucoup mieux. Donc, je reviendrai ici à l'intérieur de la div de contenu, et je remettrai la hauteur à 80 pixels à nouveau. Et j'ajouterai également un débordement caché pour cacher le texte en dehors des 80 pixels de notre div de contenu. Cool. Maintenant, nous voulons que le contenu div se développe et prenne toute la largeur et la hauteur de la carte div lorsque nous survolons la carte. J' irai donc dire, quand on survolera la carte. Je vais faire quelques changements à la div de contenu. Je mettrai sa hauteur à 100% et sa largeur à 100% également. Et maintenant, vous pouvez voir quand je passe la souris sur la carte, le fond blanc devient plus grand et prend la pleine taille du fait actuel. Mais vous pouvez aussi voir qu'il est déplacé vers la gauche. Et c'est parce que nous avons fixé sa propriété gauche à 10 pour cent afin de la centrer horizontalement, si vous vous en souvenez. Donc, nous pouvons corriger cela facilement en ajoutant à gauche 0% au lieu de 10%. Et maintenant, vous pouvez voir le fond blanc s'intègre parfaitement dans la carte div et le couvre complètement. Très bien, ajoutons quelques touches finales à cet effet. Nous voulons que le paragraphe et la balise d'ancrage soient visibles et n'apparaissent que lorsque nous survolons la carte. Donc, je vais entrer à la fois dans le paragraphe et un lien et définir l'opacité à 0. Ensuite, je vais aller ici et dire, en survolant la carte, je vais sélectionner le paragraphe. Je vais également sélectionner la balise d'ancrage avec cela. Et j'ajouterai l'opacité une, puis le délai de transition 0,5 secondes de sorte qu'il faudra un peu de temps avant d'apparaître. Et maintenant, quand je passe la souris sur la carte, vous pouvez voir que le paragraphe et la balise d'ancrage apparaissent après que le fond blanc s'affiche complètement, qui nous donne cet effet cool. Allons de l'avant et ajoutons l'image à cette carte. Je vais revenir à mon HTML. Et ici à l'intérieur de la div avec la classe de la boîte d'image, je vais ajouter notre image. Ensuite, je vais revenir à mon CSS et cibler le div avec la classe de la boîte d'image. Ensuite, j'ajouterai la position, absolue , top 0, gauche 0 aussi. Puis largeur, 100%, hauteur 100%. Et enfin, transition 0,5 seconde. D' accord, disons l'image. Je vais le cibler et ajouter de la largeur, 100%, hauteur, 100% aussi bien. Puis l'objet fit, la couverture. Et enfin, transition 0,5 seconde. Et maintenant, vous pouvez voir que l'image prend la pleine taille de son conteneur et regarde exactement comme nous le voulons. Très bien, Enfin, lorsque vous passez la souris sur la carte, nous voulons que l'image devienne transparente. Donc, je vais aller ici et dire en survolant la div avec la classe de la carte, je vais sélectionner l'image et ajouter l'opacité 0. Alors c'est tout, tout le monde. Vous pouvez voir lorsque nous survolons la carte, l'image devient progressivement transparente. Et maintenant, nous avons fini cet effet de carte à la recherche cool. 65. 69 - Effet de texte fumé sur les transformes de css: Bonjour tout le monde. Dans cette leçon, nous allons créer ces effets de décoloration fumé créatif pour le texte. Donc, nous allons commencer ici dans notre HTML, et je vais ajouter un UL. Puis LI. Et je mettrai chaque lettre à l'intérieur d'un allié. Donc, je vais ajouter S juste ici. Ensuite, je vais copier cela et le coller à nouveau plusieurs reprises. Et puis j'ajouterai toutes les lettres grade. Alors maintenant, ajoutons quelques styles. J' irai à mon CSS et je commencerai par ajouter une couleur de fond gris foncé au corps. Ensuite, je vais cibler l'UL. Et j'ajouterai la marge 0, rembourrage 0 aussi. Ensuite, j'ajouterai le flex d'affichage afin que toutes les lettres soient affichées côte à côte, comme ça. Maintenant, nous allons cibler les éléments de liste qui contiennent les lettres. Et je vais ajouter aucun style liste pour me débarrasser de ces balles. Ensuite, j'ajouterai la couleur, blanc, puis la taille de la police, 100 pixels, le poids de la police, gras, espacement des lettres, dix pixels. Et enfin, passer à quelques secondes. Et maintenant, le mot semble mieux. Si nous regardons une démo, et si vous regardez attentivement le mouvement des lettres, vous pouvez voir qu'elles se déplacent vers le haut et tournent en même temps. Nous allons donc utiliser la fonction de translation pour faire bouger les lettres vers le haut et la fonction de rotation pour les faire tourner évidemment. Alors allons à notre CSS et quand je survole l'UL, je veux faire quelques changements arriver à l'allié. Le premier changement est que je veux ajouter la transformation, faire pivoter 45 degrés. Puis un espace. Je veux également que les lettres soient traduites verticalement sur l'axe y de moins 200 pixels, afin qu'elles se déplacent vers le haut. Maintenant, quand je survole l'UL, vous pouvez voir les lettres se déplacer vers le haut et tourner en même temps. Maintenant, je veux aussi que l'opacité des lettres soit 0. Donc, je vais aller ici et ajouter l'opacité 0. Et maintenant, en survolant à nouveau, les lettres dans cela étant transparentes. Maintenant, afin de rendre cet effet fumé ou flou, nous pouvons utiliser une propriété CSS nommée filtre. Donc, je vais aller ici à l'intérieur des éléments de la liste et Ajouter un filtre flou 20 pixels. C' est donc une propriété CSS qui rendra les textes flouis et lui donnera ce bel effet fumé. Et plus vous ajoutez un nombre élevé ici, il sera flou. Donc maintenant, quand je survole notre parole, vous pouvez voir que nous avons exactement l'effet que nous voulions. Maintenant, il reste une chose. Nous ne voulons pas que cet effet arrive à toutes les lettres en même temps. Nous voulons que la première lettre disparaisse d'abord, puis la seconde, puis la troisième, et ainsi de suite. Nous pouvons le faire facilement en utilisant la propriété de délai de transition, ce qui retardera l'apparition de la transition. Donc ce que je vais faire, c'est que j'irai juste ici et dire LI, côlon. Dash enfant, parenthèses ouvertes, 1, parenthèses fermées. Cela ciblera le premier enfant des éléments de la liste, qui est la lettre S. Ensuite, je vais copier ceci et le coller quatre fois. Et je changerai le numéro à chaque fois. Donc deux pour la deuxième lettre, trois pour la troisième, pour, pour la quatrième, cinq pour la cinquième. Ensuite, je vais aller ici à la première lettre et ajouter délai de transition 0 parce que nous voulons qu'il disparaisse immédiatement. Ensuite, nous allons copier ceci et le faire 0,4 seconde pour la deuxième lettre de 0,8 seconde pour la troisième, 1,2 seconde pour la 4.6e, une seconde pour la cinquième. Et maintenant, quand je vais planer sur le mot, les lettres devraient disparaître l'une après l'autre. Comme ça. 66. 70 - Effet de texte de complets sur la pépites: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet de remplissage de texte. Lorsque vous passez la souris sur ce mot, vous pouvez voir ce joli effet de remplissage se produit. Alors faisons ça en fait. Je vais commencer ici dans mon HTML en ajoutant un H1. Et nous allons juste dire un texte. Ensuite, nous irons à notre CSS pour ajouter quelques styles. Nous allons cibler le H1. Ensuite, ajoutez marge, 0, remplissage, 0, famille de polices. Daniel. Taille de la police, 120 pixels. Couleur. Cette couleur gris clair. Le texte transforme en majuscules pour faire toutes les lettres majuscules. Et enfin, position relative. Donc ici, vous pouvez voir qu'il est plus grand et toutes les lettres sont majuscules. Très bien, maintenant, créons le texte plus sombre qui arrivera lorsque nous survolerons ce texte gris clair, nous allons utiliser le pseudo élément avant. Donc, je vais aller ici et ajouter un deux-points avant. Et j'ajouterai du contenu. Textes. Position, absolue, haut, 0, gauche, 0, couleur. Nous voulons qu'il soit plus sombre. Donc nous allons utiliser cette couleur gris foncé. C' est vrai ? Donc, ici vous pouvez voir que nous avons le texte sombre assis au-dessus des textes clairs et le couvrant. C' est parce que nous avons dit à gauche et en haut à droite ici à 0. Donc, par exemple, si j'ai changé l'onglet 100% au lieu de 0, vous pouvez voir qu'il est maintenant assis sous le texte clair. D' accord, remettons-le à 0 à nouveau. Maintenant, nous voulons que le remplissage et l'effet sur ce texte plus sombre se produisent lorsque nous survolons. Nous allons donc faire la transition de la propriété width, ce qui signifie que nous allons faire la largeur du texte sombre 0. Et puis en planant, nous allons le faire à nouveau à 100%. Et nous allons lisser l'action en utilisant la propriété de transition. ai eu. Allons-y. Je vais aller ici à l'intérieur du pseudo élément avant et ajouter largeur 0, débordement caché. Et enfin la transition. Toutes les 0,5 secondes. Ensuite, en survolant le H1, je vais faire quelques changements qui se sont produits à l'élément pseudo-précédent. Je vais changer la largeur de nouveau à 100. Donc, il apparaîtra avec toute sa largeur, nous donnant l'effet de remplissage que nous allons chercher. Et on y va. C' est ainsi que vous pouvez faire un bon effet de remplissage de texte d'une manière très rapide et facile. 67. 71 - Effet de hover de icônes de réseaux sociaux avec des transformes de css: Bonjour tout le monde. Dans cette leçon, nous allons créer ce bel effet de vol stationnaire pour les icônes des médias sociaux. Donc, quand je survole une icône, vous pouvez voir qu'un fond vert s'ouvre, la couleur de l'icône change et il devient plus grand. Voyons comment on peut faire ça. Droit ? Donc, ici dans mon HTML, vous pouvez voir que j'ai un lien vers la bibliothèque d'icônes Font Awesome qui nous donnera accès à toutes les icônes Font Awesome. Je vais commencer par ajouter un div et lui donner une classe de conteneur. Puis à l'intérieur de celui-ci, je vais ajouter un lien et donné une classe d'icône. Puis à l'intérieur de cela, je vais ajouter i pour la police, icônes impressionnantes. Et je vais lui donner une classe de f, a, b, f a Facebook. Cette classe, nous allons juste afficher l'icône Facebook. Ensuite, je vais copier ce lien, le coller quatre fois. Et j'ajouterai les autres icônes que nous voulons, comme Twitter, Google, YouTube et Instagram. Donc ici, vous pouvez voir nos icônes sont toutes assis dans une rangée et ils ont l'air assez laid. Alors allons à notre CSS et les faire paraître un peu mieux. Je vais commencer par cibler le conteneur. Et je vais ajouter un flex d'affichage. Ensuite, je vais cibler les liens avec la classe d'icône. Ajoutez une largeur de 90 pixels, puis une hauteur de 90 pixels. Ensuite, j'ajouterai une couleur de fond. Cette couleur blanche, marge, dix pixels, rayon de bordure, 30 pour cent. Et enfin, la couleur est une belle couleur verte. Continuons à bouger. Je vais aller juste ici à l'intérieur du conteneur et ajouter le centre d' alignement du texte pour centrer l'icône, comme ça. Ensuite, je vais aller à l'icône et ajouter de l'ombre de boîte et ajouter une ombre de boîte. Ensuite, la position relative. Droit ? Maintenant, nous devons travailler sur les icônes à l'intérieur de notre lien. Donc, je vais dire icône, je cible les icônes. Ensuite, j'ajouterai la hauteur de la ligne, 90 pixels afin que l'icône soit centrée verticalement. Puis taille de police 25 pixels, et transition ou 0,2 seconde. Bien. Maintenant, nos icônes ressemblent exactement à ce que nous voulons. Passons donc à l'étape suivante. Lorsque vous passez le curseur sur un lien, je veux que l'icône change de couleurs pour qu'elle corresponde à l'arrière-plan. Et je veux que l'icône devienne un peu plus grande. Alors faisons ça. Je dirai icône sur le vol stationnaire. Je vais apporter quelques modifications à l'icône Font Awesome. J' ajouterai la transformation, l'échelle 1.3, sorte qu'il deviendra plus grand et coloriera cette couleur blanche, tout comme la couleur de fond. Alors maintenant, quand je passe la souris sur n'importe quelle icône, vous pouvez voir que la couleur devient la même que l'arrière-plan, c'est pourquoi nous ne pouvons plus la voir. Mais passons à l'étape suivante. Nous devons créer le fond vert en mouvement qui apparaît lorsque nous survolons les icônes. Alors créons ça. Je vais aller ici et ajouter l'icône deux-points avant. Et j'ajouterai du contenu, de la position vide, de l'absolu, largeur, de 120 pour cent, et de la hauteur de 120 pour cent. Puis la couleur de fond ou la couleur verte. Ensuite, je vais ajouter gauche moins 110 pour cent et haut 90 pour cent. Donc maintenant vous pouvez voir que nous avons notre fond vert et qu'il est assis dans cette position à cause des valeurs supérieures et de gauche que nous avons ajoutées à cela. Allons ajouter de la transformation. Faites pivoter 45 degrés pour faire pivoter l'arrière-plan vert. Bon, maintenant nous devons le faire passer à travers notre lien quand nous survolons. Donc, si nous regardons notre démo, vous pouvez voir que lorsque je survole le lien et que le fond vert vient de sa position de départ, puis se déplace sur le lien jusqu'à ce qu'il monte un peu vers le haut à droite, puis retourne et couvre le lien. Nous allons donc utiliser des animations CSS pour créer cet effet. Nous aurons trois étapes d'animation. Dans la première étape, l'arrière-plan sera à sa position d'origine. Ensuite, à la deuxième étape, à 50% de la durée de l'animation, l'arrière-plan sera légèrement déplacé vers le coin supérieur droit du lien. Ensuite, nous passons à la troisième étape. À 100% de la durée, il reprendra pour couvrir le lien. Alors faisons ça. Je vais aller ici dans mon CSS et créer une nouvelle animation. Et il suffit de le nommer animation. Et à l'intérieur, à 0% de la durée de l'animation, je dirai gauche moins 110 pour cent et top 90 pour cent. Si vous vous en souvenez, ce sont les valeurs que nous avons déjà appliquées ici. Cela devrait donc faire démarrer l'animation à partir de la position d'origine de l'arrière-plan vert. Ensuite, je vais copier ça. Coller à nouveau. Et à 50 % de la durée de l'animation, je changerai la gauche à 15 % et le haut à moins 30 %. Ensuite, ajoutez 100%. Je vais faire la gauche moins 10 pour cent et le haut moins 10 pour cent ainsi. Maintenant, nous devons ajouter cette animation à l'arrière-plan vert. Alors je vais monter ici. Et en survolant l'icône, je vais apporter quelques modifications à l'arrière-plan vert. J' ajouterai l'animation, puis le nom de l'animation, qui est l'animation, puis la durée de l'animation 0,7 seconde. Et l'itération d'animation compte un, parce que nous voulons que cela se produise qu'une seule fois lorsque nous survolons. Et enfin, le mode film d'animation avant parce que nous voulons que le fond vert reste dans sa position finale après la fin de l'animation. Et il reste une chose, qui consiste à cacher les parties de l'arrière-plan vert l'extérieur du lien en montant ici à l'intérieur du sélecteur d'icône et en ajoutant un débordement caché. Et maintenant, quand je vais et survolez le lien, vous pouvez voir que le fond vert vient du coin inférieur gauche, puis se déplace vers le haut jusqu'à ce qu'il se déplace un peu au-delà du coin supérieur droit, puis retourne et couvre le lien. Et pendant que tout ce qui se passe, l'icône elle-même devient plus grande et sa couleur change pour correspondre à l'arrière-plan. 68. 72 - Effet de texte rotatif créatif de texte rotatif sur les transformes de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce bel effet de vol stationnaire de bordure. Vous pouvez voir lorsque je survole ce texte, cet effet se produit là où les bordures supérieure et inférieure apparaissent, puis gauche et droite. Ensuite, nous avons tourné des bordures qui apparaissent l'une après l'autre aussi. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de boîte. Ensuite, à l'intérieur de cela, je vais ajouter une travée et lui donner une classe de rotation. Donc, ce sera la portée qui a fait pivoter les bordures. Puis en dessous de cela, j'ajouterai un H1. Et à l'intérieur, je dirai CSS. Ensuite, j'ajouterai un élément de saut de ligne afin que les textes à venir soient assis sur la ligne suivante. Ensuite, j'ajouterai une autre travée et à l'intérieur je dirai frontière. Donc, nous enveloppons cette plage de mots juste pour être en mesure de le styliser individuellement. Ensuite, après cette période, j'ajouterai un autre élément de saut de ligne. Et je dirai hover, puis un autre élément de saut de ligne et dire effet. D' accord, alors je vais aller à mon CSS et cibler la div externe avec la classe de boîte. Ensuite, j'ajouterai la position, la largeur relative, 200 pixels, hauteur 200 pixels ainsi. Puis la taille de la boîte, border-box. Et enfin, la couleur de fond, jaune. Donc maintenant vous pouvez voir que nous avons cette boîte jaune centrée dans le navigateur. Ok, allons travailler sur le H1. Je vais revenir en arrière et ciblé. Ensuite, j'ajouterai la marge 0, remplissage 0 aussi. Puis la couleur, cette couleur gris foncé. Et pour centrer le texte, j'ajouterai la position absolue, haut, 50 pour cent. A gauche, 50 pour cent aussi. Puis Transformer. Traduire, négatif 50 pour cent et négatif 50 pour cent. Ensuite, j'ajouterai le texte aligner, centre, la taille de la police, 24 pixels. Et enfin, la transformation du texte, en majuscules. D' accord, ajoutons une couleur différente à la bordure du mot. Tu te souviens qu'on l'a enveloppé à l'intérieur de la travée. Alors nous allons cibler cette étendue. Et ajouter de la couleur. Cette couleur verte et la taille de la police, 30 pixels. Impressionnant. Travaillons sur les bordures de cette boîte jaune. Nous allons créer ces bordures en utilisant les pseudo-éléments avant et après. Donc, je vais aller ici et cibler le pseudo élément avant de la div boîte. Ensuite, à l'intérieur de cela, j'ajouterai du contenu des chaînes vides, position absolue 0, la gauche 0 aussi. Ensuite, nous voulons qu'il prenne toute la largeur et la hauteur de la boîte div. Donc, nous allons ajouter la largeur 100% et la hauteur 100% aussi bien. Ensuite, nous allons ajouter bordure supérieure quatre pixels solide. Notre couleur verte. Et bordure inférieure quatre pixels solide. Encore notre couleur verte. Puis la taille de la boîte, border-box, et enfin la transition 0,5 seconde. Donc maintenant vous pouvez voir que nous avons ces deux bordures du pseudo élément avant sur le haut et le bas du fond jaune. Et c'est parce que nous avons réglé la hauteur et la largeur du fond jaune à 100%. Donc, si vous prenez toute la largeur et la hauteur de la boîte div, d' accord, maintenant allons animer ces deux frontières. Je vais revenir ici et ajouter l'échelle de transformation x 0. Ensuite, afin de faire grandir les frontières, encore une fois , en planant, j'irai ici et dire, quand nous survolons la boîte, je veux apporter quelques modifications à l'élément pseudo avant. Je vais ajouter l'échelle de transformation x à nouveau à un. Et maintenant, vous pouvez voir les deux bordures sont maintenant cachées parce que nous avons défini x sur 0. Et quand je passe la souris sur la boîte div, les deux frontières grandissent à nouveau jusqu'à ce que leur échelle x redevienne une. Ok, Travaillons sur les frontières gauche et droite. Maintenant. Nous allons les créer en utilisant le pseudo élément after. Donc, je vais juste copier le pseudo élément avant. Coller à nouveau et changer avant à après. Alors. A l'intérieur, je vais changer la frontière supérieure deux à droite. Et la frontière en bas à la frontière gauche. Je vais également copier l'effet de vol stationnaire. Collez-le et changez avant à après. Ensuite, je vais changer la propriété de transformation de l'échelle x à l'échelle. Pourquoi ? Et maintenant, vous pouvez voir quand je vais et survolez le texte, cet effet se produit là où nous avons des bordures gauche et droite qui apparaissent et se développent le long de l'axe y avec les pseudo-éléments after. Ok, maintenant, nous allons travailler sur les bordures tournées. Si vous vous souvenez, nous avons ajouté une plage dans notre balisage HTML avec une classe de rotation, et nous avons dit que nous allons l'utiliser pour créer les bordures tournées. Voyons comment on peut faire ça. Tout d'abord, je vais le cibler et ajouter la position, absolue. Puis largeur, 100%, hauteur, 100% aussi bien. Afficher le bloc et la couleur d'arrière-plan. Jaune. Ensuite, nous voulons le transformer de 45 degrés. Donc, je vais ajouter la transformation, faire pivoter 45 degrés. Puis enfin, la boîte de taille de la bordure de la boîte. Et maintenant vous pouvez voir que nous avons ce fond jaune qui est tourné de 45 degrés et se trouve sur le premier fond. Très bien, maintenant, créons l'effet de bordure pour cet arrière-plan pivoté. Je vais aller ici et copier tout ce code de la boîte div et ce sont des effets de vol stationnaire. Ensuite, je vais coller et cibler le div tourné, pas la Box 1. Donc, cela va sélectionner les pseudo-éléments avant et après de la rotation. Ensuite, je vais aller ici et cibler le pseudo élément avant du div tourné en planant. Et le pseudo élément after de la div pivotée lors du vol stationnaire également. Et maintenant, vous pouvez voir quand je survole le texte, cet effet se produit là où les quatre bordures des arrière-plans pivotés grandissent et s'agrandissent, qui nous donne cet effet vraiment cool. Enfin, nous voulons ajouter quelques retards de transition entre les frontières afin qu'ils apparaissent l'une après l'autre. Et nous irons ici en survolant le pseudo élément after de la boîte div. Et j'ajouterai le délai de transition 0,5 secondes de sorte que lorsque vous passez le curseur sur les bordures droite et gauche de la boîte div, nous attendrons 0,5 secondes. Ensuite, je vais aller ici et ajouter un délai de transition 1 seconde. Et puis enfin ici et ajouter le délai de transition 1,5 secondes. Et maintenant, quand je survole, vous pouvez voir que les frontières apparaissent l'une après l'autre, ce qui nous donne l'effet exact que nous voulons. 69. 73 - Introduction à l'animation: Bonjour tout le monde. Bienvenue dans cette nouvelle section du cours où nous parlerons des animations CSS et des images clés. Maintenant, la façon dont les animations CSS et les images clés fonctionnent est très simple. abord, vous devez définir ou créer une règle d'animation CSS et la nommer n'importe quel nom que vous voulez. Deuxièmement, vous ajoutez cette règle d'animation. Vous le créez à n'importe quel élément HTML de la page afin que l'animation fonctionne dessus. Ce sera beaucoup plus facile si nous le voyons en action. Donc, ici dans mon HTML, j'ai ce div tout seul. J' ai ajouté quelques styles dans mon CSS. Je viens d'ajouter une largeur, hauteur et une couleur de fond rouge. Donc, quand nous voyons cela dans le navigateur, nous pouvons voir notre div vide est assis juste ici. Maintenant, revenons à notre CSS et voyons comment utiliser les images clés et l'animation sur cette div. Nous avons donc dit que la première chose à faire est de définir la règle d'animation. Et pour ce faire, nous l'écrivons comme ça sur les images clés Mark. Ensuite, le nom de l'animation, disons en mouvement. Et puis à l'intérieur de celui-ci, nous utilisons des mots clés comme de et vers. Donc, je vais dire d'ajouter, transformer, traduire X 0, puis de transformer traduire x 1, 0, 0, 0, 0. Donc, ce qui se passe ici, c'est que nous avons créé une règle d'animation. Et ce que cette règle d'animation fera, c'est qu'elle prendra l'élément d'un état à un autre. Donc, il faudra l'élément de translate X 0, ce qui signifie de sa position d'origine pour traduire x 1, 0, 0, 0, 0, 0, gris. Maintenant, si je vais dans le navigateur et recharger ma page, vous ne pouvez voir rien changé. Element est juste assis à sa place et aucun mouvement ne s'est produit. Et c'est parce que nous avons créé la règle d'animation ici, mais n'avons pas dit au navigateur quel élément recevra cette animation. Donc, si vous êtes familier avec n'importe quel langage de programmation, c'est très similaire aux fonctions où vous créez un bloc de code qui devrait faire quelque chose. Et puis vous ajoutez ce bloc de code aux éléments vous voulez que ce bloc de code applique. Donc, ce que nous devrions faire ici, c'est que nous devrions dire au navigateur sur quel élément cette animation devrait fonctionner. Et cela peut être fait facilement en allant à l'élément lui-même, qui est le div. Il y a donc deux propriétés nécessaires pour que l'animation fonctionne sur cet élément. Le premier est le nom de l'animation, qui se déplace. Et la seconde est la durée de l'animation. Ou combien de secondes nous voulons que cette animation prenne du début à la fin. Disons trois secondes. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir que le div commence maintenant à traduire X 0, en d'autres termes, à partir de sa position d'origine et se déplace pour traduire x 1, 0, 0, 0, 0 sur une période de trois secondes. C' est tout pour cette leçon. C' était une introduction à l'animation CSS et aux images clés. Nous avons appris ce qu'ils sont et comment ils fonctionnent. Et dans les prochaines leçons, nous allons apprendre plus de propriétés qui nous donneront plus de contrôle lors de l'utilisation de CSS, d'animations et d'images clés. Alors, à vous voir. 70. 74 - créer des animations css avec d'autres étapes: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer des animations avec plus de deux étapes. Alors, nous allons entrer. Voici le code de la leçon précédente. Si vous jetez un oeil aux mots-clés que nous utilisons ici, vous pouvez voir que nous avons de et vers. Et cela signifie que l'élément passera de cette première étape à cette étape finale sur une durée spécifique, qui dans notre cas est de trois secondes. Maintenant, que se passe-t-il si nous voulons ajouter plus de changements et d'étapes ? Par exemple, au lieu de faire déplacer l'élément horizontalement de la première position à la seconde, que faire si nous voulons qu'il se déplace de la première position à une seconde, puis 2 tiers 1. Nous aurions donc trois étapes. Eh bien, nous pouvons le faire facilement en utilisant la méthode de pourcentage au lieu des mots-clés de N2. Donc, ce que nous pouvons faire ici, c'est que nous pouvons supprimer cela du mot-clé et ajouter 0% à la place. Donc, ce 0% signifie le point de départ de la durée de l'animation. Ensuite, je vais supprimer ces deux et ajouter 100%. Cela signifie à 100% de la durée de l'animation, ou trois secondes. Donc, ce que je fais ici, c'est que je dis juste qu'à 0% de la durée de l'animation, ce qui signifie que le point où je veux que l'animation commence, je veux ajouter cette transformation, qui ne changera rien pour l'élément. Donc, l'élément va commencer à partir de l'endroit où il était à l'origine sur notre page. Et puis à 100% de la durée de l'animation, c'est-à-dire à la fin des trois secondes, je veux que l'élément soit à cette position. Ainsi, pendant ces trois secondes, l'élément se déplacera de la première position à la deuxième position. Et rien ne devrait changer par rapport à la leçon précédente. Donc, je vais aller au navigateur et recharger. Et vous pouvez voir que la div passe de sa position d'origine à sa nouvelle position sur trois secondes, tout comme nous l'avons fait dans la leçon précédente. Revenons à notre CSS. Maintenant, c'est encore deux étapes. Nous voulons plus d'étapes que ça. Nous pouvons le faire facilement en utilisant la méthode du pourcentage, car elle nous donne beaucoup de choix entre 0 % et 100 %. Donc, par exemple, si je vais ici et que je change ce 100% à 50 pour cent, puis en dessous, ajoutez 100%. Puis Transformer, traduisez 1, 0, 0, 0, 0 sur l'axe des x. Et puis disons 500 pixels vers le bas. Maintenant, nous avons trois étapes. La première étape, la deuxième étape et la troisième étape. Donc, ce qui va se passer est de 0 % à 50 % de la durée de l'animation, ce qui signifie du début au milieu de la durée de l'animation. Ou pendant la 1,5 seconde des trois secondes complètes, la position de l'élément doit passer de sa position d'origine horizontalement à cette seconde position. Et puis dans les 1,5 secondes restantes, l'élément passera de cette position à cette nouvelle position, qui est 1, 0, 0, 0, 0 à droite, et 500 pixels vers le bas de la page à partir de sa position d'origine. Donc, quand je vais dans le navigateur et actualiser, vous pouvez voir l'élément se déplace de sa place d'origine à un point 1, 0, 0, 0, 0 à droite pendant la 1,5 seconde. Puis se déplace vers une nouvelle position, qui est toujours 1, 0, 0, 0, 0 vers la droite, et 500 pixels vers le bas pendant la 2.5e une seconde. Puis, après cela revient à sa position d'origine une fois que la durée de l'animation est terminée. Maintenant, nous pouvons rendre la durée du changement différente pour chaque étape. Par exemple, si je change ce 50 pour cent à seulement 10 pour cent, dans cette situation, la première étape se produira beaucoup, beaucoup plus vite car elle se produira sur une période de seulement 10 pour cent des trois secondes. Alors que la deuxième étape se produira plus lentement car il se produira de 10 pour cent à 100%, ce qui signifie sur une période de 90% des trois secondes. Alors allons dans le navigateur et voyons à quoi cela ressemble. Vous pouvez voir que la première étape se passe beaucoup plus vite maintenant, tandis que la seconde se passe plus lentement. Donc c'est tout pour cette leçon, tout le monde, si vous avez des questions à ce sujet, laissez-la dans la section Q&R et je ferai mon mieux pour vous aider à vous voir dans la prochaine leçon. 71. 75 - Propriété du mode de remplissage d'animation: Bonjour tout le monde. Bienvenue dans cette nouvelle leçon où nous allons apprendre sur la propriété du mode film d'animation. Bon, donc ce que nous avons fait dans la dernière leçon, c'est que nous avons fait déplacer cette div vers la droite, cent dix cents pixels, puis vers le bas, 500 pixels, comme ça. Et puis après la fin de l'animation, vous remarquerez que la div remonte à sa place d'origine. Ça peut sembler bizarre. Alors que faire si nous voulons que le div reste dans sa position finale où l'animation se termine au lieu de revenir comme ça. Eh bien, nous pouvons le faire en utilisant la propriété du mode film d'animation, qui indique essentiellement au navigateur ce qu'il faut faire avec l'élément en dehors de la fenêtre d'animation, est-à-dire avant que l'animation commence et après qu'elle se termine. Donc, ici, nous avons affaire au deuxième cas, qui est après la fin de l'animation. Et il y a deux choix. Le premier est que l'élément reviendra à sa place d'origine, est la valeur par défaut. Et le second est que l'élément restera dans sa position finale. Et nous le ferons en utilisant la propriété du mode film d'animation. Revenons à notre CSS. Je vais aller ici à l'intérieur du sélecteur div et ajouter le mode film d'animation. Et nous avons quatre valeurs. Le premier est nul, ce qui ne fait rien en dehors de la fenêtre d'animation. Il dira simplement, lorsque l'animation est terminée, retourner le div à son état d'origine avant l'animation. Et bien sûr, c'est la valeur par défaut. La deuxième valeur est en avant, ce qui devrait nous intéresser dans notre situation parce que les avants indiquent au navigateur de prendre la dernière étape de l'animation ici et de l'appliquer à l'élément à la fin de l'animation. Donc maintenant, quand je vais dans le navigateur et rechargement, vous pouvez voir que l'élément reste à sa position finale et ne revient pas à sa place d'origine avant l'animation. Personnellement, je pense que cela semble plus réaliste. Maintenant, nous pouvons également utiliser une valeur appelée en arrière. Donc, pour le démontrer, je vais juste revenir à mon CSS. Je vais aller ici et ajouter une autre propriété qui est le retard d'animation. Et disons trois secondes. Et ce que cela fera, c'est que l'animation va attendre trois secondes avant qu'elle ne commence. Donc, si je vais à mon navigateur et me rafraîchir, vous pouvez voir la div attendre trois secondes, puis commence à revenir à notre CSS. Maintenant, disons que nous voulons que l'animation commence à partir de 500 pixels vers la droite et non à partir de sa place d'origine sur la page. Je vais aller ici et changer cela à 500 pixels au lieu de 0. Je vais également changer 10% pour, disons 50 pour cent. Parce que je veux que le mouvement horizontal prenne plus de temps pour que nous puissions vraiment le voir. Et je vais également changer la durée de transition à cinq secondes afin que nous puissions voir clairement ce qui se passe. Maintenant, selon le code que nous avons ici, ce qui devrait arriver est que l'animation devrait attendre trois secondes, puis elle devrait commencer à partir de ce point juste ici, qui est de 500 pixels à droite de sa position d'origine. Et puis l'animation devrait continuer jusqu'à ce qu'elle soit terminée. Et à la fin, le div devrait rester dans sa position finale parce que nous avons dit le mode film d'animation avance. Donc, quand je vais au navigateur et recharger, vous pouvez voir l'animation attendre pendant trois secondes. Ensuite, l'élément part 500 pixels vers la droite. Ensuite, l'animation commence et se déplace comme avant. Ce n'est peut-être pas ce que vous attendiez. Vous avez peut-être pensé que la div commencerait ici, 500 pixels vers la droite, puis attendre trois secondes. Et puis après cela, l'animation commencerait. Je veux dire, c'est logique parce que nous définissons le point de départ de l'animation à 500 pixels vers la droite. Mais ce n'est pas la valeur par défaut. Rappelez-vous que la valeur par défaut est qu'avant le début de l'animation et après sa fin, les éléments doivent être à sa place d'origine. Nous avons pu changer la position une fois l'animation terminée et en faire le point final de l'animation en utilisant l'avant comme valeur de la propriété du mode film d'animation. Et nous pouvons aussi faire cela et faire démarrer l'animation au point de départ que nous avons défini dans les images-clés et non à sa place d'origine en utilisant une autre valeur qui est en arrière. Donc, je vais revenir à mon CSS et changer cela vers l'avant, vers l'arrière. Ensuite, je vais aller à mon navigateur et recharger. Et maintenant, vous pouvez voir que l'animation commence à partir du point 500 pixels vers la droite et non à partir de sa position d'origine. Mais parce que nous changeons vers l'avant, vers l'arrière, le div ne reste plus à sa dernière place, il ramène à nouveau à sa position d'origine, nous pouvons corriger cela facilement en appliquant à la fois vers l'avant et vers l'arrière. Donc, je vais revenir à mon CSS et changer ceci aux deux. Et maintenant, quand je vais recharger le navigateur, vous pouvez voir que l'élément reste sur le point de départ pendant trois secondes, puis se déplace vers le point final, et il reste là à l'animation. Donc, pour terminer les choses, la propriété du mode film d'animation nous indique simplement d' où les éléments devraient commencer et où ils devraient finir. Si nous ne le définissons pas, l'élément, nous allons juste commencer à partir de son état d'origine avant toute animation a lieu. Et il reviendra également à cet état d'origine une fois l'animation terminée. Mais nous pouvons utiliser les avants pour rendre les éléments jour à la dernière étape de l'animation. Ou nous pouvons utiliser à l'envers pour le faire commencer à partir du point de départ de l'animation. Ou nous pouvons simplement utiliser les deux pour obtenir les deux résultats ensemble. 72. 76 - Réaliser de nombreuses propriétés de count d'animation itération: Bonjour tout le monde. Bienvenue dans cette nouvelle leçon du cours de transition et de transformation d'animation CSS, où nous parlerons de la propriété de nombre d'itérations d'animation. Ainsi, le nombre d'itérations d'animation indique simplement au navigateur combien de fois l'animation doit être répétée et il accepte les valeurs de nombres. Donc, deux signifie que l'animation sera jouée deux fois, et trois signifie qu'elle sera répétée trois fois et ainsi de suite. Super. Donc, ici, dans mon CSS, nous avons tout comme il était à la fin de la leçon précédente. Je vais simplement supprimer cette propriété de retard d'animation afin que l'animation commence immédiatement. Et je vais aller ici et ajouter le nombre d'itérations d'animation. Disons trois. Et je vais changer la durée de l'animation à trois secondes pour que ce soit un peu plus rapide. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir que l'animation sera répétée trois fois avant qu'elle ne soit terminée. Impressionnant. Nous pouvons également utiliser le mot-clé infinie pour faire jouer l'animation un nombre infini de fois ou pour toujours. Revenons donc à notre CSS et essayons cela. J' irai ici et changerai ça à l'infini. Et maintenant, quand je retourne au navigateur et recharge, l'animation sera jouée pour toujours et ne s'arrêtera jamais. Et c'est tout pour cette propriété. C' est très simple. Il spécifie simplement combien de fois l'animation doit être jouée. Je veux aussi parler un peu d'une autre propriété, qui est la fonction de synchronisation d'animation. Ceci est similaire à la fonction de synchronisation de transition que nous avons apprise dans la première section du cours. Et il accepte les mêmes valeurs qui sont 0. Linéaire. Faciliter l'entrée, la détente et la sortie. Alors passons en revue ces ensemble. Je vais changer cet infini en un, puis ajouter la fonction de synchronisation d'animation yz. Donc, ce qui est fait, c'est que le mouvement commence lentement, puis aller plus vite quand n lent. Bon, voyons à quoi ça ressemble. Mais d'abord, modifions à nouveau la durée de l'animation à cinq secondes. Pour voir ce qui se passe. Je vais aller à mon navigateur et recharger. Et avec le plan d'animation, vous pouvez voir l'effet de la facilité. D' accord, revenons en arrière et essayons la facilité, ce qui commence vite. Le vent ralentit à la fin. Comme ça. Puis faciliter, qui si vous vous souvenez, commence lentement, puis va plus vite à la fin. Et faciliter l'entrée, la sortie, ce qui est très similaire à la facilité car elle commence lentement, puis va plus vite au milieu, puis revient à ralentir à la fin. Et enfin, linéaire, ce qui rendra le taux de changement constant de sorte que la vitesse du mouvement sera la même tout au long de la durée de l'animation. Et donc les gars, c'est tout pour cette leçon, et je vous verrai dans la prochaine. 73. 77 - Propriété de direction de l'animation pour la direction de la direction d'animation: Bonjour tout le monde. Bienvenue dans cette nouvelle leçon de notre cours, où nous parlerons de la propriété de direction d'animation. Les propriétés de direction de l'animation sont assez simples. Il spécifie simplement la direction de l'animation et il accepte quatre valeurs. La première valeur est normale, qui est la valeur par défaut. Et il dit au navigateur de commencer l'animation depuis son début ici jusqu'à sa fin, juste ici. Alors essayons ça. Je vais aller ici et ajouter la direction de l'animation, normale. Et quand je vais au navigateur et recharger, vous pouvez voir que l'animation est en train de jouer normalement du début à la fin. La deuxième valeur que nous pouvons utiliser est inverse, ce qui indique au navigateur de lire l'animation. En sens inverse, ce qui signifie qu'il commencera à partir de la fin des animations et se terminera à son début. Donc, je vais changer cela pour inverser et revenir à mon navigateur. Et vous pouvez voir que l'animation est en cours de lecture inverse de la fin au début. Super. Maintenant, la troisième valeur est alternative. Et ce que fait alternatif est qu'il fait jouer l'animation du début à la fin, puis revenir de la fin au début. Et puis du début à la fin, et de la fin au début et encore et encore et encore jusqu'à ce que le nombre d'itérations d'animation se termine. Donc, je vais changer cela pour alterner. Et je vais également changer le nombre d'itérations d'animation à infini et la durée de l'animation à seulement trois secondes. Et maintenant, quand je vais au navigateur et recharger, l'animation joue du point de départ au point d'arrivée, puis revient du point d'arrivée au point de départ et ainsi de suite. Et nous avons aussi l'inverse alternatif, qui fait la même chose que l'alternance, mais cela commence juste de la fin au début. C' est la seule différence. Alors vérifions ça. J' ajouterai des rivières alternatives. Et vous pouvez voir qu'il commence de la fin au début, puis remonte à la fin. Et il continuera à le faire pour toujours. 74. 78 - Méthode de la - d'animation: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment combiner toutes les propriétés d'animation CSS en une seule propriété. Parce que si vous les regardez, il y a beaucoup de propriétés et elles sont confuses. Nous pouvons donc les combiner tous en une seule propriété appelée animation. Mais comment avons-nous fait ça ? J' irai juste ici et je dirai juste animation. Et puis la première propriété que j'ajoute habituellement est le nom de l'animation. Donc, je vais dire déplacement, puis un espace et ajouter la durée de l'animation, qui est de trois secondes, puis un espace. Et nous pouvons juste mettre toutes ces propriétés côte à côte. Peu importe comment ils sont commandés. Ils feront la même chose, peu importe ce qui apparaît en premier, une seconde ou quoi que ce soit. Mais vous devez garder quelque chose à l'esprit si vous voulez utiliser la propriété de delay d'animation, vous devez ajouter le délai après le temps de durée, car le navigateur considère toujours la première valeur de temps que vous ajoutez ici comme l'animation durée, la valeur temporelle suivante en tant que délai d'animation. Donc, si j'ajoute cinq secondes ici, ce qui va se passer est que le navigateur va attendre cinq secondes avant que l'animation ne commence. Et comme ça, nous avons combiné toutes les propriétés en une seule propriété. Et nous avons la même animation que nous voulions avant. 75. 79 - Texte flottant utilisant l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons apprendre à créer ce texte flottant de droite à gauche. C' est une animation infinie ou enregistre. Et quand vous le regardez, vous pouvez voir qu'il tourne de gauche à droite, puis de droite à gauche, et ainsi de suite et ainsi de suite. Nous allons commencer ici dans notre HTML en ajoutant un H1. Puis à l'intérieur de celui-ci, je dirai venir, puis balises BR. Et à l'intérieur de ça, bientôt. Maintenant, allons à notre CSS. Je vais cibler le H1. Ajoutez le centre d'alignement du texte pour centrer le texte. Couleur. Blanc. Puis font-family. Arial. Taille de police, 90 pixels, hauteur de ligne, 90 pixels pour l'espacement des deux lettres. Puis l'ombre du texte. Ces valeurs. Et vous pouvez voir maintenant que nous H1 ressemble exactement à ce que nous voulons. Ensuite, nous voulons l'animer. Donc, je vais aller ici et créer une nouvelle animation. Je dirai à Mark cadres clés. Et maintenant, nous allons le nommer flottant. Ensuite, je dirai à partir et à l'intérieur de celui-ci, Transformer, Tourner cinq degrés de sorte que l'état initial du H1 soit tourné de cinq degrés dans le sens des aiguilles d'une montre. Ensuite, je dirai de transformer, tourner moins cinq degrés, sorte que l'état final sera tourné de cinq degrés dans le sens inverse des aiguilles d'une montre. Et maintenant, montons ici et ajoutons cette animation au H1. Donc, je vais dire animation. Ensuite, le nom de l'animation flottent, puis la durée de l'animation, trois secondes, et la fonction de synchronisation linéaire. Ensuite, le nombre d'itérations d'animation, qui est infini. Bien sûr. Maintenant, quand je recharge le navigateur, vous pouvez voir le H1 démarre cinq degrés dans le sens des aiguilles d'une montre, puis se déplace jusqu'à ce qu'il tourne à cinq degrés dans le sens inverse des aiguilles d'une montre, puis les parties à son état initial. Mais on ne veut pas ça. Nous voulons qu'il passe de l'état initial à l'état final. Et puis de l'état final à l'état initial. Et continuez à faire ça. Nous pouvons résoudre ce problème en définissant la direction de l'animation sur alterner. Donc, je vais aller ici et ajouter la direction de l'animation alternatif. Et maintenant, quand je recharge le navigateur, le H1 devrait animer la façon dont nous voulons de l'état initial à l'état final. État final, deux état initial, et ainsi de suite. 76. 80 - Effet de chargement rotatif à l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons créer cette animation de chargement CSS agréable en utilisant des images clés ainsi que des transformations CSS. Donc, ici dans mon HTML, je vais ajouter un div et lui donner une classe de chargement. Ensuite, je vais aller à mon CSS. Ici, nous avons quelques styles ajoutés au corps qui vont juste envoyer à la div et ajouter une belle couleur de fond. Donc maintenant je vais cibler notre div avec la classe de chargement. Ensuite, je vais définir sa largeur à 100 pixels. Ensuite, c'est la hauteur jusqu'à 100 pixels aussi. Ensuite, j'ajouterai la couleur de fond, blanc pour que nous puissions le voir. Puis le rayon de bordure 12 pixels pour lui donner un beau coins arrondis. Maintenant, quand nous allons jeter un oeil à une démo et l'avons rendue plus lente et a fait compter l'itération d'animation qu'un seul pour que nous puissions voir clairement ce qui se passe. Donc, quand je recharge ma page, vous pouvez voir que le div commence à partir de sa position d'origine, puis il tourne sur son axe y de 180 degrés. Et quand il est à 180 degrés sur l'axe y, il tourne à nouveau sur son axe x de 180 degrés. Alors maintenant, nous avons trois étapes de l'animation. La première étape est de 0%, et à ce stade, la rotation y et la rotation x sont à 0, qui signifie que l'élément est dans sa position d'origine sans aucune rotation. Ensuite, la deuxième étape est de 50 pour cent, à laquelle l'élément est tourné de 180 degrés le long axe des y et la rotation de l'axe des x est toujours égale à 0. Ensuite, l'étape finale est de 100%, où nous ajoutons la rotation sur l'axe x de 180 degrés. De sorte qu'à ce stade, l'élément sera tourné à la fois sur son axe x et son axe y de 180 degrés. Alors faisons ça. Je vais aller à mon CSS et créer une nouvelle animation et le nommer chargement, par exemple. Puis à l'intérieur de celui-ci, je vais ajouter la première étape 0% et dire Transformer. Faites pivoter X 0 degrés et faites pivoter y 0 degrés, de sorte que l'animation commence à partir de son emplacement d'origine. Ensuite, j'ajouterai la deuxième étape de l'animation à 50 pour cent. Et je dirai Transformer, Tourner X 0 et faire pivoter y 180 degrés. Donc, à 50% de la durée de l'animation, nous voulons que la div finisse par tourner de 180 degrés le long de l'axe y. Et puis à l'étape finale, à 100% de la durée de l'animation, j'ajouterai Transform, Rotate X 180 degrés, et pivoter y 180 degrés également. Et maintenant, je vais aller ici et ajouter de l'animation. Puis nom de l'animation, qui est le chargement, puis la durée de l'animation, deux secondes, fonction de synchronisation d'animation, linéaire. Et enfin, l'itération d'animation compte, ce qui est, c'est vrai, infini. Et parce que nous utilisons les fonctions de rotation x, rotation y, qui fonctionnent sur un environnement 3D, nous devrions définir une perspective. Donc, je vais aller ici au corps et ajouter de la perspective à 100 pixels. Et maintenant, quand je recharge mon navigateur, vous pouvez voir le div. Nous commencerons par faire pivoter de 180 degrés sur son axe y, puis de 180 degrés sur son axe X. Et nous avons l'effet que nous voulions. 77. 81 : conduire une voiture et un moto à la voiture à l'aide de l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons créer cette belle animation infinie où nous avons une voiture et une moto sur cette route. L' idée derrière cet exemple est simple. Nous avons une image de fond, qui est cette route. Et nous avons deux images. L' un pour la voiture et l'autre pour la moto. La couleur et les images de la moto ne bougent pas. Ils sont fixés dans leur position. Le mouvement ici vient de l'arrière-plan. Nous animons donc la position d'arrière-plan pour le coin inférieur gauche de l'image dans le coin inférieur droit. Voyons donc comment nous pouvons créer cette animation. J' irai ici dans mon HTML et ajouterai un div avec une classe d'arrière-plan. Ensuite, je vais aller à mon CSS, cibler le corps et ajouter la marge et le remplissage 0 pour cela aussi bien. Ensuite, je vais cibler la div avec la classe d'arrière-plan et ajouter la hauteur 100 vh, puis l'URL de fond, et nous allons ajouter l'image de la route. Ensuite, j'ajouterai la position d'arrière-plan, en bas à gauche. C' est donc le point initial de notre animation. Nous allons animer la position d'arrière-plan du bas à gauche à la vitesse inférieure afin que nous puissions les obtenir effet d'arrière-plan mobile que nous voulons. Alors faisons ça. Je vais aller ici et créer une nouvelle animation et l'appeler conduite. Et à l'intérieur. Rappelez-vous, nous voulons animer la position d'arrière-plan du bas à gauche vers le bas à droite. Donc, je vais dire de la position d'arrière-plan, en bas à gauche à la position d'arrière-plan en bas à droite. Super. Maintenant, ajoutons cette animation à notre arrière-plan. Je vais monter ici et dire animation. Ensuite, le nom de l'animation, qui est en train de conduire, puis la durée de l'animation, 15 secondes, puis linéaire et infinie, bien sûr, parce que nous voulons que l'animation continue à se répéter indéfiniment. Donc maintenant, quand je vais à mon navigateur et le recharger, vous pouvez voir que la position d'arrière-plan change de bas à gauche, le taux inférieur, et rend l'arrière-plan se déplace bien et lisse. Et maintenant, nous avons seulement besoin d'ajouter les images de notre voiture et de nos motos. Donc, je vais revenir à mon HTML et aller à l'intérieur notre div et ajouter la première image avec la classe de voiture. Puis la deuxième image ci-dessous avec la classe de moto. Vous pouvez voir que nous avons les images ici, mais elles ont l'air bizarres en ce moment. Alors ajoutons quelques styles à eux. Notre aller à mon CSS et cibler l'image de la voiture d'abord. Ensuite, j'ajouterai la position absolue afin que nous puissions contrôler la position de l'image. Ensuite, j'ajouterai à gauche 300 pixels et en bas moins 50 pixels. Ensuite, je vais ajouter avec 200 pixels pour rendre l'image de la voiture plus petite. Et maintenant, vous pouvez voir que la voiture est beaucoup mieux. Maintenant, faisons la même chose à la moto. Je vais retourner à mon CSS, copier ceci, coller à nouveau, et je vais cibler la moto dans ce cas. Ensuite, je vais changer à gauche à 700 pixels afin que ce soit une tête de la voiture. Puis en bas jusqu'à 55 pixels. Donc, ce sera un peu plus haut et nous donner ce joli sentiment 3D. Et enfin, je vais changer la largeur à 150 pixels. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir que nous avons exactement l'animation de conduite que nous voulions. Et on peut le contrôler. Ainsi, nous pouvons le rendre plus rapide ou plus lent en modifiant la durée de l'animation. Je vais revenir à mon CSS et le rendre plus rapide en rendant la durée de l'animation dix secondes. Et maintenant, vous pouvez voir qu'ils conduisent plus vite. Maintenant. Avant de terminer la leçon, je veux juste vous faire savoir que j'ai obtenu l'image de fond de ce côté, trois pic.com, qui a des tonnes d'images gratuites que vous pouvez utiliser. Et je l'ai eu en utilisant ce lien. Vous pouvez simplement le trouver dans les fichiers de ressources. 78. 82 - Rotateur de texte utilisant l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer ce rotateur de texte à l'aide de CSS, d'animations et d'images clés. Très bien, Donc ici dans mon HTML, je vais ajouter un H. Et à l'intérieur, je dirai que j'aime CSS. Ensuite, j'ajouterai une travée vide. Donc, cette plage contiendra les différents mots qui changeront transition et la transformation de notre animation. Mais nous allons les ajouter en utilisant CSS. Maintenant, allons à notre CSS. Vous pouvez voir ici j'ai ajouté un peu de style au corps afin de centrer le H1 horizontalement et verticalement. J' ai également ajouté cette couleur d'arrière-plan à la nuance corporelle. Maintenant, nous allons cibler le H1 et ajouter de la couleur. Blanc. Puis taille de police 50 pixels. Ensuite, je vais cibler la portée. Et nous allons utiliser le pseudo élément avant pour ajouter le contenu que nous voulons. Donc, je vais dire les transitions de contenu tout d'abord. Et là, c'est. Ensuite, j'ajouterai la transformation de texte en majuscules. Quand font-family, Arial. Et la couleur sera cette belle couleur bleue. Maintenant, nous voulons changer le mot transitions. Nous pouvons le faire sans problème en créant une nouvelle animation et en le nommant mot switch. Par exemple. Quand à 0%, je vais définir le contenu sur les transitions. Puis à 50%, je vais le définir sur des animations. Et ce 100%, je vais le mettre à des transformations. Et maintenant, montons ici et ajoutons de l'animation. Interrupteur de mots. Cinq secondes, infini. Ce qui va se passer maintenant, c'est que ce contenu va passer de transitions à des animations, à des transformations sur une période de cinq secondes. Et cela continuera pour toujours parce que nous définissons le nombre d'itérations d'animation à infini. 79. 83 - Motifs d'images animés à partir de l'animation de css: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer ce motif d'arrière-plan animé à l'aide d'animations CSS et d'images clés. Alors faisons ça. Ici, dans mon HTML, je vais ajouter un div et lui donner une classe de bannière. Ensuite, je vais aller à mon CSS et cibler ce div avec la classe de bannière. Et je vais ajouter la hauteur 100 vh, donc il prend toute la hauteur du navigateur. Ensuite, j'ajouterai l'image de fond. Donc, je vais dire URL de fond, et j'ajouterai notre image. Ensuite, j'ajouterai la position d'arrière-plan 00 afin que la position de l'image soit en haut à gauche. Et quand nous voyons cela dans le navigateur, vous pouvez voir que nous avons notre image de modèle et il est répété. Mais parce que c'est un motif et que d'autres parties de l'image sont exactement les mêmes. On le voit comme s'il prenait toute la largeur et la hauteur. Mais ce n'est pas vrai. L' image est en fait répétée verticalement et horizontalement. Donc, nous voyons en fait beaucoup d'images répétées en ce moment, pas une seule image. Maintenant, l'idée derrière le motif d'arrière-plan animé est d'animer le changement dans la position d'arrière-plan de 0 à gauche et 0 en haut à 0 à gauche. Et le nombre de pixels égal à la hauteur de l'image en haut. Donc, je vais aller à mon CSS et je vais créer une nouvelle animation et le nommer motif animé. Et je dirai de la position d'arrière-plan 00 à la position d'arrière-plan 0 à partir de la gauche et 600 pixels à partir du haut. Maintenant, j'ai ajouté 600 pixels ici, car la hauteur du motif est de 600 pixels. Donc, si vous voulez que le motif se déplace verticalement, vous devez faire la position d'arrière-plan 600 pixels à partir du niveau supérieur. Maintenant, je vais aller ici et dire animation, motif animé. 15 secondes, linéaires et infinies, bien sûr. Et maintenant, quand je vais recharger mon navigateur, vous pouvez voir que l'image se déplace maintenant verticalement jusqu'à ce qu'elle se déplace 600 pixels, qui est la fin d'une image et le début d'une autre, puis déplace un autre 600 pixels et ainsi de suite et ainsi de suite. Maintenant, il est vraiment facile de faire bouger le motif horizontalement. Donc, je vais aller à mon CSS et faire ce 600 pixels 0 afin qu'il ne se déplace pas verticalement. Ensuite, j'ajouterai 800 pixels de la gauche. Et j'ai ajouté un 100 pixels parce que c'est la largeur de mon image. Mon image est de 600 pixels par 800 pixels. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir l'image d'arrière-plan se déplace horizontalement. Et bien sûr, nous pouvons le faire bouger horizontalement et verticalement en même temps en revenant à mon CSS et en changeant le 0 à 600 pixels à nouveau. Et maintenant, vous pouvez voir que le motif se déplace horizontalement et verticalement. En même temps. 80. 84 - Effet de hover secoué des bouton avec l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet de hover agréable pour notre bouton. Et bien sûr, nous allons utiliser l'animation CSS pour le faire. Donc, avant de commencer, nous voulions voir comment fonctionne cet effet secouant. Ici, dans cette démo, j'ai rendu la durée de l'animation très élevée afin que nous puissions voir exactement ce qui se passe. Donc, quand je survole le lien, vous pouvez voir qu'il tourne un peu vers la droite, puis un peu vers la gauche, Quand un peu vers la droite à nouveau, puis retourne enfin à sa position d'origine. Donc, cela devrait être très facile à faire. Bon, faisons-le. J' irai à mon HTML et j'ajouterai une balise d'ancrage et je dirai juste survolez moi. Ensuite, je vais aller à mon CSS et ajouter quelques styles. J' ajouterai un fond gris foncé au corps. Puis en dessous de cela, je vais cibler la balise d'ancrage et ajouter une décoration de texte. Aucun. Puis couleur, blanc. Famille de polices, Sans Serif. Taille de la police 40 pixels. Bordure, trois pixels. Blanc massif. Rembourrage 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Ensuite, j'ajouterai la transition ou 0,3 secondes. Ensuite, lorsque je survole le lien, je veux que la couleur et la couleur de la bordure changent également. Donc, je vais copier cette ligne de code, coller ici, et je vais changer la couleur blanche à cette couleur rouge. Puis après cela, je vais aussi changer la couleur elle-même pour lire au lieu de la lumière. Donc maintenant, lorsque je vais et que je passe le curseur sur le lien, vous pouvez voir la couleur de la bordure et le changement de couleur du texte. Maintenant, nous voulons créer l'effet secouant. Ce que je vais faire, c'est que je vais aller ici et créer une nouvelle animation. Et je vais le nommer, secouer. Et à l'intérieur, je dirai à 33 pour cent de la durée de l'animation, je veux que le lien soit tourné de 10 degrés vers la droite. Et après 66 pour cent de l'animation, je veux qu'elle soit tournée vers la gauche de 10 degrés aussi. Donc, nous allons utiliser moins 10 cette fois. Et 100% de la durée de l'animation. Je veux qu'il tourne à nouveau vers la droite de 10 degrés. Donc, ce qui se passera ici, c'est que le bouton sera tourné vers la droite, puis vers la gauche, puis vers la droite, avant qu'il ne revienne à sa place d'origine. Super. Maintenant, ajoutons cette animation à notre bouton sur le survol. On va y aller et ajouter de l'animation. Puis nom de l'animation, secouer et durée de l'animation 0,3 seconde, puis linéaire. Et enfin, l'itération de l'animation ne compte qu'une seule fois en survolant. Et maintenant, quand je vais et que je passe le curseur sur le bouton, vous pouvez voir l'effet de tremblement se produit à droite, puis à gauche, puis à droite, puis revient à sa position de départ. Et c'est exactement l'effet que nous voulons. 81. 85 - Boutons animés avec l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer ce lien. Donc, si vous jetez un oeil, vous pouvez voir que nous avons un fond rouge qui a une largeur spécifique et prend toute la hauteur de notre lien. Et cet arrière-plan est biaisé et il se déplace de gauche à droite à travers le lien. Lorsque je survole le lien, vous pouvez voir que l'arrière-plan rouge prendra toute la largeur. Et quand nous survolons, il revient à se déplacer de gauche à droite. Alors, comment pouvons-nous créer cet effet ? Eh bien, c'est un 1 facile. abord, nous allons utiliser le pseudo élément avant pour créer l'arrière-plan rouge. Et nous allons lui donner toute la hauteur de la longueur et une largeur spécifique, et disons 120 pixels. Ensuite, nous allons l'incliner un peu en utilisant la fonction d'inclinaison. Et nous allons lui appliquer une animation pour qu'elle continue à se déplacer de gauche à droite infiniment. Ensuite, lorsque nous survolons le lien, nous le ferons de sorte qu'il supprime la fonction d'inclinaison, arrête l'animation, et qu'il prenne toute la largeur du lien. Alors faisons vraiment ça. Ici, dans mon HTML. Je vais commencer par aller ici et ajouter un lien. Et à l'intérieur, je dirai planer. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. J' ajouterai un fond gris foncé au corps. Puis en dessous de cela, je vais cibler la balise d'ancrage et ajouter une décoration de texte. Aucun. Puis couleur, blanc. Famille de polices. San Serif. Taille de police 40 pixels, bordure, trois pixels. Blanc massif, rembourrage, 40 pixels du haut et du bas, et 80 pixels de la gauche et de la droite. Et enfin, position relative. Maintenant que le lien est bon, nous devons créer l'arrière-plan rouge en utilisant le pseudo élément avant. Donc, je vais aller à mon CSS et dire un deux-points avant. Et je vais rendre le contenu vide. Ensuite, je vais rendre la couleur de fond rouge. Ensuite, je dirai top 0, gauche 0 aussi. Puis largeur. Disons 120 pixels et hauteur, 100% lorsque la position est absolue. Et puis quand nous le regardons, vous pouvez voir qu'il a un fond rouge, prend toute la hauteur du lien et a une largeur de 120 pixels. Mais vous pouvez voir que les lettres sont cachées en dessous. Nous pouvons facilement corriger cela en revenant à l'élément pseudo précédent et en ajoutant z-index minus1. Et maintenant, vous pouvez voir le texte apparaît devant lui. Bien. Maintenant, nous voulons l'incliner un peu. Donc, je vais revenir en arrière et ajouter Transform Skew. Et je vais l'incliner de moins 15 degrés. Et maintenant, vous pouvez voir qu'il est bien biaisé, comme nous le voulons. Bien. Maintenant, nous voulons créer l'animation qui va le faire déplacer de gauche à droite. Donc, je vais aller ici et créer un nouveau nom d'animation, en mouvement, par exemple. Et à l'intérieur, je dirai de et je veux que le fond rouge commence de l'extérieur du lien. Donc, je dirai à gauche moins 120 pixels, qui est la largeur du fond rouge. De cette façon, il commencera à partir de l'extérieur du lien. Pour rendre cette idée claire, essayons de monter ici et de changer à gauche de 0 à moins 120 pixels. Vous pouvez voir qu'il est maintenant situé en dehors du lien de gauche. Ce sera donc notre point de départ. Et bien. Maintenant, revenons en arrière et faisons ce 0 à nouveau. Ensuite, terminons notre animation. Donc je vais aller juste ici et dire deux à gauche, 100%. Ainsi, le mouvement de fond rouge se terminera à 100% de la largeur du lien vers la gauche, ce qui signifie à l'extérieur du lien à partir du bord droit. Super. Ajoutons maintenant cette animation à l'arrière-plan rouge. Je vais monter ici et ajouter de l'animation. Puis le nom de l'animation se déplace. Et la durée de l'animation 1.2 secondes, puis linéaire, puis finalement infinie. Et maintenant, vous pouvez voir que l'arrière-plan rouge se déplace de gauche à droite à travers le lien. Donc k, Maintenant, nous devons le cacher en dehors du lien. Donc, je vais aller ici dans le sélecteur de lien et j'ajouterai le débordement caché. Très bien, Maintenant, lorsque vous passez le curseur sur le lien, nous voulons démarrer l'animation, supprimer l'inclinaison et faire le fond rouge prendre toute la largeur. Alors j'irai ici. Et quand nous survolons le lien, je veux faire quelques changements qui sont arrivés à l'élément pseudo avant. Donc, tout d'abord, je vais faire la largeur et 100%. Donc, il prend toute la largeur du lien, puis Transformer Skew 0 degrés pour le faire revenir à sa forme d'origine. Et enfin, l'animation. Aucun. Pour démarrer l'animation. Maintenant, nous voulons que ces changements se produisent sans heurt. Donc, je vais monter ici dans le pseudo élément avant et j'ajouterai transition tous les zéros, cinq secondes. Et maintenant, quand je vais recharger, vous pouvez voir le fond rouge. On va continuer de gauche à droite jusqu'à ce que je survole le lien et qu'il s'arrête. À ce stade, il prend toute la largeur. Et quand je survolerai et nous continuerons à bouger. 82. 86 - Éclairer le texte avec une animation css: Bonjour tout le monde. Dans cette leçon, nous allons créer ce joli texte d'éclairage en utilisant des animations CSS. Donc, c'est une animation infinie et le changement qui se passe ici, parce qu'un changement dans la couleur et l'ombre du texte. Alors faisons vraiment ça. Tout d'abord, commençons par ajouter le balisage de notre HTML. Donc j'irai juste ici à l'intérieur du corps, et j'ajouterai une liste non ordonnée. Et à l'intérieur, j'ajouterai une liste des éléments, et chaque élément de liste contiendra une lettre. Bon, maintenant allons à notre CSS et ajoutons quelques styles. J' ajouterai une couleur de fond gris foncé au corps. Ensuite, je vais cibler l'UL. Et nous allons ajouter la marge 0, remplissage 0 aussi. Et nous allons ajouter un flex d'affichage afin que tous les éléments de la liste soient affichés côte à côte. Cool. Maintenant, ajoutons quelques styles aux lettres de liste elles-mêmes. Donc, je vais cibler le LI à l'intérieur de l'UL. Et j'ajouterai le style de liste, puis la couleur. Et j'ajouterai une couleur grise plus claire lorsque la taille de la police 18 pixels. Et enfin, l'espacement des lettres de 15 pixels pour obtenir un peu d'espace entre les lettres. Super. Maintenant, créons l'animation d'éclairage. Je vais y aller et créer une nouvelle animation et le nommer éclairage. Et à l'intérieur, je dirai à 0% de la durée de l'animation, je veux que la couleur soit la couleur grise. Et je veux que l'ombre du texte soit nulle. Donc rien ne changera. Ensuite, je vais copier cela, le coller à nouveau deux fois et juste changer 0% à 90%. Ensuite, à 100% de la durée de l'animation, je vais changer la couleur grise à cette couleur jaune. Et j'ajouterai une ombre de texte ici. Maintenant, avant tout cela, j'ai essayé beaucoup de valeurs jusqu'à ce que je découvre que j'aime cette valeur. Maintenant, nous voulons ajouter cette animation aux lettres. Donc, je vais aller ici à l'intérieur du sélecteur d'élément de liste et j'ajouterai de l'animation. Puis le nom de l'animation, éclairage. Lorsque la durée de l'animation 1.4 secondes, linéaire et infini, bien sûr. Donc, ce qui va se passer ici est de 0 % à 90 % des 1,4 secondes, qui est la durée de l'animation. Les lettres ne changeront pas. Rien ne leur arrivera. Mais de 90% à 100% de la durée de l'animation, les lettres seront jaunes et nous aurons une ombre de texte. J' ai fait le changement sur une très courte période de temps pour lui donner une sensation d'éclairage ou une ampoule allumée et éteinte rapidement. Mais si le changement se produit lentement, il ressemblera à l'éclairage. Ce sera très lisse et ennuyeux. Alors voyons vraiment ça. Vous pouvez voir que le changement se produit rapidement, nous donne l'effet de l'éclairage. Mais si nous regardons notre démo, vous pouvez voir que les changements ne se produisent pas tous en même temps. La première lettre s'allume d'abord, puis la seconde, puis la troisième, et ainsi de suite et ainsi de suite. Nous pouvons configurer cela en utilisant simplement la fonction de délai d'animation. Je reviendrai à mon CSS et je ciblerai le premier enfant d'une liste d'éléments. Et je dirai UL LI nième enfant un. Donc, ce que cela fera est qu'il ciblera le premier élément de liste dans l'UL, qui est la première lettre. Ensuite, j'ajouterai délai d'animation 0 parce que je veux que la première lettre s'allume immédiatement. Alors je vais copier tout ça. Collez à nouveau, ciblez la deuxième lettre cette fois et changez le délai d'animation à 0,1 seconde. De cette façon, il va attendre 0,1 secondes avant de s'allumer. Alors je le ferai pour toutes les lettres. Et chaque fois que j'augmenterai le délai d'animation de 0,1 seconde afin qu'ils s'allument l'un après l'autre. Bien. Maintenant que j'ai ajouté tous les retards d'animation, jetons un coup d'oeil. Vous pouvez voir la première lettre s'allume d'abord, puis la seconde, puis la troisième, et ainsi de suite, jusqu'à la dernière lettre lorsque l'animation recommence, parce que nous l'avons rendue infinie. 83. 87 - Atteinte de coeurs avec l'animation css: Bonjour tout le monde. Dans cette leçon, nous allons apprendre comment créer ce cœur en CSS et comment le faire battre en utilisant l'animation CSS. Ce sera une leçon intéressante. Voyons comment on peut faire ça. D' accord, je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de cœur. Ensuite, je vais aller à mon CSS. Et je commencerai par ajouter une couleur de fond gris foncé au corps. Ensuite, je vais cibler notre div avec la classe de cœur. Et j'y ajouterai quelques styles. Je vais commencer par ajouter la position, relative. Puis largeur, 100 pixels, hauteur 100 pixels aussi. Couleur d'arrière-plan. Cette couleur rouge, bien sûr. Bien. Maintenant, vous pouvez voir que c'est juste un div normal avec un fond rouge. Alors continuons à travailler. J' irai ici et j'utiliserai à la fois les pseudo-éléments avant et après pour créer le cœur. Donc, je vais commencer par le pseudo élément avant juste ici. Et je vais juste rendre le contenu vide. Ensuite, je vais ajouter la position, absolue, top 0, gauche 0 ainsi, la largeur 100% et la hauteur 100%. Ensuite, j'ajouterai la couleur de fond. Et ajoutons du blanc pour l'instant. Bien. Maintenant, vous pouvez voir que nous avons le pseudo élément précédent avec une couleur de fond blanc assis au-dessus de notre div avec une classe de cœur. Donc, ce que nous devons faire maintenant, c'est que nous devons faire déplacer le div blanc vers le haut de la moitié d'un serré. Donc, je vais revenir à mon CSS. Et à l'intérieur du pseudo élément avant, j'ajouterai transform translate. Pourquoi ? Moins 50%. Donc maintenant, vous pouvez voir le div blanc se déplace vers le haut, une distance égale à la moitié d'un serré. Super. Maintenant, je vais copier tout ça. Coller à nouveau. Et je vais juste changer avant après. Et je vais changer le fond blanc pour, disons vert. Maintenant, cette fois, nous voulons déplacer le pseudo élément after vers la gauche, pas vers le haut. Donc, je vais juste aller ici et changer Traduire Y pour traduire X. Maintenant, vous pouvez voir qu'il se déplace vers la gauche, une distance égale à la moitié de sa largeur. Bien. Maintenant, j'irai ici dans la div avec la classe de coeur. Et j'ajouterai la transformation, la rotation, et je la tournerai de 45 degrés. Donc maintenant, vous pouvez voir la div tourne de 45 degrés et les pseudo-éléments avant et après tournent avec elle. Maintenant je pense que tu te dis, Hey, on est presque là et c'est vrai. Tout ce que nous devons faire maintenant pour obtenir la forme du cœur est d'aller juste ici à l'élément pseudo avant et d'ajouter le rayon border-50 pour cent. Alors je ferai la même chose pour l'après. Et maintenant, vous pouvez voir qu'on a la forme du cœur qu'on veut. Revenons en arrière et changeons la couleur d'arrière-plan pour que les deux lisent également. Ok, maintenant on l'a. Ensuite, nous devons travailler sur l'animation pour faire battre ce cœur. Voici une démo lente de notre animation pour que nous puissions mieux la voir. Je vais recharger la page. Et vous pouvez voir que le cœur reste immobile pendant un certain temps. Ensuite, il monte à l'échelle. Lorsque l'échelle diminue un peu, puis remonte à nouveau, puis descend à sa taille d'origine. Reste immobile pendant un moment. Et puis répétez le même processus à l'infini. Voyons donc comment nous pouvons créer ça. Je vais aller à mon CSS, créer une nouvelle animation et le nommer heartbeat. Puis, au début de l'animation, à 0%, j'ajouterai la transformation. Tournez de 45 degrés pour garder le cœur tourné. Puis échelle par un parce que nous voulons qu'il commence à sa taille d'origine. Ensuite, je vais copier tout cela et le coller à nouveau cinq fois. Et j'ajouterai quelques intervalles pour cent. Donc, j'ajouterai 25 pour cent, 3050, 7100 pour cent. Bien. Donc, à 25 pour cent, je garderai l'échelle la même parce que rappelez-vous, le cœur reste immobile pendant un certain temps avant que l'animation ne commence. Donc, de 0% à 25% de la durée de l'animation, je veux que le cœur reste statique. Puis à 30 pour cent de la durée de l'animation, j'augmenterai l'échelle à 1,4 fois sa taille d'origine afin que le cœur devienne vraiment grand. Puis à 50 pour cent, je vais le réduire un peu. Donc, je vais faire un 1.2 et à 70 pour cent, je vais le mettre à l'échelle à nouveau à 1.4. Puis à 100%, je veux le réduire à sa taille d'origine, bien sûr, donc je vais le laisser comme ça. Maintenant, nous devons ajouter cette animation à notre div. Donc, je vais aller ici et ajouter de l'animation. Battement du cœur. Et la durée de l'animation, plus importante pour une seconde, linéaire et infinie, bien sûr. Et maintenant, vous pouvez voir notre cœur bat. Si elles restent pendant un certain temps, alors devient plus grand, puis un peu plus petit que plus grand à nouveau, puis retourne à sa taille d'origine, et ainsi de suite et ainsi de suite. Et c'est exactement l'effet que nous voulons. 84. 88 - arrière-plan de texte animé avec l'animation de css: Bonjour tout le monde. Dans cette leçon, nous allons créer ce fond de textes animés. Donc, l'idée derrière cela est que nous ajoutons une image d'arrière-plan au texte et animons la propriété de position d'arrière-plan de cette image. Assez facile, non ? Voyons comment on peut faire ça. Je vais commencer ici dans mon HTML en ajoutant un H, et je vais juste dire animation CSS. Ensuite, j'irai à mon CSS et je commencerai par ajouter une couleur de fond bleu au corps. Ensuite, je vais cibler le H1. Ajouter une taille de police, 200 pixels. Le texte est aligné au centre pour centrer le texte. Transformation de texte en majuscules, arrière-plan. Et j'ajouterai notre image comme fond. Vous pouvez voir que notre image a été ajoutée à l'en-tête, mais nous voulons qu'elle apparaisse comme arrière-plan pour le texte lui-même. Nous pouvons le faire en utilisant une propriété appelée Bad ground clip. Donc, je vais aller ici et ajouter le texte de clip de fond webkit. Cela fera de l'image l'arrière-plan du texte. Mais nous devons rendre la couleur du texte transparente. Ainsi, vous pouvez voir que le texte a maintenant notre image comme arrière-plan. Et maintenant, nous voulons animer ce fond. Donc, je vais aller ici et créer une nouvelle animation et le nommer, disons fond de texte. Puis à l'intérieur, je dirai de la position d'arrière-plan 0 de la gauche et 0 de la position de haut à la position d'arrière-plan, 100% de la gauche et 100% du haut. Ensuite, je vais monter ici et ajouter de l'animation. Textes, fond, 20 secondes, linéaire et infini bien sûr. Et maintenant vous pouvez voir que l'arrière-plan est en fait animé d'une position à l'autre, nous donnant infiniment l'animation que nous voulons. 85. 89 - Billes de bonds avec une animation css: Bonjour tout le monde. Dans cette leçon, nous allons créer cette animation de chargement rebondissant. Donc vous pouvez voir que nous avons cinq cercles et ils rebondissent au hasard. Voyons comment on peut faire ça. Je vais commencer par aller ici dans mon HTML, et j'ajouterai une URL. Ensuite, j'ajouterai cinq éléments de liste à l'intérieur. Et ces éléments de liste seront les cercles ou les boules rebondissantes. Ensuite, je vais aller à mon CSS pour ajouter quelques styles. Je vais commencer ici dans le corps en ajoutant la couleur de fond, cette couleur gris foncé. Ensuite, je vais cibler l'UL. Et j'ajouterai la marge 0, remplissage 0, puis l'affichage flex. Maintenant, nous allons cibler les éléments de liste à l'intérieur de l'URL. Et maintenant, nous allons ajouter le style de liste. Aucun. Largeur 30 pixels, hauteur, 30 pixels aussi. Et puis la couleur de fond, blanc. Puis marge 0 du haut et du bas, et dix pixels de gauche et de droite, parce que nous voulons un peu d'espace entre les éléments de la liste. Donc, voici nos éléments de liste assis les uns à côté des autres parce que nous définissons la propriété d'affichage de l'UL à flex. Continuons. Je vais revenir à l'intérieur du sélecteur d'élément de liste et j'ajouterai rayon de bordure de 50 pour cent afin que les éléments de liste soient des cercles. Super. Donc maintenant, nous devons travailler sur notre animation. Si nous regardons rapidement notre démo, vous pouvez voir que les cercles passent de leur position initiale vers le haut à une nouvelle position. Revenez ensuite vers le bas jusqu'à la position d'origine. Ainsi, l'animation contiendra trois étapes. Dans la première étape, les cercles seront dans leur position d'origine sans mouvement. Ensuite, à 50% de la durée de l'animation, les cercles se déplacent vers le haut d'une distance égale, disons, à 150 pixels. Ensuite, à la fin de la durée de l'animation, nous reviendrons à leur position d'origine. Voyons comment on peut faire ça. Je vais aller ici et créer une nouvelle animation. Alors je le nommerai sautant. Et à l'intérieur, je dirai à 0% de la durée de l'animation, je vais ajouter transform translate Y 0. Puis à 50% de la durée de l'animation. Transformer, traduire Y moins 150 pixels, sorte que les cercles se déplacent 150 pixels vers le haut. Puis à 100%, Transformer, Traduire Y 0 à nouveau pour les faire revenir à leur position d'origine. Bien. Maintenant, je vais aller ici à l'intérieur du sélecteur d'élément de liste et j'ajouterai de l'animation. Puis saute. Puis la durée de l'animation, 0,8 seconde, puis linéaire et infini, bien sûr. Maintenant, vous pouvez voir que les cercles sont en train de sauter 150 pixels en revenant à leur position de départ. Cu. Maintenant, nous devons ajouter une bordure au bas des cercles. Donc, je vais aller à l'intérieur de l'URL et j'ajouterai la bordure, le bas. Dix pixels, blanc massif. Maintenant, vous pouvez voir que nous avons la frontière sous les cercles. Super. Maintenant il nous reste une chose. Les cercles sont maintenant en train de sauter ensemble. Nous devons changer ça. On veut que ça ressemble à un saut aléatoire. Donc, ce que nous pouvons faire est que nous pouvons ajouter des valeurs aléatoires de retard d'animation pour chaque cercle. Donc, je vais aller ici et cibler le premier élément de la liste. Donc je vais dire UL, LI et enfant un. Et à l'intérieur, j'ajouterai un délai d'animation. Et j'ajouterai n'importe quelle valeur aléatoire, disons 0,45 seconde. Alors je vais copier tout cela. Coller à nouveau quatre fois afin que nous puissions cibler chaque élément de la liste individuellement. Ensuite, je changerai le numéro de l'enfant ici à deux, puis trois, puis 45. Et j'ajouterai des valeurs aléatoires pour chaque cercle. Donc, pour le deuxième cercle, j'ajouterai, disons, 0,6 seconde. Et pour le troisième cercle, j'ajouterai 0,3 seconde et je quitterai le quatrième cercle. La réponse est, donc il va se déplacer immédiatement. Et enfin, j'ajouterai 0,1 seconde au cinquième cercle. Ce ne sont que des valeurs aléatoires qui feront bouger les cercles de manière aléatoire. Alors maintenant, je vais retourner au navigateur et recharger. Et vous pouvez voir que les cercles rebondissent au hasard, nous donnant l'effet que nous voulons. Donc c'est tout pour cette leçon, tout le monde, et je vous verrai dans la prochaine. 86. 90 - Effet de pluie avec une animation css: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours des animations CSS, transitions et transformations. Dans cette leçon, nous allons créer cet effet pluvieux en utilisant l'animation CSS. Alors commençons. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de pluie. Ensuite, j'irai à mon CSS pour coiffer ce div. Je vais commencer par cibler le corps. Ensuite, j'ajouterai le rembourrage, 0, marge 0 aussi. L' URL d'arrière-plan. Et j'ajouterai l'image de fond. Ensuite, j'ajouterai la répétition de fond. Pas de répétition. Et enfin, la taille de l'arrière-plan. Couvercle. Bien. Donc maintenant, vous pouvez voir notre image est définie comme un arrière-plan pour le corps. Continuons. Je vais retourner à mon CSS et je vais cibler la div avec la classe de pluie. Puis à l'intérieur de celui-ci, j'ajouterai de la hauteur 100% pour le faire prendre toute la hauteur du corps. Puis URL d'arrière-plan. Et j'ajouterai l'image de la pluie. La pluie qui tombe est en fait une image que vous pouvez trouver dans les ressources de cette leçon. Alors maintenant, quand je vais au navigateur et recharger, vous pouvez voir que nous avons notre arrière-plan et l'image de la pluie se trouve au-dessus. Maintenant, nous avons seulement besoin d'animer l'image de la pluie. Donc, je vais revenir à mon CSS et je vais créer une nouvelle animation et le nommer pluie. Puis à 0%, j'ajouterai position de fond 0% à partir de la gauche et 0% à partir du haut. Puis à 100%, j'ajouterai position de fond 20 pour cent de la gauche et 100 pour cent d'une ville. Bien. Maintenant, nous devons ajouter l'animation à l'image de la pluie. Donc, je vais aller ici et ajouter de l'animation. Pluie, 0,3 seconde, linéaire et infini, bien sûr. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir la position de l'image de pluie change, nous donnant cet effet de pluie que vous allez chercher. 87. 91 - Effets de hover d'icônes avec des animations de CSS: Bonjour à tous et bienvenue à cette nouvelle leçon dans le cours où nous allons créer ce bel effet de vol stationnaire sur ces icônes Font Awesome. Donc, lorsque je survole l'un de ces éléments, vous pouvez voir un fond bleu foncé s'estomper et une bordure s'estompe aussi, et a une animation autour de l'arrière-plan. Alors créons ça ensemble. Donc, ici, dans mon HTML, vous pouvez voir que j'ai un lien pour la bibliothèque d'icônes Font Awesome qui me donnera accès aux icônes que nous allons utiliser dans cet exemple. Je vais commencer ici par ajouter un UL, puis LI. Et à l'intérieur, je vais ajouter une étiquette d'icône et lui donner une classe de coeur FAS et FAA. Ensuite, je vais copier ceci, le coller à nouveau trois fois. Et je changerai la classe d'icônes à chaque fois. Donc je vais dire martini en verre, globe et cadeau. Alors maintenant vous pouvez voir que nous avons nos quatre icônes répertoriées ici. Ensuite, allons dans notre CSS pour ajouter quelques styles. Je vais cibler l'UL et j'ajouterai du rembourrage, 0, marge 0 ainsi, et affichage flex. Ensuite, je vais cibler le LI à l'intérieur et ajouter list-style type. Aucun. Largeur 120 pixels, hauteur, 120 pixels aussi. Et nous voulons des espaces entre les icônes. Nous allons donc ajouter la marge 0 et 20 pixels de gauche et de droite. Ensuite, j'ajouterai une bordure, deux pixels, solide. Et cette couleur bleu foncé. Bon, maintenant nous voulons faire ce rayon de frontière. Donc, je vais aller ajouter un rayon de bordure 50 pour cent. Ensuite, j'ajouterai la transition 0, 0, 0,5 secondes, position relative. Et afin de centrer les icônes à l'intérieur du LI, nous allons utiliser flexbox. Donc, je vais ajouter affichage, flex, aligner les éléments centre et justifier le contenu. Centre. Cool. Maintenant, ajoutons quelques styles aux icônes. Je vais les cibler et ajouter la taille de la police. 48 pixels pour le rendre plus grand. Ensuite, coloriez notre couleur bleu foncé et la transition. Toutes les 0,5 secondes. D' accord, nous avons nos icônes qui regardent comme nous le voulons. Alors maintenant, il est temps de travailler sur le fond bleu qui s'estompe. Afin de le créer, je vais aller juste ici et dire UL LI avant. Et j'ajouterai du contenu vide. Ensuite, positionnez absolu, haut 0 , gauche, 0, largeur 100%, et hauteur 100%. Puis la couleur de fond, la couleur bleu foncé. Et pour en faire un cercle aussi, nous ajouterons un rayon de bordure de 50 pour cent. Donc maintenant vous pouvez voir que nous avons le fond bleu foncé et il couvre l'icône. Continuons. Afin de faire apparaître l'icône à nouveau, je vais revenir ici et ajouter z-index minus1, puis passer toutes les 0,5 secondes. Et nous allons ajouter l'opacité 0. Maintenant, vous pouvez voir que l'arrière-plan a disparu parce que nous avons réglé l'opacité sur 0. Mais nous voulons qu'il apparaisse à nouveau quand nous survolons. Donc, je vais revenir à mon CSS et en survolant l'allié, je vais le faire. Donc, il y a quelques changements à l'élément pseudo avant. Je vais ajouter de l'opacité, une pour le faire apparaître à nouveau. Et j'ajouterai l'échelle de transformation 0.8. Donc, il ne prendra pas toute la largeur et la hauteur de l'allié. Et alors il nous laissera un espace libre pour ajouter la frontière. Donc maintenant, quand je vais et survolez les icônes, vous pouvez voir que l'arrière-plan apparaît à nouveau, et il ne prend pas la même quantité d'espace que l'élément de liste. Cela prend 80%, laissant un peu d'espace libre autour d'elle. Mais les icônes elles-mêmes n' apparaissent pas parce qu'elles ont la même couleur que l'arrière-plan. Alors faisons le changement de couleur en planant. Je vais aller ici et dire UL LI sur le vol stationnaire. Je vais faire quelques changements qui sont arrivés aux icônes. Je vais ajouter la couleur blanche. Très bien, maintenant, créons la bordure animée qui apparaît autour du fond bleu foncé. Je vais copier le pseudo élément avant entier, coller, et changer avant à après. Ensuite, j'y apporterai quelques modifications. Tout d'abord, je vais rendre l'arrière-plan transparent parce que nous ne voulons pas de couleur d'arrière-plan. Ensuite, je vais ajouter une bordure, deux pixels pointillés. Et cette couleur bleue plus claire. Et enfin, la boîte de taille border-boîte. Donc, si nous changeons l'opacité à une, vous pouvez voir que la bordure apparaît maintenant autour de la bordure des éléments de la liste. Alors revenons en arrière et changons-le à 0 à nouveau. Maintenant, créons l'animation pour la bordure. Je vais aller ici et créer une nouvelle animation. Nommez-le en rotation. Et au début de l'animation, à 0%, j'ajouterai l'échelle de transformation 0.92, ce qui réduira un peu le pseudo élément after et le mettra entre la bordure des éléments de la liste et le fond bleu. Donc, ensuite, je vais ajouter pivoter 0 degrés. Je vais le copier, le coller à nouveau, et à 100%, je le ferai tourner de 360 degrés. D' accord, c'est bien. Enfin, nous allons appliquer cette animation à l'élément pseudo after pour quand nous survolons le LI. Alors faisons ça. Je vais dire LI sur le vol stationnaire après. Et j'ajouterai l'opacité une au début. Puis animation, rotation, dix secondes, linéaire et infini. Droit ? Maintenant, quand je vais passer la souris sur les icônes, vous pouvez voir le fond bleu foncé s'estomper. Ensuite, la couleur de l'icône change en blanc, et la bordure en pointillés commence à tourner. Et cela nous donne un bel effet de vol stationnaire. 88. 92 - Animation de texte de chargement: Bonjour tout le monde. Bienvenue dans cette nouvelle leçon du cours où nous allons créer cette belle animation de chargement. Vous pouvez voir qu'il s'agit d'une animation agréable où les couleurs du chargement des mots changent et l'espacement des lettres et l'opacité changent également. Alors créons ça. Ici, dans mon HTML. Je vais commencer par ajouter un UL. Puis à l'intérieur de celui-ci, j'ajouterai un allié et ajouterai la première lettre L. Ensuite, je copierai ceci et je la colle six fois et changerai la lettre à chaque fois jusqu'à ce que nous ayons le mot chargement. Ensuite, je vais aller à mon CSS pour y ajouter quelques styles. Je vais cibler l'URL et nous allons réinitialiser la marge et le remplissage pour cela. Donc, je vais ajouter la marge 0, remplissage 0 aussi. Et nous voulons que les lettres soient affichées côte à côte. Donc, je vais ajouter un flex d'affichage. Maintenant. Bon, continuons. Je vais cibler les éléments de liste à l'intérieur de l'URL, qui représente les lettres. Ensuite, je vais ajouter list-style, aucun pour se débarrasser de ces puces. Puis taille de police, 80 pixels pour agrandir les lettres, puis espacement des lettres. 20 pixels. On y va. Voici nos lettres assis côte à côte avec 20 pixels d'espacement entre chacune d'elles. Ensuite, nous allons travailler sur notre animation. Je vais y aller et créer une nouvelle animation. Nommez-le en charge. Et rendons les choses simples au début. Changeons les couleurs des lettres. Donc, à 0% de la durée de l'animation, nous allons rendre la couleur rouge. Puis à 100%, la couleur sera bleue. Cela nous donnera donc un changement progressif de couleur du rouge au bleu. Ok, ajoutons l'animation ici aux lettres. Donc animation, chargement, trois secondes, linéaire et infini. D' accord, donc ici vous pouvez voir que la couleur des lettres change du rouge au bleu sur une période de trois secondes. Ensuite, changeons la position des lettres. Je veux passer de droite à gauche. Donc, j'irai ici et à 0%, je vais ajouter transformée traduire X moins 50 pixels. Et à 100%, je vais ajouter transformer traduire X 50 pixels. Ainsi, les lettres vont commencer à déplacer 50 pixels de la gauche de la position d'origine à 50 pixels vers la droite. Juste comme ça. Ok, Maintenant, pendant ce mouvement, nous voulons changer l'espacement des lettres pour que les lettres se rapprochent les unes des autres et se répandent à nouveau. Donc, à 0%, j'ajouterai l'espacement des lettres. 20 pixels. Ensuite, j'ajouterai une nouvelle étape d'animation à 50% de la durée de l'animation ici. Et à l'intérieur, j'ajouterai l'espacement des lettres moins 20 pixels. Puis à 100%, j'ajouterai à nouveau l'espacement des lettres de 20 pixels. Donc, ce qui se passera ici, c'est que pendant le mouvement, les lettres se rapprocheront les unes des autres, puis nous nous éloignerons à nouveau, comme vous pouvez le voir ici. Cool. Maintenant, il reste une chose ici. Lorsque nous rechargeons la page, nous voulons que les lettres s'estompent rapidement, restent pendant un certain temps, puis disparaissent. Nous pouvons y parvenir en contrôlant l'opacité. Donc, je vais aller ici dans la durée de l'animation et à 0%, j'ajouterai l'opacité 0. Alors je veux qu'il s'estompe rapidement. Je vais donc créer une nouvelle étape à 10 pour cent, et j'ajouterai une opacité. Alors maintenant, quand je vais recharger, vous pouvez voir que les lettres s'estompent bien. Bien. Maintenant, nous voulons qu'ils s'estompent aussi. Donc, je vais aller à mon CSS et à 50 pour cent, j'ajouterai l'opacité une aussi. Donc, ils resteront pointus, invisibles de 10 pour cent à 50%. Ensuite, à 100%, j'ajouterai l'opacité 0, donc ils disparaîtront bien. Donc maintenant, quand je recharge la page, vous pouvez voir qu'ils s'estompent, puis s'estomper, ce qui nous donne l'effet de chargement que nous recherchons. Super. Maintenant, il reste une chose. Nous voulons que toutes les lettres donnent cet effet, mais l'une après l'autre. Donc la première lettre, puis la seconde, puis la troisième, et ainsi de suite. Ce que nous pouvons faire, c'est que nous pouvons utiliser la propriété de delay d'animation sur chacun d'eux. Donc, je vais aller ici et ajouter UL LI nième enfant un. Cela ciblera la première lettre. Et parce que nous voulons que la première lettre apparaisse immédiatement, nous ajouterons un délai d'animation 0 secondes. Alors je vais copier tout cela. Coller à nouveau six fois. Et je vais en changer un ici, 22. Et ajouter un délai d'animation, 0,2 seconde. Puis 3,40 secondes, 4,60 secondes, 5,80 secondes, 61 secondes, et enfin 7,21 secondes. Donc nous y voilà. Les lettres changent l'une après l'autre, qui nous donne cette belle animation de chargement. 89. 93 - Effet pulsé génial à partir de animations css: Bonjour tout le monde. Dans cette leçon du cours d'animations CSS, nous allons créer cet effet de pouls. Vous pouvez voir que nous avons une icône Font Awesome ici pour un téléphone. Et il a un fond vert. Et il y a deux bordures qui pulsent. Ils grandissent et disparaissent. Nous allons donc utiliser des animations CSS, et des transformations pour cette leçon. accord, Tout d'abord, je vais commencer par aller ici dans mon HTML et ajouter un div et lui donner une classe d'impulsion. Puis à l'intérieur de celui-ci, j'ajouterai une balise d'icône. Donnez-lui une classe de téléphone FAS et FAS. Donc, cela va imprimer l'icône du téléphone pour nous. Et vous pouvez voir ici que j'utilise un lien CDN pour la bibliothèque Font Awesome qui nous donnera accès à toutes les icônes Font Awesome. Très bien, donc quand nous voyons que dans le navigateur, vous pouvez voir que nous avons notre icône assis juste ici au centre de la page, et il a une couleur de noir par défaut. Alors allons à notre CSS et ajoutons quelques styles. Je vais cibler la div avec la classe de pouls, qui a notre icône à l'intérieur. Et j'ajouterai la largeur, 100 pixels, hauteur 100 pixels aussi. Couleur de fond, cette couleur verte, couleur blanche. Et afin de faire une circulaire, nous ajouterons un rayon de bordure de 50 pour cent. Très bien, maintenant entrons l'icône à l'intérieur horizontalement et verticalement. Je vais ajouter le texte aligner, centre et la hauteur de ligne, 100 pixels pour le centrer verticalement. Ensuite, nous devons rendre l'icône un peu plus grande. Nous allons donc ajouter la taille de police 48 pixels. Et enfin, nous allons ajouter la position relative. Droit ? Donc maintenant, nous avons l'icône qui regarde exactement comme nous le voulons avec ce fond circulaire vert. Et maintenant, nous voulons créer les frontières autour d'elle qui seront animées. Alors nous allons gérer ça. Je vais aller juste ici et dire post deux-points avant. Et j'ajouterai du contenu. Position vide, absolue, gauche moins 20 pixels. Top moins 20 pixels, taux moins 20 pixels, et bas moins 20 pixels. Ensuite, nous allons ajouter une bordure à cela avant pseudo élément. Donc, je dirai frontière, un pixel, solide et notre couleur verte. Bon, maintenant vous pouvez voir que nous avons notre frontière autour de l'avant. Et l'espace juste ici entre la frontière et la div d'impulsion est égal à 20 pixels. Et ce sera parce que nous avons ajouté moins 20 pixels ici sur la gauche, haut, la droite et le bas. Donc, si nous allons changer ces pixels moins sur la gauche à 0, vous pouvez voir que la bordure touche maintenant le bord gauche de la div d'impulsion. Faisons ce moins 20 pixels à nouveau. Et nous voulons une frontière circulaire. Donc, nous allons ajouter le rayon de bordure 50 pour cent. Et maintenant, nous allons animer cette bordure pour nous donner l'effet de pouls que nous essayons de faire. Donc, je vais créer une nouvelle animation et le nommer pulsant. Et à l'intérieur de celui-ci à 0% de la durée de l'animation, j'ajouterai la transformation, l'échelle 0,5 et l'opacité 0. Puis à 50 pour cent. Je vais copier ceci et changer l'échelle à un et l'opacité à un aussi. Puis à 100%, je vais changer l'échelle à 1.2, donc elle sera plus grande et l'opacité à 0, donc nous allons disparaître. Donc, ce qui va se passer ici est que la frontière commencera à la moitié de sa taille et une opacité de 0, puis elle deviendra plus grande jusqu'à ce qu'elle atteigne sa taille d'origine et une opacité d'un, puis elle deviendra encore plus grande et l'opacité sera de nouveau 0, ce qui signifie qu'il disparaîtra. Voyons si on peut faire cet effet. D' abord. Ajoutons l'animation à la bordure. Je vais monter ici et ajouter l'animation pulsant 1,5 seconde, linéaire et infini. Donc maintenant, vous pouvez voir qu'il s'agrandit, puis disparaît. Ok, ajoutons une autre bordure. Je vais aller ici et ajouter des virgules. Ensuite, j'ajouterai un pseudo élément après à côté d'eux. Avant. Ensuite, nous voulons qu'ils commencent leurs animations l'une après l'autre. Donc, je vais aller classer ici et cibler le pseudo élément après seul. Et j'ajouterai le délai d'animation 0,5 seconde. Et maintenant, vous pouvez voir qu'ils commencent l'un après l'autre, ce qui nous donne l'effet que nous voulions. 90. 94 - Spectacle de diapos images simples avec des animations de css: Bonjour tout le monde. Dans cette leçon, nous allons créer ce curseur d'image simple en utilisant l'animation CSS. L' idée derrière ce curseur d'image est très simple, alors voyons comment nous pouvons le faire. Tout d'abord, je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de curseur. Ensuite, je vais aller à mon CSS et j'irai à l'intérieur du sélecteur de corps et ajouter la couleur de fond. Cette couleur gris foncé. Ensuite, je vais cibler le div avec la classe de curseur. Et je vais ajouter la largeur 800 pixels, hauteur 400 pixels, puis l'arrière-plan, URL. Et j'ajouterai la première image. Maintenant, nous devons créer notre animation, mais au lieu de vous regarder l'écrire, je vais mettre l'enregistrement en pause et l'ajouter. Ensuite, je vais vous expliquer comment cela fonctionne. Alors, attendez. Bienvenue de retour. Donc, vous pouvez voir que j'ai créé l'animation et lui a donné le changement de nom BG. L' idée derrière ce simple curseur est que nous allons changer l'image de fond du curseur div. Ainsi, vous pouvez voir qu'à 0%, l'arrière-plan sera la première image et il reste comme ça jusqu'à 20% de la durée de l'animation. Ensuite, de 20 pour cent à 25 pour cent, l'arrière-plan passera de la première image à la seconde. Et la seconde reste jusqu'à 45 pour cent de la durée de l'animation, à quel point elle passe à la troisième image, et ainsi de suite jusqu'à ce que toutes les images soient affichées. Alors ajoutons cette animation à la div du curseur. Je vais aller ici et ajouter de l'animation. Ensuite, le nom de l'animation change BG, Puis 10 secondes, linéaire et infini. Et maintenant, quand je vais au navigateur et recharge la première image pour rester pendant un certain temps, puis la deuxième image apparaît et reste pendant un certain temps. Puis le troisième et ainsi de suite, jusqu'à ce que l'animation se termine. 91. 95 - Modification de la couleur de fond avec des animations de CSS: Bonjour tout le monde. Dans cette leçon, nous allons créer cette couleur d'arrière-plan en constante évolution. Comme vous pouvez le voir, la couleur de fond du corps change en douceur. L' idée derrière cet effet est très simple. Alors plongons et voyons comment on peut le faire. Tout d'abord, j'irai ici dans mon HTML et j'ajouterai un H1. Et à l'intérieur, je dirai changé, puis balise BR, puis couleur de fond. Ensuite, je vais aller à mon CSS pour y ajouter quelques styles. Je vais cibler le H1. Ensuite, j'ajouterai la taille de la police 70 pixels. Ensuite, je veux centrer le texte. Donc, je vais ajouter du texte, aligner, centrer, puis taxe transformer, majuscule, et couleur blanche. Bien. Maintenant, afin de créer cette couleur d'arrière-plan changeante, nous devrons créer une nouvelle animation et créer autant d'étapes que nécessaire. Et à chaque étape, nous allons changer la couleur de fond. Alors voyons comment on peut faire ça. Je vais aller ici et créer une nouvelle animation. Et je le nommerai G, change. Puis à 0%, j'ajouterai la couleur de fond, cette belle couleur. Ensuite, je vais copier ceci, le coller à nouveau, et 20 pour cent. Je vais changer la couleur de fond en une autre couleur. Bien. Maintenant, je vais mettre l'enregistrement en pause et ajouter les autres étapes. Et bienvenue. Ici, j'ai ajouté les autres étapes avec de nouvelles couleurs d'arrière-plan et 40%, puis 60%, puis à 80%, et enfin à 100%. Nous devons donc ajouter notre animation au corps. Donc, je vais aller ici et ajouter de l'animation. Ensuite, le nom de l'animation BG change. Lorsque la durée de l'animation. Essayons dix secondes. Lorsque l'itération de l'animation compte infini, bien sûr, note. Maintenant, jetons un coup d'oeil à notre animation. Je vais recharger la page lorsque l'animation devrait commencer. Ainsi, vous pouvez voir que la couleur d'arrière-plan change en douceur d'une couleur à l'autre, et ainsi de suite et ainsi de suite. Et il continuera à faire cela parce que nous avons dit que l'itération de l'animation compte à l'infini. Un petit mot ici. Si vous regardez ici de près l'animation que nous avons créée, vous remarquerez que la couleur d'arrière-plan au début de l'animation est la même à la fin de celle-ci. Et c'est parce que lorsque l'animation finira son premier cycle, elle recommencera à zéro. Et la dernière couleur ici changerait à la première couleur. Donc, si elles ne sont pas de la même couleur va changer, ne sera pas lisse. Par exemple, changeons cette dernière couleur en, disons vert. Ensuite, allez recharger. Ensuite, nous attendrons jusqu'à ce que l'animation se termine. Et ici, vous pouvez voir le changement ne se passe pas en douceur. Donc, nous devrions le changer à la première couleur et tout ira bien. Donc c'est tout pour cette leçon. C' était très simple et vous pouvez utiliser autant de couleurs que vous le souhaitez. Ainsi, par exemple, vous pouvez modifier la couleur tous les 10 % de la durée de l'animation. Donc, vous vous retrouveriez avec 10 couleurs différentes. Vous pouvez également contrôler le temps que chaque couleur reste à l'écran en modifiant la durée de l'animation. 92. 96 - cradle de newton avec des animations CSS: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet berceau Newton en utilisant des animations CSS. Je pense que ce serait une leçon intéressante, alors voyons comment nous pouvons y arriver. Tout d'abord, j'irai à mon HTML ici, et je vais ajouter un div et lui donner une classe de berceau. Puis à l'intérieur de cela, j'ajouterai cinq travées vides pour que chaque travée soit comme un bras du berceau. Ensuite, je vais aller à mon CSS pour que cela ressemble à notre démo. Nous allons commencer par cibler toutes les travées à l'intérieur de la div avec la classe de berceau. Donc, je vais dire berceau travée. Et je vais continuer en définissant la propriété d'affichage de ces travées pour bloquer afin qu'elles deviennent des éléments de bloc. De cette façon, nous pouvons leur ajouter de la largeur et de la hauteur. Ensuite, j'ajouterai la largeur, trois pixels. Et ce sera la largeur des bras du berceau, puis la hauteur, 300 pixels et la couleur de fond, blanc. Donc maintenant, si je vais recharger mon navigateur, vous pouvez voir que nous avons toutes les travées et qu'ils sont assis l'une au-dessus de l'autre. Parce que nous définissons la propriété d'affichage à bloquer, nous devons les aligner afin qu'ils se tiennent côte à côte et non de haut en bas. Nous pouvons facilement le faire en utilisant notre bon ami, Flexbox. Donc, je vais aller juste ici à l'intérieur de mon CSS et je vais cibler leur conteneur, qui a la classe de berceau. Et je vais juste dire display flex. Maintenant, vous pouvez voir qu'ils sont tous assis côte à côte. Mais nous devons les séparer. Ce qui signifie que nous devons ajouter un peu d'espace entre eux. Donc, je vais aller à l'intérieur du sélecteur de travée et j'ajouterai marge 0 du haut et du bas et 30 pixels de la gauche et de la droite. Et maintenant, vous pouvez voir qu'ils ont un peu d'espacement. Super. Maintenant, allons au sélecteur de berceau et ajouter bordure, 10 pixels supérieurs, blanc massif. Et vous pouvez voir que nous nous rapprochons de ce que nous voulons. Maintenant, nous devons travailler sur les cercles du berceau. Je vais les créer en utilisant le pseudo élément avant. Donc je vais cibler à nouveau les travées. Et je le dirai avant. Ensuite, j'ajouterai du contenu, vide, puis position, absolu. Et puis nous allons réellement monter ici pour étendre le sélecteur et ajouter position relative afin que les balles ou les cercles soient relatifs à nos tours. Ensuite, je vais descendre ici et ajouter le bas 0 parce que nous voulons qu'ils soient au bas de nos travées, bien sûr. Puis à gauche 0 aussi. Largeur 60 pixels, hauteur 60 pixels. Nous avons besoin d'eux pour avoir la même largeur et la même hauteur afin qu'ils soient carrés y, car alors nous pouvons facilement les faire des cercles en ajoutant simplement border-rayon. 50 pour cent. Puis enfin, j'ajouterai la couleur de fond, blanc aussi. Ok, alors maintenant quand je vais au navigateur et recharger, vous pouvez voir que nous avons les pseudo-éléments avant pour chaque travée et ils sont assis au bas de leur travée, bien sûr, parce que nous avons ajouté le bas 0. Mais maintenant, nous avons besoin d'eux pour être centrés dans chaque travée. Donc ce qu'on peut faire, c'est qu'on peut les déplacer vers la gauche pour qu'ils soient centrés, comme dans notre démo. Donc, je vais aller ici et ajouter transform, traduire x moins 50%, sorte qu'ils seront décalés vers la gauche de la moitié de leur largeur, qui est de 30 pixels, et être centrés comme ça. Mais vous pouvez voir qu'il y a un peu d'espacement entre les cercles qui les fait paraître séparés les uns des autres. Donc, allons juste ici à l'intérieur du sélecteur de travée et diminuons cette marge de 30 pixels à 29 pixels. On y va. Ils se touchent et il n'y a pas d'espace entre eux. Super. Maintenant, nous devons travailler sur notre animation pour que ce berceau fonctionne réellement. Donc, j'ai une démo vraiment lente juste ici du berceau qui nous permettra de voir ce qui se passe clairement. J' ai besoin que vous ignoriez le bras droit ici pour l' instant et que vous fassiez attention au bras gauche ici. Jetez un oeil à son mouvement. Je vais recharger le navigateur. Et vous pouvez voir le premier bras commence à partir de sa position d'origine et tourner 60 degrés dans le sens des aiguilles d'une montre, puis tourne à nouveau à sa position d'origine. Jours pendant un certain temps jusqu'à ce que le second bras revienne, puis répète simplement le processus. Nous aurons donc trois étapes pour l'animation du premier bras. Dans la première étape, le bras tournera dans le sens des aiguilles d'une montre de 60 degrés, puis retourné à sa position d'origine dans la deuxième étape. Et puis dans la dernière étape, il restera toujours dans sa position d'origine jusqu'à ce que le deuxième bras aille et termine sa rotation. Alors créons ces trois étapes. Je vais aller ici et créer une nouvelle animation. Appelle le bras gauche. Puis à l'intérieur de celui-ci, je dirai qu'à 0%, j'ajouterai la transformation, pivoterai 0 degrés. Puis une transformation de 25 pour cent tourner de 60 degrés de sorte que le bras tourne de 60 degrés dans le sens des aiguilles d'une montre. Puis à 50 pour cent, je veux qu'il revienne à sa position initiale. Donc je vais dire Transformer, Tourner 0 degrés. Et je veux qu'il reste dans cette position jusqu'à ce que le bras droit termine sa rotation. Donc, je vais dire qu'à 100%, Transform Rotate 0 degrés aussi. Donc, de 50 pour cent à 100% de la durée de l'animation, je dirai au bras gauche d'avoir une rotation 0, ce qui signifie qu'il restera dans sa position. Cool. Maintenant, nous voulons ajouter cette animation au bras gauche, donc je vais cibler la portée. Ensuite, le premier enfant, qui sélectionnera le bras gauche pour nous, bien sûr. Puis à l'intérieur de celui-ci, j'ajouterai l'animation, bras gauche et ajouterai une durée d'animation de deux secondes. Alors, calmez-vous. Et infinie. Alors j'irai recharger. Et vous pouvez voir que le bras gauche tourne, mais il tourne sur son point central. C' est tout à fait normal, bien sûr, parce que c'est la valeur par défaut, mais nous voulons qu'il tourne à partir de son point haut juste ici. On peut gérer ça. Pas de problème en allant juste ici à l'intérieur du sélecteur de span et en ajoutant l'origine de la transformation. Et maintenant, vous pouvez voir que le bras gauche tourne comme nous le voulons. Il tourne de 60 degrés dans le sens des aiguilles d'une montre, puis retourne à sa position, reste pendant un certain temps. Répète ensuite le processus. D'accord. Maintenant, regardons le bras droit. J' irai à nouveau à notre démo lente. Et cette fois, je veux que tu regardes le bras droit. Donc, quand je recharge, vous pouvez voir que le bras droit reste dans sa position et ne bouge pas tant que le bras gauche ne tourne pas et retourne. Et une fois qu'il revient, le bras droit commence à tourner de 60 degrés dans le sens inverse des aiguilles d'une montre. Cela signifie que nous allons utiliser la propriété de delay d'animation sur le bras droit pour le faire attendre jusqu'à ce que le bras gauche termine son action. Rechargeons à nouveau. Alors ça attend. Puis commence à tourner, se termine, puis reste immobile jusqu'à ce que le bras gauche se termine, puis répète l'ensemble du processus. Alors créons cette animation. Je vais aller ici et créer une nouvelle animation. Appelez le bras droit. Alors je le ferai, je ne peux pas être tout ça. Collez-le à nouveau ici et changez simplement 60 degrés à moins 60 degrés. Ensuite, je vais monter ici, copier ceci, coller à nouveau, et changer le premier enfant en dernier enfant. Ensuite, je vais changer le nom de l'animation en bras droit au lieu de gauche sur. Laissez tout tel quel et ajoutez un délai d'animation de 1 seconde. Donc, ce qui se passera lorsque je recharge est que le bras gauche tourne immédiatement vers la gauche et il faudra 50 pour cent de la durée de l'animation pour faire pivoter et revenir. En d'autres termes, cela prendra 1 seconde. Pendant ce temps, le bras droit attendra cette 1 seconde car il a un délai d'animation de 1 seconde. Et puis il commencera à tourner vers la droite, prenant la moitié de sa durée d'animation, aussi 1 seconde pour terminer son action et revenir. Pendant ce temps. Cette 1 seconde, qui représente à nouveau la moitié de cette durée d'animation. Le bras gauche va attendre et cette attente pour moitié déplacée son demi-processus se poursuivra pour toujours. 93. 97 - Effet de chargement coloré avec des animations CSS: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer ce joli préchargé. Vous pouvez voir qu'on a quatre carrés. Tous sont tournés de 45 degrés et ils ont cet effet. Ils s'éloignent les uns des autres, tous tournant à 90 degrés comme une seule unité, puis reviennent ensemble. Et cela arrivera. Et c'est une belle animation et c'est facile à faire. Un résumé de base de ce que nous allons faire est que nous allons créer un div conteneur qui contient les quatre carrés à l'intérieur. Ensuite, nous allons changer les valeurs de position pour chaque carré pour faire de la couverture du Foursquare la div extérieure et prendre tout l'espace disponible. Ensuite, nous allons faire pivoter la div externe, qui fera pivoter les quatre carrés avec elle. Et après cela, nous allons créer notre première animation dans laquelle nous allons changer la hauteur et la largeur de la div conteneur, ce qui fera les quatre carrés intérieurs s' éloigner les uns des autres et revenir ensuite les uns vers les autres. Et enfin, nous allons créer notre deuxième animation qui fera tourner les quatre carrés eux-mêmes. Voyons donc comment nous pouvons créer ça. Peut-être que ça semblait beaucoup, mais je vous promets que ce sera très facile une fois que nous commencerons à le faire. abord, je vais commencer ici dans mon HTML en ajoutant notre div et en lui donnant une classe de conteneur. Ensuite, j'ajouterai quatre travées à l'intérieur, et ce seront les quatre carrés à l'intérieur du conteneur div. Après cela, j'irai dans mon CSS pour ajouter quelques styles. Je vais commencer par cibler la div avec la classe de conteneur. Puis à l'intérieur de cela, j'ajouterai la largeur 100 pixels, la hauteur 100 pixels. Et nous allons ajouter une couleur de fond temporaire de rouge. Et puis je vais enfin ajouter la position relative. Donc maintenant vous pouvez voir que nous avons juste un carré rouge avec la largeur et la hauteur de 100 pixels. En allant de l'avant, nous allons maintenant travailler sur les quatre travées à l'intérieur du conteneur div. Ajoutons d'abord quelques styles généraux à chacun d'entre eux. Je vais cibler la portée, et j'ajouterai la position. Largeur absolue, 50 pixels. Hauteur 50 pixels. Vous pouvez voir que rien n'a changé parce que nous n'avons pas ajouté de couleur d'arrière-plan. Donc, nous allons cibler chaque étendue individuellement. Pour ce faire, j'irai juste ici et dire « Span in child ». Et je vais cibler le premier. Ensuite, j'ajouterai l'onglet 0, à gauche 0 aussi. Ainsi, la travée sera dans le coin supérieur gauche du conteneur. Puis en dessous de cela, j'ajouterai une couleur de fond. Cette belle couleur jaune. Donc maintenant, vous pouvez voir le premier carré se trouve sur le dessus du conteneur rouge avec la largeur et une hauteur de 50 pixels, ce qui est la moitié de la largeur et de la hauteur du conteneur. Et c'est dans le coin supérieur gauche. Puisque nous avons dit à gauche et en haut à 0, nous ferons la même chose pour les trois autres carrés, et nous allons les positionner d'une manière qui les rendra complètement couverts le conteneur rouge. Nous positionnerons donc le suivant à côté de ce carré jaune, et les deux autres seront placés en dessous d'eux. Droit ? Je vais retourner dans mon CSS pour cibler le deuxième carré. Donc, je dirai span et enfant 2. Et j'ajouterai le top 0 et le droit 0. Puis la couleur de fond, cette couleur verte. Maintenant, vous pouvez voir que nous avons les carrés verts assis à côté du jaune. Puisque nous avons dit que c'est la bonne propriété à 0. Impressionnant. Maintenant, nous allons travailler sur les deux autres carrés. Je vais revenir à mon CSS et copier ce bloc de code. Coller à nouveau deux fois. Et je vais cibler la troisième portée et changer de haut ici, en bas. Cela le positionnera sur le côté gauche du conteneur en dessous du premier carré. Je vais également changer sa couleur de fond pour cette belle couleur rougeâtre. Ensuite, je vais cibler la quatrième portée et changer de haut en bas et de gauche à droite. Ainsi, il sera positionné dans le coin inférieur droit du conteneur sous le fond vert. Ensuite, je vais ajouter de la couleur, cette couleur bleue. Bon, maintenant vous pouvez voir que nous avons les quatre carrés et qu'ils couvrent complètement le conteneur rouge. Maintenant, commençons à travailler sur l'animation du conteneur. Nous animerons sa largeur et sa hauteur pour le rendre plus grand que plus petit. Encore une fois, je vais aller ici et créer une nouvelle animation. Et je vais juste le nommer animer. Puis à l'intérieur, à 0% de la durée de l'animation, je dirai largeur 100 pixels et hauteur 100 pixels aussi. Ainsi, le conteneur commencera à sa taille d'origine. Ensuite, je vais copier cela, le coller. Et à 10 pour cent de la durée de l'animation, je laisserai les valeurs de la largeur et de la hauteur telles qu'elles sont, qui est de 100 pixels. De cette façon, du début de l'animation jusqu'à 10 pour cent de la durée de l'animation, le conteneur restera à sa taille d'origine avant de grandir. Puis en dessous de cela, je vais coller cela à nouveau. Et à 50% de la durée de l'animation, je vais maintenant agrandir le carré du conteneur. Je vais changer la largeur à 150 pixels au lieu de 100. Et puis la hauteur à 150 pixels aussi. Puis collez à nouveau. Et à 90 pour cent, je ferai la largeur et la hauteur 100 pixels. Puis enfin, à 100%, je laisserai aussi la largeur et la hauteur comme 100 pixels. Donc, fondamentalement, le changement dans la science se produira de 10 pour cent à 90 pour cent de la durée de l'animation. Il va devenir plus grand, puis revenir à sa taille d'origine. Alors ajoutons cette animation au conteneur rouge. Je vais monter ici à l'intérieur du sélecteur de conteneur. Et je vais ajouter de l'animation, animer 1 seconde, linéaire, et infini. Alors maintenant, quand je vais recharger le navigateur, vous pouvez voir le conteneur rouge devient plus grand et sépare les quatre carrés intérieurs les uns des autres, puis devient plus petit et revient à sa taille d'origine. Cool, mais on n'a pas encore fini. Nous voulons faire pivoter le carré rouge de 45 degrés. Donc, je vais revenir ici à l'intérieur du sélecteur de conteneur, et je vais ajouter la transformation, faire pivoter 45 degrés. Donc maintenant, vous pouvez voir le conteneur tourne de 45 degrés et les quatre carrés tournent avec lui parce qu'ils sont à l'intérieur. On n'a plus besoin de ce fond rouge. Donc je vais retourner ici et l'enlever. Impressionnant. Maintenant, il ne nous reste qu'une chose, qui est de faire tourner les carrés pendant qu'ils s'éloignent les uns des autres. Ce sera facile à faire. Alors créons l'animation responsable de cela. Je vais aller ici et créer une nouvelle animation. Et je vais le nommer, tourner. Ensuite, je vais copier toutes les étapes de la première animation et le coller à l'intérieur de l'animation de rotation. Et à 0%, je vais supprimer cela et transformer Rotate 0 degrés. Puis à 10 pour cent, il sera à nouveau 0 degrés. Et à 50 pour cent, je vais le changer à 90 degrés afin que chaque carré soit tourné de 90 degrés. Puis à 9100%, je vais le laisser tourner de 90 degrés à nouveau. Je ne veux pas qu'il tourne en arrière. Je voulais juste rester en rotation de 90 degrés. Cool. Ajoutons cette animation à nos carrés. Je vais monter ici à l'intérieur du sélecteur de travée et ajouter de l'animation. Rotation. 1 seconde, linéaire et infini. Impressionnant. Alors maintenant, vous pouvez voir les quatre carrés tourner 90 degrés alors qu'ils sont loin les uns des autres, puis retourner l'un vers l'autre, complétant notre petit effet cool. 94. 98 - Effet de carrés mobiles avec des animations CSS: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons apprendre comment créer cette belle précharge ou animation. Vous pouvez voir qu'on avait trois carrés et qu'ils bougent comme s'ils se poursuivaient. Je veux que tu regardes de près un seul d'entre eux. Et vous remarquerez que chacun se déplace juste dans un chemin régulier, en fait un chemin d'une autre place. Et ils se déplacent tous sur le même chemin. La seule différence est que tous ont une propriété de delay d'animation différente. Donc ils se déplacent l'un après l'autre, créant cet effet de chasse. Alors commençons à créer ça. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de chargeur. Ensuite, à l'intérieur de cela, nous allons ajouter trois travées, et ce sont les trois carrés qui créent le pré-chargé. Ensuite, je vais aller à mon CSS. abord, je vais cibler le div conteneur, qui a une classe de Loader. Et je vais ajouter la largeur, 150 pixels, hauteur 150 pixels aussi. Position relative. Puis en dessous de cela, je vais cibler les travées à l'intérieur de ce conteneur div. Et je vais ajouter la position. Largeur absolue, 50 pixels. Hauteur 50 pixels aussi. Fond, blanc. Et enfin le rayon de bordure, quatre pixels. Donc maintenant vous pouvez voir que nous avons un carré avec une hauteur et une largeur de 50 pixels. Et ce sont en fait trois travées qui sont assis l'une sur l'autre. Maintenant, nous allons travailler sur la création de nos animations. Je vais aller à mon CSS et créer une nouvelle animation et le nommer Chase. Puis à l'intérieur à 0% de la durée de l'animation, ou au début, j'ajouterai le top 0, à gauche 0. Donc ça veut dire les carrés. Nous commencerons par le coin supérieur gauche de leur conteneur. Puis en dessous de cela, à 12.5% de la durée de l'animation, je vais ajouter top 0 et gauche 50%. Donc maintenant, les carrés vont se déplacer vers la droite de 50% de la largeur du conteneur. Puis en dessous de ça. Et à 25 pour cent, j'ajouterai le top 0 à gauche, 50 pour cent. Ainsi, vous pouvez voir que les valeurs ne changent pas de 12,5 % de la durée de l'animation à 25 %. Et c'est parce que nous voulons que les places restent à leur place un peu avant de passer à la position suivante. Cela rendra juste l'effet plus agréable. Maintenant, je vais mettre la vidéo en pause et ajouter les autres étapes. Alors j'expliquerai ce que j'ai fait. Donc, vingt-cinq pour cent de la durée de l'animation, nous avons ajouté 37,5 pour cent et ajouté 50 pour cent supérieur et laissé 50 pour cent. Ainsi, les carrés se déplaceront du coin supérieur droit au coin inférieur droit, puis resteront pendant un certain temps à cet endroit jusqu'à ce que nous atteignions 50 pour cent de la durée de l'animation. Et en dessous de cela, à 62,5% de la durée de l'animation, nous avons changé à gauche à 0 à nouveau. Ainsi, les carrés seront dans le coin inférieur gauche du conteneur et resteront dans cette position à 75 pour cent. Ensuite, ils retournent dans le coin supérieur gauche à 87,5% de la durée de l'animation. Et restez à cet endroit jusqu'à ce que l'animation se termine. Et nous continuerons à le faire pour toujours. Alors montons ici à l'intérieur du sélecteur de travée et ajoutons cette animation. Je vais aller ici et ajouter de l'animation. Chase. Deux secondes, linéaire et infini. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir les carrés se déplacer et un chemin carré, et ils se déplacent tous ensemble. Donc ils apparaissent comme un carré. Maintenant, afin de les faire apparaître comme trois carrés séparés, Nous pouvons utiliser le délai d'animation. Pour faire ça. Je vais cibler la deuxième place en allant juste ici et en disant travée nième enfant aussi. Et je vais ajouter un délai d'animation, 0.700 secondes. Ensuite, je vais copier cela, le coller à nouveau, et cibler le troisième carré et ajouter le délai d'animation 1,4 secondes. Et maintenant, quand je vais à mon CSS et rechargement, vous pouvez voir que les trois carrés commencent à se déplacer l'un après l'autre, nous donnant exactement l'effet de chargement que nous allions. 95. 99 - Effet de révélation de texte avec des animations de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer cet effet d'animation de textes préchargés. Donc vous pouvez voir que nous avons un H1 ici, et c'est un peu couvert par ce texte jaune dessus. Voyons comment on peut faire ça. Je vais commencer ici dans mon HTML en ajoutant un H1. Et je dirai juste chargement. Ensuite, j'irai à ma cible CSS, celle-ci. Et j'ajouterai la taille de police 40 pixels. Marge, 0, rembourrage, 0. Transformation de texte, majuscules, espacement des lettres, dix pixels, couleur, blanc. Et enfin la position relative. Donc maintenant vous pouvez voir que nous avons notre H1 blanc et il semble assez bon. Maintenant, nous allons travailler sur les textes jaunes qui le recouvre. Nous allons utiliser le pseudo élément avant pour créer ce texte jaune. Donc je vais aller ici et dire un deux-points avant. Et à l'intérieur, j'ajouterai le chargement du contenu parce que nous voulons le même mot. Bien sûr. Ensuite, positionnez absolu , top, 0, gauche 0 ainsi. Largeur 100%. Et la couleur. Cette belle couleur jaune. Donc maintenant vous pouvez voir que le H1 est maintenant jaune, et c'est parce qu'il est maintenant couvert par le texte jaune, qui est le pseudo élément avant. Bon, continuons à travailler. Je vais aller ici à l'intérieur du pseudo élément avant et ajouter un débordement. Caché. Alors frontière, non ? Quatre pixels, solide. Et notre couleur jaune. Cool. Donc maintenant, vous pouvez voir que le texte a une bordure droite qui va se déplacer avec elle et remplir le texte blanc avec le jaune. Et maintenant, nous avons juste besoin de travailler sur l'animation de ce texte jaune. Je vais revenir à mon CSS et créer une nouvelle animation. Et je vais le nommer animate. Puis à l'intérieur à 0% de la durée de l'animation, j'ajouterai la largeur 0. Puis ajoutez 50 pour cent. Je vais faire la largeur 100%. Et enfin, à 100%, je remettrai la largeur à 0 à nouveau. Donc, ce que cette animation fera est qu'elle fera commencer les balises jaunes à une largeur de 0, puis sa largeur augmentera jusqu'à ce qu'elle devienne 100% du texte blanc, ce qui le fera couvrir. Ensuite, sa largeur sera de nouveau 0, et il se rétrécira à la fin de l'animation. Et cela continuera à se produire infiniment parce que bien sûr, nous allons définir le nombre d'itérations d'animation à infini. Ajoutons donc cette animation à l'arrière-plan jaune. Je vais monter ici et ajouter de l'animation. Animer. Cinq secondes, linéaires et infinies. Donc maintenant, vous pouvez voir que le texte jaune est de plus en plus grand et couvre le texte blanc. Puis il se rétrécit à nouveau. Et il continue à le faire infiniment, nous donnant cette belle préchargée. 96. 100 : chargement de bague rotatif sur les animations CSS: Bonjour tout le monde. Dans cette leçon, nous allons créer ce bel effet de chargeur. Vous pouvez voir que nous avons le mot chargement à l'intérieur de cette bague qui tourne autour d'elle. Voyons donc comment nous pouvons créer ça. Je vais commencer ici dans mon HTML en ajoutant un div, en lui donnant une classe de conteneur. Donc, cette classe contiendra l'anneau et le texte. Ensuite, à l'intérieur, je vais ajouter un autre div, lui donner une classe de texte. Et j'écrirai le chargement à l'intérieur de cette div. Puis en dessous de cela, je vais ajouter un autre div, lui donner une classe d'anneau. Et ce sera l'anneau qui tourne autour du texte. Ensuite, j'irai dans mon CSS pour commencer à créer cet effet de chargement. Je commencerai d'abord par cibler la div avec la classe de conteneur. Puis à l'intérieur, j'ajouterai la position, largeur relative, 200 pixels, hauteur 200 pixels ainsi. Donc maintenant le conteneur div a une largeur et une hauteur de 200 pixels, et il est centré horizontalement et verticalement à l'intérieur du navigateur en raison du code Flexbox ici dans le corps. Bon, maintenant je vais cibler la div avec la classe de bague. Et je vais régler sa largeur à 100% et sa hauteur à 100% aussi. Donc, il prend la même largeur et la même hauteur que son conteneur. Ensuite, je vais ajouter un arrière-plan temporaire à cet anneau div. Donc, je vais ajouter la couleur de fond, rouge. Après cela, j'ajouterai la bordure à gauche. Quatre pixels, solide. Cette couleur gris foncé. Donc maintenant, vous pouvez voir l'anneau div a un fond rouge et une bordure gauche gris foncé. Faisons de cette bague div un cercle. Donc, je vais revenir ici et ajouter le rayon frontière, le pourcentage. Et maintenant, vous pouvez voir l'anneau div est maintenant un cercle qui a une bordure gauche. Et cette bordure gauche sera l'anneau qui tourne autour du mot chargement. Donc nous n'avons plus besoin de ce fond rouge. C' est pourquoi je vais revenir en arrière et supprimer cette ligne de code. Maintenant, n'est-ce pas ? Maintenant, vous pouvez voir que nous avons cette frontière gauche toute seule. Et c'est ainsi que nous créons l'anneau, est juste une bordure latérale d'un cercle. Ok, stylisons ce texte pour le rendre meilleur. Je vais cibler la div avec la classe de texte. Et j'ajouterai la position, absolue , top, 0, gauche 0 aussi. Puis largeur, 100%, hauteur 100%. Et afin de centrer le texte à l'intérieur horizontalement, j'ajouterai le centre de l'alignement du texte. Ensuite, afin de le centrer verticalement, j'ajouterai la hauteur de ligne, 200 pixels. Et maintenant, le mot chargement est centré à l'intérieur du texte div. Continuons à travailler. Je vais revenir ici et ajouter la taille de la police, 22 pixels, le poids de la police, gras. Et enfin, le texte transforme en majuscules. Donc, le texte est maintenant exactement comme nous le voulons. Il nous reste une chose à faire, c' est-à-dire faire tourner la bague ici, bien sûr. Alors faisons ça. Revenez à mon CSS et créez une nouvelle animation. Ensuite, je vais le nommer, faire pivoter. Puis à l'intérieur à 0% de la durée de l'animation, je vais ajouter la transformation, faire pivoter 0 degrés. Puis à 100%, je vais ajouter transformation, faire pivoter 360 degrés. Ainsi, l'anneau fera une rotation complète pendant la durée de l'animation. Ensuite, je vais monter ici à l'intérieur de l'anneau div pour ajouter cette animation, je vais ajouter de l'animation, faire pivoter, puis la durée de l'animation de 1 seconde, puis linéaire. Et enfin infini, de sorte que l'anneau continuera à tourner autour de lui-même. Et maintenant, quand je recharge, vous pouvez voir que la bordure gauche commence à tourner autour du texte et nous donne l'effet de chargement que nous voulons. 97. 101 - Effet de chargement de lignes à partir de animations CSS: Bonjour tout le monde. Bienvenue à cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cet effet de chargement de ligne agréable. Et pour voir ce qui se passe, eh bien, regardons une démo plus lente de cet effet de chargement. Je vais recharger la page et vous pouvez voir les échelles de ligne ou grandir de gauche à droite. Ensuite, il se rétrécit de gauche à droite. Ensuite, il pousse à nouveau de droite à gauche. Et enfin, il se rétrécit de droite à gauche aussi. Ce sera un effet intéressant, alors voyons comment nous pouvons le créer. Je vais aller ici dans mon HTML et ajouter un div. Ensuite, donnez-lui une classe de chargement. Ensuite, je vais aller à mon CSS, cibler cette classe de chargement. Et je vais ajouter la largeur, 300 pixels, hauteur, trois pixels, couleur de fond, blanc. Donc maintenant vous pouvez voir que nous avons notre ligne ici, et maintenant il est temps de l'animer. Je vais revenir en arrière et créer une nouvelle animation. Nommez-le ligne. Et à l'intérieur de cela, à 0% de la durée de l'animation, j'ajouterai l'échelle de transformation x 0. Ainsi, la ligne commencera à croître à partir d'une échelle de 0. Et nous voulons qu'il commence à grandir de gauche à droite. Cela signifie que nous devons changer sa propriété d'origine de transformation. Il est centré par défaut, donc nous allons le laisser. Donc, je vais ajouter l'origine de la transformation à gauche. Ensuite, à 45 pour cent de la durée de l'animation, j'ajouterai l'échelle de transformation x 1. Ainsi, la ligne sera à sa pleine largeur à 45 pour cent de la durée de l'animation. Il sera mis à l'échelle de rien à sa pleine largeur dans cette durée, du début de l'animation à 45 % de la durée de l'animation. C' est pourquoi nous devons garder l'origine de la transformation telle qu'elle est. Donc, je vais ajouter l'origine de la transformation à gauche aussi. Ensuite, à 50% de la durée de l'animation, je veux garder l'échelle telle qu'elle est. Donc, je vais ajouter l'échelle de transformation x matin. Ensuite, j'ajouterai l'origine de la transformation. Il est parti pour l'instant. Enfin, à 100% de la durée de l'animation, nous voulons que la ligne se rétrécit à nouveau. Nous allons donc ajouter l'échelle de transformation x 0, puis transformer l'origine. nouveau parti pour l'instant. Ok, montons et ajoutons cette animation à la ligne. Je vais ajouter une ligne d'animation. Et maintenant, allons dans le navigateur et recharger. Vous pouvez voir que la ligne commence à croître de gauche à droite parce que nous définissons la propriété d'origine de transformation à gauche, puis elle se rétrécit de droite à gauche. Donc, il se rétrécit dans son point gauche aussi. Parce que lors de la réduction, nous définissons également sa propriété d'origine de transformation à gauche. Donc, il se rétrécit en fonction de son point gauche de droite à gauche. Mais on ne veut pas ça. Nous voulons qu'il se rétrécit de gauche à droite ou dans son côté droit. Alors, comment pouvons-nous faire ça ? Eh bien, une fois qu'il est entièrement à l'échelle, nous pouvons juste définir sa propriété d'origine de transformation pour écrire de sorte que quand il se rétrécit, il se rétrécit dans son bon point et cela nous donnera l'effet que nous voulons. Donc, je vais revenir ici et que 50 pour cent de la durée de l'animation, je vais changer la propriété d'origine de transformation de gauche à droite. Et je ferai la même chose à 100%. Et maintenant, quand je recharge, vous pouvez voir que la ligne va se rétrécir dans son point droit cette fois ou de gauche à droite. Et c'est l'effet que nous voulons bien. Maintenant, nous voulons que cette animation continue pour toujours. Donc, nous allons retourner ici et ajouter infinie. Et maintenant, quand je vais recharger la page, vous pouvez voir l'animation continue et continue et se répète pour toujours. Mais il y a un problème. Une fois qu'un cycle de l'animation est terminé, il se coupe et recommence à partir du début à gauche. Mais nous voulons qu'il s'inverse après la fin. Donc, après avoir terminé, nous voulons revenir de la fin au début. Et nous pouvons le faire en allant juste ici à côté de la propriété infinie et ajouter alternatif. Et si vous vous en souvenez, alternative est une valeur de la propriété direction de l'animation. Et il dit juste au navigateur de faire démarrer l'animation depuis son début et aller à sa fin, puis de sa fin à son début, et ainsi de suite et ainsi de suite. Donc maintenant, quand je retourne au navigateur et recharge, vous pouvez voir qu'une fois l'animation terminée, elle se déplace en marche arrière. Et c'est exactement l'effet que nous recherchons. 98. 102 - Traduction de lignes en croissance en chargant les animations de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animations CSS. Dans cette leçon, nous allons créer ce joli effet de chargement. Ce sera une leçon très simple. Alors commençons. Nous allons commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de chargement. Ensuite, à l'intérieur, je vais ajouter un autre div, lui donner une classe d'OBJ. Ensuite, je vais copier cette div, le coller à nouveau sept fois. Bon, allons dans notre CSS pour créer l'effet de chargement. Je commencerai par cibler la div avec la classe de 0 j puis j'ajouterai la largeur six pixels, hauteur 40 pixels et le fond blanc. Donc maintenant, vous pouvez voir les huit divs sont assis l'un en dessous autre parce que ce sont des divs et les devs sont des éléments de bloc, ce qui signifie qu'ils sont affichés l'un en dessous de l'autre par défaut. Mais nous voulons les faire asseoir côte à côte. Nous pouvons facilement le faire. Pas de problème en allant juste ici dans mon CSS et en ciblant leur conteneur, qui est la div avec la classe de chargement. Et il suffit d'ajouter un flex d'affichage. Donc maintenant, vous pouvez voir les huit divs sont assis côte à côte dans une rangée, et chacun d'eux a une largeur de six pixels et une hauteur de 40 pixels. Mais nous voulons ajouter un peu d'espace entre eux. Donc, je vais aller au sélecteur OBJ et j'ajouterai marge 0 du haut et du bas et trois pixels de la gauche et de la droite. Maintenant, vous pouvez voir qu'on se rapproche de notre chargeur. On a juste besoin de faire les coins un peu arrondis. Donc, je vais ajouter border-rayon 10 pixels. Et nous y voilà. Nous avons le même chargeur que nous voulons. Ok, nous allons travailler sur l'animation de ce chargeur. L' idée derrière cette animation est vraiment facile. Nous allons juste changer la fonction d'échelle y pour chacun de ces huit divs. Nous allons le faire commencer à 0, puis changer à un, revenir à 0 à nouveau. Et nous allons utiliser la propriété de délai d'animation pour faire ce changement. Et cela arrivera aux huit divs, un après l'autre, nous donnant l'effet que nous voulons. Donc, je vais créer une nouvelle animation. Nommez-le en charge. Ensuite, à 0% de la durée de l'animation, j'ajouterai l'échelle de transformation y 0, et je le copierai. Coller à nouveau et ajouter 50 pour cent. Je vais faire l'échelle y un au lieu de 0. Et enfin, à 100%, je vais changer l'échelle à 0. Encore une fois. Cool. Ajoutons cette animation aux huit divs. Je vais monter ici à l'intérieur de la div avec la classe de 0 BJ et ajouter de l'animation. Chargement. Puis la durée de l'animation de 0,8 seconde. Linéaire et infini. Impressionnant. Donc maintenant, vous pouvez voir les huit divs deviennent plus grands, puis plus petits, puis plus grands encore. Et ils vont continuer à le faire indéfiniment. Maintenant, afin d'obtenir l'effet que nous voulons, nous devons utiliser la propriété de delay d'animation sur chaque div. Donc, nous allons cibler chaque div individuellement. Je vais aller ici et dire, oh, BJ colon nième enfant à, pour cibler la deuxième div. Puis à l'intérieur, j'ajouterai un délai d'animation, 0,1 seconde. Alors je vais copier tout cela. Coller à nouveau six fois. Ensuite, pour le troisième div, j'ajouterai le délai d'animation 0,2 secondes. Puis pour les 4.3ème 0 secondes et pour les 5.4ème 0 secondes. Et pour les 6,50 secondes, pour les 7,6 secondes 0. Et enfin pour les 8.7e 0 secondes. Et juste comme ça, vous pouvez voir les divs sont animés pour se déplacer l'un après l'autre, nous donne ce très bel effet que nous voulions. Et nous pouvons obtenir un autre effet cool en ajoutant une seule ligne de code. Je vais aller à l'intérieur de la div OBJ et j'ajouterai l'origine de la transformation en bas. Et cela fait juste l'échelle de ligne à partir du point inférieur, pas leur point central, ce qui nous donne un autre effet cool que vous pouvez utiliser dans vos projets. 99. 103 - Rague de rotation à l'aide des animations de CSS: Bonjour tout le monde. Dans cette leçon, nous allons créer cet effet de chargement agréable en utilisant des animations CSS. Vous pouvez voir que nous avons un petit cercle blanc au centre. Ensuite, nous avons un anneau jaune qui tourne autour d'elle. Puis un vert au milieu et un rouge qui les entoure. Et vous pouvez également voir les rouges et jaunes tournent dans la même direction tandis que le vert tourne dans la direction opposée, nous allons créer ces anneaux rotatifs en utilisant des bordures. Voyons donc comment nous pouvons les créer. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de Loader. Ensuite, à l'intérieur de cela, je vais ajouter un autre div, lui donner une classe de externe. Ce sera donc la bordure rouge qui les entoure tous. Ensuite, je vais ajouter un autre div et lui donner une classe de milieu. Et ce sera la bordure verte au milieu qui tourne dans la direction opposée. Puis un autre div avec la classe de Enter pour créer l'anneau jaune intérieur. Et enfin, un div avec la classe de données pour créer le point blanc ou un cercle au centre. Ensuite, j'irai à mon CSS et div ciblé avec la classe de chargeur qui contient toutes nos classes. Ensuite, j'ajouterai la largeur, 200 pixels, hauteur 200 pixels ainsi. Ensuite, j'ajouterai la position relative. Ensuite, je vais cibler la div avec la classe de externe et ajouter la position absolue, afin que nous puissions le positionner par rapport à son parent, le div chargeur. Ensuite, nous voulions prendre la même largeur et la même hauteur que son conteneur. Donc, nous allons ajouter top 0, gauche, 0, droite 0, et bas. Tu l'as deviné aussi 0. Donc, cela fera juste que la div externe remplisse complètement la div du chargeur et prendra sa pleine largeur et sa hauteur. Ensuite, afin de créer la bordure rouge externe, j'ajouterai la bordure gauche, cinq pixels solides. Cette couleur rouge. Ensuite, je vais copier cela, le coller trois fois. Ensuite, je changerai de gauche à droite et laisserai tout le reste tel qu'il est. Nous aurons donc une frontière rouge de taux. Ensuite, je vais cibler à la fois les bordures supérieure et inférieure. Et rendre leurs couleurs transparentes, pas rouges. Maintenant, vous pouvez voir que nous avons deux bordures rouges, juste à gauche et à droite. Et nous n'avons pas de bordures supérieures et inférieures parce que nous définissons la couleur sur transparente afin qu'elles n'apparaissent pas. D' accord, revenons en arrière et faisons des bordures circulaires. Je vais aller ici et ajouter le rayon de la frontière 50 pour cent. Et maintenant, vous pouvez voir les frontières sont une circulaire. Et nous avons créé nos bordures rouges extérieures. Afin de créer les frontières au milieu, nous allons simplement copier cette div, collée et ciblée div avec la classe du milieu. Ensuite, nous allons juste changer les valeurs de haut, bas, gauche et droite à 30 pixels au lieu de 0, sorte que cette div commence à partir de 30 pixels du côté gauche du conteneur et se termine à 30 pixels du côté droit du conteneur. Donc, sa largeur sera de 200 pixels moins 60 pixels, ce qui est de 140 pixels. Et de cette façon, il sera plus petit. Et la même chose se produira avec sa hauteur. Il sera également plus petit que le conteneur div de 60 pixels. Maintenant, vous pouvez voir que nous avons ces frontières intermédiaires au milieu. D' accord, créons aussi les frontières intérieures. Je vais copier le div du milieu, le coller, et cibler l'intérieur. Ensuite, je vais juste changer les propriétés de positionnement à 60 pixels au lieu de 30. Donc, cette div va commencer 60 pixels à partir de son conteneur gauche et se terminer à 60 pixels à droite. Et la même chose en haut et en bas. Donc, vous pouvez voir que nous avons cette frontière d'entrée aussi. Très bien, maintenant, créons le petit cercle qui se trouve au centre de ces frontières. Je vais aller cibler la div avec la classe de point. Ensuite, j'ajouterai la position, absolue. 90 pixels en haut, à gauche. 90 pixels, taux 90 pixels. Et en bas. C'est vrai, 90 pixels. Ainsi, le cercle sera positionné à 90 pixels du conteneur div dans toutes les directions tout autour. Ensuite, j'ajouterai la couleur de fond, blanc. Et enfin, pour en faire un cercle, j'ajouterai un rayon de 50 pour cent. Donc maintenant, vous pouvez voir que nous avons le petit cercle blanc qui se trouve au centre de la div conteneur. Bon, maintenant que nous avons créé tous les éléments, commençons à y ajouter l'animation. Tout d'abord, je vais aller ici et créer une nouvelle animation. Nommez-le, faites pivoter. Puis à l'intérieur de cela, à 0% de la durée de l'animation, j'ajouterai la transformation, pivoterai 0. Puis à 100%, je vais ajouter transformation, faire pivoter 360 degrés. Ensuite, j'ajouterai cette animation à nos frontières. Donc, j'irai d'abord à l'intérieur de la div interne, puis ajouter de l'animation, faire pivoter, puis la durée de l'animation de 1 seconde, puis linéaire et infini. Ensuite, je vais copier cette déclaration d'animation et la coller dans les deux autres dibs. Et maintenant, vous pouvez voir que les trois divs tournent ensemble dans la même direction, qui nous donne cet effet. Mais si vous vous souvenez, nous voulons que la bordure du milieu tourne dans la direction opposée. Donc, ce que nous pouvons faire est que nous pouvons aller juste ici à l'intérieur la div du milieu et ajouter inverse comme propriété de direction d'animation. Ainsi, l'animation se produira dans la direction opposée. Et maintenant, vous pouvez voir la div au milieu tourne dans la direction opposée, qui nous donne cet effet de chargement agréable. Et la seule chose qui reste est de changer les couleurs des frontières moyennes et intérieures. Donc, je vais retourner à l'intérieur de la div du milieu et changer les couleurs de bordure en une couleur verte au lieu de rouge. Et je ferai aussi la même chose pour les frontières intérieures. Je vais changer sa couleur en jaune au lieu de rouge. Et maintenant, vous pouvez voir les bordures moyennes et intérieures ont ces nouvelles couleurs. Et c'est exactement l'effet que nous voulons. 100. 104 : fading des carrés à partir de animations CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cet effet de chargement agréable en utilisant l'animation CSS. Vous pouvez voir que nous avons neuf carrés qui s'estompent bien en nous donnant cet effet. Et vous pouvez voir la première colonne sur la gauche s'estompe d'abord, puis la seconde, puis la troisième. Nous avons un peu de retard d'animation entre chaque colonne. Alors commençons à créer cet effet. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de chargeur. Donc, ce sera la classe qui contient les neuf carrés à l'intérieur. Ensuite, j'ajouterai neuf travées, et chaque travée aura une classe de S. Donc de S1 jusqu'à neuf. Nous aurons donc S1, S2, S3, et ces neuf travées sont responsables de la création de R carrés. Ensuite, je vais aller à mon CSS et cibler le div avec la classe de Loader. Ensuite, j'ajouterai la position, la largeur relative, 90 pixels, hauteur 90 pixels ainsi. Affichez ensuite, fléchissez, puis fléchissez la colonne de direction afin que les neuf divs soient alignés en colonnes. Puis flex, envelopper, envelopper de sorte que les carrés créent une deuxième colonne s'ils n'ont pas assez d'espace dans la première, puis en dessous, je ciblerai nos travées. Ensuite, j'ajouterai la largeur 30 pixels. Hauteur 30 pixels aussi. Ensuite, j'ajouterai un arrière-plan temporaire rouge. Puis enfin, position relative. Et maintenant vous pouvez voir que nous avons ce carré et en fait c'est nos neuf carrés. Mais comme ils ont tous la même couleur de fond et qu'ils sont assis si près ensemble, ils apparaissent comme un grand carré. D' accord ? Maintenant, je vais cibler le pseudo élément avant de nos travées. Ensuite, j'ajouterai du contenu. Chaînes vides. Position, absolue, haut, 0, gauche, 0, largeur, 100%, et hauteur. 100 % aussi. Ensuite, j'ajouterai la couleur de fond, blanc. Et maintenant, vous pouvez voir la couleur des boîtes est maintenant attendre, parce que nous avons maintenant neuf avant pseudo-éléments et ils ont la même largeur et hauteur que les boîtes. C' est pourquoi ils couvrent la boîte est complètement correct. Maintenant, je vais revenir en arrière et supprimer ce fond rouge parce que nous n'en avons plus besoin. Ensuite, je vais créer l'animation responsable de notre effet. Donc, je vais créer une nouvelle animation. Nommez-le en charge. Puis à 0% de la durée de l'animation, j'ajouterai la largeur 100% et la hauteur 100%. Ensuite, à la fin de la durée de l'animation, à 100%, j'ajouterai la largeur 0 et la hauteur 0. Ensuite, je vais monter ici à l'intérieur de cela avant un pseudo élément et ajouter de l'animation. Chargement 1 seconde, linéaire et infini. Et maintenant, vous pouvez voir que les neuf cases ont cet effet où leur largeur et hauteur deviennent 0 sur une durée d'animation de 1 seconde. Maintenant, il ne reste plus qu'une chose à ajouter un peu de retard d'animation à la deuxième, troisième colonne pour nous donner l'effet exact que nous voulons. Donc, je vais revenir en arrière et cibler les pseudo-éléments avant des travées mieux placés dans la deuxième colonne. Et ce sont la portée avec la classe de S4. Ensuite, la travée avec la classe de S5 ou la cinquième travée, puis la travée avec la classe de six ou la sixième travée. Et à l'intérieur de cela, j'ajouterai le délai de transition 0,1 secondes. Alors je vais copier ça. Coller à nouveau. Ensuite, je vais cibler les pseudo-éléments avant de la travée dans la troisième colonne, qui sont la travée avec la classe de sept. Puis comme 89. Ensuite, je vais changer le délai d'animation à 0,2 seconde. Et maintenant, vous pouvez voir l'effet se produit pour la première colonne d'abord, puis la deuxième colonne après cela. Puis la troisième colonne nous donnant cette animation de chargement agréable. 101. 105 - Charger les lignes en ligne en croissance avec l'animation CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de chargement. Vous pouvez voir que nous avons les six parties colorées de la chargeuse et elles ont cet effet dans lequel elles deviennent plus grandes que, plus petites, plus grandes, et ainsi de suite. Et cela se passe l'un après l'autre. Voyons donc comment nous pouvons créer ça. Je vais aller ici dans mon HTML et ajouter un div. Donnez-lui une classe de Loader. Et à l'intérieur de cette div, j'ajouterai six travées. Ensuite, je vais aller à mon CSS et cibler le div du chargeur. Ensuite, j'ajouterai la largeur 70 pixels. Et pour les afficher côte à côte, j'ajouterai un flex d'affichage. Ensuite, je vais cibler les travées à l'intérieur de la div chargeur. Et ajoutez une largeur de 10 pixels. Hauteur, 60 pixels, marge, 0 pixels du haut et du bas, et un pixel de gauche et de droite. Puis enfin, la couleur de fond, blanc. Et maintenant, vous pouvez voir les six bandes sont assis côte côte et ont une marge d'un pixel entre chacune. Revenons en arrière et travaillons sur l'effet d'animation. Je vais y aller et créer une nouvelle animation. Nommez-le en charge. Puis à l'intérieur de cela, à 0% de la durée de l'animation, j'ajouterai l'échelle de transformation y 0.1. Ainsi, les travées commenceront à s'animer à 0,1 de sa taille d'origine. Ensuite, en dessous de cela, à 35 pour cent de la durée de l'animation, j'ajouterai l'échelle de transformation y à une à nouveau. Puis à 60 pour cent et à 100%, j'ajouterai également l'échelle de transformation y 0.1. Donc, ce que cette animation fera, c'est que notre span commencera à animer à 0,1 de leur taille d'origine. Ensuite, ils vont grossir jusqu'à ce qu'ils atteignent à nouveau leur taille d'origine. Ensuite, de 35 pour cent à 60 pour cent, ils vont rétrécir à 0,1 de leur taille. Et ils resteront ainsi pendant un peu de temps de 60 pour cent à 100% de la durée de l'animation, puis ils reviendront à la taille originale, et ainsi de suite et ainsi de suite. Nous continuerons à animer infiniment. D' accord, ajoutons cette animation à nos travées et nous allons y ajouter de l'animation. Chargement. 0,8 seconde. Facilité d'entrée, de sortie. Et enfin infini. Et maintenant vous pouvez voir les travées ont eu cet effet d'animation où elles commencent à une petite taille, puis deviennent plus grands, puis deviennent plus petits et restent là un peu, puis deviennent plus grands et ainsi de suite. Maintenant, nous devons changer l'arrière-plan de chaque plage et nous allons également ajouter des retards d'animation différents à chaque plage afin qu'ils apparaissent l'un après l'autre. Donc, je vais aller ici et dire étendre un nie-enfant pour cibler la première portée. Ensuite, à l'intérieur de cela, j'ajouterai la couleur de fond. Cette couleur verte, et le délai d'animation, 0,2 seconde. Maintenant, je vais mettre en pause la vidéo et cibler toutes les autres étendues et ajouter des couleurs d'arrière-plan différentes et des retards d'animation à chaque plage. Vous pouvez voir que j'ai ajouté différents arrière-plans et retards d'animation. Et quand je vais recharger le navigateur, vous pouvez voir les travées ont maintenant différentes couleurs et ils sont animés l'un après l'autre, nous donnant cet effet vraiment cool. 102. 106 : boîtes d'arrière-plan en mouvement en utilisant des animations CSS: Bonjour tout le monde. Bienvenue à cette nouvelle leçon du cours. Dans cette leçon, nous allons apprendre comment créer ce fond animé. Donc, vous pouvez voir que nous avons un texte ici qui dit animation de fond. Et en arrière-plan, nous avons beaucoup de boîtes. Et si vous regardez l'une de ces cases, vous pouvez voir qu'elle se déplace du bas de l'écran, qui vient du bas. Et puis il se déplace vers le haut tout en tournant. Et son opacité diminue jusqu'à ce qu'il atteigne le haut de l'écran. Et au-delà. Ensuite, l'opacité devient 0 et elle s'estompe. Bon, commençons ici dans notre HTML et ajoutons un div. Donnez-lui une classe de conteneur. Ensuite, à l'intérieur de ce div, nous allons ajouter un autre div et lui donner une classe de carré. Donc, nous allons utiliser cette div carrée pour créer nos boîtes. Mais il y a beaucoup de boîtes. Donc, nous allons copier ce div carré et le coller un nombre de fois égal au nombre de boîtes que nous avons. Donc maintenant, nous avons 10 divs avec la classe de carré qui représentera les 10 boîtes mobiles en arrière-plan. Puis en dessous de cela, je vais ajouter un autre div, lui donner une classe de texte. Et à l'intérieur, je vais ajouter le mot animation de fond. Bon, passons à notre CSS pour ajouter nos styles. Je vais commencer par le conteneur div qui contient tous les divs. Donc je vais le cibler. Ensuite, j'ajouterai la position, la largeur relative, 100%, la hauteur, 100% aussi bien. Donc, il prendra toute la largeur et la hauteur du corps ou de l'écran entier. Ensuite, j'ajouterai le débordement caché. Maintenant, stylisons le texte que nous avons. Donc, je vais cibler le div avec le texte de la classe. Ensuite, nous voulons le centrer horizontalement et verticalement. Donc, nous allons ajouter la position, absolue, haut, 50 pour cent, gauche, 50 pour cent. Puis transformez, traduisez, négatif 50 pour cent et négatif 50 pour cent. Donc maintenant, vous pouvez voir le texte est centré horizontalement et verticalement à l'intérieur du conteneur div. Et puisque le conteneur div a toute la largeur et la hauteur du corps, le texte est centré horizontalement et verticalement à l'intérieur du corps. Revenons en arrière et rendons ce texte un peu meilleur. Je vais aller ici et ajouter de la couleur, la transformation de texte blanc. majuscules, taille de police 45 pixels. Puis bordure supérieure cinq pixels, blanc massif. Et bordure inférieure 50 pixels, blanc massif ainsi. Donc maintenant, le texte semble beaucoup mieux et nous sommes prêts à créer l'animation des boîtes ou des carrés. Rappelez-vous, il y a 10 carrés, donc nous allons ajouter tous les styles qu'ils ont en commun d'abord. Et puis après cela, nous allons cibler chacun des 10 individuellement et ajouter leurs styles uniques. Alors ajoutons d'abord les styles communs, je vais cibler la div avec la classe de square. Et j'ajouterai la position absolue. Ensuite, afin de les positionner au-dessous du fond du conteneur div, qui a la même hauteur du corps. Cela signifie qu'ils se déplaceront au-dessous du corps ou au-dessous de l'écran. Je vais ajouter le bas, négatif 100 pixels. Ensuite, j'ajouterai la couleur de fond. Cette couleur gris clair. Très bien, ce sont les styles communs que toutes les boîtes ont. Tous sont situés en dessous du bas de l'écran. Et tous ont la même couleur de fond. Mais si je vais dans le navigateur et recharger, vous pouvez voir que rien n'apparaît sur l'écran parce que je n'ai pas défini de largeur ou de hauteur pour ces carrés. Et même si je reviens à l'éditeur de code et arrive ici à l'intérieur du sélecteur de conteneur, alors supprimez cette propriété cachée de débordement. Ensuite, revenez au navigateur et rechargez. Vous pouvez voir que rien n'apparaît non plus. Donc, ils ne se cachent pas sous le bas de l'écran en raison de leur propriété inférieure ou quelque chose. Nous avons juste besoin de définir leur largeur et leur hauteur pour qu'ils apparaissent. Et nous le ferons pour chaque carré individuellement parce qu'ils ont des largeurs et des hauteurs différentes. Alors faisons ça avec la première place. Je vais aller ici et cibler le premier carré en ajoutant un carré nième enfant. Puis à l'intérieur de cela, je vais définir sa largeur à 75 pixels, puis sa hauteur à 75 pixels aussi bien parce que c'est un carré évidemment. Puis enfin, je mettrai sa propriété de gauche à 7%. Alors maintenant, quand je fais défiler vers le bas, vous pouvez voir que nous avons notre premier carré apparaissant ici sous le corps. Et il apparaît parce que nous avons fixé une largeur et une hauteur à elle. Et il est aussi assis sur la gauche parce que nous avons dit que c'est la propriété de gauche à 7% D'accord, Nous ne voulons pas qu'il apparaisse quand nous faisons défiler. Donc, nous allons retourner à l'intérieur du conteneur div. Et nous allons ajouter le débordement caché à nouveau. Et maintenant ce n'est plus visible, mais il est toujours là maintenant. Ok, nous allons travailler sur l'animation de cette boîte. Vous vous souvenez que les boîtes se déplaçaient du bas vers le haut de l'écran tout en tournant et en évanouissant en même temps. Nous allons donc créer une animation qui le fera. Donc, je vais créer une nouvelle animation ici. Nommez-le des boîtes. Puis à l'intérieur à 0% de la durée de l'animation, ou au début de celle-ci, nous ajouterons 100 pixels négatifs inférieurs tels qu'ils sont. Donc, il va commencer à partir d'une position au-dessous du bas de l'écran. Ensuite, à 100% de la durée de l'animation, je vais modifier la propriété inférieure à 100%. Donc, cela fera la boîte est déplacée du bas de l'écran vers le haut. Nous devrons également faire pivoter les boîtes et faire diminuer leur opacité. Alors faisons-le. Je vais ajouter la transformation, faire pivoter 180 degrés, puis l'opacité 0. Ainsi, à la fin de la durée de l'animation, les boîtes seront tournées de 180 degrés et leur opacité sera 0. D' accord, ajoutons cette animation à nos boîtes. Je vais monter ici à l'intérieur de la div avec la classe de carré. Et j'ajouterai des boîtes d'animation. Puis la durée de l'animation de dix secondes. Ensuite, nous voulons que l'animation continue pour toujours. Donc, nous allons ajouter infinie. Et enfin, aise-toi dedans, dehors. Et maintenant, quand je vais au navigateur et recharger, vous pouvez voir que la boîte commence à se déplacer d' en bas de cet écran vers le haut tout en tournant. Et son opacité diminue jusqu'à ce qu'elle aille au sommet et disparaisse. Ensuite, il revient à sa position d'origine sous l'écran. Et l'animation se produit encore et encore parce que nous l'avons rendue infinie. Bon, donc maintenant nous avons créé de l'animation et la seule chose qui reste pour terminer cette leçon est de créer les neuf autres boîtes. Nous allons donc définir différentes largeurs et hauteurs pour chacun d'entre eux. Nous allons également changer la propriété de gauche pour eux afin qu'ils s'assoient l'un à côté de l'autre. Et enfin, nous allons ajouter des retards d'animation différents pour que tous commencent à bouger à un moment différent. Et avec ça, nous aurons notre effet. Je vais donc mettre la vidéo en pause et ajouter ces différents styles pour les neuf autres boîtes. Et nous reviendrons. Bon, maintenant j'ai ajouté tous les styles. Par exemple, vous pouvez voir dans le deuxième carré, nous définissons la largeur et la hauteur à 65. Nous avons également fixé la propriété de gauche à 15% afin qu'elle soit assise à côté de la première place. Enfin, nous avons ajouté un délai d'animation de quatre secondes, sorte qu'il ne commencera pas à bouger avant quatre secondes après le rechargement de la page. J' ai ajouté différentes valeurs pour le reste des boîtes ainsi que je vais vous laisser jeter un oeil en regardant les sources de cette leçon. D' accord, maintenant je vais revenir en arrière et recharger le navigateur, et puis les boîtes vont commencer à se déplacer du bas vers le haut à différents moments tout en tournant et en s'évanouissant. Et cela nous donne l'effet que nous voulons. 103. 107 - Animation de chargeurs hexagon: Bonjour à tous, bienvenue à cette nouvelle leçon du cours d'animation CSS. Dans cette leçon, nous allons créer cette belle animation de chargement hexagonal coulissant. Vous pouvez voir qu'il se compose de deux parties, une ligne horizontale et la forme hexagonale au-dessus. La ligne tourne d'avant en arrière sur son point central, tandis que l'hexagone se déplace d'un côté à l'autre, d' avant en arrière aussi. Et il tourne également sur son point central en même temps. Ce sera un exemple intéressant. Voyons comment on peut faire ça. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de ligne. Puis à l'intérieur, je vais ajouter un autre div et lui donner une classe d'hexagone. D' accord, alors j'irai à mon CSS pour styler ces divs. Je vais cibler la div avec la classe de ligne. Ensuite, j'ajouterai la largeur, 300 pixels, bordure inférieure, quatre pixels, blanc massif. Donc, ce sera la ligne sur laquelle se déplace l'hexagone. Ensuite, j'ajouterai la position relative. Ok, Maintenant, nous allons apprendre à créer la forme hexagonale. Tout d'abord, je vais cibler la div avec la classe de l'hexagone. Ensuite, je vais ajouter la position, absolue, gauche , 0, bas, 0, largeur 50 pixels, hauteur 30 pixels. Et enfin, la couleur de fond, rouge. Donc maintenant vous pouvez voir que nous avons juste un rectangle qui a une largeur de 50 pixels et une hauteur de 30 pixels et une couleur de fond rouge. Donc, l'idée derrière la forme hexagonale est que nous allons créer deux autres rectangles comme celui-ci, et nous allons faire pivoter l'un d'entre eux de 60 degrés et l'autre de 60 degrés négatifs. Et cela nous donnera la forme hexagone que nous recherchons. Donc, créons ça en fait. Pour créer les deux autres rectangles, nous utiliserons les pseudo-éléments avant et après. Donc, je vais cibler la div avec la classe de l'hexagone et ajouter des deux-points avant. Et j'ajouterai du contenu des chaînes vides parce que nous ne voulons rien ajouter ici. Ensuite, positionnez absolu, haut 0, gauche, 0. Nous voulons qu'il ait la même largeur et la même hauteur que le rectangle rouge. Donc, nous allons ajouter la largeur, 100%, hauteur, 100% aussi bien. Ensuite, nous allons ajouter la couleur de fond, bleu pour l'instant. Bon, maintenant vous pouvez voir que nous avons le rectangle bleu assis au-dessus du rectangle rouge. Et il le couvre parce qu'il a la même hauteur et la même largeur que le rectangle rouge. Ok, maintenant nous allons ajouter la rotation de la transformation. Donc maintenant, vous pouvez voir que le rectangle bleu est maintenant tourné de 60 degrés et que le rectangle rouge apparaît maintenant derrière lui. Continuons à travailler. Nous allons copier le pseudo élément avant, coller à nouveau, et changer avant de, après. Ensuite, changez la couleur d'arrière-plan en vert. Et nous le tournerons de 60 degrés négatifs, pas de 60. Et ici, vous pouvez voir que nous avons le fond vert assis sur le rouge et le bleu et le faire tourner de 60 degrés négatifs. Et ces trois rectangles créent la forme hexagonale. Donc, si je retourne en arrière et que je change la couleur d'arrière-plan pour tous en blanc, alors rechargez mon navigateur. Vous pouvez voir clairement que la forme hexagonale est assise sur le dessus de la ligne, mais nous devons la déplacer un peu vers le haut. Donc, je vais revenir au sélecteur hexagonal, et je vais changer le bas à 14 pixels au lieu de 0. Et maintenant l'hexagone assis correctement juste au-dessus de la ligne. Maintenant, c'est ça ? Après avoir créé la forme hexagonale, nous devons maintenant travailler sur l'animation. Si nous regardons notre démo, je veux que vous vous concentriez sur l'animation hexagone. Vous pouvez voir qu'il y a deux choses qui se passent ici. abord, l'hexagone se déplace de gauche à droite, puis remonte, et il continuera à le faire infiniment. Et tout en se déplaçant de gauche à droite, vous pouvez voir l'hexagone tourne sur son point central. Et si nous regardons la ligne elle-même, vous pouvez voir qu'elle tourne également environ 30 degrés d'avant en arrière avec le mouvement de l'hexagone. Alors revenons en arrière et créons ces animations. Tout d'abord, nous allons créer l'animation pour l'hexagone. Je vais créer une nouvelle animation. Nommez-le hexagone animé. Puis à 0% de la durée de l'animation, j'ajouterai à gauche 0. Puis à 50 pour cent, je vais ajouter à gauche 100%. Et enfin, à 100%, je vais ajouter à gauche. 0 encore. Donc, ce que cette animation fera, c'est qu'elle fera passer l'hexagone de sa position d'origine à gauche à droite de 100% de la largeur du conteneur, qui est de 300 pixels, puis elle reviendra à sa position d'origine. Alors ajoutons cette animation à l'hexagone. Je vais monter ici à l'intérieur de la div hexagonale, et j'ajouterai de l'animation. Animer l'hexagone. Deux secondes, linéaire. Et parce que nous voulons que le mouvement se produise indéfiniment, nous dirons infinie. Donc maintenant, vous pouvez voir que l'hexagone se déplace de gauche à droite, puis remonte à nouveau et ainsi de suite. Mais si nous regardons de plus près ce mouvement, vous pouvez voir que lorsque l'hexagone atteint la fin de la ligne, il va un peu au-delà par un espace égal à sa largeur. Et c'est parce que nous avons mis à gauche à 100% taux ici. Pour éviter cela, nous devrions soustraire la largeur de l'hexagone de ce 100% ici. Pour ce faire, nous allons utiliser la fonction count. Donc, je vais aller ici et ajouter calc, 100% moins la largeur du rectangle, qui est de 50 pixels. Donc, cela signifie que l'hexagone va maintenant déplacer une distance égale à 100% de la distance à gauche moins sa propre largeur, qui est de 50 pixels. Maintenant, quand je rechargerai, vous pouvez voir que l'hexagone se déplacera correctement comme nous le voulons. Ok, travaillons sur la rotation de l'hexagone. Nous voulons faire tourner l'hexagone pendant le déplacement. Donc, disons que nous voulons le faire tourner en cycles le long du chemin. Donc deux cycles, ou égal à 360 degrés multiplié par deux, ce qui est 720 degrés. Donc, j'irai ici à 50% de la durée de l'animation à laquelle l'hexagone sera à la fin de la ligne. Et je vais ajouter la transformation, faire pivoter 720 degrés. Et cela signifie de 0 à 50 pour cent de la durée de l'animation. En d'autres termes, pendant la première moitié de la durée de l'animation, l'hexagone tournera de 0 degrés à 720 degrés, puis de 50 pour cent à 100%, ou pendant la seconde moitié de la durée de l'animation, le hexagone fera pivoter de 720 degrés à 0 degrés. Donc, nous aurions pu juste ajouter la rotation 0 au début et à la fin de la durée de l'animation, mais c'est la valeur par défaut. Donc nous n'avons rien ajouté, et nous obtiendrons le même résultat. Donc maintenant, quand je vais au navigateur et recharger, vous pouvez voir l'hexagone tourne tout en se déplaçant au-dessus de la ligne exactement comme nous le voulons. Il tourne de 0 degrés à 720 degrés pendant la première moitié de la durée de l'animation, puis il tourne en arrière pendant la seconde moitié. Super. Maintenant, nous devons animer la ligne elle-même. Je vais donc créer une nouvelle animation. Nommez-le ligne d'animation. Et à 0% de la durée de l'animation, j'ajouterai la transformation. Faire pivoter 30 degrés. Ainsi, la ligne sera tournée de 30 degrés. Quand je recharge la page. Alors je vais copier ça. Coller à nouveau. Et à 25 pour cent de la durée de l'animation, je vais changer la rotation à 0 degrés. Donc, c'est la rotation sera 0 et ce sera juste une ligne horizontale telle qu'elle est. Puis à 50 pour cent. Je vais le changer en négatif 30 degrés. Donc, il va tourner de 30 degrés, mais dans l'autre sens, parce que nous avons un signe négatif. Et à 75 pour cent, j'ajouterai 0 à nouveau, donc il revient à sa position horizontale. Et enfin, à 100%, je vais le changer à 30 degrés. Donc, ce qui va se passer ici, c'est une fois que nous rechargeons, la ligne sera tournée vers la droite de 30 degrés. Ensuite, au fur et à mesure que l'animation continue, elle reviendra à 0 degrés. Puis négatif 30 degrés, ce qui est de 30 degrés à gauche. Ensuite, revenez à 0 rotation, puis à 30 degrés. Et il continuera à le faire pour toujours. D' accord, ajoutons cette animation à notre ligne. J' irai ici au conteneur div et j'ajouterai de l'animation. Animer la ligne deux secondes. Et notez que nous devrions faire la durée de l'animation ici deux secondes afin qu'elle corresponde à l'animation de l'hexagone. Ensuite, nous ajoutons linéaire et infini. Donc maintenant, vous pouvez voir que tout fonctionne parfaitement et nous avons l'animation de chargement. On veut. 104. 108 - Élargir l'effet de menu de lignes à partir de animations CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu. Vous pouvez voir quand je survole les éléments de menu, cet effet se produit où nous avons une fine ligne rouge qui vient de la gauche, puis se développe pour couvrir le lien, qui nous donne cet effet cool. Voyons comment nous pouvons créer ça. Je vais aller ici dans mon HTML et ajouter une URL. Quand un LI, puis une balise d'ancrage à l'intérieur de cela. Et je dirai à la maison. Ensuite, je vais copier ce lien, le coller à nouveau quatre fois, et dire sur les services, l'équipe et le contact. Ensuite, j'irai à mon CSS pour les coiffer en vous. Je vais tourner l'URL et ajouter la marge 0, remplissage 0 aussi. Ensuite, afin de rendre l'élément de liste assis côte à côte, j'ajouterai un flex d'affichage. Ensuite, je vais cibler le LI au style de liste. Aucun. Ensuite, je vais cibler la balise d'ancrage et ajouter la position, relative. Affichage. Bloc. Puis marge 0 de haut et bas et dix pixels de gauche et de droite pour avoir un espacement entre les liens. Ensuite, j'ajouterai du remplissage, cinq pixels du haut et du bas, et dix pixels de la gauche et de la droite. Quand je vais ajouter de la couleur. Avec la couleur gris foncé. Taille de la police : 30 pixels. Décoration de texte, aucun. Transformation de texte. En majuscules. Lors de la transition finalement 0,5 secondes. Et maintenant, vous pouvez voir les liens de menu sont exactement comme nous le voulons. Maintenant, revenons en arrière et créons la fine ligne qui vient de la gauche. Nous allons créer cela en utilisant le pseudo élément avant. J' ai donc été élu et j'ai ajouté du contenu, une chaîne vide , une position, largeur absolue , 100%, hauteur, juste quatre pixels. Ensuite, nous voulons que cette ligne soit centrée verticalement. Donc, je vais ajouter top 50 pour cent. Puis Transformer, Traduire Y négatif 50%. Ensuite, afin de le déplacer vers la gauche, nous ajouterons à gauche, négatif 100%. Et la couleur de fond. Cette couleur rouge. Puis, enfin, la transition 0,5 seconde. Et maintenant vous pouvez voir que nous avons ces lignes minces qui sont assis à côté des liens. Et en survolant les liens, nous voulons que ces lignes se déplacent de gauche à droite. Ensuite, il va se développer pour couvrir le lien. Alors faisons ça. Je vais y aller et créer une nouvelle animation. Nommez-la ligne. Puis à l'intérieur de cela à 0%, j'ajouterai le négatif gauche 100% et la hauteur de quatre pixels. Ensuite, je vais copier ce code, coller à nouveau, et changer à gauche à 0. Et je laisserai la hauteur égale à quatre pixels tel qu'il est. Ensuite, notre copier ce code, coller et changer la hauteur à 100%. Donc, il prendra toute la hauteur du lien. Ensuite, j'ajouterai l'index z négatif. Donc, ce qui se passera ici, c'est que la ligne rouge commencera à se déplacer à partir de la position gauche. Nous allons déplacer jusqu'à ce qu'il ait une valeur gauche de 0. Ensuite, après cela, il va se développer et sa hauteur augmentera jusqu'à ce qu'il couvre un clignotement. Et nous avons ajouté l'index z négatif ici pour que le texte apparaisse devant la ligne rouge. D' accord, ajoutons cette animation à la ligne rouge. Lorsque vous passez le curseur sur le lien, j'irai ici et dire, lorsque nous survolons la balise d'ancrage, je vais sélectionner le pseudo élément avant et ajouter une animation. Ligne 0,5 seconde linéaire. Et nous voulons que l'animation s'arrête quand elle atteint le point final. Nous allons ajouter des avants ici. Et maintenant, quand je vais passer le curseur sur les liens, vous pouvez voir la ligne rouge se déplace de gauche à droite. Ensuite, il se dilate pour prendre toute la hauteur du lien et le couvrir, ce qui nous donne cet effet vraiment cool. La seule chose qui reste maintenant est de changer la couleur du texte du lien en blanc lorsque vous passez le curseur sur les liens. Donc, je vais aller ici et dire, quand nous survolerons le lien, je changerai la couleur en blanc. Et je vais aussi monter ici à l'intérieur du lien et ajouter un débordement caché. Et maintenant, vous pouvez voir que la ligne rouge est maintenant cachée. Et quand je retourne en arrière et que je passe le curseur sur les liens de menu, la ligne rouge entre de gauche à droite. Ensuite, il se dilate pour couvrir le lien, nous donnant l'effet exact que nous voulons. 105. 109 : boîtes de fond en développant des animations de CSS en développant les animations de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cette animation d'arrière-plan. Vous pouvez voir que nous avons cette rubrique qui a ce texte d'animation d'arrière-plan. Et nous avons ces boîtes qui deviennent plus grandes en tournant. Certains d'entre eux sont rouges et les autres sont bleus. Et ils ont des retards d'animation différents. C' est pour ça qu'ils apparaissent l'un après l'autre. Voyons donc comment nous pouvons créer cet effet. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de conteneur. Et à l'intérieur de cela, je vais ajouter H2 et dire animation de fond. Ensuite, en dessous de cela, nous allons ajouter nos boîtes. Je vais ajouter un div, lui donner une classe de boîte. Lorsque notre copie de ce div, collez-le à nouveau cinq fois. Donc ce sont les six boîtes qui auront notre effet. Ensuite, je vais aller à mon CSS, cibler le div avec la classe de conteneur, et ajouter la position, relative, hauteur, 100 vh et débordement caché. Ensuite, je vais cibler le H2 et ajouter la marge 0, couleur, blanc, position, absolue. Et pour le centrer, j' ajouterai le top 50 pour cent. Gauche. 50 pour cent aussi. Puis transformez, traduisez, négatif 50 pour cent et négatif 50 pour cent. Ensuite, j'ajouterai la taille de la police 45 pixels. Transformation de texte en majuscules. Puis enfin, z-index 1, sorte que la boîte est ne le couvrira pas. Et maintenant, vous pouvez voir que le H2 est tellement mieux. Retournons travailler sur les boîtes. Je vais cibler la div avec la classe de la boîte. Et j'ajouterai la position, absolue. En haut, 80 pour cent, à gauche, 45 pour cent. La largeur. 10 pixels, hauteur, 10 pixels aussi. Puis border un pixel. Solide. Cette couleur bleue. Et maintenant, vous pouvez voir qu'on a cette petite boîte. Il a une petite bordure bleue d'un pixel. Ce n'est pas qu'une seule boîte, c'est en fait les six boîtes, mais nous sommes assis l'un sur l'autre ou devant l'autre. C' est pour ça que nous apparaissons comme une seule boîte. Et nous allons changer le positionnement de chaque boîte afin qu' ils soient situés à différents endroits sur la page. Alors revenons en arrière et faisons ça. Je vais aller ici et cibler le deuxième enfant des boîtes. Donc, je vais cibler la div avec la classe de la boîte. Et je dirai le deuxième enfant. Et puis j'ajouterai 40 pour cent et laissé 25 pour cent. Je vais également ajouter une couleur de bordure, rouge. Donc maintenant, vous pouvez voir que nous avons une nouvelle boîte assis ici dans sa nouvelle position. D' accord, revenons et faisons la même chose pour les autres boîtes. Je vais copier cette div, le coller à nouveau quatre fois. Et cela ciblera la troisième div ici. Et James a atteint 50 pour cent et est parti à 75 pour cent. Puis en dessous de cela, je vais cibler le quatrième div et changer de haut à 10 pour cent et à gauche à 90%. Je vais également ajouter la couleur de bordure rouge lorsque le cinquième div change haut à 85 pour cent et laissé à 10 pour cent. Et enfin, le sixième enfant et le changement top 10 pour cent et à gauche à 50 pour cent. Ensuite, ajoutez la couleur de bordure, rouge. Et maintenant, vous pouvez voir que nous avons nos six boîtes partout parce que nous avons changé le positionnement de chacune. Maintenant, nous allons travailler sur l'effet d'animation. Si vous vous en souvenez, les boîtes s'agrandissent en tournant. Donc, je vais aller ici et créer une nouvelle animation. Nommez-le des boîtes. Et à l'intérieur à 0% de la durée de l'animation, je vais ajouter la transformation, l'échelle 0 et faire pivoter 0 degrés. Puis opacité une. Et en dessous de cela à 100%, j'ajouterai la transformation, l'échelle 20, rotation de 960 degrés et l'opacité 0. Donc, ce qui se passera ici, c'est que la boîte commencera à partir d'une échelle de transformation de 0, ce qui signifie de rien en fait à une échelle de transformation de 20. Donc, il sera 20 fois plus grand pendant la durée de l'animation. Et il tournera de 0 degrés à 960 degrés tout en faisant cela. Et aussi son opacité diminuera jusqu'à ce qu'elle devienne transparente. D' accord, ajoutons cette animation à la boîte div. Je vais monter ici et ajouter des boîtes d'animation. Ensuite, une durée d'animation de 12 secondes, puis se relâcher lorsqu'il est infini. Donc maintenant, vous pouvez voir que la boîte est plus grande en tournant, nous donnant l'effet que nous voulons. Mais l'effet sera beaucoup mieux si nous pouvons ajouter quelques retards d'animation entre les cases. Donc, ils apparaîtront l'un après l'autre. Alors revenons en arrière et faisons ça. Je vais aller ici à l'intérieur du deuxième enfant et ajouter un délai d'animation deux secondes. Puis à l'intérieur du troisième enfant, et ajouter le délai d'animation. Quatre secondes. Puis six secondes à l'intérieur du quatrième enfant. Et huit secondes à l'intérieur du cinquième enfant. Et enfin, dix secondes à l'intérieur du sixième enfant. Et maintenant, vous pouvez voir que les boîtes sont animées l'une après l'autre, en raison des différents retards d'animation que nous avons ajoutés à chacune d'elles. Mais il y a un problème, comme vous pouvez le voir, quand je recharge la page. Par exemple, jetez un oeil à cette case. Vous pouvez voir qu'il s'affiche et attend la fin de son délai d'animation. Ensuite, il démarre l'animateur. Mais nous ne voulons pas qu'il apparaisse tant qu'il ne commence pas à s'animer. Donc, ce que nous pouvons faire est que nous pouvons revenir ici et ajouter l'échelle de transformation 0. Et maintenant, vous pouvez voir que la boîte n'apparaît pas jusqu'à ce qu'ils commencent à animer. Et tous sont en mouvement, nous donnant l'effet que nous voulons. 106. 110 : quelle est la propriété de CSS Clip path et comment nous pouvons l'utiliser o créer des formes créatives de formes: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons apprendre sur la propriété CSS clip-path et comment nous pouvons l'utiliser pour créer les formes. Nous allons donc créer un triangle, un cercle, un hexagone à travers une étoile, et la forme du message. C' est un outil très puissant et nous l'utiliserons dans les leçons à venir pour créer des exemples d'animations créatives. Donc, tout d'abord, quelle est la propriété clip-path ? Eh bien, le chemin de clip est une propriété CSS qui nous permet de spécifier une partie ou une région spécifique d' un élément à afficher avec le reste de l'élément étant masqué. Donc, tous les exemples que nous avons vu où seule la partie de l'élément étant affiché. Donc, dans l'exemple du triangle, nous avons choisi d'afficher une partie de notre image qui a la forme du triangle. Et le reste de l'image en dehors de cette forme de triangle était caché. Et cela est vrai pour le reste des formes aussi. Bon, voyons comment nous pouvons utiliser la propriété clip path pour créer cette forme triangle. Nous l'avons vu dans notre premier exemple. Ici, dans mon HTML, j'ai juste une image. Et dans mon CSS, j'ai ajouté une largeur spécifique et une hauteur pour cette image. Et comme vous pouvez le voir, l'image est assise au milieu du navigateur. Bon, maintenant, utilisons la propriété de chemin de clip pour créer la forme de triangle que nous voulons. Nous voulons donc montrer cette partie seulement et cacher ou découper le reste de l'image. Comment pouvons-nous faire ça ? Je vais aller ici à l'intérieur de l'élément que nous voulons couper, qui est l'image. Ensuite, j'ajouterai un polygone de trajectoire clipsée. Et je vais juste ajouter ce code ici. Et comme vous pouvez le voir, la partie de l'image qui est affichée est ce triangle et la région en dehors de ce triangle est cachée. Alors revenons en arrière et expliquons le code que nous avons ajouté ici. Ce code ici définit la zone de l'image que nous voulons afficher. Vous pouvez voir qu'il se compose de trois paires, et chaque paire représente un point du triangle. Donc la première paire représente ce point du triangle. La deuxième paire représente cette seconde, et la troisième paire représente ce dernier point. Et ce sont les points qui définissent ou créent notre triangle. Voyons donc comment la valeur de chaque paire représente ces points. Avant que l'image ne soit coupée, c'était sa taille, non ? C' était un carré. Donc je vais juste quitter cette place pour nous aider à imaginer ce qui s'est passé ici. La première paire de points est de 50 pour cent et 0%. Donc, ce 50 pour cent représente la distance par rapport au coin supérieur gauche de l'image le long de l'axe des x. Et le 0 représente la distance par rapport au coin supérieur gauche de l'image le long de l'axe y. Nous avons donc commencé ici dans le coin supérieur gauche de l'image. Puis nous avons déplacé 50 % vers la droite le long de l'axe des X jusqu'à ce que nous atteignions ici. Ensuite, nous avons déplacé 0% vers le bas le long de l'axe y. Donc 0 pour cent signifie qu'on n'a pas bougé du tout. C' est donc notre premier triangle. Ensuite, la deuxième paire a 0 % sur l'axe des x et 100 % sur l'axe des y. Et c'est vrai. Vous pouvez voir ici ce point est situé dans le coin inférieur gauche. Donc, à partir du coin supérieur gauche, nous avons déplacé 0% de distance vers la droite et 100% de distance vers le bas. Et nous nous sommes retrouvés à ce stade. Enfin, la troisième paire a 100% sur l'axe des x et 100% sur l'axe des y. Et il représente ce point, qui est situé dans le coin inférieur droit. Donc, à partir du coin supérieur gauche, nous avons déplacé 100% vers la droite le long de l'axe des x et 100% vers le bas le long de l'axe des y pour arriver à ce point. Très bien, Donc fondamentalement, nous donnons juste au navigateur les points définissant notre forme. Ensuite, le navigateur dessine cette forme et montre ce qui est inclus dans la forme et cache ou clips le reste des parties de l'élément en dehors de la forme. Donc, disons que je veux dessiner un autre triangle qui montre cette partie de l'image et cache le reste. Donc, fondamentalement, nous voulons retourner le triangle à l'envers ou faire la base en haut. Alors définissons nos trois nouveaux points. Le premier sera situé ici dans le coin supérieur gauche. Donc, fondamentalement, nous ne bougerons pas et horizontalement ou verticalement. Donc, la première paire sera égale à 0, 0%. Passant à la seconde, il sera situé dans le coin supérieur droit. Nous allons donc déplacer 100 % vers la droite le long de l'axe des x et 0 % le long de l'axe des y. Donc, nous aurons 1000%. Ensuite, le troisième et dernier point sera juste ici au centre inférieur de l'image. Nous allons donc déplacer 50 pour cent vers la droite le long l'axe des x et 100 pour cent vers le bas le long de l'axe des y. Donc, nous aurons 50 pour cent et 100 pour cent juste ici. Et maintenant, quand je recharge le navigateur, vous pouvez voir que nous avons ce nouveau triangle qui est défini par ces trois nouveaux points. D' accord les gars, donc c'est de l'entraînement. Je veux que vous essayez de créer cette forme de triangle où la base est située sur le côté gauche de l'image. Donc, vous allez juste changer quelques valeurs ici afin d'obtenir cette forme. Alors mettez la vidéo en pause et essayez-la par vous-même. Bon, Maintenant, je veux vous parler d'un très bel outil que nous allons utiliser à partir de maintenant lorsque vous travaillez avec la propriété de chemin de clip. Ainsi, comme vous l'avez peut-être remarqué, il sera difficile de créer des formes complexes en les codant directement. Ce sera plus agréable si nous avons un outil qui peut nous aider. Et cet outil est en fait un site Web appelé clippy. Donc, comme vous pouvez le voir, les gars, nous avons beaucoup de formes ici que nous pouvons appliquer à nos éléments. Donc nous avons ce triangle et son code est assis juste ici. Donc, nous pouvons simplement copier ce code et l'ajouter directement à notre élément. Essayons donc la forme du cercle. Je vais copier ce code. Retournez au navigateur et collez-le ici à l'intérieur du sélecteur d'image. Et comme vous pouvez le voir, l'image est maintenant transformée en cercle et les parties à l'extérieur du cercle sont cachées. Retournons et essayons une autre forme. Essayons ce vaisseau. Je vais copier le code. Retournez à mon CSS et collez-le. Ensuite, vous pouvez voir l'image prend maintenant la forme d'étoile. Ainsi, comme vous pouvez le voir les gars, la propriété de chemin de clip est vraiment puissante dans la création de formes à partir d'éléments HTML. Nous pouvons également contrôler la forme que nous voulons créer. Ce n'est pas forcément ces formes spécifiques ici. On peut jouer jusqu'à ce qu'on ait la forme qu'on veut. Par exemple, je vais choisir cette forme trapézoïdale ici. Et comme vous pouvez le voir, nous avons ces points colorés que nous pouvons utiliser pour bouger et créer n'importe quelle forme que nous voulons. Donc disons que je suis content de celui-là. Je peux copier son code à partir d'ici, coller à l'intérieur du sélecteur d'image. Et comme vous pouvez le voir, l'image a maintenant cette forme. Donc, je veux que vous jouiez avec ce bel outil et que vous vous y habituiez parce que nous allons l'utiliser beaucoup dans nos futures animations, effets. 107. 111 : effet de chargement créatif divisé en utilisant la propriété CSS clip Way: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cet effet de chargement de texte divisé en utilisant clip-path et des animations CSS. Vous pouvez voir que le mot chargement est divisé en deux parties, ou partie supérieure et partie inférieure. Nous allons le faire en utilisant la propriété clip path. Et aussi la partie supérieure entre de droite à gauche, tandis que la partie inférieure entre de gauche à droite. Et ils se rencontrent au centre formant le mot chargement. C' est un joli effet. Alors commençons à le créer. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de Loader. À l'intérieur, je vais ajouter une travée, lui donner une classe de moitié supérieure. Et à l'intérieur, j'ajouterai le mot chargement. Ensuite, je vais copier cette travée, la coller, et changer la classe à la moitié inférieure au lieu de la moitié supérieure. Ensuite, passant à mon CSS, je vais cibler le div avec la classe du chargeur. Ensuite, je vais ajouter la largeur 300 pixels, hauteur 60 pixels. Puis bordure de sept pixels, solide. Cette couleur bleue. Et j'ajouterai également un rayon de bordure de 10 pixels. D' accord, envoyons à ces deux travées. Je vais revenir en arrière et ajouter le texte aligner, centre et la hauteur de ligne, 60 pixels. Et enfin, j'ajouterai la position relative. Comme vous pouvez le voir, les travées sont maintenant centrées à l'intérieur de la div du chargeur. Retournons et faisons que ces travées s'asseoir l'une au-dessus de l'autre. Donc je vais retourner ici et cibler la travée. Ensuite, j'ajouterai la position absolue, top 0, gauche 0 aussi. Ensuite, afin de les faire avoir la même largeur et la même hauteur que le div chargeur. Je vais ajouter la largeur, 100%, hauteur, 100%. Ensuite, j'ajouterai la taille de la police, 48 pixels. Transformation de texte en majuscules. Et enfin, le poids de la police 600. Et comme vous pouvez le voir, les travées sont maintenant plus grandes et elles sont assis les unes sur les autres parce que nous avons réglé la largeur et la hauteur à 100% de leur conteneur. D' accord, retournons travailler sur le premier groupe qui a le top demi-classe. Je vais le cibler. Ensuite, j'ajouterai de la couleur. Cette belle couleur rouge. Ensuite, nous voulons rendre seulement la moitié supérieure de cette travée visible et haute la moitié inférieure, car la moitié inférieure sera représentée par la deuxième travée. Donc, nous ferions cela en utilisant la propriété de chemin de clip. J' irai à Clippy et je choisirai la forme trapézoïdale. Ensuite, je vais faire glisser ces cercles jusqu'à ce que j'obtienne exactement la moitié supérieure de notre élément. Juste comme ça. Ensuite, je vais copier le code, revenir à mon CSS, et le coller dans la travée avec la classe de la moitié supérieure. Ensuite, je vais cibler la travée avec la classe de la moitié inférieure. Ensuite, ajoutez de la couleur, notre couleur bleue. Ensuite, nous voulons afficher seulement la moitié inférieure. Donc je vais retourner à Clippy et déplacer ces points pour obtenir la moitié inférieure. Seulement. Ensuite, je vais copier le code. Retournez et collez-le à l'intérieur de la demi-travée inférieure. Et comme ça, vous pouvez voir que nous n'avons que la moitié supérieure de la première travée visible alors que la partie inférieure est cachée ou coupée. Et la même chose pour la partie inférieure. Et parce qu'ils sont assis les uns sur les autres et ont la même taille de police. Ils semblent être un élément, mais ils ne le sont pas. Très bien, Enfin, nous allons créer l'animation qui fait le mouvement jusqu'à ce qu'ils se rencontrent. Je vais créer une nouvelle animation. Nommez-le, divisez. Puis à l'intérieur à 0% de la durée de l'animation, je vais ajouter transform, traduire X 100%. Alors je vais copier ça. Coller à nouveau trois fois. Et à 40 pour cent, je changerai la valeur de la transformation à 0. Puis à 60%, je le ferai aussi 0. Puis à 100%, je vais le changer en négatif 100%. Donc, en regardant cette animation, vous pouvez voir que l'élément, nous allons commencer à 100% de sa largeur à partir de la droite. Ensuite, il se déplace vers la gauche jusqu'à ce qu'il retourne à sa position d'origine avec 0 translate. Puis de 40 pour cent à 60 pour cent de la durée de l'animation, il restera à sa position à 0 traduire. Ensuite, il se déplacera à nouveau à gauche de 100%. Ajoutons donc cette animation à la moitié supérieure. Je vais aller ici et ajouter de l'animation. Split, puis durée d'animation de quatre secondes, puis linéaire, et enfin infinie. Donc maintenant, vous pouvez voir que la partie supérieure se déplace de la droite, puis elle reste un peu au centre, puis elle se déplace vers la gauche et continue de le faire. Ajoutons également cette animation à la partie inférieure. Je vais revenir pour copier la ligne de code d'animation, coller, et à la fin je vais juste ajouter inverse. Il s'agit donc d'une valeur de direction d'animation qui fera animer l'élément dans une direction inverse de 100 % à 0 %. Donc, nous allons commencer à gauche et aller à droite, pas de droite à gauche. Et enfin, je vais monter ici à l'intérieur de la div chargeur. Et j'ajouterai un débordement caché afin que les travées n'apparaissent pas en dehors d'un div chargeur. Et maintenant, vous pouvez voir la partie inférieure est également animée dans l'autre direction. Et ensemble, ils créent cet effet vraiment agréable. 108. 112 - Effet de wavy créatif CSS à l'aide de la propriété CSS clip path pour tracé de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce bel effet ondulé en utilisant des animations CSS et la propriété de chemin de clip. C' est un exemple assez cool et nous verrons comment nous pouvons animer la propriété de chemin de clip afin d'obtenir un effet aussi cool. Donc, je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de vague. Puis à l'intérieur, je vais ajouter un H2 et dire vague. Je vais copier ce H2 et le coller à nouveau. Et comme vous pouvez le voir, nous n'avons que deux titres qui se situent l'un sur l'autre. Allons à notre CSS et commençons à coiffer. Alors. Je vais cibler leur div conteneur qui a la classe de vague. Et j'ajouterai la position relative. Puis la largeur de 500 pixels, et la hauteur de 500 pixels. Ensuite, je vais cibler le titre lui-même et ajouter position absolue afin que les deux soient positionnés par rapport aux conteneurs d'onde les uns sur les autres. Et afin de les centrer horizontalement et verticalement, j'ajouterai du texte aligner, du centre, puis de la hauteur de la ligne, 500 pixels. Ensuite, nous allons agrandir la police en ajoutant la taille de la police 170 pixels. Puis enfin, le texte transforme en majuscules. Et maintenant, vous pouvez voir nos titres sont plus grands et ils sont assis les uns sur autres et centrés horizontalement et verticalement à l'intérieur du navigateur. Continuons. Je vais revenir ici et dire t2 int enfant un pour cibler le premier titre. Puis à l'intérieur, j'ajouterai de la couleur. Cette couleur bleu clair. Comme vous pouvez le voir, rien n'a changé parce que le deuxième titre est assis dessus et le couvre. Très bien, allons cibler ce deuxième titre. Je dirai h2 ème enfant deux. Et à l'intérieur, j'ajouterai de la couleur à cette couleur bleue plus foncée. Et comme vous pouvez le voir, il a un fond bleu et il couvre le premier titre. Ainsi, par exemple, si nous découpons la partie supérieure du deuxième titre, nous verrons la partie supérieure du premier en dessous. Alors faisons vite ça. Je vais aller à la copie du site Web et je vais juste déplacer ces points jusqu'à ce que je ne reçoive que la moitié inférieure visible. Ensuite, je vais copier le code et revenir au deuxième sélecteur de titre et ajouter cela. Et comme vous pouvez le voir, la partie supérieure du deuxième titre est maintenant coupée, et la moitié supérieure qui est visible ici avec cette couleur bleue plus claire. En fait, le premier titre. Nous savons donc maintenant que le deuxième titre apparaît au-dessus du premier. D' accord, je vais juste supprimer cette ligne de code de chemin de clip-path. Et maintenant, nous avons le deuxième titre visible à nouveau. Ensuite, nous voulons créer l'animation ondulée du deuxième titre. Donc, je vais revenir à mon CSS pour créer une nouvelle animation. Et je le nommerai vague. Puis à l'intérieur, je vais créer trois étapes d'animation. Le premier est à 0%, puis le second est à 50%. Et la dernière est à 100%. Ensuite, je reviendrai sur le site de Clippy. Et comme vous pouvez le voir ici, nous avons ce qu'on appelle un polygone personnalisé. Et cela nous permet simplement de créer n'importe quelle forme que nous voulons en ajoutant des points. Donc, je vais essayer de créer une forme ondulée comme vous pouvez le voir en ajoutant quelques points et en les déplaçant. D' accord, donc ça a l'air bien. Je vais copier le code. Retournez à mon CSS et collez-le ici à 0% de la durée de l'animation. Et ici à 100%. Ensuite, je reviendrai sur le site et j'ai essayé de créer une autre vague dans l'autre direction. Donc, je vais ajouter quelques points et essayer d'obtenir la forme ondulée. Ensuite, je vais copier le code et le coller ici à 50% de la durée de l'animation. Alors ce qui va se passer, les gars, c'est que le deuxième titre aura la forme de la première vague. Ensuite, il va s'animer à la deuxième vague à 50%. Ensuite, il reviendra à la première vague à nouveau à 100%. Et tout cela se produira en douceur, nous donnant un bel effet ondulé. Donc, je vais monter ici à l'intérieur du deuxième titre et ajouter de l'animation. Vague. Deux secondes, à l'entrée, à l'extérieur. Puis enfin infini. Et comme vous pouvez le voir, le deuxième titre a maintenant la forme de la vague. Et c'est l'animation de la première forme. La deuxième forme, nous donnant ce bel effet ondulé. Et vous pouvez voir le premier titre avec la couleur de la lumière bleue est visible ici sous l'effet d'onde. Nous pouvons également créer un autre effet cool en retournant à l'intérieur du premier titre et en changeant la couleur en transparent au lieu du bleu clair. Ensuite, en dessous de cela, j'ajouterai trait de texte webkit aux pixels et la même couleur bleue. Et maintenant, vous pouvez voir la couleur du premier titre est maintenant transparente. Et on a un accident vasculaire cérébral autour de ça. Et ça a l'air très agréable. 109. 113 - Effet de hover image créatif utilisant la propriété CSS clip Way: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce bel effet de survol d'image à l'aide de la propriété de chemin d'accès de l'élément. Donc vous pouvez voir que nous avons trois images ici et elles sont divisées de cette façon. Et en survolant l'un d'entre eux, il devient plus grand et occupe tout l'espace du conteneur. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de conteneur. Et puis à l'intérieur de cela, je vais ajouter un autre div et lui donner une classe de clipped et une autre classe de clipped. Ensuite, je vais copier cette classe, coller à nouveau deux fois, et changer le clip 1 en Clip 2. Puis le clip trois. Après cela, je vais aller à mon CSS et cibler le div conteneur. Ensuite, j'ajouterai la position, la largeur relative, 800 pixels, la hauteur, 500 pixels. Puis enfin, la couleur de fond. Cette couleur gris foncé. Donc maintenant vous pouvez voir que nous avons ce fond gris foncé. Ensuite, je vais cibler la div avec la classe de clip. Ensuite, je vais ajouter la position, absolu, haut, 0 , gauche, 0, largeur 100%, et hauteur 100%. Puis enfin, transition ou 0,5 seconde. C' est donc une classe générale qui est appliquée aux trois dibs. Nous avons juste réglé la largeur et la hauteur des divs à pleine largeur et hauteur du conteneur. Bon, commençons à cibler chaque div individuellement. Je vais cibler la div avec la classe de Clip 1. Ensuite, j'ajouterai l'URL de fond , la première image, et vous trouverez toutes les images dans le fichier de ressources. Ensuite, j'ajouterai la taille d'arrière-plan, la couverture, puis la position d'arrière-plan, le centre. Et maintenant vous pouvez voir que nous avons cette première image de fond ici, et il prend toute la largeur et la hauteur de la div conteneur. Ensuite, je vais copier ce div, coller à nouveau, cibler le deuxième div, et utiliser ma deuxième image comme arrière-plan. Ensuite, je vais le coller à nouveau. Ciblez le troisième div cette fois et utilisez la troisième image. Et maintenant, vous pouvez voir les images sont assis les unes sur les autres. Donc cette image est la troisième, et elle est assise sur les deux autres. Très bien, nous allons maintenant couper les images pour qu'elles aient la forme que nous voulons. J' irai sur le site de Clippy et nous commencerons par la troisième image. Nous voulons que la partie droite de la troisième image apparaisse. Je peux bouger ces points jusqu'à ce que j'obtienne la forme que je veux. Disons cette forme. Ensuite, je vais copier le code. Retournez à mon CSS et collez-le dans le troisième div. Et maintenant, vous pouvez voir le troisième div est coupé et seule cette partie ici sur le côté droit est visible. Ok, travaillons sur le deuxième sur le site et déplacons les points jusqu'à ce que j'aie une forme au centre. Donc je vais jouer jusqu'à ce que j'arrive où je veux. D' accord, je vais copier le code maintenant. Coller à nouveau dans la deuxième div. Et maintenant, vous pouvez voir qu'il est également coupé et que la partie centrale est visible. Clipons rapidement le premier div. Donc, je vais retourner sur le site et je veux que le côté gauche apparaisse. Donc je vais bouger les points jusqu'à ce que j'obtienne la forme que je veux. Puis encore une fois, je vais copier le code et ajouté à l'intérieur de la première div. Et juste comme ça, vous pouvez voir la première div est également coupée et la partie sur le côté gauche est visible. Bon, maintenant nous voulons travailler sur l'effet de vol stationnaire. Tout d'abord, je vais aller juste ici et dire, en survolant le conteneur, je veux faire quelques changements qui sont arrivés aux trois divs. Donc, je vais cibler le clip div. Alors ce que je veux faire, c'est que je veux cacher toutes les parties des clips en survolant le conteneur. Je vais donc aller sur le site Clippy et je vais faire glisser tous les points vers la droite afin qu'ils soient cachés. Je vais copier le code, retourner à l'éditeur de code et le coller ici. Et maintenant, quand je vais passer la souris sur le conteneur, vous pouvez voir tous les divs se rétrécir jusqu'à ce qu'ils disparaissent. Mais on ne veut pas ça. Nous voulons que l'image que nous survolons développe jusqu'à ce qu'elle prenne toute la largeur et la hauteur. C' est donc ce que nous allons faire ensuite. Je vais aller ici et dire, en survolant le clip div. Et puisque nous voulons que les images s'étendent à toute la largeur, je retournerai sur le site Clippy et je déplacerai les points jusqu'à ce que je reçoive toute la largeur et la hauteur visibles. Ensuite, je vais aller copier le code, revenir en arrière et le coller ici. Donc, ce bloc de code signifie simplement que lorsque vous survolez l'une des trois images, cela se développe jusqu'à ce qu'il prenne toute la largeur et la hauteur. Alors allons dans le navigateur et essayons ça. Vous pouvez voir que lorsque je survole une image, elle se développe et prend tout l'espace, couvrant les autres images. Et c'est l'effet que nous voulons. 110. 114 - Effet de pop up CSS créatif à l'aide de la propriété CSS de tracés de clip clip de CSS: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de hover pop-up. Vous pouvez voir qu'on a un petit cercle ici. Et quand nous survolons, ce div apparaît et il contient un en-tête et un paragraphe. Donc, l'idée derrière cet effet est très simple. Nous allons créer notre div, puis montrer seulement le petit cercle à droite et cacher le reste de la div. Ensuite, en survolant, nous montrerons tout le div. Bon, commençons à faire ça. Ici, dans mon HTML, je vais ajouter un div, lui donner une classe de carte. Puis à l'intérieur, je vais ajouter un H et dire des informations. Ensuite, j'ajouterai un paragraphe et ajouterai du texte aléatoire ici. Ensuite, je vais aller à mon CSS pour commencer à travailler sur ceux-ci. Je vais cibler la div avec la classe de carte. Ensuite, je vais définir sa largeur à 500 pixels et sa hauteur à 250 pixels. Ensuite, je vais définir sa couleur de fond à cette belle couleur bleu clair. Ensuite, j'ajouterai du remplissage, 20 pixels du haut, et 80 pixels de la droite, puis 20 pixels et 20 pixels du bas et de la gauche. Ensuite, je vais ajouter border-rayon 10 pixels pour rendre les coins un peu arrondis. Puis enfin la transition ou 0,5 seconde. Et maintenant vous pouvez voir que nous avions cette carte div et il contient un en-tête et un paragraphe. Bon, continuons. Je vais cibler le H1. Ensuite, ajoutez la marge, 20 pixels du bas. Ensuite, je vais cibler le paragraphe et définir sa taille de police à 18 pixels. D' accord, ça a l'air mieux. Maintenant, nous allons travailler sur couper cette div dans le petit cercle qui se trouve dans le coin supérieur droit. J' irai sur le site de Clippy. Ensuite, je vais choisir la forme du cercle ici bas. Ensuite, je vais rendre ce cercle plus petit et essayer de le positionner dans le coin supérieur droit. Ok, ça a l'air bien. Je vais copier ce code CSS. Retournez à mon CSS et collez-le dans la div de la carte. Et comme vous pouvez le voir, nous avons maintenant ce petit cercle assis ici, et le reste de la carte est maintenant caché. Très bien, lorsque vous passez la souris sur la carte, nous voulons redimensionner la carte à sa taille réelle. Donc, je vais retourner sur le site Clippy, choisir à nouveau la forme du cercle. Et j'augmenterai la taille du cercle jusqu'à ce qu'il montre la pleine taille de la div. Alors je vais copier ce code. Retournez à mon CSS et dites, en survolant la carte, je vais coller ce code. Et maintenant, quand je retourne en arrière et que je passe au-dessus du petit cercle, vous pouvez voir qu'il retourne à sa pleine taille, montrant l'en-tête et le paragraphe. Et tout cela se passe en douceur parce que nous avons ajouté une transition de 0,5 seconde ici. D' accord les gars, donc c'est tout pour cet effet. C' était très simple, mais ça a l'air bien. 111. 115 - Effet de texte en texte en noir à blanc ou blanc à partir noir à l'aide de CSS Clipées clip: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce joli effet de survol de texte en utilisant la propriété de chemin de clip. Vous pouvez voir ici nous avons ce texte où la moitié est le mot blanc et l'autre moitié le mot noir. Et quand nous survolons la partie noire, le mot noir complet apparaît et le mot blanc devient plus petit jusqu'à ce qu'il disparaisse. Et la même chose se produit en survolant le mot blanc. Il apparaît complètement alors que le mot noir disparaît. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de Maine. Puis à l'intérieur, j'ajouterai un H1 et ajouterai le mot noir à l'intérieur. Puis un autre en dessous de cela, et ajouter le mot blanc. Ensuite, j'irai à mon CSS pour cibler la div principale et ajouter la position, relative et largeur 800 pixels. Ensuite, je vais cibler le H1, ajouter la position, absolue, top 50 pour cent, gauche, 50% aussi bien. Puis transformer, traduire négatif 50 pour cent et négatif 50 pour cent. Ensuite, j'ajouterai la marge 0, remplissage 0 et la largeur. 100 %. Alignement du texte, centre, taille de la police, 220 pixels. Et enfin, la transformation du texte, en majuscules. Et maintenant vous pouvez voir les deux mots sont assis l'un sur l'autre. Bon, continuons à travailler. Je vais aller ici et cibler le second qui a le mot blanc à l'intérieur. Donc, je dirai H1 ème enfant 2. Ensuite, j'ajouterai la couleur blanche, puis la transition 0,5 seconde. Maintenant, vous pouvez voir que le mot blanc est assis au-dessus du mot noir. Et nous voulons en rendre seulement la moitié visible. Nous irons donc sur le site de Clippy. Ensuite, choisissez la forme trapézoïdale. Déplacez les points autour jusqu'à ce que j'obtienne la forme que je veux montrer pour le mot blanc. Puis copiez le code. Retournez et collez-le dans le sélecteur pour le mot blanc. Et maintenant, vous pouvez voir que le mot blanc est maintenant divisé. Et c'est la seule partie visible alors que l'autre partie est cachée. Mais comme vous pouvez le voir, le mot noir est visible derrière le mot blanc, et nous ne voulons pas cela. Donc, ce que nous pouvons faire est que nous pouvons ajouter une couleur d'arrière-plan similaire à la couleur d'arrière-plan du corps. Et il va cacher la partie qui est visible. Alors je vais y retourner et faire ça. Je vais aller ici et ajouter la couleur de fond. Cette couleur. C' est la même couleur que l'arrière-plan du corps. Et maintenant, vous pouvez voir cette couleur de fond est appliquée et nous avons la forme exacte que nous voulons. Ok, nous allons travailler sur l'effet de vol stationnaire sur le mot blanc. Nous voulons qu'il prenne la taille réelle et cache le mot noir. Donc je dirai H un nième enfant à. Et en survolant cela, je retournerai sur le site Clippy et je ferai revenir le mot blanc à sa taille réelle. Alors je bougerai les points jusqu'à ce que j'obtienne la pleine taille du vaisseau. Et puis je vais copier le code, revenir en arrière et le coller. Et maintenant, vous pouvez voir quand je survole le mot blanc, il devient plus grand et revient à sa pleine taille, couvrant le mot noir. Bon, maintenant on veut faire la même chose pour le mot noir. En survolant. Nous voulons qu'il devienne plus grand et qu'il revienne à sa pleine taille, couvrant le mot blanc. Donc, je vais sélectionner le premier titre qui a le mot blanc en ajoutant un, nième enfant un. Et en survolant cela, je veux faire quelques changements qui sont arrivés à celui qui se trouve directement à côté de lui. Donc, cette ligne de code ici signifie juste que lorsque je survolerai le mot blanc, je vais apporter des modifications au mot noir. Donc, ce sélecteur ici cible juste l'élément H1 qui se trouve directement après cet élément. Je vais donc revenir sur le site de Clippy et je veux faire rétrécir le titre blanc jusqu'à ce qu'il disparaisse de sorte que l'élément noir puisse apparaître et devenir sa pleine taille. Donc je vais déplacer la danse jusqu'à ce que j'obtienne la forme que je veux, ce qui n'est pas une forme fondamentalement. Ensuite, je vais revenir à mon CSS et ajouter ce code ici. Donc, cela signifie simplement que lorsque je survolerai le premier H1, qui est le mot noir, le second va rétrécir jusqu'à ce qu'il disparaisse. Et cela nous donnera l'effet que nous voulons. Et maintenant, quand je passe la souris sur le mot noir, vous pouvez voir le mot blanc se rétrécit jusqu'à ce qu'il disparaisse et fait passer le mot noir à sa pleine taille, nous donnant l'effet que nous voulons. 112. 116 - Image pour cerner l'effet de hover à l'aide de la propriété CSS clip de clip: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cet effet de vol stationnaire de carte en utilisant la propriété de clip CSS. Vous pouvez voir que nous avons cette image et en survolant, elle se rétrécit jusqu'à ce qu'elle devienne un petit cercle. Et nous avons du contenu ici qui apparaît sous l'image. Nous avons donc h1, h2, ou un paragraphe et une balise d'ancrage. Nous allons créer cet effet cool en utilisant la propriété V clip-path. Alors faisons ça. Je vais aller ici dans mon HTML et ajouter un div, lui donner une classe de carte. Puis en dessous de cela, j'ajouterai un autre div. Donnez-lui un cours. Donc ce serait la div qui contient notre image. Ensuite, j'ajouterai notre image à l'intérieur. Puis en dessous de ce div, j'en ajouterai un autre. Donnez-lui une classe de contenu. Puis à l'intérieur de cela, je vais ajouter un H2 et dire le titre. Puis un paragraphe après cela. Et j'ajouterai du texte fictif Lorem Ipsum. Et enfin, je vais ajouter une balise d'ancrage et dire lire plus. D' accord, j'irai à mon CSS pour le style. Je vais cibler la div avec la classe de carte. Ensuite, j'ajouterai la position, la largeur relative, 335 pixels, la hauteur, 500 pixels. Ensuite, après cela, je vais cibler la div avec la classe d'image et ajouter la position absolue, top 0, gauche 0 aussi. Ensuite, nous voulons qu'il prenne toute la largeur et la hauteur de la carte. Donc, nous allons ajouter la largeur 100% et la hauteur 100% aussi bien. Ensuite, enfin, nous allons ajouter la transition ou 0,5 seconde. Bon, continuons. Je vais cibler l'image elle-même qui se trouve à l'intérieur de notre div et ajouter de la largeur 100%. Et maintenant, vous pouvez voir que l'image a la même largeur que son conteneur. Maintenant, nous voulons faire rétrécir l'image et devenir un petit cercle en survolant. Alors faisons ça. Je dirai en survolant la div qui a la classe de carte, je veux apporter quelques changements à la div avec la classe d'image. Et j'irai sur le site Clippy pour créer la forme de cercle que nous voulons. Je vais essayer de créer la taille exacte du cercle que je veux dans la position exacte que je veux. Ensuite, je vais copier le code. Retournez à nouveau et collez-le ici. Ensuite, je reviendrai sur le site de Clippy et je ferai en sorte que ce cercle prenne la pleine taille afin que nous puissions montrer la pleine taille de l'élément. Ensuite, je vais copier à nouveau le code. Retournez et allez ici à l'intérieur de l'image div, et collez le code ici à l'intérieur de la div avec la classe d'image. Donc, ce que cela fera est lorsque nous survolons la carte, la div avec la classe d'image changera de cette propriété de chemin de clip à cette propriété de chemin de clip où il sera un cercle plus petit. Et maintenant, vous pouvez voir quand je passe la souris sur la carte, l' image se rétrécit jusqu'à ce qu'elle devienne plus petite. Et en survolant, il remonte pour couvrir toute la taille de la carte. Bon, revenons en arrière et continuons à travailler. Nous allons travailler sur le contenu. Donc, je vais cibler la div avec la classe de contenu. Et je vais ajouter la position absolue, gauche, 0, bas 50 pixels parce que nous voulons positionner le texte au-dessus du bord inférieur de 50 pixels. Ensuite, pour aligner le texte au centre, j'ajouterai le centre d'alignement du texte. Maintenant, vous pouvez voir le contenu est situé au bas de la div de la carte. Continuons. Je vais cibler le H2. Ensuite, j'ajouterai le remplissage et la marge 0 aussi. Ensuite, j'ajouterai la transformation de texte, en majuscules. Ensuite, je vais cibler le paragraphe et ajouter la marge inférieure 25 pixels. Ensuite, la taille de la police, 16 pixels, et la transformation du texte. Capitaliser. Ensuite, je vais cibler la balise d'ancrage. Ajouter affichage, bloc inline-block. Décoration de texte. Aucun. Couleur de fond, couleur noire, blanc. Rembourrage, cinq pixels du haut et du bas, et dix pixels de la gauche et de la droite. Puis enfin, je vais ajouter la majuscule de transformation de texte. Bon, maintenant nous avons le style de contenu comme nous le voulons. Continuons. Nous voulons que ce contenu soit masqué et n'apparaisse que lorsque nous survolons la carte. Donc, je vais aller ici et cibler le H2, le paragraphe, et la balise d'ancrage. Ensuite, j'ajouterai l'opacité 0, puis la transition 0,3 secondes. Et je vais ajouter transformer traduire Y 20 pixels. Nous définissons le Translate Y à 20 pixels ici car nous voulons ces éléments se déplacent du bas à leur position d'origine tout en s'estompant. Lorsque nous survolons la carte, ce sera un effet plus agréable que de simplement échouer. Puis enfin, en survolant la carte, nous voulons que ces éléments apparaissent à nouveau et s'estompent bien. Donc, je dirai que lorsque nous survolons la carte, je vais apporter quelques modifications à la H2. Ensuite, je vais copier cela, coller, et cibler le paragraphe cette fois. Ensuite, je vais également cibler la balise d'ancrage. Puis à l'intérieur de cela, j'ajouterai une opacité à nouveau afin que ces éléments apparaissent à nouveau en survolant. Puis Transformer, Traduire Y 0 afin qu'ils se déplacent du bas à leur position d'origine. Et enfin, délai de transition 0,5 seconde. Et maintenant, quand je retourne en arrière et que je passe au-dessus de l'image, vous pouvez voir qu'elle se rétrécit pour devenir un cercle. Et le contenu ici s'estompe bien tout en se déplaçant du bas à sa position, qui nous donne cet effet vraiment cool. 113. 117 - Effet de hover image créatif à l'aide de chemin de clip CSS Clipée clip: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer ce bel effet de survol d'image à l'aide de la propriété de chemin de clip. Vous pouvez voir lorsque je survole l'image, elle se rétrécit du coin inférieur gauche vers le coin supérieur droit. Et nous avons ce texte qui apparaît en dessous. Et ce texte contient un H2, un paragraphe et un lien. Voyons donc comment nous pouvons créer cet effet. Je vais commencer ici dans mon HTML en ajoutant un div et en lui donnant une classe de carte. Puis à l'intérieur, j'en ajouterai un autre avec la classe de contenu. Et à l'intérieur de ce div de contenu, je vais ajouter un H2 et dire l'effet de survol de l'image. Ensuite, je vais ajouter un paragraphe et ajouter du texte Lorem Ipsum. Puis enfin, je vais ajouter une balise d'ancrage et dire lire plus. Ensuite, je vais aller à ma cible CSS la div avec la classe de carte. Quand je vais ajouter la position largeur relative, 400 pixels, hauteur, 400 pixels ainsi. Et enfin, la couleur de fond, noir. Donc, ici vous pouvez voir que nous avons un fond noir avec une largeur et une hauteur de 400 pixels assis dans le navigateur. D' accord, continuons et nous retournerons ici et div ciblé avec la classe de contenu. Ensuite, j'ajouterai la position, largeur absolue, 60 pour cent, haut, 50 pour cent, gauche, 50 pour cent aussi. Ensuite, afin de centrer le contenu, j'ajouterai transformer, traduire, négatif 50 pour cent et négatif 50 pour cent. Ensuite, j'ajouterai de la couleur, blanc. Et enfin, le texte aligner au centre. Et maintenant, vous pouvez voir le contenu div est centré à l'intérieur de la carte. Continuons à travailler et nous retournerons à mon CSS et ciblons le H2. Ensuite, j'ajouterai la marge, le bas 20 pixels et la transformation du texte. Capitaliser. Je vais également cibler le paragraphe. Ajouter la marge inférieure 30 pixels. Et la transformation du texte. Capitaliser. Ensuite, je vais cibler la balise d'ancrage. Ajouter un affichage. Bloc en ligne, remplissage, 10 pixels du haut et du bas, et 10 pixels de la gauche et de la droite. Puis frontière. Un pixel. Blanc massif. Décoration de texte, aucun. Couleur. Blanc. Transition 0,5 seconde. Puis enfin, le texte se transforme. Capitaliser. Très bien, maintenant, lorsque vous passez la souris sur le lien, nous voulons changer la couleur en noir et ajouter un fond blanc. Alors faisons ça. Je vais aller ici et dire en survolant le lien, je vais changer sa couleur en noir. Et je vais ajouter la couleur de fond blanc. Et maintenant, lorsque je survole le lien, nous avons cet effet où la couleur de fond change blanc et la couleur du texte change en noir. Maintenant, ajoutons l'image qui se trouve au-dessus du contenu. Je vais revenir à mon HTML, aller juste ici en dessous de la div de contenu, et ajouter une balise d'image. Ensuite, j'ajouterai notre image. Vous le trouverez dans les ressources de cette leçon. Donc, comme vous pouvez le voir, cette image est partout. Revenons à CSS et corrigeons cela. Je vais le cibler. Ensuite, ajoutez la position, absolue , supérieure, 0, gauche 0 ainsi. Largeur 100%, et hauteur 100%. Lorsqu' un objet s'adapte couvert. Et enfin, transition 0,5 seconde. Donc maintenant, vous pouvez voir notre image est maintenant assis sur le contenu et le couvrir. Maintenant, nous voulons créer un effet de survol. Donc, en survolant l'image, nous voulions rétrécir du coin inférieur gauche jusqu'au coin supérieur droit. Donc, je vais aller ici et dire en survolant l'image. Ensuite, j'irai sur le site de Clippy et je choisirai la forme trapézoïdale. Ensuite, je vais déplacer ce point ici du coin inférieur gauche vers le coin supérieur droit. Ensuite, copiez le code et revenez à mon CSS et collez-le. Ensuite, je reviendrai sur le site de Clippy et je ferai revenir l'image à sa pleine taille. Encore une fois. Copiez le code, et revenez à mon CSS et collez-le ici à l'intérieur de la balise image. Donc, cela dira simplement au navigateur que lorsque vous passez la souris sur l'image, nous voulons qu'elle passe de cette taille pleine à cette taille où elle sera complètement cachée, passant du coin inférieur gauche au coin supérieur droit. Donc, quand je vais et que je passe au-dessus de l'image, vous pouvez voir qu'elle a exactement le même effet que nous voulons. Il se rétrécit du coin inférieur gauche au coin supérieur droit. Et en fait, on peut changer ça assez facilement. Par exemple, disons que nous voulons le faire rétrécir du coin supérieur gauche au coin inférieur droit. Nous pouvons le faire facilement en retournant sur le site Web de Clippy. Et je vais déplacer ce point ici du coin supérieur gauche vers le coin inférieur droit. Ensuite, je vais copier le code. Retournez au sélecteur d'image et collez-le ici en survolant l'image. Et maintenant, quand je passe la souris sur l'image, vous pouvez voir qu'elle se rétrécit du coin supérieur gauche vers le coin inférieur droit, qui nous donne cet effet cool. 114. 118 - Effet de split de menu créatif à l'aide de la propriété CSS clip Way: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer cet effet cool, puis vous survolez en utilisant la propriété de chemin de clip. Vous pouvez voir quand je survole les liens dans le menu, cet effet se produit où nous avons une ligne horizontale qui se déplace à travers les liens en quelque sorte les divise en deux moitiés, la moitié supérieure et la moitié inférieure. Et vous pouvez voir la moitié supérieure se déplace un peu vers le côté supérieur droit et la moitié inférieure se déplace vers le côté inférieur gauche. Alors commençons à créer cet effet. Je vais aller ici et ajouter un UL puis, puis une étiquette d'ancrage à l'intérieur de cela. Et je dirai à la maison. Ensuite, je vais aller ici et ajouter des données, du texte et dire à la maison aussi bien. Vous découvrirez plus tard pourquoi nous avons ajouté l'attribut de texte de données ici. Ensuite, je vais copier cet élément de liste, coller à nouveau quatre fois. Et dire sur les services, équipe et le contact. D' accord, je vais aller à mon CSS et cibler l'UL. Ensuite, j'ajouterai la marge 0, remplissage 0 aussi. Ensuite, je vais cibler le LI et ajouter la position. Relatif, style liste, aucun. Et enfin, marge, dix pixels de haut et de bas et 0 pixels de gauche et de droite. Très bien, je vais cibler la balise d'ancrage et ajouter la position relative. Puis afficher le bloc, le texte, alignement, le centre, la marge, 0. Rembourrage, cinq pixels du haut et du bas, et dix pixels de la gauche et de la droite. Ensuite, j'ajouterai la transformation de texte. Majuscule, transition, 0,5 seconde. Taille de la police, 16 pixels, poids de la police, 900. Et enfin, la décoration de texte. Aucun. Et maintenant, vous pouvez voir que les liens sont exactement comme nous le voulons. Ensuite, nous voulons diviser les liens en deux moitiés de sorte que lorsque la ligne passe à travers eux. L' effet de fractionnement se produira, et nous le ferons en utilisant la propriété de chemin d'accès de l'élément. Donc, d'abord, je vais cibler le pseudo élément avant de la balise d'ancrage et ajouter du contenu, un texte de données TTR. Donc, ce que cela va faire est qu'il va saisir le texte que nous avons dans l' attribut de texte de données et le mettre dans le contenu du pseudo élément avant de chaque lien. Donc, le pseudo élément avant du premier lien aura un contenu de la maison. Le deuxième lien aura un contenu d'environ, et ainsi de suite. D' accord, nous voulons ensuite que ce contenu s' insère parfaitement sur le texte original du lien. Donc, je vais ajouter la position, absolue, haut, 0, gauche, 0, largeur 100%. Ensuite, j'ajouterai du remplissage, cinq pixels du haut et du bas, et 0 pixels de la gauche et de la droite. Ensuite, j'ajouterai de la couleur. Cette boîte de couleur gris foncé taille zone de transition border-boîte, 0,5 seconde. Donc maintenant, vous pouvez voir les pseudo-éléments avant sont assis parfaitement au-dessus des liens et ils ont cette couleur gris foncé. Bon, maintenant le pseudo élément avant sera la moitié supérieure. Alors allons sur le site Clippy et créons le code responsable de cela. Donc, je vais choisir la forme trapézoïdale et déplacer les points jusqu'à ce qu'ils représentent exactement la moitié supérieure. Ensuite, je vais copier le code à l'élément pseudo précédent et le coller. Donc maintenant, vous pouvez voir la moitié supérieure du pseudo élément avant est visible tandis que la partie inférieure est cachée. Revenons en fait et rendons la couleur des liens transparente. Je vais aller à l'intérieur du sélecteur de liens et ajouter de la couleur. Transparent. Et maintenant vous pouvez le voir clairement, la moitié supérieure est visible et la moitié inférieure est cachée. D' accord, faisons la même chose pour le pseudo élément after. La seule différence est que nous allons cacher la moitié supérieure et montrer la moitié inférieure. Donc, je vais copier le pseudo élément précédent, le coller à nouveau. Et la seule chose qui va changer est la propriété de chemin de clip. Donc, je vais retourner sur le site de Clippy et je vais déplacer les points pour cibler la moitié inférieure, pas la partie supérieure. Ensuite, je vais copier le code, revenir en arrière et le coller à l'intérieur du pseudo élément after. Et maintenant, vous pouvez voir le pseudo élément après apparaît maintenant sur la moitié inférieure. D' accord ? Lorsque vous passez le curseur sur les liens, nous voulons que le pseudo élément avant se déplace dans le coin supérieur droit et que le pseudo élément après se déplace vers le bas gauche. Alors faisons ça. Je dirai en survolant la balise d'ancrage, je vais apporter quelques modifications à l'élément pseudo avant, qui est la demi-heure supérieure, changer la couleur à cette couleur rouge. Et j'ajouterai la transformation, traduirai 10 pixels. Donc, il va déplacer dix pixels vers la droite le long de l'axe des x, les 3 pixels négatifs. Il sera donc déplacé vers le haut de trois pixels. Ensuite, je le copierai à nouveau. Et changez cela en négatif 10 pixels et trois pixels positifs. Et maintenant, quand je survole n'importe quel lien, vous pouvez voir la moitié supérieure et la moitié inférieure se déplacent et nous donnent notre effet de split cool et aussi leurs changements de couleur. À lire. La seule chose reste maintenant est la ligne horizontale qui passe à travers les liens et les divise. Nous allons créer cela en utilisant le pseudo élément avant des éléments de liste. Donc je vais le cibler. Ensuite, à l'intérieur de cela, je vais contenir des chaînes vides Position, absolue. Ensuite, afin de le centrer verticalement, j'ajouterai le top 50 pour cent. Puis Transformer, Traduire Y négatif 50 pour cent. Ensuite, nous voulons qu'il prenne toute la largeur de l'élément de liste. Donc, nous allons ajouter la largeur, 100%. Puis hauteur, un seul pixel. Et la couleur de fond. Cette couleur gris foncé. Ensuite, nous voulons qu'il vienne du côté gauche vers le côté droit. Donc, je vais ajouter négatif gauche 100%. Et enfin la transition 0,5 seconde. Et maintenant vous pouvez voir que nous avons cette ligne mince qui se trouve sur le côté gauche des éléments de la liste. Et lorsque nous survolons les éléments de la liste, nous voulons que cette ligne se déplace vers la droite à travers les liens. Donc, je vais dire en survolant les éléments de la liste, je veux apporter quelques modifications à l'élément pseudo avant. Je vais définir la propriété gauche à 100% au lieu de 100% négatif. Et maintenant, quand je passe la souris sur les liens, vous pouvez voir la ligne se déplace à travers les liens, qui nous donne cet effet de fractionnement cool. Retournons en arrière et cachons la ligne en dehors du lien. Je vais revenir ici à l'intérieur de l'élément de la liste et ajouter un débordement caché. Nous voulions aussi diviser l'effet pour avoir un certain retard et arriver légèrement après que les lignes commencent à bouger. Donc, je vais aller à l'intérieur de la moitié supérieure et ajouter le délai de transition 0,25 seconde. Et je ferai la même chose pour la moitié inférieure aussi. Et maintenant, vous pouvez voir que la ligne horizontale est maintenant cachée. Et quand nous survolons le lien, la ligne se déplace et la crache, nous donnant l'effet exact que nous voulons. 115. 119 - Effet de hover créatif de bouton sur la propriété CSS clip Chemin: Bonjour à tous, bienvenue à cette nouvelle leçon dans le cours. Dans cette leçon, nous allons créer un autre effet de bouton en utilisant la propriété de chemin de clip. Vous pouvez voir que ce bouton est divisé de cette façon en deux parties, une partie blanche et une partie violette. Et en survolant la partie blanche, la couleur d'arrière-plan du bouton s'agrandit et devient blanc. Et de même, en survolant la partie pourpre, il se développe également et l'arrière-plan du bouton devient violet. Alors créons cet effet. Je vais commencer ici dans mon HTML en ajoutant une balise d'ancrage. Puis à l'intérieur de cela, je vais ajouter une travée et dire bouton. Puis une autre plage en dessous de ça. Et dites bouton aussi. D' accord, alors je vais aller à mon CSS et cibler la balise d'ancrage. Ensuite, ajoutez la position, la largeur relative, 180 pixels, la hauteur 60 pixels. Ensuite, je vais cibler les travées à l'intérieur du lien et ajouter position absolue afin que nous puissions le positionner par rapport à la balise d'ancrage. Ensuite, nous allons ajouter top 0, gauche 0 aussi. Largeur, 100%, hauteur, 100% aussi. Ainsi, les deux tours auront la même largeur et la même hauteur que le lien. Ensuite, je vais ajouter la couleur, blanc, couleur de fond, cette couleur pourpre. Ensuite, centrons le texte. Je vais ajouter text-align, centre et hauteur de ligne, 60 pixels. Ensuite, j'ajouterai la transformation de texte, l'espacement des lettres majuscules aux pixels. Puis enfin, taille de police, 22 pixels. Et maintenant, vous pouvez voir les deux travées s'asseoir l'une au-dessus de l'autre et prendre toute la largeur et la hauteur de l'étiquette d'ancrage. Bon, maintenant je veux cibler la deuxième portée. Donc, je vais dire travée nième enfant à cibler la deuxième travée. Puis à l'intérieur de cela, je vais changer la couleur de fond en blanc et la couleur à notre couleur pourpre. Ensuite, j'ajouterai la transition 0,5 secondes. Donc maintenant, vous pouvez voir que la deuxième plage a un fond blanc et la couleur du texte est violet. Mais en dessous de cela se trouve la première travée avec le fond violet et le texte blanc. Et la raison pour laquelle la deuxième plage apparaît au-dessus de la première est simplement parce qu'elle est venue après la première dans le balisage HTML. Mais si nous découpons cette partie spécifique de la deuxième plage, la première apparaîtra en dessous, et c'est ce que je vais faire ensuite. J' irai sur le site de Clippy et je choisirai la forme du point gauche cette fois. Ensuite, je bougerai les points jusqu'à ce que j'obtienne la forme que je veux. Donc nous allons essayer de le faire montrer la moitié de la durée. Ensuite, je vais copier son code. Retournez à mon CSS et collez-le. Et maintenant, vous pouvez voir que seule cette pièce à droite est visible sur la deuxième travée alors que la partie gauche a été découpée. Et c'est pourquoi le premier groupe apparaît maintenant en dessous. Bon, maintenant, en survolant la deuxième travée, qui est la partie blanche, nous voulons qu'elle devienne plus grande et qu'elle prenne la pleine taille du lien. Donc, je vais aller ici et dire travée nie-enfant aussi, pour cibler la deuxième travée. Et en survolant cela, je veux afficher la taille complète de la deuxième travée. Donc, je vais retourner sur le site Clippy et je vais déplacer les points vers la gauche jusqu'à ce qu'il affiche la pleine taille de l'élément. Ensuite, je vais copier le code, revenir en arrière et le coller à l'intérieur ici en survolant la deuxième plage. Et maintenant, quand je retourne en arrière et que je passe au-dessus de la partie blanche, vous pouvez voir qu'elle se développe vers la gauche et prend toute la taille du lien. Donc, sa taille change à partir du premier cas dans lequel la partie droite n' est visible que dans le second cas où sa taille réelle est visible. Bon, Maintenant, en survolant la partie violette, nous voulons que la partie blanche se rétrécit et disparaisse sorte que la première travée ou la partie violette apparaisse complètement. Alors faisons ça. Je vais aller ici et dire « Span nie-enfant ». Un pour cibler le fond violet. Et en survolant cela, nous voulons apporter quelques modifications à la portée qui vient directement après elle, qui est le fond blanc. Ensuite, je reviendrai sur le site de Clippy et je déplacerai tous les points vers la droite afin que le fond blanc rétrécit et disparaisse complètement. Ensuite, je vais copier ce code, revenir en arrière et collé ici. Et maintenant, quand je passe la souris sur la partie violette, vous pouvez voir la partie blanche se rétrécit complètement vers la droite, ce qui permet à la partie violette d'apparaître à nouveau. Et en survolant la partie blanche, il pousse vers la gauche jusqu'à ce qu'il prenne la pleine taille du lien. Et que tout le monde est l'effet exact que nous voulons. 116. Effets javascript: Vous êtes nombreux à m'avoir demandé de créer des leçons sur les effets Javascript. Nous voici donc dans cette section où nous allons apprendre à utiliser conjointement des animations Javascript et CSS pour créer effets vraiment intéressants qu' il est impossible de créer en utilisant uniquement du CSS. Voici donc les exemples que nous allons créer ensemble. 117. Effet de survol d'animation de texte coloré: Bonjour tout le monde Bienvenue dans une autre nouvelle leçon du cours. Dans cette leçon particulière, nous allons créer cet effet de survol de texte vraiment cool Vous pouvez voir que lorsque nous survolons ce texte, cet effet se produit comme vous pouvez le voir, le texte brille de gauche à droite et toutes les lettres ont des couleurs différentes Lorsque nous nous éloignons, cet effet d'éclairage s'estompe. Nous allons créer cet effet en utilisant du HTML, CSS et un peu d' aide de Javascript. Commençons par créer cet effet. Je vais entrer dans mon code HTML et ajouter un H deux, lui donner une classe de texte. Ensuite, j' ajouterai du texte Javascript à l'intérieur. Ensuite, je vais accéder à mon CSS et cibler le corps. Ajoutez un affichage, une flexion, une justification du contenu, un centre de ligne, centre d' éléments, une hauteur minimale, arrière-plan 100 VH, cette couleur gris foncé Ensuite, en dessous, je ciblerai le H deux et ajouterai la position relative à la taille de police trois. E M, espacement des lettres, 0,05 M. Le texte par défaut du curseur est transformé en majuscules, puis enfin, en police de 500. Maintenant, vous pouvez voir que le H deux est bien meilleur. Bon, passons maintenant au fichier Javascript. Ce que nous voulons faire pour tout le monde, c'est placer chaque lettre du texte H deux dans une plage séparée. La lettre J sera enroulée dans un intervalle, puis la lettre a, puis la lettre, et ainsi de suite. Ensuite, nous allons commencer à styliser ces travées. Nous allons le faire en utilisant Javascript. Allons-y, et j'espère que vous comprendrez ce que je veux dire. Je vais commencer ici en sélectionnant le H deux et en le stockant dans une variable. Je vais créer une variable, la nommer texte, dire sélecteur de requête de document et cibler les H deux qui ont une classe de texte Commençons maintenant à envelopper chaque lettre dans un intervalle. Je vais créer un nouveau nom de variable qu'il couvre. Ensuite, je vais le définir comme étant le texte dans le texte. La méthode innertext extraira le texte à l'intérieur du H deux juste pour voir ce que nous faisons Étape par étape, je vais aller ici et ajouter des plages de log de console. Maintenant, lorsque nous ouvrons la console, vous pouvez voir que nous avons imprimé du texte Javascript, qui est le texte à l'intérieur du H deux. Bien, nous voulons maintenant récupérer chaque lettre individuellement afin de pouvoir l'enrouler dans une travée. Et nous pouvons le faire en utilisant la fonction split. Je vais aller ici et ajouter un split, et j'ajouterai une chaîne vide à l'intérieur. La propriété split est utilisée sur les chaînes pour les diviser . Elle renvoie un tableau contenant le mot ou les lettres divisés, les chaînes vides servant de séparateur. Par exemple, si nous avons ajouté un espace ici à l'intérieur des chaînes vides, vous pouvez voir que notre chaîne est divisée en deux mots sur l'espace ici. Mais comme nous voulons que toutes les lettres soient séparées, nous allons supprimer cet espace ici. Vous pouvez maintenant voir que nous avons un grand tableau qui contient toutes les lettres en tant qu'éléments du tableau. Bien, maintenant nous voulons passer en boucle ces lettres dans le tableau et commencer à les enrouler dans des travées Et nous allons le faire en utilisant la méthode de la carte. Je vais aller ici et ajouter une carte ici comme premier paramètre, j'ajouterai une lettre au deuxième paramètre, je vais ajouter un index. La méthode map est essentiellement une méthode qui parcourt le tableau en boucle, crée un nouveau tableau en appelant une fonction sur chaque élément du tableau d'origine. Le premier paramètre ici concerne les éléments du tableau. Dans notre exemple, les lettres présentes ici seront les lettres de notre tableau de travées Voici l'index de l'élément. Pour la première itération de boucle, la lettre ici sera la lettre J et I sera zéro Ensuite, pour la deuxième itération de boucle, la lettre sera la deuxième lettre a et l'index sera un Et ainsi de suite. Ensuite, je vais créer la fonction de la méthode map à l'intérieur. Je vais dire « retour ». Ensuite, j'ouvrirai un modèle littéral, ajouterai une balise span, puis je fermerai la balise span qu'il contient Nous ajouterons chaque lettre. Nous allons le faire en ajoutant le signe de 1$, puis la lettre entre accolades Ce qui va se passer ici, tout le monde est que la méthode map parcourra le tableau de lettres, ajoutera chaque lettre dans un intervalle, puis renverra un nouveau tableau à partir de celui-ci. Comme vous le voyez ici, nous avons ce grand tableau et chaque élément est une balise span contenant une lettre. Bien, pour terminer, nous voulons extraire tous les éléments du tableau et les reconvertir en chaîne normale afin les injecter facilement dans notre code HTML. Et nous pouvons le faire assez facilement en utilisant la méthode join. Je vais aller ici et ajouter ensuite join, et des chaînes vides comme séparateur. Maintenant, si vous regardez la variable spans dans la console, vous pouvez voir qu'elle est affichée sous forme de chaîne Et nous pouvons maintenant facilement les insérer dans l'en-tête HTML en allant ici et en ajoutant du texte innerHTML equals spans Maintenant, tout le monde, lorsque nous inspectons le H deux, vous pouvez voir qu'il a maintenant toutes ces portées Chaque lettre est enroulée dans une travée. Passons maintenant à notre CSS, sélectionnons les plages l'intérieur du H deux et ajoutons de la couleur Cette couleur gris plus clair, puis la transition est de 0,25 seconde. Ensuite, en dessous, je dirai qu' en survolant le H deux, je vais cibler l' intervalle et ajouter de la couleur, cette couleur vert clair Ensuite, afin d'obtenir l'effet brillant, je vais ajouter cette valeur à l'ombre du texte. Maintenant, quand je passe le curseur sur les deux H, vous pouvez voir que nous avons ce bel effet lumineux Nous voulons maintenant ajouter un délai de transition aux lettres. Revenons à Javascript. Allez ici dans le span et ajoutez un délai de transition de style. Ensuite, nous utiliserons les littéraux du modèle pour insérer du code. Ajoutez ensuite I multiplié par 40, puis par millisecondes. Nous avons utilisé l'index ici pour rendre le délai de transition unique. Pour chaque intervalle, il sera égal à zéro fois 40 millisecondes pour la première lettre, une fois 40, puis deux fois 40, et ainsi de suite Maintenant, lorsque nous survolons les deux H, vous pouvez voir les lettres briller les unes après les autres Nous allons également changer la couleur de chaque lettre à l'aide de la propriété CSS du filtre. Je vais aller ici et ajouter une rotation du filtre multipliée par 30 degrés. Cela donnera à chaque travée une couleur différente. Tout comme vous pouvez le voir ici. Toutes les lettres ont maintenant des couleurs froides différentes. Avec ça, tout le monde, on obtient un effet vraiment cool et brillant. 118. Menu de navigation cercle utilisant javascript: Bonjour tout le monde Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cet effet de basculement dans un menu circulaire Vous pouvez voir que lorsque je clique sur ce bouton, ces six liens circulaires apparaissent Vous pouvez voir qu'ils sont placés autour du bouton de bascule, et lorsque vous cliquez à nouveau, ils reviennent en arrière et se cachent derrière le bouton de bascule Nous utiliserons un script Java pour créer cet effet. Je vais commencer ici dans mon code HTML en ajoutant un di et en lui donnant une classe de conteneur. Ensuite, à l'intérieur, j'ajouterai un autre div et je lui donnerai une classe de toggle Ce sera le bouton de bascule. Ensuite, à l'intérieur, nous voulons ajouter l'icône du bouton à bascule. Et nous allons obtenir ces icônes sur un site Web appelé Ion icons. Pour inclure les icônes, je vais passer à l'utilisation et copier ce code ici. Ensuite, collez-le dans notre code HTML. Ensuite, pour sélectionner l'icône à bascule, je vais cliquer sur les icônes, puis sélectionner et copier ce code ici Ensuite, revenez en arrière et collez-le ici dans le toggle dif. Ensuite, en dessous, nous voulons ajouter les éléments du menu. J'ajouterai un UL, puis un L I. À l'intérieur, nous voulons utiliser des variables CSS. Ici, je vais ajouter le style deux et en ajouter un. Cette variable sera égale à un pour ce premier élément de liste. Ensuite, j'ajouterai une étiquette d'ancrage à l'intérieur. Nous voulons ajouter l'icône d'accueil. Je vais revenir ici et le rechercher. Copiez ensuite ce code, collez-le à nouveau ici. Vous pouvez maintenant voir que nous avons le bouton de bascule et le lien d'accueil OK tout le monde, je vais suspendre l'enregistrement et ajouter les autres liens, comme je l'ai fait avec celui-ci. Comme vous pouvez le constater, nous avons ajouté six icônes ici et augmenté la variable de 1 à 6. Elles sont toutes là Très bien, passons à notre CSS et ciblons le corps. Ajoutez ensuite la hauteur minimale, 100 VH Display flex, justifiez le centre de contenu, alignez les éléments, le fond central, dégradé linéaire de 45 degrés entre cette couleur violette et cette couleur rouge Ensuite, en dessous, je ciblerai le conteneur div. Ajoutez une largeur de 270 pixels, une hauteur de 270 pixels. Affichez ensuite Flex, justifiez le centre de contenu, alignez les éléments, la position centrale relative et un arrière-plan rouge temporaire. Vous pouvez maintenant voir que nous avons l'icône tago et les autres liens côte à côte OK, travaillons sur le bouton de bascule. Je vais le cibler. Ajoutez une largeur de 70 pixels, une hauteur de 70 pixels. Ensuite, la bordure blanche de fond (rayon de 50%) colore cette couleur gris foncé. Ensuite, pour centrer l'icône à l'intérieur du cercle, j'ajouterai display Flex, Justify content center, aligner les éléments au centre, puis faire une taille de police de 30 pixels. Le pointeur du curseur est un index 20. Enfin, la transition est de 0,3 seconde. Travaillons maintenant sur l'effet de clic. Lorsque vous cliquez sur le bouton à bascule, nous voulons qu'il pivote pour qu'il soit un signe X, et non un signe plus En cliquant sur ce bouton, nous voulons ajouter une classe sur le div du conteneur et styliser le bouton de bascule Sur la base de cette classe, je vais accéder au fichier Javascript et commencer par sélectionner le conteneur div. Je dirais que le conteneur est égal au sélecteur de requête de document et que je sélectionne le conteneur Ensuite, en dessous, je vais rapidement cibler le toggle div. Ensuite, je vais aller ici et dire «   toggle Add Event Listener ». L'événement que nous voulons écouter est le clic. Ensuite, j'ajouterai notre fonction. À l'intérieur de cela, je vais ajouter une liste de classes de conteneurs, basculer et ajouter une classe nommée active C'est tout pour le script Java, tout le monde. En gros, lorsque nous cliquons sur le bouton de bascule, une classe nommée active est ajoutée au conteneur Essayons ça. Vous pouvez voir que lorsque je clique sur le bouton bascule, cette classe active est ajoutée ici Lorsque vous cliquez à nouveau, il est supprimé. Bien, revenons à notre CSS et sélectionnons le conteneur Div. Ensuite, lorsque le conteneur aura une classe active, nous ciblerons la classe toggle et ajouterons une rotation de 45 degrés par transformation Maintenant, vous pouvez voir que lorsque je clique sur le bouton à bascule, il pivote de 45 degrés et devient un signe X. Lorsque vous cliquez à nouveau, il revient en raison de la suppression de la classe active. OK, continuons comme ça. Travaillons sur l'URL qui contient tous les éléments de la liste. Il possède une classe de menu. Je vais cibler cela et ajouter la position en haut absolu, le zéro à gauche, puis la largeur 100 %, la hauteur 100 %. Ensuite, je ciblerai le L I dans le menu et j' ajouterai la position en haut absolu 00, la largeur 100 %, la hauteur 100 %. Enfin, les événements du pointeur. Vous pouvez maintenant voir que tous les éléments de la liste sont positionnés dans le coin supérieur gauche. En dessous, ciblons la balise d'ancrage à l'intérieur de l'élément de liste. À l'intérieur, j'ajouterai 55 pixels de largeur et 55 pixels de hauteur. Colorez ce fond de couleur gris foncé, rayon de bordure blanche de 50 %, taille de police de 22 pixels. Ensuite, j'ajouterai le centre de contenu Display Flex Justify, un centre d'éléments de ligne. Ensuite, afin de positionner les liens sous le bouton Toggle, je vais ajouter la position absolue en haut à 50 % à gauche , 50 % Transformer, traduire, moins 50 % et moins 50 %. Vous pouvez voir que les liens sont maintenant cachés derrière le bouton à bascule J'ajouterai également des événements de pointeur visibles, puis une transition de 0,3 seconde. Lorsque vous cliquez sur le bouton à bascule, nous voulons que les boutons apparaissent à nouveau. Je sélectionnerai le conteneur lorsqu'il aura une classe active. Cela signifie que lorsque nous cliquons sur le bouton, je sélectionne les balises d'ancrage et je les ajoute à zéro. Maintenant, en cliquant sur le bouton à bascule, vous pouvez voir les liens se déplacer vers le haut Lorsque vous cliquez à nouveau, ils reculent et se cachent derrière le bouton à bascule. Il ne reste plus qu'à faire pivoter les liens autour du bouton à bascule Je vais aller ici dans les éléments de la liste et ajouter transform rotate. Comme nous avons six éléments de liste, je vais ajouter calc 360 degrés par six fois v, qui est la variable que nous avons ajoutée à notre code HTML Le premier LI sera pivoté 360 degrés, divisé par six fois un, soit 60 Le second sera pivoté de 120 degrés, et ainsi de suite jusqu'à ce que le dernier soit pivoté de 360 degrés Vous pouvez maintenant voir que lorsque nous cliquons sur le bouton à bascule, les six icônes sont réparties autour du bouton à bascule Mais comme vous pouvez le constater, les icônes sont pivotées afin de les inverser. Nous pouvons aller ici et ajouter une transformation, traduire moins 50 % et moins 50 %, puis faire pivoter une valeur négative de 360 degrés divisée par six fois la variable I. Cela inversera tous les liens pivotés à zéro degré Maintenant, vous pouvez voir qu' en cliquant sur le bouton, vous pouvez voir que les liens ressemblent maintenant exactement à ce que nous voulons, mais il suffit de supprimer le fond rouge. C'est tout le monde, pour cette leçon. J'espère que cela vous a plu et je vous verrai dans le prochain. 119. Effet de parallaxe avec javascript: Bonjour à tous, Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer un effet de site Web parallaxe sympa Vous pouvez voir que nous avons cet en-tête avec un logo et une barre de navigation. Nous avons également cette image de fond et cette rubrique qui indique le site Web de parallaxe Nous avons également du contenu factice sous l'en-tête. Comme vous pouvez le constater, juste un titre et un paragraphe. Mais regardez de plus près, lorsque nous faisons défiler la page vers le bas, vous pouvez voir que nous avons cet effet de parallaxe sympa dans lequel le titre se déplace vers le bas pendant le défilement De plus, cette feuille d'arbre située dans le coin supérieur droit se déplace vers le haut à droite. Au fur et à mesure que cette colline se déplace vers le bas, ces deux collines se déplacent dans des directions différentes, l' une vers la droite et l'autre vers la gauche, ce qui nous donne un effet vraiment cool. Commençons ici dans notre code HTML en ajoutant un en-tête à l'intérieur, nous ajouterons un H deux et un logo. Ensuite, en dessous, j'ajouterai un élément de navigation et je lui donnerai une classe de navigation. Ensuite, à l'intérieur, nous ajouterons les liens. Je vais ajouter une étiquette d'ancrage et rester chez moi. Ensuite, j'ajouterai rapidement les autres balises d'ancrage. Comme vous pouvez le constater, nous avons le logo et la barre de navigation. Très bien, passons à notre CSS, sélectionnons le corps et ajoutons un arrière-plan, cette couleur gris clair, puis une hauteur minimale, 100 VH Ensuite, en dessous, je vais cibler l'en-tête et ajouter position zéro absolu en haut, zéro gauche avec 100 % puis en remplissant 30 pixels du haut et bas et 100 pixels de gauche à droite Ensuite, j'ajouterai Display Flex. Ensuite, nous voulons que le logo et la barre de navigation soient sur le côté gauche. J'ajouterai Justify Content Flex. Lancez Align Items Center pour vous assurer que l'en-tête sera visible. Quels que soient les éléments que nous ajouterons, j'ajouterai un index 100. Vous pouvez maintenant voir que nous avons le logo et la barre de navigation sur la gauche. Je vais y retourner et cibler le logo. Ensuite, j'ajouterai une taille de police deux, la couleur M, cette couleur verte. Ensuite, afin d' avoir un certain espacement entre le logo et le menu de navigation, je vais ajouter une marge, droite, 270 pixels, comme vous le voyez ici Très bien, travaillons sur le menu de navigation. Je vais cibler les balises d'ancrage à l'intérieur la navigation et ajouter des décorations de texte, non colorées, ce rembourrage de couleur verte, six pixels du haut et bas et à 15 pixels de gauche à droite Ensuite, j'ajouterai un rayon de bordure de 20 pixels de marge, zéro en haut et en bas et dix pixels de gauche à droite. Puis le poids de la police 600, enfin la transition 0,5 seconde. Maintenant, vous pouvez voir que les liens sont bien meilleurs. Je vais aller ici et dire qu'en survolant ces liens, j'ajouterai un arrière-plan, notre couleur verte et notre couleur blanche Vous pouvez maintenant voir que les liens ont ce bel effet de survol. Bien, travaillons maintenant sur les images que nous allons utiliser pour créer l'effet de parallaxe Vous pouvez voir ici que nous avons sept images qui, une fois assemblées, nous donneront notre arrière-plan complet. Nous avons cinq images pour les collines, une image pour la feuille et une autre pour la plante. Bien entendu, vous trouverez toutes ces images en pièce jointe dans le fichier de ressources. Je vais aller ici dans mon code HTML et ajouter une nouvelle section, lui donner une classe de parallaxe Ensuite, à l'intérieur, j' ajouterai une image, puis j'ajouterai la première image , celle de la colline. Je vais également lui donner un identifiant de hill one afin de le cibler dans le fichier Javascript. Ensuite, j'ajouterai rapidement toutes les autres images. Vous pouvez maintenant voir que nous avons ajouté huit images, toutes les images de notre arrière-plan et vous les voyez ici dans le navigateur. Je vais également ajouter un H deux, lui donner un identifiant de texte et dire site Web parallax Très bien, maintenant je vais revenir à mon CSS et cibler le div parallaxe qui contient toutes les images et ajouter une flexion d' affichage relative à la position Justifiez ensuite le centre de contenu, alignez le centre des éléments. Hauteur 100 VH. Vous pouvez maintenant voir que toutes les images sont ajoutées les unes à côté des autres. Continuons à travailler. Je vais y retourner et ajouter un trop-plein masqué afin d'obtenir la forme exacte que nous voulons Nous allons sélectionner les images à l'intérieur du div de parallaxe et ajouter la position absolue Puis zéro en haut, gauche, zéro largeur 100 % Enfin, événements du pointeur, aucun. Maintenant, vous pouvez voir que nous avons ce contexte. Ce sont juste toutes nos images réunies, elles forment cet arrière-plan. La raison pour laquelle cela se produit si parfaitement est que toutes ces images sont conçues dans ce but. C'est comme s'il ne s'agissait que d'une vue divisée en plusieurs images. OK, travaillons sur les deux qui avaient un identifiant de texte. Je vais le cibler et ajouter une position. Taille de police absolue cinq, couleur EM blanche. Ensuite, le texte masque cette valeur. Maintenant, vous pouvez voir que le H deux ressemble exactement à ce que nous voulons. OK, ajoutons du contenu. Pour avoir une barre de défilement, je vais accéder à mon code HTML et ajouter une nouvelle section avec une classe de contenu Ensuite, à l'intérieur, j'ajouterai un H deux et disons un site Web à défilement parallaxe Ensuite, en dessous, j'ajouterai un paragraphe et un texte factice Maintenant, vous pouvez voir que nous avons ce contenu. Ajoutons rapidement quelques styles ici. Je vais revenir à mon CSS, cibler le contenu, puis ajouter un arrière-plan relatif à la position, cette couleur verte remplissant 100 pixels Ensuite, je ciblerai les deux H qu'il contient et j'ajouterai une taille de police trois, E, M, marge blanche, dix pixels en bas. Ensuite, je vais sélectionner le paragraphe et ajouter une taille de police : un M, couleur blanche, poids de police 300. Vous pouvez maintenant voir que le contenu de div est bien meilleur. Vous avez peut-être remarqué que nous avons choisi cette couleur vert foncé pour correspondre au bas de notre arrière-plan, ils sont très proches les uns des autres. Incroyable. Maintenant que nous avons terminé le HTML et le CSS de cet exemple, il est temps de travailler sur le script Java. Je vais aller dans le fichier Java Script, puis je vais commencer par sélectionner les éléments que nous voulons animer ou modifier Je vais dire « laisser le document texte », obtenir l'élément par identifiant ». Je vais sélectionner l'élément avec l'identifiant du texte , à savoir les deux. Ensuite, je sélectionnerai rapidement les autres éléments que nous utiliserons dans notre fichier Javascript. Vous pouvez voir que nous avons sélectionné quatre autres éléments, une image de croyance et trois images des collines. Bien, travaillons sur l'effet. Je vais aller ici et dire fenêtre, ajouter le défilement de l'écouteur d'événements Ensuite, je vais créer une fonction de rappel. En gros, ce code signifie que code que nous ajouterons ici dans cette fonction de rappel sera exécuté chaque fois que nous ferons défiler la page Très bien, dans la fonction, je vais créer une nouvelle variable nommée value et définir sa valeur sur Window Scroll. Il s'agira de la distance verticale parcourue la page Si nous revenons au navigateur et que nous faisons défiler un peu, ce sera cette distance ici. Très bien, alors travaillons sur les éléments pour changer leur position en utilisant la valeur variable ici. Travaillons d'abord sur le H deux qui a l'identifiant du texte, je dirais le style de texte, marge en haut. Ce sera égal à. Nous utiliserons des modèles littéraux ici. En ajoutant ces deux symboles, nous ajouterons le signe du dollar et ouvrirons des accolades pour y ajouter un code exécutable. Ensuite, je vais dire valeur multipliée par 2,5. Ensuite, en dehors des accolades, j'ajouterai Ce qui se passera ici, tout le monde , c'est qu'à chaque fois que nous faisons défiler la page, Javascript saisit la valeur du défilement y, puis il la multiplie par 2,5 Le résultat sera défini comme une marge supérieure pour le H deux Chaque fois que nous faisons défiler la marge vers le bas, la valeur supérieure augmente, faisant passer les H deux vers le bas. Essayons ça très vite. Vous pouvez voir que lorsque je fais défiler la page vers le bas, les deux H se déplacent vers le bas. Lorsque vous faites défiler l'écran vers le haut, il se déplace à nouveau vers le haut. Très bien, travaillons sur la feuille ici. Nous voulons qu'il se déplace vers le coin supérieur droit en dehors de la page lorsque vous faites défiler la page Je vais donc dire que le haut du style de feuille est égal à J'utiliserai également les littéraux du modèle et je multiplierai la valeur par moins 1,5. Cette fois , cela donnera au sommet une valeur négative, faisant bouger la feuille vers le haut Par exemple, si je vais dans mon navigateur, vous pouvez voir que lorsque je fais défiler la page, la feuille se déplace vers le haut Très bien, revenons en arrière et déplaçons-le également vers la droite. Je vais dupliquer ce code, puis le changer de haut en gauche, et simplement changer le négatif 1,5 à 1,5 juste comme ça. Lorsque je fais défiler la page vers le bas, elle se déplace vers le haut à droite. Maintenant, pas seulement le top. Je pense que tu as compris l'idée. Je vais rapidement ajouter l'autre code pour les images restantes. Comme vous pouvez le voir, j'ai essentiellement fait la même chose pour les images de Three Hills. Je viens de changer leur position. J'ai changé la position de celui-ci vers la droite car j'ai ajouté une valeur positive à gauche. Quant à celui-ci, il se déplacera vers la gauche puisqu'il a une valeur gauche négative. Dans le dernier cas, il sera déplacé vers le bas car sa valeur supérieure est positive. Comme vous pouvez le voir ici tout le monde, lorsque je fais défiler vers le bas les éléments que nous avons sélectionnés, les déplace et je change leur position. Nous avons ces deux collines au centre qui se séparent l'une de l'autre, tandis que cette colline se déplace vers le bas, tout le monde. C'est tout pour l'effet parallaxe. Vous pouvez voir que l'idée sous-jacente est très simple. J'espère que cela vous a plu et je vous verrai à la prochaine leçon. 120. Conception de carte extensible en utilisant javascript: Bonjour à tous. Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cette carte de profil animée. Vous pouvez voir que nous avons cette carte, et lorsque nous cliquons sur ce bouton, vous pouvez voir la carte s'agrandir et cette image apparaît Notez également que le bouton à bascule tourne du point vers le bas vers le haut lorsque nous cliquons dessus Voyons comment créer cette carte. Je vais aller ici dans mon code HTML en ajoutant un div avec une classe de carte. Ensuite, je vais accéder à mon CSS et sélectionner la carte div. Ajoutez ensuite la position, la largeur relative, 350 pixels, la hauteur, 85 pixels, le fond. Cette bordure de couleur marine a un rayon de 20 pixels. Enfin, la transition est de 0,5 seconde. Maintenant, vous pouvez voir que nous avions un arrière-plan bleu marine. Revenons à notre code HTML. Nous voulons créer le bouton à bascule. En bas, je vais ajouter un, lui donner une classe de bascule Ensuite, à l'intérieur, j' ajouterai une travée. Ensuite, je vais revenir en arrière et cibler le toggle div. Ce sera la partie en bas. J'ajouterai la position, largeur absolue 70 pixels, hauteur 60 pixels, fond blanc. Ensuite, pour le positionner en bas, j'ajouterai un négatif de 60 pixels en bas. La transformation de 50 % gauche traduit x 50 % négatif Ensuite, j'ajouterai un rayon en bas à gauche 35 pixels et un rayon de bordure en bas à droite de 35 pixels également. Enfin, pointeur du curseur. Maintenant, vous pouvez voir que nous avons cette partie blanche en bas. Mais si nous regardons notre exemple, vous pouvez voir que la courbe est plus lisse. Revenons en arrière et créons cela. Nous utiliserons le pseudo élément before. Pour ce faire, je vais sélectionner le pseudo élément « before » du toggle div et ajouter du contenu chaînes vides, position, largeur absolue 35 pixels, hauteur 35 pixels Ensuite, placez un arrière-plan rouge temporaire en arrière-plan. Ensuite, j'ajouterai 34 pixels négatifs à gauche, puis un rayon de 35 pixels en haut à droite. Ensuite, en dessous, j' ajouterai une ombre de boîte 11 pixels en tant que décalage horizontal. Ensuite, moins dix pixels en tant que décalage vertical, zéro en tant que valeur de flou et dix pixels en tant que valeur de dispersion, puis une couleur verte Vous pouvez maintenant voir que nous avons cette couleur verte que nous avons ajoutée en utilisant la propriété box shadow. Très bien, je vais aller ici et changer la couleur rouge en transparent. Ensuite, nous voulons créer la même pièce sur le côté droit. Je vais copier ce bloc de code, coller et le changer de gauche à droite. Changez ensuite la bordure vers la gauche. Modifiez également le décalage horizontal ici en moins 11 pixels. Maintenant, vous pouvez voir que nous l'avons ici sur la droite. Ensuite, je vais aller ici, dans le menu à bascule, et changer la couleur de fond du blanc au bleu marine foncé Changez également la couleur de l'ombre de la boîte en bleu marine au lieu du vert. Maintenant, vous pouvez voir que nous avons cette partie Navy en bas. Bien, créons maintenant la flèche qui sera positionnée dans cette partie Navy. Nous allons le créer en utilisant la plage située à l'intérieur du toggle dip. Nous allons sélectionner cette position d'ajout, largeur absolue dix pixels, hauteur dix pixels. Ensuite, encadrez le bas de trois pixels, blanc uni. Ensuite, nous ajouterons également une bordure à droite. Ensuite, pour le centrer, nous ajouterons 50 % en haut à gauche, 50 %, puis nous transformerons en translation 50 %, en négatif 70 %. Ensuite, pour le faire pivoter, nous ajouterons une rotation de 45 degrés. Ensuite, j'ajouterai une transition de 0,5 seconde. Très bien, maintenant, en cliquant sur ce bouton, nous voulons que cette plage pivote et pointe vers le haut Nous allons le faire en utilisant Javascript. Je vais aller dans le fichier Javascript et commencer par cibler la carte. Je vais créer une nouvelle variable, lui donner un nom et sélectionner la carte. Je ciblerai également le toggle div. Ensuite, en cliquant sur le bouton div, nous voulons ajouter une classe au div de la carte, puis styliser nous voulons ajouter une classe au div de la carte, l'intervalle en fonction de cette classe Ensuite, en cliquant à nouveau, nous voulons supprimer cette classe. En gros, nous passerons d'une classe à l'autre en cliquant sur le bouton de bascule Je vais aller ici et dire bascule, ajouter un écouteur d'événements et écouter l'événement Click Ensuite, nous créerons une fonction de rappel et dirons que la liste des cartes bascule, et nommerons la classe active Maintenant, lorsque vous inspectez le div de la carte, lorsque vous cliquez sur le bouton de plongée, vous pouvez voir qu'une classe active est ajoutée au div de la carte Lorsque vous cliquez à nouveau, il est supprimé. Très bien, maintenant, en cliquant sur le bouton à bascule, nous voulons faire pivoter la flèche Je vais accéder à mon CSS et cibler la carte. Lorsque la carte possède une classe active, nous sélectionnons l'intervalle à l'intérieur du div à bascule À l'intérieur, nous allons ajouter une transformation, traduire moins 50 % et moins 70 %, puis faire pivoter et changer le degré de rotation à 225 degrés. Vous pouvez maintenant voir la flèche pivoter lorsque vous cliquez sur le bouton à bascule OK, continuons. J'irai ici et je ciblerai la carte lorsqu'elle aura une classe active, j'ajouterai de la hauteur, 420 pixels. Maintenant, en cliquant sur le bouton à bascule, vous pouvez voir la carte s'agrandir et sa hauteur augmenter Lorsque vous cliquez à nouveau, il se rétrécit. Passons à notre code HTML à l'intérieur de la voiture, je vais ajouter un autre div contenant une classe de contenu. Nous allons ajouter un autre div avec une classe de boîte de contenu. À l'intérieur, j'ajouterai un H deux et je dirai Paul Smith. Ajoutez ensuite une balise BR, puis un span, par exemple Creative developer. Ensuite, je vais revenir à mon CSS et cibler le div du contenu. Ajoutez ensuite la position, l' encart absolu, le trop-plein masqué. Ensuite, je vais cibler la zone de contenu div et ajouter un rembourrage relatif à la position, 20 pixels, un centre d'alignement du texte, un index dix, un affichage flexible, un centre de contenu justifié, un centre d'éléments de ligne Ensuite, en dessous, je vais cibler les deux. Ajoutez ensuite de la couleur, un poids de police blanc 500, taille de police 1,25 M. Transformez le texte , un espacement entre les lettres majuscules 0,05 M, puis une hauteur de ligne 1,1 M. Ensuite, je ciblerai l'envergure à l'intérieur des deux H et ajouterai une taille de police 0,75 M Ensuite, le texte transforme en majuscules. Maintenant, vous pouvez voir que le texte ici est beaucoup plus beau. Bien, revenons à notre code HTML. Et en dessous du H deux, je vais en ajouter un nouveau, lui donner une classe de boîte d'image, puis revenir à notre CSS et cibler la zone d'image. Ajoutez ensuite la largeur relative de la position, 250 pixels de hauteur. Fond blanc de 250 pixels. Ensuite, afin de positionner le contenu verticalement, je vais monter ici dans la zone de contenu div et ajouter une colonne de direction flexible. Ensuite, je vais aller ici et ajouter une marge supérieure à 20 pixels. Ensuite, l'ombre de la boîte est négative dix pixels, dix pixels, dix pixels. Ensuite, cette couleur borde enfin cinq pixels, en blanc uni. Ensuite, je vais supprimer cet arrière-plan. Revenons ensuite à notre code HTML et dans la zone d'image div, j'ajouterai une image et ajouterai notre image. Ensuite, je vais revenir à notre CSS et cibler cette image. Ajoutez ensuite la position, ajoutez le soluté, zéro en haut à gauche, zéro, largeur hauteur, 100 %. Ensuite, l'objet s'adapte à la couverture Maintenant, vous pouvez voir que l'image ici ressemble exactement à ce que nous voulons. Enfin, ajoutons le bouton en bas. Je vais revenir à notre code HTML et ajouter un bouton, puis dire embauchez-moi. Ensuite, je vais revenir à notre CSS et cibler le bouton. Ajoutez ensuite la position, la marge relative, 20 premiers pixels, en ajoutant dix pixels et 35 pixels. Ensuite, rayon de bordure 25 pixels, contour n, pointeur non curseur, taille de police 1 M. Transformation du texte, espacement des lettres majuscules, 0,1 M, poids de la police 500 couleur gris Ensuite, nous ajouterons cette ombre en forme de boîte ici. Maintenant, vous pouvez tous voir que nous avons ce bouton. Et ce faisant, nous avons créé ce design cool. J'espère que cette leçon vous plaira et je vous verrai dans la prochaine. 121. Sans titre: Bonjour à tous. Nous avons une autre nouvelle leçon pour vous dans le cours. Dans cette leçon, nous allons créer cet effet d' animation sympa avec le tracé des clips. Vous pouvez voir que nous avons ce gros titre au centre de la page et ces deux cercles en haut à gauche et en bas à droite. Lorsque nous faisons défiler la page, ces deux cercles s' agrandissent jusqu'à recouvrir le titre. Ce qui est cool, c'est que les parties du titre couvertes par les cercles sont entourées d'un joli trait. Lorsque nous faisons défiler la page vers le haut, le titre devient blanc. Encore une fois, nous utiliserons un script Java pour modifier la valeur du chemin du clip lors du défilement Commençons par créer cet effet. Je vais aller ici dans mon code HTML et ajouter une section. Ensuite, à l'intérieur, j'ajouterai notre H deux et je dirai scroll. Ensuite, en dessous, j'ajouterai un div avec une classe de cercle un, un autre div avec une classe de cercle deux. Ensuite, je vais accéder à mon CSS, cibler le corps et ajouter hauteur de 200 VH afin d'avoir une barre de défilement, comme vous Ensuite, en dessous, je vais cibler la section et ajouter le zéro en haut à gauche, zéro largeur, 100 % de hauteur, 100 H. Puis, en arrière-plan, cette couleur gris foncé. Vous pouvez maintenant voir que la section a une hauteur de 100 VH. Mais lorsque nous faisons défiler la page, vous pouvez voir nous défilons vers la droite jusqu'à la section. Mais nous voulons qu'il reste avec nous même lorsque nous faisons défiler la page. Nous pouvons le faire en accédant à notre CSS et en ajoutant une position fixe. Maintenant, vous pouvez voir que peu importe le défilement, la section reste exactement là où nous voulons qu'elle soit fixée dans sa position. Je vais revenir à mon CSS et cibler les deux. Ajoutez ensuite la position absolue en haut à 50 %, puis transformez Transformez le texte à 50 % de largeur négative à 100 %, alignez le centre de la couleur blanche. Enfin, taille de police 18 EM. Maintenant, vous pouvez voir que le H deux est bien meilleur. Bien, travaillons sur les cercles. Je vais maintenant cibler le premier div avec la classe de circle. Ajoutez ensuite la largeur absolue de la position, 100 % de hauteur, 100 % d'arrière-plan. Cette couleur verte. Maintenant, vous pouvez voir nous avons ce fond vert que nous avons ce fond vert qui couvre tout le corps, puisqu'il a une largeur et une hauteur de 100 %. Maintenant , nous voulons découper ce fond vert pour que la seule partie visible soit le cercle dans le coin supérieur gauche. Je vais revenir ici et ajouter cercle de trajectoire de clip de 150 pixels comme rayon. Puis à 0,00 sur l'axe x et à zéro sur l'axe y, qui sera finalement le coin supérieur gauche. Juste comme ça, toutes les personnes que vous pouvez voir sur la partie visible du fond vert sont ce cercle vert. OK, faisons rapidement la même chose pour le cercle en bas à droite. Je vais copier ce code, coller et cibler le cercle de deux divisions. Ensuite, changez simplement la couleur de fond pour cette couleur orange. Et modifiez également la position de la pièce découpée à 100% et 100% pour qu' elle apparaisse dans le coin inférieur droit Maintenant, vous pouvez voir que nous avons ce cercle orange dans le coin inférieur droit. Bien, maintenant, lorsque nous faisons défiler la page, nous voulons que ces cercles s'agrandissent Passons à notre fichier de script Java et faisons-le. Je vais commencer par sélectionner le premier cercle. Je vais donc dire, encercler un document égal, obtenir le sélecteur de requête Et je vais cibler le premier cercle qui a une classe de cercle 1. Ensuite, je vais le dupliquer et cibler le deuxième cercle cette fois. Ensuite, je vais aller ici et dire Window Add Event Listener. Ensuite, j'écouterai l'événement Scroll. Ensuite, je vais créer une fonction de rappel à l'intérieur. Je vais créer une nouvelle variable, la nommer, faire défiler la valeur. Et je vais le définir comme égal au défilement de la fenêtre Y. En gros, cette valeur est la distance entre la barre de défilement et le haut de la fenêtre Au fur et à mesure que nous faisons défiler la page vers le bas, cette valeur augmente. Mais quand on fait défiler la page vers le haut, elle diminue. C'est une valeur modifiable et nous l' utiliserons pour modifier le rayon des cercles Lorsque nous faisons défiler la page, je vais aller ici et dire « cercle », un style de clip est le même. Ensuite, je vais créer un nouveau modèle littéral pour ajouter la valeur du chemin du clip Ensuite, j'ajouterai un cercle. Ouvrez ensuite un bloc de code. Et 150 plus la valeur de défilement variable multipliée par 0,75 pixel à 0,0 Comme vous pouvez le constater, la valeur du chemin de découpe du premier cercle lors défilement de la page sera de 150 pixels, soit sa valeur initiale, plus la valeur de défilement de la page multipliée par 0,75. Comme nous le savons, la valeur de défilement de la page augmente tant que nous faisons défiler augmente tant que nous faisons Cela entraînera une augmentation globale la valeur du rayon du cercle. Essayons ça. Comme vous pouvez le constater, lorsque nous faisons défiler l'écran vers le bas, il augmente et lorsque nous le faisons défiler vers le haut, il diminue. Cool. Très rapide. Faisons de même pour le cercle orange. Je vais revenir ici et copier ce code. Collez-le et sélectionnez le deuxième cercle. Ensuite, changez simplement la position du cercle pour qu'il soit dans le coin inférieur droit à 100 % et 100 %. Maintenant quand je reviens en arrière et que je fais défiler la page, vous pouvez voir que le cercle orange s'agrandit également. OK, maintenant nous voulons rendre le H bicolore transparent et avoir un trait autour des lettres. Je vais accéder à mon code HTML et je vais copier-coller les deux H dans les deux divs. Ensuite, je vais revenir à mon CSS et cibler les deux H lors du premier plongeon circulaire. Ensuite, je ciblerai les H deux à l'intérieur du deuxième cercle div. À l'intérieur, j'ajouterai de la couleur, du texte Web transparent, cinq pixels et cette couleur grise. Quand je reviens en arrière et que je fais défiler la page vers le bas, vous pouvez voir qu'une fois que les cercles croisent le H deux, le H deux produit cet effet qui se produit parce nous avons ajouté ce trait autour du H deux à l'intérieur des cercles Le H deux blanc au centre ici est celui à l'extérieur des deux cercles. 122. animation sur scroll en utilisant javascript 1: Salut tout le monde. Bienvenue à une autre nouvelle leçon du cours. Dans ce cours, nous allons créer une animation effet de défilement en utilisant Javascript. Vous pouvez voir que nous avons cette page Web qui contient plusieurs sections. Lorsque vous faites défiler la page, vous pouvez voir que chaque section comporte un titre et un paragraphe animés dans la Une fois que nous atteignons le point de cette section, même lorsque je la passe, son contenu disparaît à nouveau. Une fois que je fais défiler la page vers le haut et que je passe, le contenu apparaît une fois de plus. Il s'agit d'une méthode très courante pour animer des éléments sur un site Web Voyons comment nous pouvons le faire. Tout d'abord, vous pouvez voir ici dans notre code HTML que nous avons cinq sections. Chaque section possède une classe unique : sec un, sec deux, sec trois, et ainsi de suite jusqu'à la cinquième. Comme vous pouvez le constater, les sections 1 à 4 ont un contenu très simple, juste un H deux et un paragraphe. Et tous les titres et paragraphes chaque section ont une classe d'animation Ensuite, dans la cinquième section, nous avons un div avec une classe d'images. À l'intérieur, nous avons trois images. Chaque image possède une classe d'animation, tout comme les paragraphes et les titres des autres sections Ensuite, dans notre CSS, nous avons quelques styles de base pour améliorer l'apparence de la page. Nous avons fixé la hauteur minimale de chaque section à 100 VH afin qu'elle occupe toute la hauteur de la fenêtre d'affichage Nous avons également centré le contenu et ajouté des styles de base tels que des couleurs d'arrière-plan et des couleurs différentes pour chaque section. Vous avez les fichiers de ressources de cette leçon. Téléchargez-les et jetez un œil à ces styles. Bien, passons maintenant au travail sur l'effet de défilement. Je vais accéder à mon fichier de script Java. Et tout d'abord, ciblons toutes les sections. Je vais donc créer une variable nommée It sections. Ensuite, je vais le définir comme égal au sélecteur de requête de document. Je vais uniquement cibler les sections. Ensuite, en dessous, je dirai que défilement de fenêtre est égal à « Je vais créer une nouvelle fonction ». Cette fonction sera exécutée ici chaque fois que nous parcourons la page. Dans cette fonction, nous voulons parcourir toutes les sections une par une et les affecter en utilisant du code Javascript. Je dirais des sections. Pour chaque boucle ici, je vais suivre. Nous allons parcourir les sections en boucle. Chaque section sera nommée sect. Ensuite, je vais créer une fonction de rappel. À l'intérieur, je vais créer une nouvelle variable nommée distance de défilement Set égale à window scroll y. Cette variable, tout le monde, est la distance parcourue Il s'agit de la distance entre le haut de la barre de défilement et le haut de la page. Ensuite, en dessous, je vais créer une nouvelle variable, nommer sec distance et la définir comme égale à secsettp Cette propriété supérieure décalée correspond à la distance par rapport à la bordure extérieure de la section, c'est-à-dire au bord supérieur de son parent, qui est le corps dans ce cas. Prenons la deuxième section ici comme exemple. Le décalage en haut de la deuxième section est la distance entre le bord supérieur de la deuxième section le haut de la page. En fait, elle est égale à la hauteur de la première section. En ce qui concerne la troisième section, le dessus décalé sera égal à la hauteur des première et deuxième sections réunies. Très bien, continuons. Revenons au navigateur. Et ce que nous voulons faire ici, tout le monde, c'est qu'en faisant défiler la page, une fois que nous atteignons, par exemple la deuxième section, nous voulons y ajouter des styles qui créeront l'effet d'animation souhaité Et lorsque nous l'adopterons, ces styles seront supprimés. va de même pour la troisième section, juste ici, et la quatrième, et ainsi de suite. Nous voulons utiliser les variables que nous avons créées ici pour aider le navigateur à détecter lorsque nous atteignons une classe spécifique. Il ajoute ensuite les styles souhaités. C'est ce que nous allons faire. Je vais aller ici et dire si distance de défilement est supérieure ou égale à la distance en secondes, je dirai sec class, list add. Je vais ajouter une classe nommée Show Animate. Comme vous pouvez le constater, si la distance parcourue est égale à la distance entre la section et le haut de la page Cette instruction if sera exécutée, mais allons dans le navigateur pour voir quand cette condition se produira. La distance de section est une valeur fixe, comme nous l'avons dit pour la deuxième section, égale à la hauteur de la première section. Elle ne change jamais à moins que nous ne changions la hauteur de la première section. Dans le même temps, la distance de défilement est une valeur changeante. Cela change lorsque nous faisons défiler la page à un moment où ces deux valeurs sont exactement égales. C'est ici que la condition « if » devient vraie. Cela se produira lorsque nous faisons défiler la page jusqu'à ce que le bord supérieur de la deuxième section touche le bord supérieur du navigateur. Dans ce cas, la distance de défilement est égale à la distance entre la section et le haut de la page. Examinons la page. Je veux que tout le monde regarde attentivement la deuxième section. Vous pouvez voir qu'une fois que j'ai atteint le haut de la deuxième section, la condition « si » devient vraie. Et une nouvelle classe nommée show animate est ajoutée à la deuxième section Une fois que nous atteignons la troisième section, la classe y est également ajoutée . Comme vous pouvez le constater, cela arrive à toutes les sections. OK, c'est l'idée principale, tout le monde. Nous utiliserons cette classe pour styliser les sections. Je vais y retourner dans mon CSS et cibler les éléments avec la classe animate. N'oubliez pas que tous les titres, paragraphes et images de notre code HTML ont une classe d'animation En gros, tous les éléments ont cette classe. Bien, revenons à notre CSS. Et dans le div animé, j'ajouterai une opacité zéro Flou du filtre, cinq pixels, puis transition de 0,5 seconde. Vous pouvez maintenant voir que tous les éléments sont masqués, car nous leur avons ajouté une opacité zéro Maintenant, lorsque nous passons à une section, nous voulons la rendre à nouveau visible. Je vais revenir à mon CSS et dire quand la section contient une classe show animate. Et comme vous le savez, cela se produit une fois que nous passons à la section. Je vais cibler le div animé et en ajouter un d'opacité. Ensuite, le filtre rend le flou de zéro pixel. Maintenant, lorsque vous revenez en arrière et que vous faites défiler la page, vous pouvez voir qu'une fois que nous atteignons une section, le contenu s'estompe et est visible Allons en haut de la page et rechargeons la page. Vous pouvez voir que lorsque nous rechargeons, le contenu de la première section est invisible Mais nous voulons qu'il apparaisse lorsque nous le rechargeons. Nous ne voulons pas attendre de faire défiler la page. Nous pouvons le faire en accédant à notre code HTML et en ajoutant une classe de show animate à la première section ici Maintenant, lorsque je recharge la page, vous pouvez voir que le contenu est visible Maintenant, tout le monde, nous pouvons ajouter des effets différents à chaque section. Essayons ça. Je vais accéder à mon CSS et cibler la classe animate dans la deuxième section Ajoutez ensuite transform translate x 100%. Ensuite, je vais rapidement le dupliquer. Lorsque la deuxième section aura une classe show animate, je remettrai le translate x à zéro Il revient à sa position. Maintenant, lorsque je passe à la deuxième section, vous pouvez voir le contenu glisser de droite à gauche. Grâce à la propriété de traduction, nous avons changé. OK, ajoutons d'autres styles aux autres sections. Je vais copier ce code, le coller et cibler la troisième section ici. Ici. Ensuite, je vais changer la fonction de traduction en échelle et ajouter une valeur de 0,7. Ensuite, je vais ajouter une échelle de un à un. Ensuite, je vais le coller à nouveau et cibler la quatrième section. Ensuite, je vais régler la rotation ici à 30 degrés, puis ici à nouveau à zéro degré. Ensuite, je vais coller à nouveau le code et cibler la cinquième section contenant les images. Laissez traduire x comme 100 % ici. Ajoutez ensuite une rotation négative de 90 degrés. Remettez-le ensuite à zéro degré ici. Maintenant, lorsque je reviens en arrière, que je recharge et que je fais défiler la page, vous pouvez voir que lorsque nous atteignons une nouvelle section, les éléments apparaissent facilement, ce qui nous donne un effet vraiment cool Maintenant, cet effet est subtil et vous pouvez l'utiliser de cette façon. Mais dans la leçon suivante, nous verrons quelques astuces plus simples que nous pouvons ajouter pour rendre cet effet encore plus dynamique. Mais pour le moment, je veux que vous jouiez et que vous essayiez différents effets d'animation sur les éléments. Essayez les différents effets que nous avons appris tout au long de ce cours. Amuse-toi bien 123. animation sur scroll en utilisant javascript 2: Dans la dernière leçon, nous avons créé cette animation sur l'effet de défilement. Vous pouvez voir que le contenu apparaît bien lorsque vous faites défiler Mais comme vous pouvez le constater lorsque nous faisons défiler la page vers le haut, le contenu n'est pas animé. Il n'a les effets d'animation qu'une seule fois. Si nous inspectons la page, vous pouvez voir en faisant défiler la page que la classe show animate Et une fois ajouté, il n'est pas supprimé. Essayons quelque chose dans notre script Java. Je vais aller ici et dire autre chose, puis je vais le copier, le coller et supprimer la classe. Cette fois, lorsque la distance parcourue est inférieure à la distance de la section, la classe sera supprimée Cela se produit lorsque nous faisons défiler la page vers le haut et que nous passons la partie supérieure de la section. Allons dans le navigateur et voyons à ce que j'inspecte la page. Et quand je fais défiler la page vers le bas, vous pouvez voir que la classe est ajoutée. Et lorsque vous faites défiler la page vers le haut, vous pouvez voir que la classe est supprimée, les éléments sont supprimés de la Maintenant, c'est un effet beaucoup plus cool. OK, essayons autre chose. Ajoutons simplement un délai de transition aux paragraphes afin qu'ils apparaissent légèrement après les titres. Je vais accéder à mon CSS et sélectionner le paragraphe qui a une classe d'animation, c'est-à-dire essentiellement tous les paragraphes de la page Ensuite, j'ajouterai un délai de transition de 0,2 seconde. Maintenant, vous pouvez voir que lorsque nous faisons défiler la page, les paragraphes apparaissent légèrement après les titres. Ajoutons également un délai de transition aux images afin qu'elles apparaissent les unes après les autres. Je vais accéder à mon CSS et cibler la deuxième image dans la cinquième section. Ajoutez ensuite un délai de transition de 0,2 seconde. Dupliquez ensuite ce code et modifiez le délai de transition à 0,4 seconde. Maintenant, lorsque je reviens en arrière et que je fais défiler la cinquième section, vous pouvez voir les images apparaître les unes après les autres, ce qui nous donne l'effet souhaité. Mais si vous avez remarqué que les éléments n'apparaissent que lorsque nous atteignons le haut de la section, il serait préférable les faire apparaître un peu plus tôt afin de ne pas avoir à faire défiler la page jusqu'au bord supérieur de la section. Nous pouvons le faire en ajoutant la classe. Avant d'atteindre le bord supérieur de la section, je vais accéder à mon Javascript. Allez ici et dites que lorsque la distance de défilement est supérieure ou égale à la distance de section -150, les C seront ajoutés, la classe sera ajoutée 150 pixels au-dessus du bord supérieur de la section Juste comme ça, tout le monde peut voir les éléments apparaître un peu plus tôt. C'est ainsi que nous avons terminé cet exemple. J'espère que cela vous a plu et je vous conseille d'essayer de mettre en œuvre ce que vous avez appris dans cet exemple et l'utiliser pour créer vos propres idées. 124. Animation routière en mode nuit en utilisant javascript: Salut tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cette intéressante animation routière. Vous pouvez voir que nous avons cette scène qui contient un arrière-plan, un soleil et deux voitures qui se déplacent l'une contre l'autre. L'arrière-plan est également émouvant, qui nous donne cette impression de réalisme. Si nous cliquons sur le soleil, vous pouvez le voir se transformer en lune et la scène s'assombrir. Il s'agit essentiellement d'un mode sombre, et nous l'implémenterons en utilisant Javascript. Je pense que c'est un très bon exemple, et j'espère qu'il vous plaira. Commençons ici dans notre code HTML en ajoutant une section, en lui donnant une classe de scène. Ensuite, à l'intérieur, j'ajouterai un autre div, la classe de soleil. En dessous, j'en ajouterai un autre avec une classe de BG. À l'intérieur, nous ajouterons les images de la voiture. J'ajouterai la première image et je lui donnerai une catégorie de voiture. Ensuite, en dessous, j'ajouterai la deuxième image et je lui donnerai une classe de voiture deux. Vous trouverez ces images dans les fichiers de ressources de cette leçon. Maintenant, vous pouvez voir que nous avons juste ces deux images de voitures de police assises dans notre corps. Très bien, passons à notre CSS et ciblons la section scène. J'ajouterai la position, la hauteur relative, le trop-plein de 100 VH masquant le gradient linéaire Ensuite, j'ajouterai cette couleur bleu clair. Ensuite, j'ajouterai du blanc et du blanc. Vous pouvez maintenant voir que nous avons ce joli dégradé allant du bleu clair en haut au blanc en bas, ce qui nous donne une scène proche du ciel. Très bien, travaillons à la création du soleil. Je vais cibler le Div avec la classe de soleil. Ajoutez la position, largeur absolue 100 pixels, hauteur 100 pixels, arrière-plan, rayon de bordure blanche 50 % Ensuite, 100 pixels en haut à gauche, 55 %. Maintenant, vous pouvez voir que nous avons ce cercle blanc ici , situé en haut de notre corps. Allons ici et ajoutons transform, translate x négatif 50 % afin de le décaler légèrement vers la gauche. Ensuite, l'ombre de la boîte est de 0,050 pixels comme valeur de flou et le blanc comme couleur Puis la transition est de 0,2 seconde. Enfin, pointeur du curseur. Maintenant, le soleil reçoit cette ombre floue. Travaillons sur le div de fond. Je vais cibler le div avec la classe B, G et ajouter la position, la largeur absolue, 100 % du div de la scène. Ensuite, ne faites que 280 pixels de hauteur. Et pour le positionner en bas, j'ajouterai le zéro inférieur. Ensuite, j'ajouterai une URL d'arrière-plan. Et je vais ajouter cette image de fond que vous pouvez voir ici. Vous le trouverez dans les ressources de cette leçon, vous pouvez voir que nous avons ce fond ici en bas avec une hauteur de 280 pixels. Revenons en arrière et ajoutons une taille d'arrière-plan de 1 500 pixels. Puis, répétez, répétez en arrière-plan. Maintenant, vous pouvez voir que l' image d'arrière-plan est bien meilleure. OK, animons-le. Je vais créer une nouvelle animation. Nommez-le, animez BG à l'intérieur. À 0 %, j'ajouterai la position d'arrière-plan x zéro pixel. Ensuite, à 100 %, je changerai la valeur x de la position d'arrière-plan en moins de 1 500 pixels. Pour que l'image se déplace vers la gauche. Ensuite, je vais monter ici dans le BG div et ajouter une animation animée G de 25 secondes linéaire, infinie Vous pouvez maintenant voir la position de l'arrière-plan le long de la ligne horizontale changer, ce qui nous donne l'impression que l'image bouge. Très bien, travaillons maintenant au style des images de la voiture. Je vais cibler la première voiture et ajouter 20 pixels pour décaler légèrement vers la largeur maximale supérieure de 200 pixels, puis un index 1. Vous pouvez maintenant voir que la première voiture est maintenant plus petite et positionnée dans le coin inférieur gauche de la route. J'ajouterai également quelques styles à la deuxième voiture. Je vais le sélectionner, ajouter la position, le bas absolu. 50 pixels pour le décaler légèrement au-dessus de la première voiture. Ensuite, largeur maximale de 200 pixels également. Maintenant, vous pouvez voir que la deuxième image se trouve également ici, dans le coin inférieur de la route. Très bien, revenons en arrière et changeons leurs positions. Nous voulons que la première voiture apparaisse du côté gauche de la route. Je vais revenir ici et ajouter 200 pixels négatifs. Nous voulons que la deuxième image apparaisse du côté droit. J'ajouterai 200 pixels négatifs droits. Vous pouvez maintenant voir que les deux voitures ne sont plus visibles puisque la première s'est déplacée vers la gauche en dehors de la route et la seconde s'est déplacée vers la droite en dehors de la route. Créons maintenant l'animation qui les fera se déplacer sur la route. Je vais créer une nouvelle animation, nommerai car one. Ensuite, à 0 % de la durée de l' animation, j'ajouterai transform translate x zéro pixel. Ensuite, à 90 % et 100 %, j' ajouterai translate x calc 100 V plus 200 pixels. La première voiture se déplacera de la gauche vers la droite jusqu'à ce qu'elle traverse la route et sorte hors de la route. Je vais monter ici à l'intérieur la première voiture et ajouter l' animation de la voiture 1, linéaire de 18 secondes, infinie. Vous pouvez maintenant voir que la première voiture vient de la gauche, en dehors de la route, qu'elle se déplace en cours de route jusqu'à ce qu'elle traverse la route. Faisons rapidement de même pour la deuxième voiture. Je vais copier cette animation, coller et changer le nom de l' animation en car two. Ensuite, je laisserai la valeur de translation telle quelle, mais j'ajouterai une rotation de 180 degrés pour que l'image soit pivotée 180 degrés le long de son axe y. En d'autres termes, il sera retourné verticalement. Ensuite, je vais changer la valeur de translation x en moins 100 VW -200 pixels. Il se déplacera du côté droit tout au long de la route vers le côté gauche, puis traversera également le côté gauche. Je vais me rendre ici dans la deuxième voiture et ajouter de l'animation. Voiture 2, 12 secondes linéaire, infinie. Vous pouvez maintenant voir que la deuxième voiture vient du côté droit et se déplace complètement vers la gauche. Et les deux voitures se croisent au milieu de la route, ce qui nous donne un effet vraiment cool. Il est maintenant temps de passer à la scène en mode nuit. En cliquant sur le coucher du soleil, nous passerons en dessous de la classe qui créera le mode nuit. Je vais accéder au fichier Javascript, créer une nouvelle variable, nommer Sun et ajouter un sélecteur de requête de document Et sélectionnez le div avec la classe Sun. Ensuite, je vais le dupliquer et cibler la section de la scène. En dessous, je dirai Sun Add Event listener. Je vais écouter l'événement Click. Ensuite, j'ajouterai une fonction de rappel qui sera exécutée chaque fois que nous cliquons sur le soleil Ensuite, à l'intérieur, je dirai Sun class List Toggle. Et j'ajouterai une classe nommée Night. Maintenant, si j'inspecte la page et que je commence à cliquer sur le soleil, vous pouvez voir que le cours de nuit est ajouté et supprimé à chaque fois que nous cliquons sur le soleil div. Très bien, passons maintenant à notre CSS et commençons modifier les styles de la page en fonction de cette classe. Je vais aller ici et cibler la section de la scène. Ensuite, lorsque la section scène contient une classe de nuit à laquelle j' ajouterai un arrière-plan, cette couleur bleu marine foncé. Maintenant, quand je reviens en arrière et que je clique sur le soleil, vous pouvez voir que la couleur de fond change pour devenir cette couleur marine. Bien, revenons en arrière et dupliquons la cible du sélecteur, le soleil. Ajoutez ensuite 45 % à gauche au lieu de 55 %, cela se déplace un peu vers la gauche. Ensuite, nous voulons supprimer l'ombre de la boîte qu'il contient. Je vais donc mettre toutes ses valeurs à zéro. Maintenant, vous pouvez voir que lorsque vous cliquez sur le soleil, il se déplace vers la gauche et que l'ombre en bas est supprimée. Bien, maintenant nous voulons le convertir en forme de lune. Je vais dupliquer ce sélecteur une fois de plus. Ciblez ensuite le pseudo-élément avant du sun div et ajoutez du contenu chaînes vides positionnent le haut absolu à moins 20 pixels pour le décaler légèrement vers le haut, puis 20 pixels à gauche pour le décaler vers la gauche. Ensuite, j'ajouterai avec 100 % de hauteur, 100 % d'arrière-plan, un fond rouge temporaire. Enfin, rayon de bordure 50 % Maintenant, quand je reviens en arrière et que je clique sur le soleil, vous voyez que nous avons ce cercle rouge qui couvre une grande partie du soleil. Si nous changeons la couleur de ce cercle rouge pour qu'il soit de la même couleur que le fond, nous obtiendrons la forme de la lune. Je vais y retourner et le faire rapidement. Et maintenant, en cliquant sur le soleil, vous pouvez voir tout le monde. Elle prend la forme d'une lune et l'ensemble de la scène se transforme en scène nocturne, nous donnant exactement l' effet que nous voulons. 125. Bannière animée de site Web en utilisant javascript: Bonjour à tous, bienvenue à une autre nouvelle leçon de notre cours. Dans cette leçon, nous allons créer cet effet. Vous pouvez voir que nous avons un gros texte qui flotte sur la page à l'intérieur du cercle qui l'entoure. En arrière-plan, nous avons ce grand nombre d' étoiles qui brillent et se déplacent lentement, ce qui nous donne un effet vraiment cool. Nous allons créer ces étoiles automatiquement en utilisant Javascript. Commençons par mon code HTML. J'ajouterai une section, puis à l'intérieur, j' ajouterai un H deux et je vous souhaite la bienvenue dans notre. Ensuite, j'ajouterai une balise BR, puis un span et je dirai. Ensuite, je vais passer à mon CSS, cibler la section et ajouter Display, Flex, Justify, Content Center, Aligner les éléments, hauteur du centre, fond 100 VH, cette couleur bleu marine Ensuite, afin de créer le cercle autour du texte, nous utiliserons le pseudo élément B quatre de cette section. Je vais le sélectionner et ajouter du contenu, des chaînes vides, une position absolue avec une hauteur de 30 VW, 30 V également. Puis bordure cinq, B solide. Cette couleur orange. Puis rayon de bordure 50 % Maintenant, vous pouvez voir que nous avons ce cercle orange au centre. Ajoutons l' anneau blanc autour de celui-ci. J'ajouterai box shadow 0001v comme propriété de propagation, puis la même couleur bleu marine que l'arrière-plan Ensuite, je vais le dupliquer et changer la propagation à 1,3 V, puis changer la couleur en blanc. Et maintenant, vous pouvez voir que cet anneau blanc entoure le cercle orange. OK, ajoutons quelques styles au titre. Maintenant, je vais le sélectionner et ajouter position, la taille de police absolue huit, la couleur, le blanc, le poids de police 400. Textez ensuite un centre de ligne, une hauteur de ligne deux, E M, z index cinq, transformez l'inclinaison par moins sept degrés. Vous pouvez maintenant voir que le texte centré et légèrement incliné sur l'axe Y. Ensuite, pour avoir la forme de texte que nous voulons, nous devrons ajouter une ombre au texte. Je vais donc ajouter une ombre au texte. Si nous examinons cette valeur, cette valeur augmente simplement progressivement les valeurs de l'ombre du texte d' un pixel à cinq pixels avec cette couleur gris clair. Et comme vous pouvez le constater, ça a l'air beaucoup mieux. Très bien, définissons le style span, qui est le mot site. Je vais le cibler, puis ajouter un poids de police 700 pour le rendre plus audacieux Ensuite, taille de police trois, M. Enfin, ombre du texte, cette valeur qui contient une augmentation de la valeur d' ombre divisée en dix incréments d' un pixel à dix pixels Cela représente dix augmentations. Maintenant, vous pouvez voir que le H deux ressemble exactement à ce que nous voulons. Il est maintenant temps de créer l'animation flottante du H deux. Je vais créer une nouvelle animation. Il flotte à l'intérieur à 0 % et 100 %. J'ajouterai un biais de transformation négatif de sept degrés tel quel Puis traduisez par 20 pixels négatifs, je vais le dupliquer. Et à 50 %, je changerai la traduction en 20 pixels. Ensuite, je vais monter ici et ajouter une animation flottante de 5 secondes, pour une durée illimitée. Vous pouvez maintenant voir que le texte est animé de haut en bas et qu'il se déplace exactement comme nous le souhaitons. Bien, il est maintenant temps de créer les étoiles en arrière-plan. Nous allons le faire en utilisant Javascript. Je vais y aller et tout d'abord, je vais cibler la section en disant que la section soit égale à la section de sélection de requêtes de documents Ensuite, en dessous, je vais créer une nouvelle variable nommée J et nous la mettrons à zéro. Ensuite, je vais créer une boucle while et dire while j est inférieur à 200. À l'intérieur de la boucle, nous allons créer les étoiles. Je vais commencer par créer une nouvelle variable nommée star, et je vais dire document. Créer un élément, nous venons de créer un tag. Ensuite, nous allons créer des variables que nous utiliserons plus tard. Pour styliser les étoiles, je vais créer une variable nommée x et la définir comme étant égale au point mathématique du plancher mathématique multiplié au hasard par la largeur de la fenêtre. Fenêtre en largeur renvoie ici la largeur intérieure de la fenêtre en pixels. Ensuite, nous prenons cette valeur et la multiplions par le résultat de la méthode mathématique aléatoire. Ce qui renvoie un nombre supérieur ou égal à zéro, inférieur à un. Ensuite, nous prenons le résultat et l' arrondissons à un entier inférieur. En utilisant la méthode du sol, nous utiliserons la valeur obtenue à partir d'ici pour positionner les étoiles. Je dirais que le style d'étoile est égal à x pixels. Nous allons utiliser la valeur x pour positionner les étoiles sur la gauche. Ensuite, je vais dupliquer ces deux lignes de code. Changez le nom de la variable en y, puis modifiez la largeur de la fenêtre en hauteur intérieure afin d'obtenir une valeur basée sur la hauteur de la fenêtre. Ensuite, je vais changer de gauche en haut et de x en y. Ensuite, nous allons créer la largeur et la hauteur des étoiles. Je vais créer une nouvelle variable, lui donner un nom de taille et la définir égale à un point mathématique multiplié aléatoirement par quatre. Ensuite, nous utiliserons cette taille pour définir la largeur et la hauteur des étoiles. Je dirais le style du point étoilé, largeur du point, un pixel plus la taille. Notez que nous devons en ajouter un ici car la valeur de taille peut en fait être nulle. Puisque les mathématiques aléatoires ici peuvent renvoyer un 0,0 fois quatre est zéro. Dans ce cas, la taille sera nulle et la largeur sera nulle. Ce n'est pas bon. Pour éviter cette situation, nous devons en ajouter un ici. Cool, je vais le dupliquer et changer la largeur en hauteur. Maintenant que nous avons défini le positionnement et les dimensions des étoiles, ajoutons-les à notre section Je vais aller ici et dire section ajouter un enfant. Et nous allons ajouter l'élément étoile. Ensuite, à la fin de la boucle, nous dirons J plus, afin que la boucle continue à créer des éléments jusqu'à ce que j soit égal à 200, ce qui créera à son tour 200 éléments. Maintenant, si nous inspectons notre page et que nous ciblons la section, vous pouvez voir qu'à l'intérieur, nous avons tous ces eye-tags que nous avons créés. Il y en a en fait 200 et ils ont tous des styles aléatoires comme vous pouvez le voir. Très bien, pour les voir sur la page, allons dans notre CSS et commençons à les styliser. Je vais sélectionner les marques oculaires à l'intérieur de la section et ajouter une position. Arrière-plan absolu, rayon de bordure blanche de 50 % Maintenant, vous pouvez voir que les étoiles sont visibles maintenant. Très bien, utilisons la propriété box shadow pour les faire briller. J'ajouterai l'ombre de la boîte, puis j'ajouterai cette valeur dans laquelle la valeur du flou augmente progressivement Maintenant, vous pouvez voir les étoiles briller. Très bien, travaillons maintenant sur l'effet d'animation des étoiles. Je vais créer une nouvelle animation intitulée « Elle met en vedette ». Puis à l'intérieur, à 0 % de la durée de l'animation, j'ajouterai zéro d'opacité Ensuite, à 10 %, j' ajouterai une opacité. Ensuite, je vais le dupliquer. À 90 %, je laisserai l'opacité telle quelle. Ensuite, à 100 %, je le ramènerai à zéro. Ensuite, je vais monter ici et ajouter des étoiles d'animation. Linéaire, infini. Comme vous pouvez le constater, rien ne s'est passé car nous n'avons pas défini de durée d'animation. Faisons-le en utilisant Javascript pour obtenir des valeurs aléatoires pour chaque étoile. Je vais aller ici dans le fichier Javascript et créer une nouvelle variable, nommez-la duration. Et nous allons le définir égal à un résultat mathématique aléatoire multiplié par deux. Ensuite, j'ajouterai durée d'animation en forme d' étoile égale à une durée d'une seconde. C'est ainsi que tous ceux que vous pouvez voir, les étoiles sont désormais animées, car nous avons défini une durée d'animation aléatoire pour chacune d'entre elles ici. 126. Animation de navigation dans l'onglet JavaScript: Salut tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cet onglet de navigation simple. Vous pouvez voir que nous avons ce cercle avec ce signe plus à l'intérieur. Lorsque vous cliquez dessus, il pivote jusqu'à ce que le signe plus devienne un signe X. Cette navigation horizontale simple apparaît également. Notez que la navigation s'affiche en deux étapes. Tout d'abord, cette partie circulaire descend en dessous du cercle. Ensuite, il se développe et se transforme en menu de navigation. Lorsque vous cliquez à nouveau, le menu se réduit d'abord. Ensuite, la partie circulaire se déplace vers le haut et disparaît. De plus, nous avons ici cet espace qui sépare le cercle et la navigation. Nous allons apprendre comment créer cela. Cela ressemble probablement à un exemple simple, mais croyez-moi, il contient des astuces vraiment intéressantes. Commençons par le créer. Je vais aller ici dans mon code HTML et ajouter un, lui donner une classe de navigation. Ensuite, à l'intérieur, j'ajouterai un autre div avec une classe de toggle Ensuite, je vais accéder à mon CSS et cibler le div de navigation. Ensuite, je vais simplement ajouter la position relative. Ensuite, en dessous, je vais cibler la classe toggle et ajouter une largeur relative de position, 75 pixels 75 pixels également. Fond de cette couleur rose. Ensuite, pointeur du curseur, puis créons l' icône plus à l'intérieur en utilisant le pseudo élément before. Je vais le cibler et y ajouter du contenu. Le signe plus positionne ensuite la taille de police absolue trois, couleur EM blanche. Transition ensuite de 1,5 seconde. Maintenant, vous pouvez voir que nous avions ce signe positif. Très bien, pour le centrer, je vais aller ici dans le tundlatif et ajouter display, Flex, justify, content center, une ligne, un centre d'éléments, juste comme ça Vous pouvez voir qu'il est centré. Maintenant, en cliquant sur ce div, nous voulons qu'il tourne jusqu'à ce que le signe plus devienne un x, comme toujours. Nous allons le faire en basculant une classe lorsque vous cliquez sur le bouton et en la stylisant en fonction de cette sur le bouton et en la stylisant en fonction Je vais accéder à mon fichier de script Java et créer une nouvelle variable, nommez-la toggle Ensuite, je vais rapidement cibler le div avec la classe togle Ensuite, en dessous, je dirai toggle add event listener. Ensuite, je vais créer une fonction de rappel à l'intérieur de celle-ci, je dirai toggle class list, Toggle et une classe Maintenant, chaque fois que je clique sur le toggle div, vous pouvez voir ici qu'une classe nommée active est ajoutée puis supprimée du toggle dive Très bien, alors je vais revenir à ma cible CSS, le Toggle Div Lorsqu'il contient une classe nommée active, je sélectionne le pseudo-élément B fore, qui est le signe plus. J'ajouterai une rotation de 225 degrés par transformation. Maintenant, lorsque je clique sur le bouton di, vous pouvez voir que le signe plus pivote et devient un x puisque la classe active est maintenant ajoutée Ensuite, lorsque vous cliquez à nouveau, la classe active est supprimée et le code ici ne fonctionne donc pas. C'est pourquoi le x revient à nouveau en signe plus. Bien, travaillons sur le menu qui apparaît lorsque vous cliquez sur le bouton de plongée Je vais aller dans mon code HTML et en dessous du div à bascule, j'ajouterai un autre div avec une classe de menu Nous avons maintenant deux divs dans le div de navigation. Ensuite, je vais accéder à mon CSS et sélectionner le menu div. Ajoutez ensuite une largeur de 60 pixels. Hauteur 60 pixels également. Puis fond blanc. Maintenant, vous pouvez voir que nous avons ce fond blanc. Maintenant, je vais monter ici dans la section de navigation et ajouter Display Flex, Justify Content Center, Align Items Center. Maintenant, vous pouvez voir qu'ils sont assis l'un à côté de l'autre. Nous voulons positionner le fond blanc par rapport au piquin Puisque le pinkue a une valeur de position relative, je vais aller ici dans le menu et ajouter la position absolue Et comme vous pouvez le constater, il est désormais positionné par rapport au fond rose. D'accord, je vais également ajouter un rayon de bordure de 50 %, puis j'ajouterai transform translate y moins de 30 pixels pour le déplacer vers le haut. Ensuite, je vais monter ici à l'intérieur du bouton, plonger et ajouter un rayon de bordure de 70 pixels Transformez ensuite la translation Y en négatif de 30 pixels également. Afin de faire apparaître le cercle rose au-dessus du cercle blanc, je vais ajouter un index dix. OK. Maintenant, en cliquant sur le bouton de plongée, nous voulons afficher à nouveau le menu. Je vais aller ici et cibler le toggle div lorsqu'il a une classe active Je vais sélectionner le menu Dive à l'aide de ce sélecteur qui sélectionne les frères et sœurs des éléments HTML Ensuite, à l'intérieur, j'ajouterai une largeur de 360 pixels, 70 pixels. Transformez ensuite la translation Y zéro pour qu'elle revienne à sa position. Maintenant, lorsque je clique sur le bouton div, vous pouvez voir le menu apparaître ici avec cette nouvelle largeur et cette nouvelle hauteur OK, nous voulons que le menu apparaisse correctement. Je vais revenir ici dans le menu div et ajouter transformation de transition de 0,5 seconde. Avec 0,5 seconde, puis 0,5 seconde de hauteur également. Vous vous demandez peut-être pourquoi nous n'avons pas utilisé 0,5 seconde pour toutes les propriétés. Mais nous avons plutôt fait ce que nous avons fait pour nous permettre de contrôler facilement le délai de transition de chaque propriété afin de créer notre effet. Pour comprendre cela, je vais aller ici et ajouter délai de transition de 0 seconde pour la propriété de transformation. Cette ligne apparaît immédiatement lorsque vous cliquez sur le bouton di Ensuite, 0,5 seconde pour la propriété de largeur et 0,5 seconde pour la hauteur également. Maintenant, lorsque je clique sur l'enchevêtrement, vous pouvez voir le cercle se déplacer d'abord vers le bas. Ensuite, sa largeur et sa hauteur augmentent en même temps, ce qui nous donne l'effet souhaité. Mais en cliquant à nouveau, tout s'effondre en même temps. Nous pouvons le laisser tel quel ou ajouter des délais de transition rendre plus agréable. Essayons ça. Je vais aller ici dans le menu div et ajouter délai de transition de 1 seconde pour la transformation, puis de 0,5 seconde pour la largeur et la hauteur. Lorsque la classe active est supprimée, cette propriété de délai de transition est appliquée. La largeur et la hauteur attendront 0,5 seconde avant de rétrécir, puis la transformation se produira ensuite, comme vous pouvez le voir ici Nous voulons maintenant créer la partie qui sépare le Toggle Dive du menu Je vais monter ici, dans le Toggle Dive, et ajouter une bordure solide de dix pixels et de la même couleur que le corps Vous pouvez maintenant voir que les deux parties sont séparées par cette bordure. Très bien, ajoutons maintenant les icônes qui devraient apparaître dans le menu. Je vais aller sur le site Web des icônes Ion que nous avons utilisé dans une leçon précédente, puis cliquer sur Utilisation. Viens ici et copie ce code. Ensuite, collez-le dans mon code HTML avant la fin de la balise body. Ensuite, dans le menu div, j'ajouterai un U, un L, puis un L I à l'intérieur, et j'ajouterai un style I égal à 0,1 seconde. Nous utiliserons cette variable dans la propriété du délai de transition, puis j'ajouterai une balise d'ancrage. Alors je vais le dupliquer cinq fois. Je vais faire le troisième LI. Nous n'en aurons besoin que pour des raisons de style. Je vais également changer la variable à 0,2 seconde dans le deuxième LI et dans le quatrième LI également. Ensuite, je vais aller sur le site Web des icônes et rechercher Home, copier son code. Revenez en arrière et collez-le ici dans la première balise d'ancrage. Ensuite, je mettrai l'enregistrement en pause et ajouterai rapidement les autres icônes. Vous pouvez maintenant voir que nous avons ajouté les autres icônes et qu'elles se trouvent ici dans le navigateur. Très bien, passons à notre CSS et sélectionnons l'URL dans le menu. Ajoutez une position, un affichage relatif, une flexion, justifiez le contenu, centrez un élément de ligne au centre puis espacez de 35 pixels. Enfin, hauteur de ligne 80 pixels. Ensuite, en dessous, je vais sélectionner le L I dans l' UL et ajouter style de liste (non curseur, pointeur, transformation translation Y, négatif 30 pixels). Ensuite, j'ajouterai une transition de 0,25 seconde, puis une opacité zéro et enfin un délai de transition var I. Ensuite, en dessous de cela, je dirai quand le toggle div a une classe active ou en d'autres termes, lorsque nous cliquons sur le toggle div, je les sélectionne, puis je sélectionne les éléments Ensuite, à l'intérieur, j' ajouterai une opacité, une transformation, traduirai Y zéro pixel Comme vous pouvez le constater, lorsque vous cliquez sur le bouton div, les icônes apparaissent ici, mais nous voulons qu'elles n'apparaissent qu'une fois le menu affiché Je vais revenir ici et ajouter le délai de transition, calc 0,75 seconde plus la variable Cela sera un peu retardé, comme vous le voyez ici. OK, personnalisons ces icônes très rapidement. Tout d'abord, nous voulons ajouter un peu d'espacement ici, au centre. Je vais sélectionner le troisième enfant des éléments de la liste que nous avons rendus vides. Ensuite, j'ajouterai une largeur de 30 pixels. Ensuite, en dessous, je vais cibler les balises d'ancrage à l'intérieur du LI et ajouter la taille de police du bloc d'affichage 1,7 EM, la décoration du texte n, et enfin colorier cette couleur grise dessous. Lorsque je survole le LI, je sélectionne la balise d'ancrage et j'ajoute de la couleur rose Maintenant, vous pouvez voir que les icônes sont bien plus belles et que lorsque vous passez la souris dessus, leur couleur devient rose Avec ça, tout le monde, nous avons terminé cet effet cool. J'espère que vous en tirerez quelques conseils intéressants, et je vous verrai dans le prochain. 127. Déplacer une image d'arrière-plan sur scroll en utilisant javascript: Salut tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cet effet. Vous pouvez voir que nous avons ce contenu au centre et cet arrière-plan. Lorsque nous faisons défiler la page, vous pouvez voir l'arrière-plan se déplacer de gauche à droite. Lorsque vous faites défiler l'écran vers le haut, il revient de droite à gauche. C'est un effet très cool que vous pouvez utiliser dans vos projets. Voyons comment nous pouvons le faire. Je vais commencer ici dans mon code HTML et ajouter un div. Donnez-lui une classe de BG. Ensuite, en dessous, j'ajouterai un autre div avec une classe de contenu. Ensuite, à l'intérieur, j' ajouterai un H deux, disons Background, en passant au défilement. Ensuite, en dessous, j'ajouterai un paragraphe et ajouterai ce texte. Ensuite, je vais accéder à mon CSS et cibler le Div avec la classe BG. Ajoutez ensuite la position fixe, puis zéro en haut à gauche, zéro largeur, 100 % hauteur, 100 % URL d'arrière-plan. Ensuite, nous ajouterons l'image du motif. Ensuite, je vais ajouter une répétition. Répétez la taille de l'arrière-plan, 700 pixels. Vous pouvez maintenant voir que l'image d' arrière-plan ressemble exactement à ce que nous voulons. Ensuite, je ciblerai le div avec la classe de contenu et ajouterai largeur relative de 1 000 pixels à la position. Margez ensuite 100 pixels en haut et en bas, et automatiquement de gauche à droite. Ensuite, j'ajouterai un index, fond blanc, 50 pixels. Ensuite, box shadow 010 pixels, 30 pixels, R Gb00 00.1 Très bien. Ensuite, je vais cibler les deux H dans le div de contenu et ajouter une taille de police deux M, puis une marge supérieure de 20 Ensuite, je vais cibler les paragraphes à l'intérieur du div de contenu et ajouter une taille de police 1,2 M, hauteur de ligne 1,6 M. Très bien, passons au fichier Javascript et commençons par créer une nouvelle variable, nommez-la pattern et ciblez le BG div dans notre code HTML. Ensuite, en dessous , je dirai fenêtre. Ajoutez un écouteur d'événements. Et je vais écouter l'événement Scroll. Ensuite, je vais créer une fonction de rappel. À l'intérieur de cela, je vais dire position d' arrière-plan du style du motif et la définir comme égale au défilement de la fenêtre en pixels. Ce que cela fera, c'est que lorsque nous faisons défiler la page, la propriété de position d'arrière-plan augmentera d' une valeur égale à la distance de défilement y. Allons essayer ça. Lorsque vous faites défiler la page, vous pouvez voir que l' image d'arrière-plan se déplace pendant que nous faisons défiler la page, et lorsque nous faisons défiler la page vers le haut, elle se déplace dans le sens inverse 128. Effet de survol de texte flou et focus: Bonjour à tous. Bienvenue dans une autre nouvelle leçon du cours. Dans cette leçon, nous allons créer ce bel effet. Vous pouvez voir que nous avons ce titre au centre et un arrière-plan flou à l'arrière Lorsque vous survolez le titre, cet effet se produit. Le titre s' agrandit et devient flou, tandis que l'arrière-plan recule et devient clair Lorsque nous déplaçons le pointeur de la souris, le titre se met à nouveau en évidence tandis que l'arrière-plan retrouve son état flou C'est un effet vraiment cool et très simple. Voyons comment nous pouvons le créer. Je vais aller ici dans mon code HTML et ajouter une section. Ensuite, à l'intérieur, j'ajouterai un H deux et je dirai focus. Ensuite, en dessous, j' ajouterai une image. Ajoutez simplement notre image. C'est tout pour le HTML. Passons à notre CSS et ciblons la section, la position d'ajout, la largeur relative, 100 % de hauteur, 100 % de hauteur, 100 VH pour occuper toute la hauteur du corps Affichez ensuite Flex, justify, content Center, Align items. Puis enfin, le trop-plein est masqué. Ensuite, je ciblerai l' image et ajouterai la position, largeur absolue 140 %, la hauteur 140 %, le haut moins 20 % et la gauche moins 20 % également Ensuite, afin d'avoir cet effet de flou sur l'image, nous allons ajouter un filtre flou de dix pixels Enfin, j'ajouterai 2 secondes de transition. Maintenant, vous pouvez voir que l'image est floue, comme nous le voulons. OK, revenons en arrière et ciblons les deux. Ajoutez ensuite la couleur relative à la position. Taille de police blanche dix, texte EM transformé en majuscules, puis ombre de texte 05 pixels, 25 pixels, puis cette couleur. Ensuite, en dessous, j' ajouterai un poids de police 800 afin que le titre apparaisse devant l'image. Nous allons ajouter un index deux. Enfin, transition de 2 secondes. Maintenant, vous pouvez voir que nous avons notre cap. Bien, travaillons sur l'effet de survol du titre. Je dirais qu'en passant le curseur sur le titre, j'ajouterai un flou de filtre de dix pixels Ensuite, en dessous, j'ajouterai l'échelle de transformation 1.2. Maintenant vous pouvez voir que lorsque je survole ce titre, cet effet se produit Il devient plus gros et plus flou grâce au code, nous l'ajoutons ici Après avoir terminé le titre, créons l' effet de survol de l'image d'arrière-plan Je dirais qu'en passant le curseur sur l'image, je sélectionnerai l'image à l' aide de ce sélecteur, ce qui nous permet de sélectionner les frères et sœurs de notre élément Dans ce cas, l'image est une sœur du H deux. Ensuite, à l'intérieur, j' ajouterai le zéro en haut, le zéro à gauche, la largeur 100 %, la hauteur, 100 % , puis enfin, le filtre, le flou, zéro pixel Et maintenant, vous pouvez voir que lorsque nous passons le curseur sur le titre, l' image devient plus petite car nous avons réduit sa hauteur et sa largeur de 140 % à 100 %. De plus, l'effet flou a disparu depuis que nous l'avons modifiée à zéro au lieu de Cela se produit en même temps que l'effet de titre, qui nous donne exactement l' effet que nous recherchions. 129. Focus de texte et effet de flou: Bonjour à tous. Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cet effet de texte sympa. Vous pouvez voir que ce texte est flou. Lorsque nous survolons une lettre du mot, mise en évidence et nous pouvons la voir clairement De plus, nous avons ces quatre bordures autour des lettres qui apparaissent lorsque vous planez et disparaissent lorsque vous survolez le pointeur Commençons par voir comment créer cet effet. Je vais aller ici dans mon code HTML et ajouter un H deux. Ensuite, à l'intérieur, j' ajouterai une étendue, une balise à l'intérieur de cette étendue. Nous utiliserons cette balise pour créer les quatre bordures autour de chaque lettre. Ensuite, j'ajouterai la première lettre. Ensuite, je vais le copier-coller quatre fois et changer les lettres pour former le focus du mot. Ensuite, je vais accéder à mon CSS et cibler le corps. Ajoutez ensuite Display Flex, Justify, content, Alignez les éléments au centre en hauteur 100 VH. Ensuite, j'ajouterai un dégradé linéaire de fond à 45 degrés, cette couleur bleue à cette couleur jaune. Maintenant, vous pouvez voir que nous avions ce dégradé de couleur cool. Ensuite, en dessous, je vais cibler le H deux et ajouter un espace flexible d'affichage relatif 15 pixels afin de séparer les lettres de 15 pixels. Coloriez ensuite en blanc la taille de police quatre, E, M, pointeur du curseur. Enfin, le texte est transformé en majuscules. Ensuite, en dessous, je vais cibler les travées à l'intérieur du H deux et ajouter la position relative Créons maintenant les quatre bordures autour des lettres. Nous allons le faire en utilisant l' élément situé à l'intérieur des travées. Je vais cibler les quatre pseudo-éléments de l'ajout de contenu. Chaînes vides, position absolue w, deux pixels, hauteur huit pixels, fond blanc. Vous pouvez maintenant voir que nous avons cette petite ligne blanche dans le coin supérieur gauche de chaque lettre. Continuons. Je vais revenir en arrière et ajouter à zéro, à gauche, moins cinq pixels. Maintenant, après avoir créé la ligne verticale, créons la ligne horizontale. Je vais sélectionner le pseudo-élément suivant de l'élément et ajouter du contenu chaînes vides, une position absolue avec huit pixels de hauteur, deux pixels de fond blanc. Ensuite, j'ajouterai le zéro en haut à gauche, moins cinq pixels. Maintenant, vous pouvez voir que nous avons cette ligne horizontale. Ce faisant, nous avons créé le coin supérieur gauche. Créons maintenant les trois autres coins. Nous allons le faire en dupliquant cette bordure en haut à gauche à l'aide de la propriété box shadow Je vais aller ici à l'intérieur du pseudo-élément before et ajouter l'ombre de la boîte zéro comme valeur horizontale, 53 pixels comme valeur verticale et le blanc. Vous pouvez maintenant voir que nous avons cette ligne verticale dans le coin inférieur gauche. Créons sa ligne verticale. Je vais le copier. Collez-le ici et remplacez 53 pixels par 60 pixels. Et maintenant, vous pouvez voir que nous avons dupliqué la bordure du coin supérieur gauche vers le coin inférieur gauche Très bien, je vais rapidement ajouter les autres valeurs d'ombre des cases. Je vais aller ici et ajouter 37 pixels en tant que valeur horizontale, 53 pixels en tant que valeur verticale et blanc. Ensuite, j' ajouterai 30 pixels comme valeur horizontale et 60 pixels comme valeur verticale, blanc. Maintenant, vous pouvez voir que nous avons la bordure dans le coin inférieur droit. Ajoutons également la bordure finale dans le coin supérieur droit. Je vais aller ici et ajouter 36 pixels en tant que valeur horizontale, zéro en tant que valeur verticale et blanc. Ensuite, ci-dessous, ajoutez 30 pixels comme valeur horizontale, puis zéro comme valeur verticale et blanc. Vous pouvez maintenant voir que les quatre bordures ressemblent exactement à ce que nous voulons. Nous les avons tous créés en utilisant la propriété box shadow. Créons l'effet de survol. Maintenant. Je vais aller ici et ajouter de l'opacité ici également. Ensuite, je vais aller ici et dire qu'en survolant les travées, je sélectionnerai le pseudo élément avant de l'élément Je vais également faire de même pour le pseudo élément after et ajouter un élément d'opacité Vous pouvez maintenant voir que les quatre bordures sont désormais masquées, et lorsque nous survolons une lettre, vous pouvez la voir réapparaître. Travaillons maintenant sur l'effet de flou. Je vais aller ici à l'intérieur des travées et ajouter un flou de filtre de cinq pixels Ensuite, en dessous, je vais le dire en passant le curseur sur les travées et en ajoutant flou au filtre zéro Maintenant, lorsque je passe le curseur sur une lettre, vous pouvez voir que la lettre que nous survolons entre en ligne de compte et devient très claire Enfin, ajoutons quelques transitions. Je vais aller ici dans les travées et ajouter une transition de 0,5 seconde. Ensuite, lors du survol, j'ajouterai 0 seconde à la transition, de sorte que la transition se produise uniquement lorsque le pointeur s'éloigne des lettres, et non lorsque vous les survolez, comme vous le voyez ici j'ajouterai 0 seconde à la transition, sorte que la transition se produise uniquement lorsque le pointeur s'éloigne des lettres, et non lorsque vous les survolez, comme vous le Voilà, tout le monde peut le voir, nous avons créé cet effet vraiment simple mais très cool. 130. Effet d'animation créatif de glassmorphisme: Bonjour à tous, bienvenue à une autre nouvelle leçon du cours. Dans cette leçon, nous allons créer cette jolie animation sur le morphisme du verre Vous pouvez voir que nous avions ce cercle semi-transparent au centre. Nous avons un carré rouge et un cercle blanc qui se déplacent sur le cercle semi-transparent. Si nous nous concentrons uniquement sur le cercle blanc ici, vous pouvez le voir se déplacer de gauche à droite derrière le cercle semi-transparent et devenir flou lorsqu'il traverse le cercle Lorsque vous reculez de droite à gauche, il se déplace devant le cercle semi-transparent et redevient visible. Cela arrive également à la place rouge. Mais le moment est différent. C'est un exemple vraiment cool. Commençons par le créer. Je vais aller ici dans mon code HTML, ajouter un Di et lui donner une classe de chargeur. Ensuite, j' ajouterai trois travées à l'intérieur. Nous utiliserons ces travées pour créer les trois formes différentes de notre effet Ensuite, je vais accéder à mon CSS et sélectionner le Body Add, Display, Flex, Justify, le centre de contenu, Aligner les éléments, centre en hauteur, 100 VH, l'arrière-plan, cette couleur bleu marine foncé Ensuite, je vais sélectionner le plongeur du chargeur qui contient les trois travées et ajouter largeur relative de la position, 150 pixels Hauteur 150 pixels. Ensuite, une couleur de fond rouge temporaire. Maintenant, vous pouvez voir que nous avons ce carré rouge au centre de la fenêtre. Bien, revenons en arrière et sélectionnons les travées à l'intérieur du chargeur Plongez et ajoutez la position absolue afin de les positionner par rapport à la division du chargeur. La largeur 100 % et la hauteur 100 % occupent la totalité de la largeur et de la hauteur de la plongée du chargeur. Ensuite, une couleur de fond bleu temporaire. Maintenant, vous pouvez voir que nous avons ce carré bleu qui recouvre le carré rouge. En fait, il s'agit de trois carrés bleus. Pas un, mais ils sont empilés les uns sur les autres. Ensuite, je vais revenir ici et ajouter un rayon de bordure 50 % pour faire de ces trois travées un cercle comme vous le voyez maintenant Bien, travaillons maintenant sur le cercle semi-transparent au centre. Je vais sélectionner le premier enfant des travées et ajouter un arrière-plan, cette couleur semi-transparente, afin de le voir clairement Je vais monter ici et supprimer ce fond bleu, ce fond rouge. Maintenant, vous pouvez voir que nous avons ce cercle semi-transparent. Bien, travaillons sur le carré rouge qui traverse le cercle semi-transparent. Nous allons maintenant le créer en utilisant la deuxième plage à l'intérieur du div du chargeur. Je vais cibler cela et ajouter un arrière-plan, notre couleur rouge, puis un rayon de bordure zéro pour créer un carré. Encore une fois, puisque nous avons créé tous les cercles d'envergure en ajoutant un rayon de bordure de 50 % ici, dans le sélecteur d'envergure Maintenant, vous pouvez voir que nous avons ce carré rouge qui recouvre le cercle semi-transparent. Très bien, créons l' effet de morphisme du verre pour le cercle semi-transparent Je vais monter ici et ajouter flou au filtre de fond, dix pixels, puis un index deux qu'il recouvre le fond rouge. Afin de voir clairement l'effet. Je vais aller ici à l'intérieur du fond rouge et ajouter transform translate négatif 50 pixels et moins 50 pixels Vous pouvez maintenant voir que la partie du carré rouge située derrière le cercle est floue et que le cercle a désormais la forme d'un morphisme de verre Très bien, revenons en arrière et retirons-le. Travaillons ensuite sur l' effet d'animation du carré rouge. Je vais créer une nouvelle animation, la nommer animate à l'intérieur À 0 % de la durée de l'animation, j'ajouterai une translation de transformation négative de 150 pixels sur l'axe x et de 50 pixels sur l'axe y. Puis redimensionnez 0,4 afin de le réduire. Enfin, faites pivoter de zéro degré. Ensuite, je vais le copier, coller, et à 50 % de la durée de l'animation. Je vais modifier la propriété de translation à 150 pixels sur l'axe X et à moins 50 pixels sur l'axe Y. Il se déplacera donc vers le haut à droite. Je vais également changer le degré de rotation à 180 degrés, sorte qu'il pivote tout en se déplaçant sur le cercle. Enfin, en dessous de cette limite, à 100 % de la durée de l' animation, je vais la remettre dans sa position initiale. Et je vais changer la rotation à 360 degrés. Très bien, je vais monter ici dans le carré rouge et ajouter animation animée de 4 secondes comme durée d'animation Ensuite, entrez facilement et à l'infini. Vous pouvez maintenant voir que le carré rouge est animé et se déplace sur le cercle semi-transparent. Et vous pouvez voir que lorsqu' il traverse le cercle, il devient flou au fur et à mesure qu' il se déplace derrière lui Maintenant, quand il revient, nous voulons qu'il soit à nouveau visible en haut du cercle, et non flou Nous pouvons donc le faire en allant ici au début de l'animation et en ajoutant un index Z. Ensuite, à 50 %, nous le fixerons également à un. Cela aura pour effet de rendre le carré rouge flou sur la première moitié de l'animation Ensuite, je copierai tout cela. Collez-le, et à 50 000 1%, je changerai simplement l'indice Z en trois Également à 100 %, j'ajouterai également un indice Z trois. Cela fera apparaître le carré rouge en haut du cercle, et non le rendre apparaître le carré rouge en haut du cercle, et non le flou pendant la seconde moitié de l'animation, comme vous le voyez ici C'est flou pendant la première moitié, car l'indice Z est égal à un, ce qui est inférieur à deux, la valeur du cercle Il n'est pas flou dans la seconde moitié puisqu' il a une valeur d'indice Z de trois supérieure à celle du cercle. Cool. Maintenant que nous avons compris cela, nous pouvons facilement créer le cercle blanc qui se déplace également à travers le cercle semi-transparent. Je vais simplement copier le cercle rouge. Collez-le et sélectionnez la troisième plage. Ensuite, je changerai la couleur d'arrière-plan en blanc et je la supprimerai pour que ce soit toujours un cercle. Maintenant, vous pouvez voir que nous avons ce cercle blanc qui se déplace en même temps que le carré rouge. Allons ici et ajoutons un délai d'animation. 2 secondes négatives. Nous avons choisi 2 secondes car c'est la moitié de la durée de l' animation, qui est de 4 secondes. Pour que les deux travées se croisent au bon moment Tout comme vous le voyez ici lorsque l'un d'eux est à gauche, l'autre à droite, et ils se rencontrent au centre, qui nous donne cet effet de morphisme du verre vraiment cool 131. Effet de survol de carte empilée: Salut tout le monde. Bienvenue dans cette nouvelle leçon de notre cours. Dans cette leçon, nous allons créer cet effet trois cartes empilées les unes sur les autres, à l'intérieur de ce cercle Et lorsque vous survolez l'un d'entre eux, ils apparaissent ici, l'un à côté de l'autre Commençons donc par créer cet exemple. Je vais aller ici dans mon code HTML et ajouter un div avec la classe de container. Ensuite, à l'intérieur, j'ajouterai un autre div avec la classe de carte. J'ajouterai également du style, je déclarerai une variable, fixons sa valeur à moins un. Ensuite, je copierai et collerai deux autres divs avec la même classe et je changerai simplement la valeur de la variable 0,1. Ensuite, je passerai à mon CSS Sélectionnez le corps et ajoutez Display Flex, Justify, Content center, Aligner les éléments, hauteur minimale, fond 100 VH, cette couleur violet foncé, puis transition de 0,5 seconde. Ensuite, en dessous, je vais cibler le pseudo élément antérieur du corps pour créer le grand cercle et ajouter du contenu. Les chaînes vides positionnent le zéro absolu en haut à gauche, zéro, largeur 100 % hauteur, indice z 100 % moins deux arrière-plans, cette transition de couleur jaune 0,5 seconde. Maintenant, vous pouvez voir que nous avons un fond jaune qui remplit toute la fenêtre. Puisque sa hauteur et sa largeur correspondent à 100% du corps. Revenons en arrière et faisons-en un cercle. Je vais ajouter un cercle de trajectoire de clip de 250 pixels comme rayon. Puis au centre comme position. Vous pouvez maintenant voir que la seule partie visible sur le fond jaune est ce cercle au centre. Ensuite, je vais cibler le div du conteneur qui enveloppe les trois cartes, ajouter une position, une largeur relative de 1 100 pixels, hauteur de 400 pixels et un arrière-plan rouge temporaire Vous voyez maintenant ce fond rouge qui se trouve au-dessus du cercle jaune. OK, sélectionnons les cartes. Je vais cibler les divs avec une classe de carte et ajouter une largeur 300 pixels, une hauteur de 400 pixels Arrière-plan, position blanche absolue pour un calcul de 50 % à 200 pixels Pour qu'il soit centré verticalement. Ensuite, 50 % à gauche et un rayon de bordure de dix pixels. Ensuite, pour le centrer horizontalement, nous allons ajouter transform translate x negative 50 %. Maintenant, vous pouvez voir que les cartes se trouvent sur le fond rouge, mais qu'elles sont empilées les unes sur autres et c'est pourquoi elles apparaissent sous la forme d'un seul div Mais revenons voir nos trois cartes. Je vais aller ici et ajouter translate Y 50 pixels fois la variable. Je me souviens que les valeurs des variables sont négatives 10,1. Cela signifie que la première carte se déplacera vers le haut le long de l'axe y de 50 pixels, car sa valeur sera négative un fois 50 , soit moins 50. De plus, le second restera tel quel, puisque sa valeur sera de zéro fois 50, soit zéro. Enfin, la troisième carte se déplacera de 50 pixels vers le bas. Bien, ajoutons également une rotation de 40 degrés pour les trois cartes. Vous pouvez maintenant voir que les trois cartes sont tournées et que la première est déplacée vers le haut Le deuxième est au centre et le troisième en bas. Comme je l'ai expliqué, allons-y rapidement et supprimons notre fond rouge. Revenons également en arrière et ajoutons une inclinaison négative de 20 degrés sur l'axe x et moins dix degrés sur l'axe y. Enfin, échelle de 0,6 Maintenant, vous pouvez voir que nous avons presque l'effet souhaité. Il ne reste plus qu'à ajouter un peu d'ombre pour séparer les cartes. Je vais ajouter une ombre de 25 pixels, 20 pixels, 100 pixels, cette couleur grise. Maintenant, ils sont séparés. Mais comme vous pouvez le voir, le troisième div est en haut, puis le deuxième, puis le premier, mais l'autre sens. Nous voulons que le premier div soit en haut, puis le deuxième puis le troisième. Nous pouvons facilement le faire en utilisant la propriété d'index Z. Je vais revenir en arrière et ajouter un indice négatif une fois la variable pour le premier div, qui sera négatif une fois moins un, qui sera un pour le second, il sera nul pour le troisième, il sera négatif une fois un qui est négatif un. Il aura l'indice z le plus bas et se trouvera au bas de la pile, comme vous pouvez le voir ici. Enfin, j'ajouterai une transition de 0,5 seconde. Ajoutons un peu de transparence aux deuxième et troisième cartes pour qu' elles aient un bel effet 3D. Nous allons sélectionner la deuxième carte et ajouter une opacité de 0,8 , puis la troisième carte et changer l'opacité à 0,6. Maintenant, vous pouvez voir qu'elles sont tellement plus belles Très bien, travaillons sur l'effet de survol. Maintenant, je vais aller ici et dire qu'en survolant le conteneur, qui se souvient du fond jaune, je vais cibler les cartes et ajouter la position absolue z, l'indice un, l'opacité, un Ensuite, transform translate x negative 50 % et cela annulera toutes les transformations que nous avons vues ci-dessus ici Et n'appliquez cette fonction de translation qu'ici, la rotation, l'inclinaison, tout cela sera supprimé Et cela signifie que les cartes seront empilées les unes sur les autres, encore une fois, comme vous le voyez ici OK, maintenant nous voulons ajouter un peu d'espacement entre eux. Supposons que nous voulions ajouter 350 pixels entre chaque carte. Nous pouvons revenir ici et ajouter, puis à côté de ces 50 % négatifs, nous allons ajouter calculer 350 pixels fois la variable Et ce que cela fera à tout le monde, c'est que cela ajoutera 350 pixels négatifs à la première carte, zéro à la deuxième carte, sorte qu'elle restera dans sa position et 350 pixels à la troisième carte. Et cela en retour séparera chacun d'eux de 350 pixels, comme vous pouvez le voir ici. Il est maintenant temps d'ajouter du contenu à ces cartes. Je vais revenir à mon code HTML dans la carte div et ajouter un autre div avec une classe de contenu. Je vais ajouter du style. Ensuite, j'ajouterai une variable J avec une valeur de un. Ensuite, à l'intérieur de ce div, j'ajouterai un H deux et je dirai la carte un. Ensuite, j'ajouterai un paragraphe et j'ajouterai du texte à l'intérieur. Ensuite, je vais copier ce contenu Div, coller à nouveau et changer la variable J en deux et la carte un en carte deux. Alors je vais également le coller ici. Et changez J en trois et la carte un en carte trois. Vous pouvez voir que nous avons le contenu ici à l'intérieur des trois cartes. Passons à notre CSS. Je vais me rendre ici à l'intérieur de la voiture et ajouter un centre de contenu Display, Flex, Justify, une ligne, un centre d'articles. Et maintenant, vous pouvez voir que le contenu est centré à l'intérieur de la voiture Div. Continuons sur cette lancée. Je vais sélectionner le contenu et ajouter un rembourrage relatif à la position, 25 pixels colorent cette couleur gris foncé, transition de 0,5 seconde, puis une opacité nulle Ensuite, en dessous, je dirai qu' en survolant le conteneur Div, je ciblerai le contenu et j'ajouterai une opacité Ensuite, le délai de transition est de 0,2 seconde multiplié par la variable J. Le premier contenu div aura un délai de transition de 0,2 seconde. Le second sera retardé de 0,4 seconde. Et le troisième sera retardé de 0,6 seconde, comme vous pouvez le voir ici. C'est ainsi que nous avons terminé cette leçon. J'espère qu'il vous a plu et je vous verrai dans le prochain. 132. Effet créatif de survol de button à 4 lignes avec CSS: Salut, tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce joli effet de survol de boutons Vous pouvez voir que le bouton est entouré de quatre lignes. Et lorsque nous le survolons, les quatre lignes se rejoignent et se rétrécissent jusqu'à disparaître. Ensuite, ce fond lumineux s' agrandit jusqu'à ce qu'il recouvre le bouton. Nous allons apprendre comment créer cette lueur d'arrière-plan à l'aide de la propriété box shadow. Commençons. Je vais commencer ici dans mon code HTML en ajoutant un div et en lui donnant une classe de conteneur. Ensuite, à l'intérieur, j' ajouterai une étiquette d'ancrage. Ensuite, j'ajouterai quatre travées pour les quatre lignes. Je vais aller ici et dire Button. Ensuite, je vais copier cette balise d'ancrage et la coller à nouveau pour créer un autre bouton. Ensuite, je vais passer à mon CSS. Je vais commencer par ajouter quelques styles de réinitialisation généraux. Je vais ajouter une marge zéro, une taille de case zéro, une zone de bordure, une famille de polices, Sands, Seraph Ensuite, je vais cibler le corps et ajouter display Flex, justify, content center pour centrer le container div horizontalement dans le corps. Ensuite, je vais ajouter une ligne, la centrer verticalement. Ensuite, j'ajouterai la hauteur minimale, 100 VH. Puis enfin, mettez en arrière-plan cette couleur gris foncé. Ensuite, je vais cibler le conteneur div et ajouter display Flex pour contrôler l' alignement des boutons. Ensuite, j'ajouterai un espace de 150 pixels pour séparer les boutons. Enfin, fléchissez, enroulez, enroulez. Je vais maintenant cibler les balises d'ancrage et ajouter une position par rapport à la position des quatre lignes par rapport à la balise d'ancrage. Ensuite, j'ajouterai une décoration de texte aucune transformation de texte, un rembourrage en majuscules, 20 pixels en haut et en bas et 35 pixels de gauche à droite Ensuite, j'ajouterai une bordure solide de deux pixels. Cette belle couleur bleue, puis colorez notre police de couleur bleue police de couleur de 20 pixels. Espacement des lettres de quatre pixels, enfin transition de 0,5 seconde. Maintenant, vous pouvez voir que les boutons sont beaucoup plus jolis. Maintenant, lorsque vous survolez les liens, nous voulons changer la couleur du texte en blanc et supprimer les bordures Je ciblerai le lien lorsque je le survolerai. J'ajouterai de la couleur blanche pour changer la couleur du texte en blanc au lieu du bleu. Ensuite, j'ajouterai une bordure, solide de deux pixels, transparente pour supprimer la bordure. Maintenant, vous pouvez voir que lorsque nous survolons les liens, nous obtenons l'effet souhaité Créons maintenant les quatre lignes qui entourent liens en utilisant les quatre travées que nous avons créées à l'intérieur de chaque lien Je vais cibler les travées à l'intérieur des liens et ajouter une position absolue pour les positionner par rapport aux liens Et nous contrôlerons chacun d'eux individuellement. Ensuite, j'ajouterai le fond, notre couleur bleue. Nous allons maintenant cibler les première et troisième travées. Je dirais d'étendre le nième enfant sur un, puis sur le nième enfant J'ajouterai une largeur de 40 pixels, une hauteur de quatre pixels. Ce seront les lignes horizontales. Ensuite, je vais le copier, coller et cibler les deuxième et quatrième travées. Ensuite, je vais changer la largeur à quatre pixels et la hauteur à 40 pixels. Ce seront donc les lignes verticales. Vous pouvez maintenant voir les lignes apparaître ici, mais elles sont empilées les unes sur les autres Revenons en arrière et contrôlons leur position. Je vais aller ici, cibler le premier enfant et ajouter les 50 % supérieurs moins deux pixels. Ainsi, la première ligne sera centrée verticalement. Ensuite, pour le déplacer vers la gauche du lien, nous ajouterons 50 pixels négatifs à gauche. Ensuite, j'ajouterai une transition de 0,5 seconde. Détendez-vous. Vous pouvez maintenant voir que la première ligne est positionnée à gauche du lien. Bien, maintenant, lorsque vous survolez le lien, nous voulons que cette première ligne revienne au centre du lien et se rétrécisse En même temps, je vais aller ici. Et lorsque je survole le lien, je cible la première ligne et j'ajoute 50 % à gauche pour la remettre au centre J'ajouterai également une échelle de transformation x zéro, sorte que la ligne se rétrécisse lorsque vous revenez au centre Maintenant, lorsque vous survolez le lien, vous pouvez voir la première ligne revenir au centre tout en rétrécissant Afin de réduire la ligne vers la gauche, je vais aller ici et ajouter l'origine de transformation à gauche. Maintenant, lorsque le pointeur s'éloigne du lien, nous voulons que la ligne attende un peu avant de revenir à sa position Je vais aller ici dans le bloc CSS de première ligne et ajouter un délai de transition de 0,25 seconde. Ensuite, lorsque vous survolez le lien, j'ajouterai un délai de transition de 0 seconde. Ainsi, le délai ne se produira que lorsque vous vous éloignez du lien, et non lorsque vous le survolez de cette ne se produira que lorsque vous vous éloignez du lien, et non lorsque vous le survolez manière Très bien, il ne nous reste plus qu'une chose à faire : ajouter de l'ombre à la ligne afin d'obtenir ce bel effet lumineux Nous allons revenir ici dans toutes les plages et ajouter l'ombre de la boîte 00, valeur de flou de dix pixels et la couleur de notre couleur bleue Ensuite, je vais copier cette valeur, la coller quatre fois, augmenter progressivement la valeur du flou pour chaque valeur C'est ainsi que nous pouvons obtenir cet effet flou comme vous le voyez ici OK, maintenant faisons de même pour les trois autres lignes. Je vais aller ici et le copier. Collez-le trois fois. Ensuite, je vais cibler la troisième ligne. Changez de gauche à droite car nous voulons qu'il soit positionné sur le côté droit. Ensuite, je changerai l'origine de la transformation vers la droite au lieu de la gauche. Je vais également changer de gauche ici vers la droite. Vous pouvez maintenant voir que la troisième ligne est positionnée à droite du lien. Lorsque vous survolez le lien, celui-ci revient au centre et se rétrécit Bien, ciblons maintenant la deuxième ligne. Nous voulons le centrer horizontalement et non verticalement. Nous allons donc changer de haut en haut à gauche. Et nous allons le déplacer de gauche vers le haut afin de le déplacer vers le haut au-dessus du lien. Nous allons également changer l'origine de la transformation en haut. Lorsque nous rechargeons la page, vous pouvez voir qu'elle est désormais positionnée au-dessus des liens Revenons maintenant en arrière et continuons l'effet de survol. Je vais aller ici, cibler la deuxième ligne et changer de gauche à haut. Ensuite, je vais changer l'échelle X en échelle Y afin de la faire rétrécir verticalement. Maintenant, vous pouvez voir que nous obtenons l'effet que nous recherchions. Faisons rapidement de même pour la quatrième ligne, qui sera positionnée sous les liens. Je vais le cibler ici, ici, et le changer de haut en gauche, de gauche à bas. Ensuite, je vais également changer l'origine de la transformation en bas. Lorsque je survole, je vais changer d'échelle de gauche en bas, échelle X à échelle Y. Maintenant, vous pouvez voir que les quatre lignes créées et que nous avons maintenant été créées et que nous avons maintenant exactement l'effet que nous recherchions Il est maintenant temps de créer l'arrière-plan qui apparaît après le rétrécissement des lignes pour masquer les liens Et nous allons le faire en utilisant le pseudo élément before. Je vais aller ici et cibler le pseudo élément précédent, le lien. Et ajoutez du contenu sous forme de chaînes vides, positionnez-le en absolu pour le positionner par rapport aux liens. Ensuite, j'ajouterai le zéro supérieur, zéro gauche, car nous voulons que cela masque complètement les liens. J'ajouterai une largeur 100 %, une hauteur de 100 %. Ensuite j'ajouterai un arrière-plan, notre couleur bleue. Maintenant, vous pouvez voir que nous avons le fond bleu. Maintenant, revenons en arrière et continuons. Je vais aller ici et ajouter l'échelle de transformation zéro. Puis transition de 0,5 seconde , un indice négatif. Alors j'irai ici. Lorsque je survole le lien, je sélectionne le pseudo-élément Before et j'ajoute une échelle de transformation, un délai de transition 0,5 seconde, car nous voulons que l'arrière-plan apparaisse Une fois les quatre lignes réunies, pour obtenir cet effet lumineux, nous ajouterons une ombre à la boîte de 0,010 pixels, notre couleur bleue Ensuite, je vais le copier, coller deux fois et augmenter la valeur de flou en conséquence Je vais le changer en 30 pixels, puis en 60 pixels. Maintenant, lorsque vous survolez le lien, vous pouvez voir qu'une fois les quatre lignes réunies, nous avons ce joli fond lumineux qui s'agrandit et couvre le bouton Et c'est exactement l' effet que nous recherchions. 133. Animation créative de 4 cercles: Bonjour à tous, bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ces cercles sympas, cette animation. Vous pouvez voir que nous avons ces formes et qu'elles sont animées d'une très belle manière. Nous avons ce cercle blanc qui se déplace horizontalement de droite à gauche, puis repart sur une boucle infinie. Au-dessus, nous avons ce demi-cercle bleu qui tourne. Et au-dessus, nous avons cette petite boule blanche qui glisse parfaitement au-dessus. Cela va être un exemple d'animation sympa. Voyons comment nous pouvons le créer. Je vais aller ici dans mon code HTML et ajouter un div. Donnez-lui une classe de contenant. Ensuite, à l'intérieur, j'ajouterai un autre div avec une classe de chargeur. Ensuite, j' ajouterai le dernier div, lui donnerai une classe de balle. Ensuite, je vais accéder à mon CSS et commencer par ajouter quelques styles de réinitialisation généraux J'ajouterai la marge zéro, rembourrage zéro, puis la taille de la boîte, la zone de bordure Ensuite, en dessous, je vais cibler le corps et ajouter de la flexibilité d'affichage, justifier le centre de contenu, aligner les éléments, le centre en hauteur, arrière-plan 100 VH, cette couleur marine, enfin un trop-plein masqué Ensuite, je ciblerai le Div avec la classe du chargeur et ajouterai la position une largeur relative de 200 pixels. Hauteur 200 pixels également. Ensuite, j'ajouterai un fond rouge temporaire. Maintenant, vous pouvez voir que nous avons ce fond rouge centré à l'intérieur du corps. Nous allons utiliser ce chargeur di afin de créer la partie bleue qui tournait dans notre exemple ici. Bien, créons maintenant ce fond bleu en utilisant le pseudo élément before. Je vais cibler le pseudo élément before du loader div et ajouter contenu : chaînes vides, position, largeur absolue 200 pixels, hauteur 100 pixels. Puis, mettez notre couleur bleue en arrière-plan. Maintenant, vous pouvez voir que nous avons ce fond bleu, mais nous voulons changer cet arrière-plan en demi-cercle. C'est ce que nous allons faire. Je vais aller ici et ajouter une bordure en bas gauche d'un rayon de 100 pixels, identique à la hauteur du fond bleu. Ensuite, la bordure en bas à droite a également un rayon de 100 pixels. Maintenant, vous pouvez voir que le fond bleu ressemble exactement à ce que nous voulons. Très bien, nous allons maintenant créer la deuxième partie de notre dessin. Ce cercle blanc ici se déplace horizontalement d'avant en arrière. Je vais y retourner et cibler la division des conteneurs. Ensuite, j'ajouterai la position relative. Ensuite, en dessous, je ciblerai le pseudo élément before du conteneur div pour créer le cercle blanc. Ensuite, j'ajouterai du contenu, des chaînes vides, une position, une largeur absolue de 200 pixels, hauteur de 200 pixels. Puis fond blanc. Pour en faire un cercle, je vais ajouter un rayon de bordure 50 %. Pour voir ce fond blanc, je vais monter ici dans le chargeur et ajouter un indice Z négatif. Vous pouvez voir que nous avons ce cercle blanc qui ressemble exactement à ce que nous voulons. Puisque nous voulons situer le cercle blanc en dessous du cercle bleu, nous allons revenir ici et ajouter 200 pixels. Vous pouvez maintenant voir qu'il a été déplacé en bas du fond rouge. Nous voulons maintenant que le fond bleu soit exactement au-dessus du cercle blanc. Nous pouvons le faire en allant ici dans le pseudo élément before plongée du chargeur et en ajoutant le zéro inférieur. Incroyable, supprimons ce fond rouge. Nous n'en voulons plus. Je vais aller ici dans le div du chargeur et supprimer le fond rouge. Bien, créons la troisième partie qui est ce grand cercle rose. Je vais le faire en utilisant le pseudo élément after du conteneur. Je vais cibler le pseudo élément après du conteneur et ajouter du contenu, des chaînes vides, une position absolue. Ensuite, j'ajouterai une largeur de 800 pixels. Hauteur 800 pixels ainsi que fond, cette jolie couleur rose. Pour en faire un cercle, je vais ajouter un rayon de bordure 50 %. Maintenant, vous pouvez voir que nous avons cet énorme cercle rose. Allons le centrer horizontalement. Je vais aller ici et ajouter 50 % à gauche, puis transformer, traduire x négatif 50 % Maintenant, vous pouvez voir que le cercle rose est centré à l'intérieur de la page et recouvre maintenant le fond blanc. Nous voulons le placer sous le fond blanc. Je vais revenir ici et ajouter les 400 premiers pixels. Maintenant, l'arrière-plan du ping est situé sous le cercle blanc, mais comme vous pouvez le voir, l'ensemble du dessin est situé vers le bas. Ce serait mieux si nous pouvions déplacer un peu vers le haut Pour ce faire, je vais entrer dans le conteneur div et ajouter transform translate y negative 100 pixels pour le déplacer vers le haut, comme vous le voyez ici. C'est bon, nous avons presque terminé. ne reste plus que la petite boule blanche en haut. Je vais commencer par le cibler et je mettrai sa position en valeur absolue. Ensuite, j'ajouterai une largeur de 40 pixels, une hauteur de 40 pixels, arrière-plan blanc et un rayon de bordure de 50 %. Maintenant, et un rayon de bordure de 50 % vous pouvez voir qu'il est positionné par rapport au div du chargeur. Pour le voir clairement, je vais monter ici dans le div du chargeur et ajouter à nouveau un arrière-plan rouge. Vous pouvez maintenant voir que la boule blanche est positionnée ici dans le coin supérieur gauche du chargeur. Très bien, changeons sa position pour qu'elle se trouve exactement en haut du cercle blanc. Je vais retourner dans la balle div et ajouter à 50 % de transformation, traduire y négatif 100 % Maintenant, nous avons toutes nos pièces réunies et ne nous reste plus qu'à les animer une par une Nous allons commencer par la petite boule blanche. Nous voulons le déplacer horizontalement en haut du demi-cercle bleu Il doit se déplacer de droite à gauche, d'avant en arrière dans une boucle infinie. Je vais d'abord aller ici et ajouter translate x negative 40 pixels. Ainsi, la petite boule blanche se déplace vers la gauche et se positionne au début du demi-cercle bleu comme vous Créons maintenant l'animation. Je vais me rendre ici et créer une nouvelle animation. Nommez-le, Animate ball inside. Je vais ajouter trois étapes pour l'animation. À 0 %, j'ajouterai transform translate Y négatif 100 % afin qu'il conserve sa position verticale. Traduisez ensuite x moins 40 pixels. Ensuite, à 50 % de la durée de l' animation, je vais le copier, le coller et changer translate x en 200 pixels. C'est la largeur du demi-cercle bleu. La balle se déplacera complètement vers la droite à 100 %. Nous voulons qu'elle revienne en arrière Je vais donc la laisser telle qu'elle fait moins 40 pixels. Ensuite, je vais monter ici dans le ball div et ajouter une animation. Animez le ballon pendant 4 secondes. Entrez facilement à l'infini. Génial. Vous pouvez maintenant voir que la boule blanche se déplace à l'infini de droite à gauche Exactement au-dessus du demi-cercle bleu. La lumière que nous voulons. Très bien, jetons un coup d'œil au demi-cercle bleu pour voir comment nous pouvons l'animer Vous pouvez voir ici qu'il tourne de gauche à droite et inversement. OK, revenons en arrière et créons l'animation. Je vais me rendre ici et créer une nouvelle animation. Nommez-le demi-cercle. Ensuite, je vais créer trois étapes pour cette animation. À 0 % de la durée de l'animation, j'ajouterai une rotation de 50 degrés par transformation. Ensuite, j'ajouterai deux autres étapes. Je vais le copier, le coller à nouveau deux fois. La deuxième étape sera à 50 %. Je vais changer la valeur de rotation à moins 50 degrés. Ensuite, à la fin de la durée de l' animation, je laisserai les degrés de rotation tels quels. Ensuite, je vais monter ici dans le chargeur et ajouter demi-cercle d'animation Entrez facilement à l'infini. Vous pouvez maintenant voir que le fond rouge tourne en son centre et que le demi-cercle bleu tourne Revenons maintenant en arrière et supprimons le fond rouge. Nous n'en avons plus besoin. Je vais le faire rapidement. Il ne reste plus qu'une chose : animer le cercle blanc Je vais me rendre ici en dessous du cercle blanc et créer une nouvelle animation. Nommez-le, animez un cercle. À 0 % de la durée de l'animation, j'ajouterai transform translate x 15 pixels. Ensuite, je vais le copier et créer deux autres étapes. Le premier est à 50 %, puis changez la traduction x en moins 15 pixels à 100 % Je laisserai la valeur de translation x telle quelle. Ensuite, je vais monter ici et ajouter une animation Animate circle 4 secondes. Entrez facilement à l'infini. Maintenant, vous pouvez voir que le cercle blanc se déplace horizontalement entre le demi-cercle bleu et le demi-cercle rose, ce qui nous donne exactement l' effet que nous Ok les gars, c'est fini pour cette leçon. C'était vraiment amusant, et j'espère qu'il vous a plu. On se voit dans le prochain. 134. Animation de verre liquide coloré: Bonjour à tous. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer cette jolie animation. Vous pouvez voir que nous avons ce verre d'eau. Et l'eau qui s'y trouve descend pour vider le verre, puis remonte pour le remplir à nouveau. Et cela se produit encore et encore. Commençons par créer cet exemple. Je vais commencer ici dans mon code HTML en y ajoutant une section. Je vais ajouter un, lui donner une classe de verre. Puis une autre plongée à l'intérieur avec une classe d' intérieur, à l'intérieur, notre dernière plongée avec une classe de liquide. Ensuite, je vais copier ce div avec une classe de verre et le coller à nouveau. Ensuite, je vais accéder à mon CSS et cibler la section. Ajoutez ensuite la flexibilité de l'affichage, la justification du contenu, centre d'une ligne, hauteur du centre, un arrière-plan 100 VH, cette couleur gris foncé Ensuite, en dessous, je vais cibler le verre di et ajouter une position relative. En dessous, je vais cibler le div interne à l'intérieur du div en verre et ajouter position, la largeur relative 200 pixels, hauteur 400 pixels, le fond de cette couleur grise. Ensuite, je vais monter ici, dans la section, et ajouter espace de 40 pixels pour séparer les deux lunettes, donc allons-y. Je vais aller ici et ajouter un rayon de bordure de 40 pixels. Puis bordure de huit pixels, blanc uni. Très bien, regardons notre exemple. Nous voulons créer cette partie supérieure circulaire ici, en haut du verre. Et nous allons le faire en utilisant le pseudo élément before du div interne. Je vais donc le cibler et ajouter du contenu chaînes vides, une position, une largeur absolue 175 pixels, une hauteur de 30 pixels. Puis une bordure solide de dix pixels. Cette couleur grise, vous pouvez voir que nous avons ce rectangle gris. Continuons. Je vais revenir ici et ajouter un rayon de bordure de 50 %. Afin de le centrer horizontalement, j'ajouterai 50 % à gauche. Ensuite, transformer le translation x négatif 50 %. Maintenant vous pouvez voir que nous avons cette forme circulaire. OK, maintenant nous voulons le déplacer un peu vers le haut. Je vais revenir ici et ajouter 15 pixels négatifs en haut. Allons également ici et changeons la couleur de la bordure en transparent au lieu du blanc. Incroyable. Maintenant, le dessus du verre ressemble exactement à ce que nous voulons. Une dernière chose, ajoutons une ombre en bas de la boîte. Je vais revenir ici et ajouter l'ombre de la boîte, valeur horizontale nulle et 15 pixels comme valeur verticale. Ensuite, une valeur de flou nulle et une couleur gris foncé comme couleur de l'ombre Maintenant, nous avons cette jolie ombre en bas. D'accord, si nous regardons notre exemple, vous pouvez voir que nous avons cette partie semi-transparente qui donne au verre un aspect réaliste. Revenons en arrière et faisons-le. Je vais le faire en utilisant le pseudo élément after du div interne. Je vais le cibler et ajouter au contenu la position des chaînes vides, la position absolue en haut, 70 pixels à gauche, 30 pixels de largeur. 50 pixels et hauteur 250 pixels. Enfin, mettez en arrière-plan cette couleur grise semi-transparente. Vous pouvez maintenant voir que nous avons ce fond gris semi-transparent que nous voulons. Très bien, allons-y et créons le liquide à l'intérieur du verre. Nous allons le faire en utilisant le liquide. Je vais le cibler et ajouter la position absolue en haut à 50 pixels à gauche, cinq pixels, cinq pixels, cinq pixels en bas. Puis, mettez cette couleur bleu clair en arrière-plan. Maintenant, vous pouvez voir que nous avons ce fond bleu qui recouvre le verre. Mais maintenant, nous voulons ajouter quelques courbes ici en bas afin de les assortir au verre. Je vais revenir ici et ajouter un rayon de bordure de 30 pixels. Le rayon inférieur de la bordure est également de 30 pixels. Maintenant, vous pouvez voir que le Liquid Div ressemble exactement à ce que nous voulons. Très bien, revenons en arrière et examinons notre exemple. Vous pouvez voir que nous avons cette partie circulaire supérieure ici. Créons-le très rapidement. Je vais cibler le pseudo élément before du div liquide et y ajouter du contenu. Chaînes vides, position, largeur absolue 100 %, hauteur 20, rayon de bordure 50 %, puis fond cette couleur bleu plus foncé. Vous pouvez voir que nous avons ce fond bleu circulaire. Mais déplaçons-le un peu vers le haut. Je vais aller ici et ajouter à moins dix pixels. Incroyable. Le verre ressemble exactement à ce que nous voulons. Et nous avons terminé le dessin. Mais maintenant, nous devons l'animer. Revenons en arrière et faisons-le. Je vais créer une nouvelle animation, nommée Animate Liquid. Ensuite, au début de la durée de l' animation, à 0 % à 20 %, j' ajouterai 50 pixels depuis le début de l'animation à 20 % de la durée de l'animation. Le liquide bleu restera tel quel. Il ne bougera pas car nous n'avons pas modifié sa valeur maximale. Ensuite, à 50 % de la durée de l' animation, à 70 %, nous définirons la propriété supérieure sur 320 pixels. La propriété supérieure passera de 50 pixels à 320 pixels pendant la durée de l'animation comprise 20 % et 50 % de la durée de l' animation. Ensuite, il restera immobile pendant un certain temps à 320 pixels, passant durée d'animation de 50 % à 70 %. Enfin, en dessous de cette durée, à la fin de la durée de l' animation à 100 %, nous remettrons le sommet à 50 pixels. Très bien, montons ici dans le Liquid Div et ajoutons une animation animate Liquid, 5 secondes linéaires, infinies Maintenant, vous pouvez voir qu'après avoir rechargé la page, le liquide à l'intérieur du verre attend un peu, puis se déplace vers le bas Attend un peu en bas, puis revient en haut. Cela continue sur une boucle infinie. Revenons en arrière et changeons la couleur du deuxième liquide. Je vais cibler le deuxième verre cibler le liquide qu'il contient et ajouter du fond, cette couleur jaune. J'ajouterai également un délai d'animation de 2,5 secondes. Je vais le copier, sélectionner Coller et cibler le pseudo élément précédent, qui se trouve en haut de la page. Ensuite, j'ajouterai du fond, cette couleur jaune plus foncé. Vous pouvez maintenant voir les changements de couleur qui nous donnent cette couleur jaune. Et comme vous pouvez le constater, lorsqu'une tasse est remplie, l'autre se vide, ce qui nous donne exactement l' effet souhaité. 135. Animation fantaisiste de chargement de bordure: Bonjour à tous. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce bel effet de chargement. Vous pouvez voir que nous avons ces cercles élastiques qui tournent et nous donnent ce bel effet ondulé. Nous allons apprendre comment procéder à l'aide de la propriété border radius. Commençons donc. Je vais aller ici dans mon code HTML et ajouter un Div avec une classe de chargeur. À l'intérieur, j' ajouterai trois travées, puis en dessous, j'ajouterai un H deux et ajouterai du chargement à l'intérieur Ensuite, je vais accéder à mon CSS et cibler le corps. Ajoutez un centre de contenu display, Flex, Justify pour centrer le chargeur horizontalement. Et alignez les éléments au centre pour les centrer verticalement. Ensuite, j'ajouterai en hauteur, 100 VH et en arrière-plan cette couleur gris foncé Ensuite, je ciblerai le chargeur et ajouterai la position, la largeur relative, 200 pixels, la hauteur 200 pixels. Affichez ensuite Flex, Justify Content Center, Align Items center. Ensuite, je vais cibler les travées à l'intérieur du chargeur. Ajoutez la position absolue, puis zéro en haut à gauche zéro, largeur 100 % hauteur, 100 % rayon de bordure 50 %, puis bordure de deux pixels en blanc uni. Vous pouvez maintenant voir que nous avons les trois travées sous forme cercles blancs placés les uns sur les autres Bien, ciblons maintenant chaque travée et modifions le rayon de bordure de chacune d'elles pour lui donner ce joli aspect élastique. Je vais cibler la première travée ici en disant loadspan nth child one Ensuite, j' ajouterai un rayon de bordure. Afin de contrôler totalement l'apparence de cette bordure, nous utiliserons un site Web nommé Fancy Border Radius Generator. Vous pouvez voir que nous avons cette forme que nous pouvons facilement contrôler pour obtenir la forme que nous voulons. Jouons un peu avec. Disons que nous voulons ce rayon. Je vais le copier et le coller ici. Vous pouvez maintenant voir que la première travée possède désormais cette jolie bordure élastique. OK, maintenant je vais copier ce premier sélecteur, le coller et cibler le second Sélectionnez, collez-le une fois de plus et ciblez le troisième. Ensuite, je retournerai le site Web du générateur de bordures sophistiqué et générerai un nouveau rayon de bordure, juste un rayon aléatoire. Ensuite, je vais le coller ici dans la deuxième tranche. OK, je vais revenir en arrière, générer une autre valeur et la coller ici dans la troisième plage. Vous pouvez maintenant voir que nous avons trois bordures différentes qui ont un rayon de bordure différent. Très bien, nous allons maintenant créer l'animation. Je vais en créer un nouveau. Nommez-le rotation. Et à l'intérieur, au début de la durée de l'animation à 0 %, j' ajouterai la transformation, la rotation à zéro degré. Ensuite, à 100 % de la durée de l' animation, j'ajouterai une rotation de transformation à 360 degrés. Ensuite, je vais monter ici dans le sélecteur d'intervalle et ajouter une rotation d'animation, durée d'animation de 5 secondes, puis linéaire, infinie Vous pouvez maintenant voir que les trois bordures pivotent en même temps que les trois travées. Très bien, pour obtenir l'effet ondulé élastique que nous voulons, nous pouvons jouer un peu avec les bordures, par exemple Nous pouvons faire pivoter une bordure dans le sens inverse. Essayons ça. Je vais revenir ici dans la deuxième période et ajouter le sens inverse de l'animation. Je pense que vous pouvez voir que nous avons déjà un bon effet. Nous pouvons le laisser tel quel ou essayer autre chose. Je vais entrer dans le troisième sélecteur et ajouter durée d'animation de 3 secondes au lieu de cinq, afin qu'elle pivote plus rapidement Maintenant, vous pouvez voir qu'il se déplace plus vite, ce qui nous donne un bel effet. Très cool. Il ne nous reste plus qu'une chose : ajouter des styles simples au H deux. Je vais le cibler et ajouter de la couleur blanche et un poids de police de 500. Maintenant, ça a l'air beaucoup plus beau. Et c'est tout, tout le monde, pour cet exemple simple mais magnifique. Je vous verrai dans les prochaines vidéos. 136. Chargeur rougeoyant rotatif: Bonjour à tous. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce bel effet de chargement. Nous avons également ce chargeur avec ce cercle lumineux qui tourne, nous donne notre bel exemple Voyons comment nous pouvons le créer. Je vais commencer ici dans mon code HTML en ajoutant une section, puis à l'intérieur je vais ajouter un div, lui donnant une classe de chargeur. Ensuite, je vais accéder à mon CSS et cibler la section. Ajoutez ensuite un affichage, une flexibilité, justification du centre de contenu et un centre d' alignement des éléments. Puis hauteur minimale, 100 VH et fond cette couleur marine. Très bien, alors je vais cibler le div du chargeur et ajouter la position, largeur absolue 150 pixels, 150 pixels, fond rouge pour le moment, puis rayon de bordure 50 %. Très bien, maintenant vous pouvez voir que nous avons ce cercle rouge positionné au centre du navigateur. Nous allons apprendre quelque chose de nouveau dans cette leçon, le dégradé CSS. Nous voulons changer l'arrière-plan de ce cercle en un dégradé de deux couleurs bleues. Au lieu de cette couleur rouge, nous utiliserons ce site Web pour générer le dégradé. Ce site Web nous aide à créer un dégradé de couleurs. Vous pouvez voir que nous avons ces deux couleurs que nous pouvons utiliser pour générer le dégradé. Je vais changer cette première couleur pour cette couleur marine. C'est la couleur de notre section. Et la deuxième couleur que nous voulons est le bleu clair. Je vais le mettre ici. Je vais également jouer avec ce slider ici. Pour modifier l'intensité du dégradé, je veux cette forme de dégradé. Nous pouvons aller ici et copier ce code. Retournez ensuite à mon code CSS dans le chargeur et changez la couleur d'arrière-plan du rouge à cette nouvelle valeur que nous avons copiée depuis notre site Web. Vous pouvez maintenant voir que la couleur d' arrière-plan du cercle est maintenant remplacée par ce dégradé cool. Très bien, maintenant nous allons continuer. Nous allons aller ici et cibler le pseudo élément before du div du chargeur et ajouter du contenu, des chaînes vides, une position absolue. Ensuite, nous voulons masquer une partie de cette forme ici. Pour obtenir la forme finale que nous voulons, je vais revenir ici et ajouter un encart de 20 pixels à partir du haut, 20 pixels à droite, puis zéro en bas et zéro à gauche également Alors je vais rajouter du rouge pour le moment. Je vais également ajouter un rayon de bordure 50 %. Maintenant, vous pouvez voir que nous avons ce cercle rouge qui recouvre notre forme. Bien, revenons en arrière et changeons la couleur de fond pour la même couleur bleu marine que celle que nous avons utilisée sur l'arrière-plan de la section. Maintenant, vous pouvez voir que nous avons cette forme circulaire exactement comme nous l'avons gagnée. Très bien, créons le petit cercle lumineux qui sera positionné ici Je vais revenir en arrière et cibler le pseudo élément after loader div et ajouter du contenu chaînes vides, une position, une largeur absolue de 40 pixels. Hauteur 40 pixels également. Ensuite, mettez en arrière-plan notre couleur bleu clair et le rayon de bordure 50 %. Maintenant, vous pouvez voir que nous avons ce cercle bleu ici. Nous voulons maintenant le positionner ici. Je vais revenir en arrière et en haut de 50 pixels, à droite, moins huit pixels. Vous pouvez maintenant voir qu'il est positionné exactement à l'endroit que nous voulons. Revenons en arrière et donnons-lui ce bel effet lumineux. Pour ce faire, nous utiliserons la propriété box shadow. J'ajouterai l'ombre de la boîte zéro en tant que décalage horizontal, un autre zéro en tant que décalage vertical. Ensuite, une valeur de flou de cinq pixels. Enfin, cette couleur bleu clair. Maintenant, vous pouvez voir que nous avons cette toute petite ombre. Pour obtenir l'effet lumineux que nous voulons, nous pouvons utiliser une astuce simple Nous allons copier cette valeur d'ombre, la coller plusieurs fois, disons trois fois. À chaque fois, nous augmenterons la valeur du flou Progressivement, nous allons le changer en 25 pixels ici, puis 50 pixels et 75 pixels. En faisant cela, vous pouvez voir que nous avons ce bel effet lumineux Chaque fois que vous souhaitez créer un effet lumineux, vous pouvez utiliser la propriété box shadow et augmenter progressivement la valeur de flou, comme nous venons de l' Très bien, nous allons maintenant créer l'animation de rotation. Je vais créer une nouvelle animation. Nommez-le : faites pivoter à l'intérieur à 100%. J'ajouterai une transformation, une rotation à 360 degrés. Ensuite, ici, dans le div du chargeur, j'ajouterai une animation. Rotation de 2 secondes, linéaire, infinie. Vous pouvez maintenant voir que le chargeur tourne sur une boucle infinie. 137. Animation de texte créative avec une propriété de chemin d'attache: Bonjour à tous, bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons apprendre comment créer cette jolie animation de texte. Vous pouvez voir que l'écran est divisé horizontalement en deux moitiés. La moitié supérieure est sur fond vert et la partie inférieure sur fond blanc. De plus, le texte ici passe de la partie supérieure à la partie inférieure et passe de Bonne année 2031 à au revoir 2030 De plus, la couleur passe du blanc au vert. Nous allons utiliser la propriété clip path pour créer cette division du navigateur Commençons et faisons-le maintenant. Je vais commencer ici dans mon code HTML en ajoutant une section. Ensuite, à l'intérieur, j'ajouterai un div. Donnez-lui une classe de boîte et une autre classe de boîte. Ensuite, à l'intérieur de ce div, j'ajouterai un H deux. À l'intérieur, je vais ajouter une travée, dire au revoir. Puis une autre période à côté, disons 2030. Ensuite, je vais copier ce div, coller à nouveau et changer la case un en case deux. Dans la première tranche, j'ajouterai « Bonne année ». Dans la deuxième période, j'ajouterai 2031 Très bien, maintenant je vais aller dans mon CSS et cibler le corps. Ensuite, j'ajouterai Overflow hidden. Ensuite, je vais cibler la section qui contient les deux divs. J'ajouterai la largeur relative de la position, 100 % hauteur 100 VH. Ensuite, je ciblerai la boîte div et ajouterai position absolue en haut du zéro, zéro à gauche, puis la largeur 100 %, la hauteur 100 % également. Les deux divs auront toute la hauteur et la largeur de la section Maintenant, rechargeons la page. vous pouvez le constater, parce que nous avons défini la position absolue des cases divs, le texte est empilé les uns sur autres dans le coin supérieur gauche de la Revenons en arrière et centrons le texte à l'intérieur de la page. Je vais y retourner et ajouter également display Flex, justify, content center et Align items center. Vous pouvez maintenant voir que le texte est centré à l'intérieur de la page. Bien, revenons en arrière et ciblons la deuxième case qui a la classe de case deux et ajoutons un arrière-plan, cette couleur verte. Vous pouvez maintenant voir que la deuxième case a cette couleur verte, et qu'elle cache la première case en dessous parce qu' elle vient après elle dans notre code HTML. OK, maintenant nous voulons que seule la moitié supérieure de la deuxième case apparaisse, ce qui signifie que nous voulons la diviser en deux moitiés et n'avoir que la moitié supérieure visible Nous pouvons le faire facilement en utilisant la propriété clip path. Je vais accéder au clip du site Web et sélectionner la forme trapézoïdale Ensuite, comme nous voulons couper la moitié inférieure, je vais le faire rapidement. Ensuite, je vais copier le code ici, revenir en arrière et le coller dans la deuxième case div. Vous pouvez maintenant voir que la deuxième case est parfaitement découpée et que le texte qu'elle contient est parfaitement centré, il est également découpé en deux moitiés avec Bien, ajoutons maintenant quelques styles aux deux H. Je vais le cibler, ajouter une taille de police de 45 pixels. Nous voulons que les deux travées à l'intérieur de chaque titre soient réparties sur deux lignes, comme nous le voyons dans notre exemple Nous avons la bonne année sur une ligne et 2031 se trouve en dessous. Il en va de même pour le deuxième titre. C'est la raison pour laquelle nous avons ajouté deux travées à l'intérieur du H deux. Revenons en arrière et faisons-le. Je vais aller ici à l'intérieur du H two et ajouter Display Flex. Puis fléchissez la colonne de direction. Ils sont maintenant séparés en deux lignes. Nous pouvons clairement voir que si nous revenons ici et que nous ajoutons transform translate y négatif 70 %. Maintenant vous pouvez voir que puisque nous avons déplacé le H deux vers le haut, nous voyons maintenant le second H deux et le premier est caché en dessous. Si nous voulons voir les deux premiers H, nous pouvons revenir en arrière et faire passer ce chiffre à 70 % au lieu de 70 %. Maintenant, vous pouvez voir que nous en avons d'ici 2030. Et le deuxième H deux est masqué depuis que nous avons découpé le deuxième cadre, il n'apparaît donc pas Bien, revenons en arrière et remettons la propriété de traduction à moins 70 %. J'ajouterai également du texte, un centre de ligne afin de centrer le texte. OK, changeons la couleur du H deux qui apparaît ici. Je vais cibler les deux H à l'intérieur de la deuxième case et ajouter de la couleur blanche. Bien, ciblons maintenant la deuxième plage des H deux. C'est l'année pour y ajouter quelques styles. Je vais dire span nith child two et ajouter une hauteur de ligne un et une taille de police deux Bien, créons l' animation qui déplace le texte vers le haut ou vers le bas. L'idée de l'animation est traduire de manière animée la fonction Y afin de déplacer les H deux verticalement Comme nous l'avons vu lorsque nous avons joué avec la valeur H deux. Je vais me rendre ici et créer une nouvelle animation. Nommez-le, animez-le. Nous voulons que le texte commence à se déplacer du haut vers le bas. Mais nous voulons qu'il reste un petit moment dans la moitié supérieure, puis qu'il passe à la moitié inférieure. Asseyez-vous un peu dans la moitié inférieure et revenez à la moitié supérieure et ainsi de suite. Je dirais qu'à 0 % de la durée de l' animation, à 45 %, j'ajouterai transform translate y négatif 70 % afin que le texte reste dans sa position depuis le début de la durée de l'animation à 45 % avant qu'il ne se déplace. Ensuite, en dessous de ce chiffre, à 55 % à 90 %, j'ajouterai la transformation translation Y 70 %. Cela signifie que la translation Y 70 %. Cela signifie que de 45 % de la durée de l' animation à 55 %, la position passera du haut ( 70 %) au bas 70 %). De 55 % à 90 % elle restera dans cette nouvelle position en bas. Ensuite, nous voulons le déplacer vers le haut. Je dirais qu'à 100 %, j'ajouterai nouveau transform translate y négatif 70 %. Ensuite, je vais monter ici dans le sélecteur H two et ajouter animation animée de 3 secondes. Entrez facilement à l'infini. Vous pouvez maintenant voir que le texte se déplace de haut en bas, d' arrière, ce qui nous donne ce bel effet d'animation. Il ne reste plus changer la couleur du texte en vert. Quand il se déplacera vers le bas, je reviendrai ici et dans le sélecteur H deux, j'ajouterai de la couleur, notre couleur verte Très bien, tout le monde, c'est tout pour cette leçon. J'espère que vous en apprendrez quelque chose, et je vous verrai dans un autre. 138. dessiner une ligne autour d'un button avec une icône de crayon: Salut tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce joli effet de survol de boutons Vous pouvez voir que nous avons ce bouton et ce crayon dans le coin supérieur gauche. Et lorsque je passe le curseur sur le bouton, le stylet trace une bordure autour du bouton, puis le remplit d'un fond gris foncé Très bien, voyons comment créer cet effet. Je vais commencer ici dans mon code HTML en ajoutant une balise d'ancrage. Je vais dire Button. Ensuite, j' ajouterai quatre travées. Chaque intervalle sera une ligne des quatre lignes qui créent la bordure entourant le lien. Ensuite, je vais accéder à mon CSS et cibler le corps. Ajoutez ensuite display Flex, justify, content center, A line items center également, puis en hauteur 100 VH. Ensuite, je vais cibler la balise d'ancrage et ajouter un rembourrage relatif à la position, 20 pixels en haut et en bas et 40 pixels de gauche à droite Ensuite, j'ajouterai une taille de police de 24 pixels, épaisseur de police, une couleur en gras, cette couleur gris foncé. Transformez ensuite la décoration du texte en majuscules, les lettres étant espacées de deux pixels. Travaillons maintenant sur la création des quatre lignes qui entourent le lien. Nous allons le faire en utilisant les quatre travées. Je vais cibler le premier intervalle en disant «  span nth child one Je vais également cibler la troisième période. Ensuite, j'ajouterai de la largeur, 100 % de hauteur, un arrière-plan de trois pixels, notre couleur gris foncé. Ce seront les lignes horizontales comme vous pouvez le voir ici. Repositionnons maintenant ces deux lignes. Je vais cibler la première période uniquement cette fois. Et ajoutez le zéro supérieur, zéro gauche également. Vous pouvez maintenant voir que la première ligne est positionnée en haut, au-dessus du lien. Animons-le maintenant de gauche à droite. Au survol, je vais revenir ici et ajouter échelle de transformation x zéro Ensuite, en passant la souris dessus, je sélectionnerai la première plage. Encore une fois, ajoutez l'échelle de transformation x un. Encore une fois, j'ajouterai également une transition de 0,2 seconde. Vous pouvez maintenant voir que la première ligne est désormais masquée, et lorsque vous passez le curseur sur le lien, elle s'agrandit Mais nous voulons qu'il s'étende de gauche à droite. Nous pouvons le faire en revenant ici et ajoutant l'origine de transformation à gauche. Très bien, faisons de même pour le résultat final. Je vais copier ces deux blocs de code, les coller et sélectionner la troisième plage. Ensuite, pour le positionner en bas, je vais aller ici et le changer de haut en bas. Je vais également changer l'origine de la transformation vers la droite, car nous voulons qu'elle passe à l'échelle de droite à gauche. Nous ajouterons également un délai de transition de 0,4 seconde. Vous pouvez maintenant voir que la ligne du bas s' agrandit de droite à gauche après la ligne du haut. Bien, maintenant nous allons créer les deux lignes des deux côtés. Je vais monter ici et copier cette cible, les deuxième et quatrième travées. Ensuite, je vais changer la largeur à trois pixels. Et changez la hauteur à 100 %. Maintenant, vous pouvez voir que nous avons les deux lignes ici. Repositionnons ces deux lignes. Je vais revenir ici et copier ces deux blocs de code. Collez-les et sélectionnez la deuxième plage. Ensuite, je vais changer de gauche ici à droite, transformer l'origine en haut. Changez ensuite l'échelle x en échelle y ici. Je vais également sélectionner la deuxième plage et changer l'échelle x en échelle y. J'ajouterai également une valeur de délai de transition de 0,2 seconde. Cette ligne s' échelonnera entre la première et la troisième, comme vous pouvez le voir ici. Créons rapidement la quatrième ligne. Je vais copier ce code, coller et sélectionner la quatrième ligne ici, ici. Ensuite, je vais changer d'ici à gauche et transformer l'origine vers le bas. Je vais aller ici et changer le délai de transition à 0,6 seconde. Maintenant, vous pouvez voir que lorsque je survole le lien, les quatre lignes se rejoignent l'une après l'autre, ce qui crée un bel effet Créons maintenant le fond gris foncé. Je vais le créer en utilisant le pseudo élément before de la balise d'ancrage. Je vais le sélectionner et ajouter du contenu. Chaînes vides, position absolue, zéro supérieur, zéro gauche, puis largeur 100 % hauteur 100 % également. Puis cette couleur gris foncé. Vous pouvez maintenant voir que nous avons ce fond gris foncé qui recouvre la balise d'ancrage. Très bien, travaillons sur l'effet de survol. Je vais revenir ici et ajouter l'échelle de transformation zéro. Puis un indice négatif. Ensuite, lorsque je survole le lien, je sélectionne le pseudo-élément avant et ajoute l'échelle de transformation 1 Puis la transition est de 0,5 seconde. Enfin, temporisez la transition de 0,8 seconde pour que l'arrière-plan apparaisse après les quatre lignes d'animation. Maintenant, lorsque je reviens en arrière et que je passe le curseur sur le lien, vous pouvez voir le fond gris foncé s'agrandir à partir du centre jusqu'à ce qu'il recouvre le lien Mais nous voulons qu'il s'agrandisse à partir du coin supérieur gauche, et non du centre. Je vais revenir ici et ajouter Transform Origin en haut à gauche, juste comme ça, vous pouvez voir l' arrière-plan s'agrandir depuis le coin supérieur gauche. Nous allons également changer rapidement la couleur du texte du lien en blanc. Je vais sélectionner le lien en le survolant, j'ajouterai de la couleur blanche Transition 0,2 seconde, puis délai de transition 0,8 seconde. Juste comme ça, le texte devient blanc. Très bien, ajoutons maintenant l'icône en forme de crayon à notre lien. Nous le ferons en utilisant la bibliothèque de polices géniales. Je vais chercher une police géniale D. Ensuite, je vais cliquer ici. Ensuite, je copierai le tag du lien. Retournez à mon code HTML et collez-le ici dans mon code HTML. Ensuite, pour obtenir le code de l'icône en forme de crayon, je vais revenir ici et cliquer sur ce lien. Pour accéder à la bibliothèque d'icônes, je vais sélectionner les icônes et rechercher un crayon, cliquer sur cette première icône et copier son Unicode. Ensuite, je vais revenir à mon CSS, sélectionner le pseudo élément after de la balise d'ancrage et ajouter du contenu. Ensuite, je vais coller l' Unicode du crayon, puis j'ajouterai une famille de polices. Font géniale. C' est ainsi que vous pouvez ajouter une icône de police géniale dans les pseudo-éléments. Ensuite, j'ajouterai la position zéro supérieur absolu, couleur zéro gauche, cette couleur gris foncé. Vous pouvez maintenant voir que nous avons cette icône en forme de crayon ici, mais nous voulons la déplacer légèrement vers le haut. Je vais revenir en arrière et passer du haut à 22 pixels négatifs. Bien, créons maintenant l' animation pour ce crayon, je vais créer une nouvelle animation, lui donner un nom, dessiner à l'intérieur. À 0 % de la durée de l'animation, j'ajouterai en négatif 22 pixels à gauche, 100 %. Cela fera démarrer le crayon dans le coin supérieur gauche du lien, soit 100 %. Cela fera démarrer le crayon dans le coin supérieur gauche du lien, puis je le copierai. Collez-le cinq fois. Ensuite, à 20 % de la durée de l' animation, je vais laisser le haut tel quel, puis passer à gauche à 100 %. Le crayon se déplacera vers le coin supérieur droit. Ensuite, à 40 % de la durée de l' animation, nous voulons que le crayon soit dans le coin inférieur droit. Je vais passer en haut à 100 % -22 pixels. Je vais changer la gauche à 100 %. Ensuite, à 60 %, nous voulons que ce soit dans le coin inférieur gauche, je vais changer le haut pour calculer 100 % à 22 pixels Je partirai de gauche car c'est zéro. Ensuite, à 80 %, nous voulons qu'il revienne à sa position initiale. Dans le coin supérieur gauche, je vais le laisser tel quel. Enfin, à 100%, nous voulons qu'il soit situé dans le coin inférieur droit. Nous allons passer du haut à 100 % à 22 pixels et à gauche à 100 %. Ensuite, je vais monter ici et en passant le curseur sur la balise d'ancrage, je sélectionnerai le pseudo-élément suivant , à savoir le crayon Je vais ajouter un dessin d'animation linéaire d'une seconde vers l'avant parce que nous voulons que cela ne se produise qu'une seule fois. Maintenant, lorsque je passe le curseur sur le lien, vous pouvez voir le crayon se déplacer dans les coins du lien , puis dans le coin inférieur droit sur fond gris, ce qui nous donne notre bel effet 139. Effet créatif de survol de menu des couleurs d'arrière-plan: Salut tout le monde. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu Vous pouvez voir que nous avons ce menu vertical. Lorsque nous survolons un lien, les autres liens deviennent semi-transparents De plus, le texte du lien est assemblé des deux côtés et apparaît en arrière-plan. Enfin, la couleur de fond change pour chaque lien. C'est un effet vraiment cool. Allons voir comment nous pouvons le faire. Je vais commencer ici dans mon code HTML en ajoutant une URL, puis à l'intérieur j' ajouterai un L I. À l'intérieur duquel j'ajouterai un lien et du texte. Je vais ajouter la maison dans le texte du lien. Ensuite, je copierai cette LI, je la collerai quatre fois et j'ajouterai informations sur les services, l'équipe et le contact. Ensuite, je vais accéder à mon CSS, cibler le corps et ajouter display, Flex, Justify content center, aligner les éléments, hauteur du centre, 100 VH, et enfin overflow Je ciblerai la position d' ajout U L relative En dessous, je ciblerai les éléments de la liste, ajouterai un style de liste, aucun texte, un centre de ligne. Ensuite, je vais cibler le lien et ajouter de la couleur. Cette décoration de texte de couleur gris foncé, aucune taille de police, trois rembourrages EMS, cinq pixels en haut et en bas et 20 pixels de gauche à droite Affichez ensuite le poids de police flexible intégré 700, la transition 0,5 seconde. Ensuite, lorsque vous survolez un lien, nous voulons que les autres liens aient un arrière-plan transparent Je vais aller ici et dire qu' en survolant l'UL, je sélectionnerai la balise d'ancrage et cette couleur transparente Désormais, lorsque vous survolez l'UL, tous les liens auront cette couleur transparente Nous voulons maintenant que le lien sur lequel nous survolons ait une couleur noire et un fond blanc Je vais revenir ici et cibler l'UL, puis le L I lorsque je survole le lien, j'ajouterai de la couleur noire, puis du fond blanc Maintenant, lorsque je survole un lien, tous les autres liens ont un arrière-plan semi-transparent, tous les autres liens ont un arrière-plan semi-transparent, à l' exception du lien sur lequel nous survolons Bien, commençons à travailler sur la création du gros texte qui apparaît en arrière-plan. Nous allons le faire en utilisant le pseudo élément before. Je vais sélectionner le pseudo élément before de la balise d'ancrage et ajouter du contenu. Supposons que je passe la souris pour ensuite ajouter la position absolue en haut à 50 % en haut à gauche, puis transformer Traduisez moins 50 % et moins 50 % Puis colorez le rouge. Afficher, Flex, justifier le centre de contenu, un centre d'éléments de ligne, puis une taille de police cinq, EMS, puis un index négatif un pour qu'il apparaisse dessous ou derrière les liens du menu. Je vais également ajouter le poids de la police. 900 et enfin le texte est transformé en majuscules. Maintenant, vous pouvez voir que nous avions ce gros mot rouge en arrière-plan. Bien, maintenant revenons en arrière et continuons. Je vais aller ici et changer la couleur pour cette couleur grise semi-transparente. Pour que le gros texte soit cohérent et produise l'effet souhaité, nous devons séparer les lettres. C'est ce que nous allons faire. Je vais ajouter un espacement entre les lettres, 500 pixels. Maintenant, vous pouvez voir que les lettres sont séparées. Très bien, je vais également aller ici et ajouter l'opacité zéro, puis l'espacement des lettres de transition 0,5 seconde plus bas. Lorsque nous survolerons le lien, nous sélectionnerons le pseudo-élément avant et ajouterons le texte des données d'attribut de contenu que nous récupérerons le texte des données à l'intérieur du lien sur lequel nous survolons le pointeur de la souris nous sélectionnerons le pseudo-élément avant et ajouterons le attribut de contenu que nous récupérerons le texte des données à l'intérieur du lien sur lequel nous survolons le Ensuite, nous ajouterons de l'opacité, une lettre espacée de dix pixels seulement, afin que les lettres se rejoignent Et je vais aller ici et supprimer le mot surligné de la propriété du contenu Maintenant, vous pouvez voir que lorsque je passe le curseur sur un lien, nous avons cet effet où le texte du lien s'assemble en arrière-plan OK, ajoutons également une couleur d' arrière-plan pour le texte en arrière-plan. Nous voulons une couleur de fond différente pour chaque lien. Nous ciblerons chaque lien individuellement. Je ciblerai le premier lien en disant « L I child one ». Ensuite, nous ciblerons avant le pseudo élément du lien à l'intérieur de ce premier LI. À l'intérieur, j' ajouterai du fond, cette jolie couleur bleu clair. Maintenant, lorsque vous survolez le premier lien, vous pouvez voir que nous avons ce fond bleu clair qui apparaît avec le texte Mais nous voulons qu'il ait toute la largeur et la hauteur du corps. Je vais aller ici en arrière-plan et ajouter largeur de 100 V et une hauteur de 100 H. Maintenant, l'arrière-plan occupe toute la largeur et la hauteur du corps. Bien, faisons de même pour les autres liens. Je vais mettre la vidéo en pause et le faire rapidement. Comme vous pouvez le voir, je viens de sélectionner tous les autres liens et d'ajouter une couleur de fond différente pour chaque lien. Maintenant, lorsque je passe le curseur sur un lien, vous pouvez voir que différentes couleurs d' arrière-plan apparaissent, ce qui nous donne, c'est vrai L'effet exact que nous voulons. 140. Animation de gouttes de pluie dans les nuages: Bonjour à tous. dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer une autre animation intéressante, Un nuage qui pleut Vous pouvez voir que nous avons ce dessin de nuages et que des gouttes de pluie en tombent. C'est une animation vraiment cool. Voyons comment nous pouvons le créer. Je vais commencer ici dans mon code HTML en ajoutant un, en lui donnant une classe de conteneur. Ensuite, à l'intérieur, j' ajouterai un autre div avec la classe de cloud en dessous. J'ajouterai une troisième division avec une classe de pluie. À l'intérieur, je vais ajouter une travée. Nous allons créer les gouttes de pluie en utilisant cette travée, mais nous aurons besoin de beaucoup de travées pour créer ces gouttes Je vais le faire très rapidement. Vous pouvez voir que j'ai ajouté beaucoup de spans ici. J'ai ajouté 20 travées pour toutes les gouttes. Maintenant, je vais accéder à mon CSS, sélectionner le corps et ajouter Display, Flex, Justify content center, Align items, center, hauteur minimale, arrière-plan 100 VH, cette couleur bleu clair Ensuite, en dessous, je vais cibler le conteneur et ajouter une hauteur relative de position de 400 pixels avec 320 pixels. Afin de créer la ligne en bas, je vais ajouter une bordure inférieure de trois pixels en blanc uni. Bien, créons le cloud. Je vais maintenant cibler le div avec la classe de cloud et ajouter la position, la hauteur relative, 100 pixels, largeur 100 % pour occuper toute la largeur du conteneur. Puis 50 pixels en haut et fond blanc. Enfin, la bordure a un rayon de 100 pixels pour avoir des courbes dans les coins. Nous avons maintenant cette forme et ce sera la base de la forme du nuage. OK, continuons. Je vais revenir ici et sélectionner le pseudo élément avant du cloud div et ajouter du cloud div et ajouter du contenu, des chaînes vides, une position, une largeur absolue 110 pixels. Hauteur de 110 pixels également. Puis rayon de bordure de 50 % pour que ce soit un cercle. Ensuite, je vais ajouter le fond rouge pour le moment. Vous pouvez maintenant voir que nous avons ce fond rouge situé à gauche du cloud div. Je vais aller ici et ajouter 50 pixels négatifs pour le décaler vers les 40 premiers pixels et le pousser un peu vers la droite. Maintenant, vous pouvez voir qu'il est déplacé ici dans cette nouvelle position. Et ce sera la deuxième partie de la forme du nuage. Passons au travail sur la troisième partie. Nous allons le créer avec une petite astuce sympa en utilisant la propriété box shadow. Je vais aller ici et ajouter une ombre de boîte, 90 pixels comme décalage horizontal, zéro comme décalage vertical parce que nous ne voulons pas qu'elle se déplace verticalement. Puis zéro comme valeur de flou, car nous ne voulons pas qu'elle soit floue Et 30 pixels comme valeur de spread. Cette valeur d'écart positive augmentera la taille de l'ombre, nous aurons donc un cercle plus grand. Ensuite, nous allons ajouter une couleur bleue pour le moment. Maintenant, vous pouvez voir que nous avons ce grand cercle bleu situé à droite du premier cercle, croyez-le ou non, mais la forme du nuage est déjà terminée. ne nous reste plus qu' à changer les couleurs de ces deux cercles en blanc afin d'avoir la forme de nuage que nous recherchions. Je vais le faire rapidement maintenant, vous pouvez voir qu'en faisant cela, la forme du nuage ressemble exactement à ce que nous voulons. Bien, travaillons à la création des gouttes. Je vais sélectionner la pluie et ajouter la position, affichage relatif, le flex, la justification, le centre de contenu, un index. Ensuite, en dessous, je vais sélectionner les travées à l'intérieur de la plongée sous la pluie et ajouter de la largeur, dix pixels de hauteur Fond de pixels rouge pour le moment. Rayon de bordure : marge de 50 %, puis marge zéro en haut et en bas et deux pixels de gauche à droite. Maintenant, vous pouvez voir que nous avons ces petits cercles rouges qui seront les gouttes du nuage. Très bien, créons l' animation qui déplacera ces gouttes. Je vais en créer un nouveau. Nommez-le, puis à l'intérieur, à 0 % de la durée de l'animation, j'ajouterai transform translate Y zero scale one. Ensuite, je vais le copier, le coller deux fois. Ensuite, à 70 %, je vais changer la fonction de traduction à 288 pixels et laisser l'échelle telle quelle. Ensuite, à 100 %, je changerai également la translation Y à 288 pixels, la fonction d'échelle à zéro. Je vais monter ici et dire animation en 5 secondes, linéaire, infinie, et transformer l'origine en bas. Vous pouvez maintenant voir que les gouttes tombent du nuage, atteignent le bas, puis qu'elles diminuent jusqu'à ce qu'elles disparaissent. Parce que nous avons mis la fonction d'échelle ici à zéro. Mais maintenant, nous voulons que les gouttes tombent de manière aléatoire, unes après les autres. Nous pouvons le faire en modifiant la durée de l'animation pour chaque intervalle, mais il faudra beaucoup de temps pour sélectionner chaque intervalle individuellement et modifier durée de l' animation une par une. Nous pouvons utiliser des variables CSS pour nous aider à le faire. Je vais revenir ici dans mon code HTML, et dans la première plage, j' ajouterai deux tirets de style, et c'est ainsi que nous définissons une variable en CSS Ensuite, le nom de la variable, disons secondes. Ensuite, j'ajouterai 11 comme nombre de secondes pour la première période. Je vais également faire de même pour tous les autres intervalles et changer la valeur des secondes à chaque fois Vous pouvez maintenant voir que j'ai ajouté différentes valeurs pour les secondes pour toutes les durées. Ce que nous pouvons faire maintenant, c'est revenir à notre CSS. Et dans le sélecteur d'intervalle, j' ajouterai la durée de l'animation calculée en 15 secondes divisée par variable que nous avons déclarée, à savoir les Ce qui va se passer ici, c'est que pour chaque intervalle, la durée de l'animation sera calculée à l'aide de cette ligne de code, 15 divisée par la valeur que nous avons ajoutée à l' intervalle dans notre code HTML. Comme nous avons ajouté différentes valeurs, nous obtiendrons des valeurs différentes pour chaque durée d'animation. 141. Animation créative de chargeur rougeoyant: Bonjour à tous. Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce bel effet de chargeur lumineux Vous pouvez voir que nous avons ces cercles lumineux qui brillent puis disparaissent Pour ce faire, nous utiliserons la propriété box shadow. Jetons donc un coup d'œil et voyons comment nous pouvons le faire. Je vais commencer ici dans mon code HTML en ajoutant une section, puis à l'intérieur je vais ajouter un div, lui donner une classe de chargeur. Ensuite, à l'intérieur de celui-ci, j'ajouterai une travée. Nous utiliserons des variables CSS. Ici, j'ajouterai du style, je nommerai la variable I. Je mettrai sa valeur à un, et nous aurons besoin de cette valeur. Plus loin dans nos styles CSS, je ferai de même pour toutes les autres extensions. Vous pouvez voir que nous avons maintenant 20 travées et ce seront les petits cercles ou ampoules qui brilleront J'ai également ajouté différentes valeurs pour la variable. Ces valeurs passent de 1 à 20 pour la dernière période. Très bien, maintenant je vais passer à mon CSS. Sélectionnez la section et ajoutez display Flex, Justify, centre de contenu, alignement des éléments, centre en hauteur, 100 VH, puis arrière-plan de cette couleur bleu marine foncé Ensuite, je ciblerai le div du chargeur et ajouterai la position une hauteur relative de 120 pixels. Largeur 120 pixels également. En dessous, je vais cibler les portées à l'intérieur de la division du chargeur. Ajoutez la position zéro supérieur absolu, zéro gauche également, la largeur 100 % pour occuper toute la largeur du chargeur et la hauteur de 100 % également. Ensuite, j'ajouterai un arrière-plan bleu temporaire. Vous pouvez maintenant voir que nous avons ce fond bleu d'une largeur et d'une hauteur de 120 pixels. Cela est dû au fait que nous avons défini la largeur et hauteur à 100 % de leur conteneur, le Loader div, qui a à son tour une largeur et une hauteur de 120 pixels. Ce fond bleu n'est en fait pas un seul arrière-plan, mais 20 arrière-plans qui se recouvrent ou couvrent le même espace, et chacun d'eux représente une plage que nous avons ajoutée dans notre code HTML. Cela n'a peut-être aucun sens pour le moment, mais nous verrons tout cela clairement dans un instant. Pour créer notre effet, nous devrons faire pivoter chaque travée d'un degré différent afin que toutes les travées apparaissent Comme nous avons 20 travées, nous pouvons diviser 360 degrés par 20, et nous en obtiendrons 18 Pour que toutes les travées apparaissent, nous devons faire pivoter la première travée de 18 degrés, puis la deuxième de 36, et la troisième de 54 degrés, et ainsi de suite À chaque fois, nous augmentons le degré de rotation de 18. Faisons-le très rapidement. Je vais aller ici et ajouter la variable transform rotate 18 degrés fois v. Ce qui va se passer ici, c'est que pour chaque intervalle, elle sera pivotée d'un degré égal à 18 fois quelle que soit la valeur de sa variable Par exemple, la première plage sera pivotée d'un degré égal à 18 fois un, soit 18 La cinquième plage sera pivotée d'une valeur égale à 18 fois cinq , soit 90 degrés, et ainsi de suite Mais tu ne veux pas m'entendre juste en parler. Voyons vraiment ce que nous allons obtenir. Sympa. Vous pouvez maintenant voir que nous avons cette forme où toutes les travées sont visibles puisqu' elles ont été pivotées d'un degré calculé qui les fait toutes apparaître Créons les petits cercles attachés à ces travées. Nous allons les créer en utilisant le pseudo élément before. Je vais le sélectionner ici et ajouter du contenu. Chaînes vides, position zéro supérieur absolu, zéro gauche avec 15 pixels. Hauteur, 15 pixels également. Ensuite, le rayon de bordure est de 50 % et le fond, cette couleur bleu clair. Maintenant, vous pouvez voir que nous avons ces petits cercles. Supprimons ce fond bleu car nous n'en avons plus besoin. Vous pouvez maintenant voir clairement tous les cercles attachés aux 20 travées. OK, maintenant faisons-les briller très rapidement. Je vais aller ici et ajouter de l'ombre à la boîte. Cette valeur, ce que je viens de faire, est augmenter progressivement la valeur de flou pour la propriété box shadow Et c'est ce qui lui donne un effet brillant, comme celui que vous voyez ici Bien, nous allons maintenant créer l'animation que nous allons appliquer à ces cercles. Je vais créer une nouvelle animation, nommez-la Animate. Ensuite, à l'intérieur, et à 0 % de la durée de l'animation, j'ajouterai l'échelle de transformation 1. Ensuite, à 80 % et 100 %, j' ajouterai l'échelle de transformation zéro. Au début de la durée de l' animation. À 0 %, les cercles seront à leur taille normale. Ensuite, de 0 % à 80 %, la taille des cercles sera réduite jusqu'à ce qu'elle devienne nulle. Ensuite, il reste à zéro de 80 % à 100 %. OK, montons ici et ajoutons cette animation. J'ajouterai une animation de 2 secondes linéaire, infinie. Maintenant, vous pouvez voir que les cercles se rétrécissent jusqu'à ce qu'ils disparaissent. Et puis elles s'agrandissent à nouveau, nous donnant ce bel effet lumineux et brillant qui ressemble à des ampoules Et c'est déjà un bel effet que nous pouvons utiliser sur nos projets. Mais maintenant, essayons des trucs sympas. Nous pouvons utiliser la propriété animation delay pour manipuler le moment où l'animation du cercle commence, ce qui peut nous donner des effets intéressants. Essayons-le. Je vais aller ici et ajouter un délai d'animation 0,1 seconde fois ou une variable. Chaque intervalle aura un délai d'animation différent en fonction de la valeur de la variable. Essayons-le. Vous pouvez voir que nous avons ce bel effet cool qui donne l'impression que les cercles tournent les uns autour des autres. Essayez une autre valeur, je vais changer 0,1 seconde en 0,2 seconde. Maintenant, vous pouvez voir que nous avons un autre effet cool qui divise le cercle en deux moitiés qui tournent l'une après l'autre. Voici une suggestion. pas jouer un peu avec le délai d'animation et les valeurs de durée de l'animation voir quels effets intéressants vous pouvez obtenir ? 142. Effet de survol d'animation de menu curseur: Bonjour à tous. Bienvenue dans une autre nouvelle leçon du cours. Dans cette leçon, nous allons créer un autre nouvel effet de survol de menu Vous pouvez voir que nous avons ce menu vertical dont les liens ont une bordure gauche. Et lorsque nous survolons la bordure gauche, vous pouvez voir qu'elle se déplace vers le côté droit du lien et que le trait du lien est rempli de couleur, qui nous donne cet effet cool Je vais commencer ici dans mon code HTML en ajoutant une URL, puis un L I à l'intérieur, et une balise d'ancrage à l'intérieur. Ensuite, j'ajouterai du texte de données pour le premier lien et je l' ajouterai à l'intérieur du lien. Ensuite, je vais le copier, le coller quatre fois. Je vais modifier le texte de chaque lien. Vous pouvez maintenant voir que nous avons des informations sur les services, l'équipe et les contacts. Bien, passons maintenant à notre CSS et ciblons le corps. Je vais ajouter display flex, justify, content center, aligner les éléments, center, min, height, 100 VH d' arrière-plan de cette couleur Ensuite, je ciblerai le U L et ajouterai position relative à l'affichage, la flexion, la flexion, la colonne et l'écart de 30 pixels. Ensuite, je ciblerai le L I et ajouterai style de liste relatif à la position N. Ensuite, en dessous, je ciblerai le lien et ajouterai la taille de police relative à la position pour l'EMS, décoration du texte, l'espacement autre que les lettres Deux pixels, hauteur de ligne, un texte EM transformé en majuscules. Afin de donner un contour au texte, je vais ajouter de la couleur transparente. Le trait de texte, un pixel, cette couleur grise. Vous pouvez maintenant voir que la couleur du lien est transparente et que le texte est entouré d'un contour gris. OK, continuons comme ça. Je vais sélectionner le pseudo élément avant du lien et ajouter du contenu à notre texte de données. Vous pouvez maintenant voir que nous avons le texte des données ici. À côté de chaque lien, je vais revenir en arrière et ajouter la position absolue. Maintenant que nous avons défini la position sur absolue, le texte des données se trouve juste au-dessus du lien texte. On dirait que c'est une chose, mais ajoutons de la couleur, cette couleur bleue. Vous pouvez maintenant voir que le texte des données a cette couleur bleue et le texte du lien d'origine se trouve en dessous ou en dessous sous forme de contour. Je vais également revenir en arrière et ajouter une bordure à droite, huit pixels solides, notre couleur bleue. J'ajouterai également un trait de texte, un pixel, notre couleur bleue. Maintenant, vous pouvez voir que nous avons cette bordure bleue sur la droite. Et le texte comporte également un trait bleu au lieu de gris. OK, maintenant nous voulons masquer le pseudo élément avant, ce texte bleu, et le faire apparaître uniquement lorsque nous survolons le lien Je vais aller ici et ajouter une largeur de 0 % puis un débordement masqué. Enfin, transition d'une seconde. Maintenant, vous pouvez voir que le pseudo-élément avant a une largeur de zéro qu'il est masqué et le contour du texte du lien d'origine est visible. Encore une fois, je vais revenir à mon code CSS et dire qu'en passant le curseur sur le lien, je vais sélectionner le pseudo-élément avant et ajouter une largeur 100 %. Maintenant, lorsque je passe le curseur sur un lien, vous pouvez voir la largeur du pseudo-élément avant augmenter à nouveau pour masquer le plan du lien. qu'elle s'agrandit, la bordure de droite se déplace avec elle, ce qui nous donne un bel effet. Mais vous pouvez voir que la frontière est très proche du lien. Ce serait mieux s'il y avait un espace entre le lien et la bordure Nous pouvons le faire en ajoutant de l'espace autour du texte du lien ainsi que du texte des données. Je vais accéder à mon code HTML et à l'intérieur du texte des données avant le texte du lien, j'ajouterai un espace ininterrompu qui est un caractère spécial en HTML qui ajoute des espaces dans le texte HTML. J'en ajouterai un autre avant le texte du lien et un autre après. Vous pouvez maintenant voir que la bordure s'est légèrement déplacée vers la gauche, et lorsque vous survolez le lien, il y a également un espace sur la droite Et ça lui donne une bien meilleure apparence. OK, je vais le faire très rapidement pour tous les autres liens. Maintenant, lorsque je survole un lien, vous pouvez voir que la bordure se déplace de droite à gauche En plus de la croissance du pseudo élément précédent, cela nous donne un effet vraiment cool. 143. Animation de points créatifs CSS: Bonjour à tous. Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce bel effet de chargement. Vous pouvez voir que nous avons cet effet où nous avons huit cercles, quatre d'entre eux sont fixes et les quatre autres tournent autour d'eux, qui nous donne cet effet cool. Je vais commencer ici dans mon code HTML en ajoutant un div, en lui donnant une classe de box. Ensuite, à l'intérieur, j'ajouterai un autre div avec une classe de chargeur. Ensuite, à l'intérieur, j' ajouterai une envergure et ajouterai du style. Ensuite, nous utiliserons des variables CSS ici. Je vais ajouter I comme nom de variable et lui donner la valeur un. Ensuite, je vais copier cette plage et en ajouter sept autres pour obtenir un total de huit travées , comme vous le voyez ici Chaque fois que la valeur de la variable augmente de un, 1 à 8. Ensuite, en dessous de ce chargeur, j'ajouterai un H trois et je dirai chargement Ensuite, je vais accéder à mon CSS et sélectionner le corps, A Display Flex, Justify, le centre de contenu, le centre d' alignement des éléments, puis en hauteur 100 VH, et enfin le trop-plein masqué Ensuite, je ciblerai le chargeur. Ajoutez à la position une largeur relative de 20 pixels, une hauteur de 20 pixels. Puis un arrière-plan rouge temporaire. Vous pouvez maintenant voir que nous avons ce fond rouge centré à l'intérieur du corps. Très bien, maintenant personnalisons le H deux. Je vais le sélectionner et ajouter la position absolue en haut (50 % à gauche 50 %, transformer, traduire moins 50 % et moins 50 %) pour le centrer verticalement et horizontalement. Ensuite, je vais ajouter une taille de police de 18 pixels, colorier cette couleur marine. Vous pouvez maintenant voir que le H three est centré à l'intérieur du plongeur du chargeur. OK, continuons. Je vais cibler les huit travées à l'intérieur du chargeur. Ajoutez la position, zéro en haut absolu à gauche zéro, largeur, 100 %, hauteur, 100 % également. Ensuite, j'ajouterai un arrière-plan bleu temporaire. Maintenant, vous pouvez voir que nous avons ce fond bleu au-dessus du fond rouge. En fait, il s'agit de plusieurs arrière-plans de retour. Pas un seul, mais ils sont assis l'un sur l'autre. Mais nous voulons tous les faire pivoter de degrés spécifiques afin de les rendre tous visibles. Je vais ajouter transform rotate. Comme nous avons huit travées, je vais faire pivoter la première de 45 degrés, puis la deuxième de 90 degrés, puis la troisième de 135 degrés, et ainsi de suite, la dernière sera pivotée d'exactement 360 degrés, puisque 360/8 Très bien, allons-y. Je vais aller ici et ajouter 45 degrés fois V. Je vais ajouter notre variable qui contient ces valeurs dans notre code HTML. La première travée sera pivotée d'une fois 45, soit 45. La deuxième travée sera pivotée deux fois 45, soit 90, et ainsi de suite pour toutes les autres travées jusqu'à ce que la dernière soit pivotée Comme vous pouvez le constater. Nous avons maintenant cette étoile à huit têtes, mais continuons. Nous allons ajouter les huit cercles en tant que pseudo élément avant. Pour ces huit travées, je vais sélectionner le pseudo élément avant des travées et ajouter du travées et ajouter du contenu (chaînes vides, position absolue Zéro à gauche, zéro largeur, 20 pixels, hauteur 20 pixels, rayon de bordure 50 %. Enfin, couleur de fond, cette couleur bleue. Ensuite, je vais supprimer cette couleur de fond bleu et cette couleur de fond rouge. Vous pouvez maintenant voir que nous avons ces huit points bleus qui entourent parfaitement le chargeur. Bien, maintenant nous voulons sélectionner seulement quatre points parmi les huit pour changer leur couleur et les animer. Nous voulons le deuxième, le quatrième, le sixième et le huitième. J'irai ici et j'ajouterai même un nième enfant. Cela permettra de sélectionner uniquement les éléments qui ont un nombre pair, le deuxième, le quatrième, etc. Ensuite, à l'intérieur, j' ajouterai une couleur de fond, cette couleur bleu clair. Vous pouvez maintenant voir que ces éléments ont une couleur de fond bleu clair. Très bien, créons une nouvelle animation. Nommez-le cercle à l'intérieur. À 0,25 %, j'ajouterai transformation, la rotation à zéro degré et l'échelle de un Ensuite, à 50 %, j'ajouterai la transformation rotation à 90 degrés et l'échelle 1,3 pour qu'elle s' agrandisse un peu lors de la rotation. Ensuite, en dessous, à 75 % et 100 %, j'ajouterai rotation de 180 degrés et redimensionnerai une pour lui redonner sa taille d'origine. Ensuite, je vais monter ici et ajouter un cercle d'animation de 1 seconde linéaire infini. Vous pouvez maintenant voir que les cercles se redimensionnent et pivotent. Mais comme ils tournent autour de leur point central et de leurs cercles, ils n'ont pas vraiment l' air de tourner. Ce que nous pouvons faire pour les faire pivoter autour des autres cercles, c'est d'aller ici et d'ajouter une origine de transformation de 60 pixels. Maintenant, vous pouvez voir que les cercles se déplacent autour des autres, ce qui nous donne un effet vraiment cool. 144. Effet de survol de menu en estompement de texte: Bonjour tout le monde Bienvenue dans cette nouvelle leçon du cours. Dans cette leçon, nous allons créer ce joli effet de survol de menu Vous pouvez le constater lorsque nous survolons n'importe quel lien du menu. Cet effet se produit lorsque la couleur du lien devient semi-transparente et que ce petit texte vert brillant apparaît pour masquer le texte du lien C'est un effet assez simple mais cool. Voyons comment nous pouvons le créer. Je vais commencer ici dans mon code HTML en ajoutant une section à l'intérieur. J'ajouterai un UL, puis un L I et une balise d'ancrage à l'intérieur de ce L I. Ensuite, et une balise d'ancrage à l'intérieur de ce L I. j'ajouterai un attribut de texte de données et j'ajouterai home à l'intérieur de celui-ci. Ensuite, j'ajouterai la maison à l'intérieur de la balise d'ancrage. Nous allons donc utiliser cet attribut de texte de données pour le récupérer et l'utiliser comme texte sous-jacent Vous pouvez voir que j'ai simplement copié et collé ces liens et que j'ai juste changé le texte Très bien, passons à notre CSS et sélectionnons la section. Je vais ajouter la position, largeur relative, 100 % de hauteur, affichage 100 VH, le flex, la justification du contenu, centre d'une ligne, les éléments, le centre, débordement, l'arrière-plan caché, cette couleur gris foncé Ensuite, je ciblerai le LI dans l' UL et n'ajouterai aucun style de liste. Je ciblerai également la balise d'ancrage sur la position relative du bloc d'affichage, la décoration du texte, le non-alignement du texte au position relative du bloc d'affichage, la décoration du texte centre, la transformation du texte en majuscules taille de police quatre, la couleur EM, le poids de la police blanche poids de police 700, la transition 0,5 seconde. Maintenant, vous pouvez voir que les liens sont bien meilleurs. OK, continuons. Lorsque vous survolez le lien, nous voulons que la couleur du lien soit semi-transparente Je dirais qu'en passant le curseur sur la balise d'ancrage, j'ajouterai de la couleur, cette couleur qui est juste blanche, mais avec une opacité de 0,1 Bien, maintenant, lorsque vous survolez le lien, vous pouvez voir sa couleur changer pour devenir la couleur semi-transparente que nous voulons Bien, travaillons maintenant sur le petit texte. Nous utiliserons le pseudo élément before de la balise d'ancrage. Pour cela, je vais le sélectionner. À l'intérieur, j'ajouterai un attribut de contenu, texte de données pour récupérer le texte à l'intérieur de l' attribut de texte de données pour chaque lien. Ensuite, je vais ajouter la position absolue en haut à 50 % à gauche , puis colorier cette belle couleur verte. Vous pouvez maintenant voir que le texte vert recouvre les liens. Bien, revenons en arrière et ajoutons une taille de police 0,35 M pour réduire la taille de police Tout comme dans notre exemple, espacement des lettres, 40 pixels pour séparer les lettres Maintenant, vous pouvez voir que les lettres sont plus petites et séparées les unes des autres. Continuons encore un peu. Nous voulons ajouter un petit effet de lueur aux liens. J'ajouterai une ombre au texte de 0,010 pixels comme valeur floue. Ensuite, notre couleur verte, je vais copier et coller cette valeur deux fois et augmenter la valeur du flou à chaque fois Ensuite, j'ajouterai un poids de police 500. Vous pouvez maintenant voir que le texte brille à cause de l'ombre de la boîte que nous avons ajoutée Très bien, je vais revenir en arrière et ajouter une transition 0,5 seconde et une opacité zéro pour masquer le texte Ensuite, en survolant le LI avec le pointeur de la souris, je sélectionnerai le pseudo-élément avant et j'ajouterai une opacité de 1 et un espacement entre les lettres Nous allons animer la propriété d' espacement des lettres de 40 pixels à 6 pixels afin d'obtenir notre effet , lorsque vous survolez un lien, le petit texte se rassemble, puis le texte du lien s'estompe Mais nous voulons ajouter un délai de transition afin que les liens disparaissent d'abord, et ce n'est qu'après cela que le texte vert apparaisse. Ensuite, lorsque nous déplaçons le pointeur de la souris, le texte vert disparaît d'abord, puis le lien d'origine redevient blanc. Nous pouvons facilement le faire en allant ici dans la balise d'ancrage et en ajoutant un délai de transition de 0,5 seconde. Ensuite, lorsque vous le survolez, nous ajouterons le délai de transition zéro Ce faisant, lorsque vous survolez le lien, celui-ci changera immédiatement Mais en s'éloignant, il attendra 0,5 seconde. Ensuite, nous ferons exactement le contraire du texte vert. J'irai ici en passant la souris dessus et j'ajouterai délai de transition de 0,5 seconde. Lors du survol, le retard se produit, mais il ne se produit pas lorsque vous survolez le véhicule Vous pouvez voir le lien s'animer puis le texte vert lorsque vous le survolez, le texte vert anime ensuite le lien, nous donnant exactement l'effet que nous