Comment ajouter une animation CSS révéler à vos images

Utilisez intelligemment CSS pour réaliser des effets d'animation et révéler des effets d'animation sans éléments supplémentaires! Cet article explorera en profondeur comment utiliser uniquement <img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="comment ajouter un CSS révèle l'animation à vos images "> <code><img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

• 仅需<img alt="Comment ajouter une animation CSS révéler à vos images" >
• Points de base: object-fit: cover object-position: right
Seuls les éléments
• sont nécessaires pour implémenter CSS révèlent des animations sans éléments ou pseudo-éléments supplémentaires. object-fit: none
La clé de l'animation est: ajouter un rembourrage à l'image, puis la réduire progressivement à zéro lors du plan de planage, tout en utilisant des couleurs d'arrière-plan pour créer l'effet visuel de l'image révélée. Les propriétés

et

sont utilisées pour maintenir le rapport d'aspect de l'image et empêcher l'image de bouger pendant l'animation. <img alt="Comment ajouter une animation CSS révéler à vos images" > En ajustant la direction du rembourrage, vous pouvez étendre l'effet d'animation et créer plus de changements. Les propriétés peuvent également créer des effets différents dans certaines configurations, mais nécessitent la largeur et la hauteur CSS pour correspondre aux dimensions inhérentes de l'image.

Cet article explorera certains conseils CSS pour vous aider à créer des animations d'image impressionnantes. Vous pourriez penser: "C'est simple! Ajoutez un élément supplémentaire au-dessus de l'image à l'animation." Cela peut sembler incroyable car en utilisant uniquement des éléments d'image, il semble que rien ne peut être ajouté au-dessus. En effet, nous n’ajoutons rien au-dessus de l’image, mais nous simulons intelligemment cet effet! Voici une démo de codepen montrant ce que nous explorerons ensemble:

Codepen Demo Link

n'est-ce pas cool? Les animations révélatrices peuvent être réalisées avec seulement quelques lignes de code, aucun éléments supplémentaires requis. Plongeons-nous dans le mystère derrière.

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

Configuration initiale:

width height Tout d'abord, définissez la taille de l'image: aspect-ratio box-sizing: border-box

Jusqu'à présent, le code est très simple. Pour plus de simplicité, nous utilisons des images carrées, mais nous pouvons également utiliser des images de n'importe quelle taille. Il est très important de définir explicitement

et , n'utilisez pas ou conservez la taille par défaut de l'image. C'est un must pour notre animation et nous expliquerons pourquoi plus tard. Il est également très important de prêter attention à l'utilisation de

. Cela n'a aucun effet pour le moment, mais passons à l'étape suivante et voyons pourquoi il est nécessaire.

box-sizing: border-box Ajouter un rembourrage:

Que se passe-t-il si nous ajoutons un rembourrage à une image qui a une taille fixe définie et utilise ? Essayons-le! Codepen Demo Link

Comme nous l'avons vu dans la démo ci-dessus, l'image a été pressée. Nous avons ajouté un rembourrage de 100px à gauche, ce qui ne laissera que 100px d'espace pour l'image (zone de contenu). C'est l'effet de box-sizing: border-box. Comme l'explique MDN: border-box dit au navigateur de considérer les frontières et le rembourrage dans les valeurs que vous spécifiez pour la largeur et la hauteur de l'élément. Si vous définissez la largeur de l'élément à 100 pixels, alors 100 pixels contiendront toutes les bordures ou remplissages que vous avez ajoutés et la boîte de contenu rétrécira pour absorber la largeur supplémentaire.

Maintenant, imaginez une scène où le rembourrage est égal à la largeur. Oui, l'image disparaîtra! Dans la démo ci-dessous, survolez l'image pour afficher les résultats. Codepen Demo Link

Dans la démonstration ci-dessus, il y a deux points à faire attention. Le rembourrage peut être animé, ce qui est cool, et nous pouvons également voir l'importance des variables CSS utilisées plus tôt lors de la définition de la taille de l'image. Nous avons utilisé la même variable pour définir le rembourrage, nous n'avons donc pas à répéter la même valeur.

Ajouter une couleur d'arrière-plan:

Prenons l'exemple précédent et ajoutons l'arrière-plan. Codepen Demo Link

Nous commençons à nous rapprocher de notre objectif. L'arrière-plan couvrira logiquement l'ensemble de l'élément. Nous ne pouvons pas le voir sous l'image (sauf si nous utilisons des images transparentes), mais nous pouvons le voir dans la zone de remplissage. Notre objectif est de révéler l'image, alors commençons par ajouter le rembourrage, puis le définir à 0 lors du plan en volante - le contraire de ce que nous faisons actuellement. Codepen Demo Link

Ce n'est toujours pas l'effet que nous voulons, mais nous nous rapprochons de plus en plus! Nous n'avons besoin que d'un seul ingrédient pour rendre notre «fausse» animation de révélation parfaite!

Ajouter un objet et une position d'objet:

