Explication détaillée des propriétés de transition d'image CSS : transition et background-image

Explication détaillée des propriétés de transition d'image CSS : transition et background-image

Introduction :
Dans la conception Web moderne, les effets de transition sont une technologie importante pour améliorer l'expérience d'interaction utilisateur. Parmi eux, les effets de transition d’image jouent un rôle important dans l’embellissement des pages Web et l’amélioration de l’expérience utilisateur. Cet article présentera en détail deux propriétés de transition d'image couramment utilisées : transition et background-image, et fournira des exemples de code spécifiques pour aider les lecteurs à les comprendre et à les appliquer.

1. Attribut transition transition :

1. transition-duration (temps de transition) :
   L'attribut transition-duration précise la durée de l'effet de transition, en secondes (s) ou millisecondes (ms). Ce qui suit est un exemple de code pour obtenir l'effet de fondu de l'image à partir de zéro lorsque la souris survole l'image :

.img-container {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
}

.img-container:hover {
  opacity: 1;
}

2. transition-delay (délai de transition) : L'attribut
   transition-delay spécifie le temps nécessaire pour attendez que l'effet de transition commence. Ce qui suit est un exemple de code pour obtenir l'effet d'agrandir progressivement l'image après un délai de 0,5 s lorsque la souris survole l'image :

.img-container {
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}

.img-container:hover {
  transform: scale(1);
}

3. transition-timing-function (fonction d'assouplissement de transition) :
   transition-timing Attribut -function Spécifie la fonction d'accélération pour l'effet de transition. Les fonctions d'assouplissement couramment utilisées incluent la facilité (accélère progressivement puis décélère), linéaire (vitesse constante), facilité d'entrée (accélère progressivement), facilité de sortie (décélère progressivement), etc. Ce qui suit est un exemple de code pour réaliser que lorsque la souris survole l'image, l'image se déplace de haut en bas selon une décélération relativement lente :

.img-container {
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

.img-container:hover {
  transform: translateY(0);
}

2. Transition image d'arrière-plan-image d'arrière-plan

1. Utiliser des pseudo-éléments et transition Implémenter la transition de l'image d'arrière-plan :
   En utilisant des pseudo-éléments et une transition, nous pouvons obtenir l'effet de transition des images d'arrière-plan. Ce qui suit est un exemple de code pour obtenir l'effet de l'image d'arrière-plan qui s'affiche progressivement lorsque la souris survole le div :

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg');
  transition: opacity 0.5s;
  opacity: 0;
}

.container:hover::before {
  opacity: 1;
}

2. Utilisez l'animation CSS pour implémenter la transition de l'image d'arrière-plan :
   En plus d'utiliser la transition, nous pouvons également utiliser CSS animation pour y parvenir Effet de transition pour les images d'arrière-plan. Ce qui suit est un exemple de code pour obtenir l'effet d'afficher progressivement l'image d'arrière-plan lorsque la souris survole le div :

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg');
  animation: fade-in 0.5s;
  opacity: 0;
}

.container:hover::before {
  opacity: 1;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Résumé :
Cet article présente deux attributs de transition d'image couramment utilisés : transition et background-image, et fournit Des exemples de code détaillés sont fournis pour aider les lecteurs à comprendre et à appliquer. En utilisant rationnellement ces attributs, nous pouvons obtenir une variété d'effets de transition d'image, ajoutant de la beauté et de l'expérience utilisateur à la conception Web. J'espère que cet article pourra être utile aux lecteurs et vous permettre de mieux appliquer ces technologies dans la pratique.

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!