Tutoriel d'animation CSS : vous apprenez étape par étape à obtenir l'effet de fondu d'entrée et de sortie.

Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter l'effet de fondu entrant et sortant, y compris des exemples de code spécifiques

Dans la conception et le développement Web, les effets d'animation peuvent rendre la page plus vivante et attrayante. L'animation CSS est un moyen simple et puissant d'obtenir cet effet. Cet article vous apprendra étape par étape comment utiliser CSS pour obtenir l'effet de fondu et fournira des exemples de code spécifiques à titre de référence.

1. Effet de fondu entrant
L'effet de fondu entrant fait référence à l'effet dans lequel un élément passe progressivement d'une transparence de 0 à une transparence de 1. Voici les étapes et les exemples de code pour obtenir l'effet de fondu :

Étape 1 : Ajouter un style CSS à l'élément cible
Tout d'abord, nous devons définir une transparence initiale de 0 pour l'élément cible afin d'obtenir l'effet caché. En CSS, utilisez la propriété opacity pour contrôler la transparence d'un élément. Veuillez consulter l'exemple de code ci-dessous :

.fade-in { opacity: 0; transition: opacity 1s ease-in-out; }

Dans le code ci-dessus, nous utilisons .fade-in comme nom de classe de l'élément cible et définissons l'opacité sur 0. En même temps, utilisez l'attribut de transition pour définir l'effet de transition du changement. Ici, nous définissons un temps de transition de 1 seconde et utilisons la facilité d'entrée et de sortie pour spécifier l'effet d'animation de fondu d'entrée et de sortie.

Étape 2 : Utilisez JavaScript pour déclencher l'effet de fondu entrant
Ensuite, nous devons utiliser JavaScript pour déclencher l'effet de fondu entrant. Voici un exemple de code simple :

Dans le code ci-dessus, nous utilisons l'événement window.onload pour nous assurer que le document est entièrement chargé avant d'exécuter le code. Ensuite, utilisez la méthode getElementById pour obtenir l'élément cible et la méthode classList.add pour ajouter le nom de la classe .fade-in. De cette façon, l'élément cible passera progressivement de la transparence 0 à la transparence 1, obtenant ainsi un effet de fondu.

2. Effet de fondu
L'effet de fondu fait référence à l'effet dans lequel un élément passe progressivement d'une transparence de 1 à une transparence de 0. Voici les étapes et les exemples de code pour obtenir l'effet de fondu :

Étape 1 : Ajouter un style CSS à l'élément cible
De même, nous devons définir une transparence initiale de 1 pour l'élément cible afin d'obtenir l'effet d'affichage. Veuillez consulter l'exemple de code ci-dessous :

.fade-out { opacity: 1; transition: opacity 1s ease-in-out; }

Dans le code ci-dessus, nous utilisons .fade-out comme nom de classe de l'élément cible et définissons l'opacité sur 1. De même, utilisez l'attribut transition pour définir l'effet de transition du changement. Ici, nous définissons un temps de transition de 1 seconde et utilisons la facilité d'entrée et de sortie pour spécifier l'effet d'animation de fondu d'entrée et de sortie.

Étape 2 : Utilisez JavaScript pour déclencher l'effet de fondu sortant
De même, nous devons utiliser JavaScript pour déclencher l'effet de fondu sortant. Voici un exemple de code :

Dans le code ci-dessus, nous utilisons l'événement window.onload pour nous assurer que le document est entièrement chargé avant d'exécuter le code. Ensuite, utilisez la méthode getElementById pour obtenir l'élément cible et la méthode classList.add pour ajouter le nom de la classe .fade-out. De cette façon, l'élément cible passera progressivement de la transparence 1 à la transparence 0, obtenant ainsi un effet de fondu. Enfin, nous masquons l'élément cible en définissant l'attribut display sur "aucun".

Résumé :
Grâce aux exemples ci-dessus, nous avons appris à utiliser CSS et JavaScript pour obtenir l'effet de fondu. Il s’agit d’une compétence très basique et pratique qui peut être appliquée à une variété de projets de conception et de développement Web. J'espère que cet article sera utile à tout le monde !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!