La partie manquante consiste à éviter que l'image soit serré, et voici la dernière astuce. Nous utiliserons les valeurs object-fit et cover. Comme l'explique MDN: Remplacez les redimensions du contenu pour maintenir son rapport d'aspect tout en remplissant l'ensemble de la boîte de contenu de l'élément. Si le rapport d'aspect d'un objet ne correspond pas au rapport d'aspect de sa boîte, l'objet sera recadré pour s'adapter.

Il y a deux points importants ici:

• "Remplacer les redimensions du contenu pour maintenir son rapport d'aspect". Cela signifie que l'image ne sera pas pressée, mais maintiendra ses proportions inhérentes. Nous utilisons une image carrée, donc elle gardera le carré.
• "Remplissez toute la boîte de contenu de l'élément ... sera recadré pour s'adapter". L'image doit remplir toutes les zones de contenu (la zone que nous réduisons en ajoutant un peu de remplissage), mais si elle ne rentre pas à l'intérieur, nous la recadrer.

Essayons-le dans la démo ci-dessous. Codepen Demo Link

l'avez-vous vu? Les photos ne sont plus pressées! Il maintient ses proportions dans la zone de contenu pendant que nous ajoutons / supprimons le rembourrage. OK, nous pourrions donc penser que l'effet est différent de la présentation initiale. L'image se déplace étrangement. C'est exact. Alors maintenant, nous nous tournons vers object-position. La valeur par défaut est center, donc l'image sera toujours au centre de la zone de contenu et sera recadrée pour s'adapter à l'intérieur. C'est pourquoi il bouge avec l'animation. Ce que nous devons faire ensuite devrait être facile à prévoir. Nous changerons l'emplacement pour nous assurer que l'image ne bouge pas. Nous ajouterons un rembourrage de la gauche, nous devons donc utiliser object-position: right pour épingler la position de l'image à droite. Codepen Demo Link

Notre animation de révélation est terminée! Nous n'avons pas besoin de superpositions ou d'éléments supplémentaires au-dessus de l'image. En utilisant des couleurs d'arrière-plan simples et quelques conseils de positionnement d'image, nous avons réalisé de belles animations de révélation avec une petite quantité de code simple. Nous pouvons facilement mettre à jour la direction en ajustant la direction de remplissage et object-position. Voici la première démonstration de la précédente, qui contient quatre directions. Codepen Demo Link

Ce qui suit est le CSS que nous utilisons:

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

Plus d'animations révélées:

Nous pouvons utiliser la même idée pour étendre l'astuce pour créer plus de changements. Au lieu d'ajouter / de retirer le rembourrage d'un côté, nous pouvons ajouter / retirer le rembourrage des deux côtés ou même de tous les côtés. Codepen Demo Link

Si nous vérifions le code illustré ci-dessus, nous ne constaterons pas qu'il y a une grande différence par rapport à la précédente. Tout ce que nous avons fait a été de configurer différentes configurations de remplissage pour créer plus de variations du même effet. Dans les premier et derniers exemples, nous utilisons object-fit: none au lieu de object-fit: cover pour avoir une astuce. Dans ces cas, le remplissage réduit la largeur et la hauteur de la zone de contenu à 0, tandis que dans tous les autres cas, nous réduisons la hauteur ou la largeur. Dans cette configuration, cover ne fonctionne pas, mais none peut faire le travail. Remarques MDN: Le contenu de remplacement ne redimensionnera pas.

Pourquoi n'utilisons-nous pas toujours none? Nous pouvons l'utiliser et cela fonctionne, mais il a un petit inconvénient. Les dimensions inhérentes de l'image seront prises en compte, nous devons donc rendre la largeur et la hauteur du CSS égales aux dimensions inhérentes à la technique. D'un autre côté, ne maintient que l'échelle de l'image et redimensionnera l'image pour s'adapter à la taille de la boîte, afin que nous puissions définir en toute sécurité n'importe quelle taille CSS pour l'image. Il s'agit d'une comparaison pour que nous puissions voir la différence. none Codepen Demo Link cover

Dans les deux cas, nous révélons tous les deux des animations, mais lors de l'utilisation de object-fit: none, l'image ne redimensionne pas et maintient sa taille par défaut (500x500), ce qui n'est pas bon. object-fit: cover Maintenir uniquement la proportion et l'image sera redimensionnée pour s'adapter à la taille de la boîte.

Conclusion:

J'espère que vous avez apprécié cette petite expérience CSS. En utilisant des astuces simples et quelques lignes de code, nous avons implémenté une animation de révélation cool avec l'élément <img alt="Comment ajouter une animation CSS révéler à vos images" >. Nous avons également apporté de nombreuses modifications en utilisant la même structure de code. Nous pouvons faire plus avec cette technique. Je vous laisse avec un dernier exemple où je convertisse une image en noir et blanc en une image couleur tout en oscillant. Codepen Demo Link

Je vous laisserai continuer à explorer et essayer de trouver de plus belles animations!

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!