Effet de transition CSS : comment obtenir l'effet de fondu entrant et sortant des éléments

Effet de transition CSS : Comment obtenir l'effet de fondu entrant et sortant des éléments

Introduction :
Dans la conception Web, donner aux éléments des effets de transition est l'un des moyens importants pour améliorer l'expérience utilisateur. L'effet de fondu entrant et sortant est un effet de transition courant et concis, qui peut faire apparaître des éléments à partir de zéro, du superficiel au profond. Cet article expliquera comment utiliser CSS pour obtenir l'effet de fondu entrant et sortant des éléments, et donnera des exemples de code spécifiques.

1. Utilisez l'attribut de transition pour obtenir l'effet de fondu entrant et sortant des éléments
L'attribut de transition de CSS peut ajouter un effet de transition en douceur à l'élément, de sorte que l'affichage et le masquage de l'élément aient un effet animé. . Combiné avec l'opacité de l'attribut de transparence, nous pouvons utiliser l'attribut de transition pour obtenir l'effet de fondu entrant et sortant de l'élément.

Exemple de code :

.fade-in-out {
  opacity: 0; /* 初始时设置元素透明度为0 */
  transition: opacity 1s; /* 设置透明度过渡效果的时长为1秒 */
}

.fade-in-out:hover {
  opacity: 1; /* 鼠标悬停时设置元素透明度为1 */
}

Analyse :
Le code ci-dessus définit une classe CSS nommée .fade-in-out. A l'état initial, la transparence des éléments de cette classe est fixée à 0, ce qui est totalement transparent. Lorsque la souris survole l'élément, définissez la transparence de l'élément sur 1, ce qui est complètement opaque, obtenant ainsi un effet de fondu. L'attribut de transition contrôle l'effet de transition de transparence pour rendre la transition fluide. De cette façon, lorsque la souris quitte l'élément, la transparence passe à nouveau à 0, obtenant ainsi un effet de fondu.

2. Utilisez l'attribut d'animation pour obtenir l'effet de fondu d'entrée et de sortie des éléments
En plus d'utiliser l'attribut de transition, nous pouvons également utiliser l'attribut d'animation de CSS pour obtenir l'effet de fondu d'entrée et de sortie. de l'élément. L'attribut animation peut définir l'effet d'animation de l'élément, y compris le temps de transition, la durée de l'animation, l'effet d'animation, etc.

Exemple de code :

.fade-in-out {
  animation: fadeinout 2s infinite; /* 设置动画属性，动画时长为2秒，无限循环 */
}

@keyframes fadeinout {
  0% { opacity: 0; } /* 动画起始时透明度为0 */
  50% { opacity: 1; } /* 动画中间时透明度为1 */
  100% { opacity: 0; } /* 动画结束时透明度为0 */
}

Analyse :
Le code ci-dessus définit une classe CSS nommée .fade-in-out. Appliquez un fondu d'animation aux éléments de cette classe via l'attribut d'animation. L'animation de fondu en sortie contient trois images clés, qui sont les états de début, de milieu et de fin de l'animation. A l'état initial, la transparence de l'élément est 0, ce qui est complètement transparent. Au milieu de l'animation, la transparence de l'élément est de 1, ce qui est complètement opaque, obtenant un effet de fondu. Lorsque l'animation se termine, la transparence de l'élément est à nouveau réglée sur 0, obtenant ainsi un effet de fondu. En définissant la durée de l'animation sur 2 secondes et une boucle infinie, l'élément passera par les effets d'animation de fondu d'entrée et de sortie.

Conclusion : 
Ci-dessus sont deux exemples de code spécifiques d'utilisation de CSS pour obtenir des effets de fondu d'entrée et de sortie d'éléments. En utilisant l'attribut de transition ou l'attribut d'animation, nous pouvons facilement obtenir un effet de transition fluide des éléments, ajoutant de la dynamique et un attrait visuel à la page Web. J'espère que le contenu ci-dessus vous sera utile et vous permettra d'utiliser de manière flexible l'effet de fondu dans la conception Web.

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!