Il y a quelque temps, Geoff a écrit un article sur un effet de volants cool. L'effet repose sur une combinaison de pseudo-éléments, de transitions et de transitions CSS. De nombreux commentaires ont montré que le même effet peut être effectué en utilisant des propriétés d'arrière-plan. Geoff a mentionné que c'était sa pensée initiale et c'est aussi ce que je pensais. Je ne dis pas que le pseudo-élément sur lequel il a atterri est mauvais, mais conna?tre les différentes méthodes pour réaliser le même effet ne peut être qu'une bonne chose.

Série d'effets de volants cool:

1. Cool Hover Effects That Use Background Properties ( you are here! )
2. Effets de volant cool qui utilisent l'ombre de texte CSS
3. Effets de volant cool qui utilisent l'écrêtage d'arrière-plan, les masques et la 3D

Dans cet article, nous retravaillerons cet effet de survol, mais l'élargirons également dans d'autres types d'effets de survol qui n'utilisent que les propriétés d'arrière-plan CSS.

Vous pouvez voir les propriétés d'arrière-plan à l'?uvre dans cette démo, ainsi que la fa?on dont nous pouvons utiliser les propriétés personnalisées et la fonction calc () pour en faire encore plus. Nous allons apprendre à combiner tous ces éléments, nous nous retrouvons donc avec un code bien optimisé!

Effet de survol n ° 1

Commen?ons par le premier effet qui est la reproduction de celle détaillée de Geoff dans son article. Le code utilisé pour réaliser cet effet est le suivant:

 .Hover-1 {
  Contexte: Linear-Gradient (# 1095C1 0 0) var (- p, 0) / var (- p, 0) sans répétition;
  transition: .4S, position de fond 0s;
}
.Hover-1: Hover {
  --P: 100%;
  Couleur: #FFF;
}

Si nous omettons la transition des couleurs (qui est facultative), nous n'avons besoin que de trois déclarations CSS pour réaliser l'effet. Vous êtes probablement surpris à quel point le code est petit, mais vous verrez comment nous y sommes arrivés.

Tout d'abord, commen?ons par une simple transition de taille arrière:

Nous animons la taille d'un gradient linéaire de 0 100% à 100% à 100%. Cela signifie que la largeur passe de 0 à 100% tandis que l'arrière-plan lui-même reste à pleine hauteur. Rien de complexe jusqu'à présent.

Commen?ons nos optimisations. Nous transformons d'abord notre dégradé pour utiliser la couleur une seule fois:

 Image en arrière-plan: gradient linéaire (# 1095C1 0 0);

La syntaxe peut être un peu étrange, mais nous disons au navigateur qu'une couleur est appliquée à deux arrêts de couleur, et cela suffit pour définir un gradient dans CSS. Les deux arrêts de couleur sont 0, donc le navigateur fait automatiquement le dernier à 100% et remplit notre dégradé avec la même couleur. Raccourcis, ftw!

Avec la taille de l'arrière-plan, nous pouvons omettre la hauteur car les gradients sont à pleine hauteur par défaut. Nous pouvons faire une transition de la taille de l'arrière-plan: 0 à la taille de l'arrière-plan: 100%.

 .Hover-1 {
  Image en arrière-plan: gradient linéaire (# 1095C1 0 0);
  taille arrière: 0;
  République de fond: sans répétition;
  transition: .4S;
}
.Hover-1: Hover {
  taille arrière: 100%;
}

Présentez une propriété personnalisée pour éviter la répétition de la taille de l'arrière-plan:

 .Hover-1 {
  Image en arrière-plan: gradient linéaire (# 1095C1 0 0);
  taille arrière: var (- p, 0%);
  République de fond: sans répétition;
  transition: .4S;
}
.Hover-1: Hover {
  --P: 100%;
}

Nous ne définissons pas - P initialement, donc la valeur de repli (0% dans notre cas) sera utilisée. En survol, nous définissons une valeur qui remplace celle de repli (100%).

Maintenant, combinons toutes les propriétés d'arrière-plan à l'aide de la version raccourci pour obtenir:

 .Hover-1 {
  Contexte: Linear-Gradient (# 1095C1 0 0) gauche / var (- p, 0%) sans répétition;
  transition: .4S;
}
.Hover-1: Hover {
  --P: 100%;
}

Nous nous rapprochons! Notez que j'ai introduit une valeur gauche (pour la position d'arrière-plan) qui est obligatoire lors de la définition de la taille dans le raccourci d'arrière-plan. De plus, nous en avons besoin de toute fa?on pour réaliser notre effet de survol.

Nous devons également mettre à jour la position sur le plan de survol. Nous pouvons le faire en deux étapes:

1. Augmentez la taille de la droite sur le plan de souris.
2. Diminuez la taille de la gauche sur la souris.

Pour ce faire, nous devons également mettre à jour la position d'arrière-plan sur plané:

Nous avons ajouté deux choses à notre code:

• Une valeur de position de fond de droite sur plané
• Une durée de transition de 0 sur la position de fond

Cela signifie que, en survol, nous modifions instantanément la position d'arrière-plan de gauche (voir, nous avions besoin de cette valeur!) à droite, de sorte que la taille de l'arrière-plan augmentera du c?té droit. Ensuite, lorsque le curseur de la souris quitte le lien, la transition joue en sens inverse, de droite à gauche, faisant appara?tre que nous diminuons la taille de l'arrière-plan du c?té gauche. Notre effet de survol est terminé!

Mais vous avez dit que nous n'avions besoin que de trois déclarations et qu'il y en a quatre.

C'est vrai, belle prise. Les valeurs gauche et droite peuvent être modifiées en 0 0 et 100% 0, respectivement; Et comme notre gradient est déjà à pleine hauteur par défaut, nous pouvons en obtenir en utilisant 0 et 100%.

 .Hover-1 {
  Contexte: Linear-Gradient (# 1095C1 0 0) 0 / var (- P, 0%) sans répétition;
  transition: .4S, position de fond 0s;
}
.Hover-1: Hover {
  --P: 100%;
  Position d'arrière-plan: 100%;
}

Voyez comment la position d'arrière-plan et - p utilisent les mêmes valeurs? Nous pouvons maintenant réduire le code à trois déclarations:

 .Hover-1 {
  Contexte: Linear-Gradient (# 1095C1 0 0) var (- p, 0%) / var (- p, 0%) sans répétition;
  transition: .4S, position de fond 0s;
}
.Hover-1: Hover {
  --P: 100%;
}

La propriété personnalisée --P définit à la fois la position d'arrière-plan et la taille. En survol, il les mettra également à jour tous les deux. Il s'agit d'un cas d'utilisation parfait montrant comment les propriétés personnalisées peuvent nous aider à réduire le code redondant et à éviter d'écrire des propriétés plus d'une fois. Nous définissons notre paramètre à l'aide de propriétés personnalisées et nous mettons à jour ce dernier sur Volant.

Mais l'effet a décrit que Geoff fait le contraire, à partir de gauche et se terminant à droite. Comment faisons-nous cela quand il semble que nous ne pouvons pas compter sur la même variable?

Nous pouvons toujours utiliser une variable et mettre à jour notre code légèrement pour obtenir l'effet inverse. Ce que nous voulons, c'est passer de 100% à 0% au lieu de 0% à 100%. Nous avons une différence de 100% que nous pouvons exprimer en utilisant Calc (), comme ceci:

 .Hover-1 {
  Contexte: Linear-Gradient (# 1095C1 0 0) CALC (100% - var (- p, 0%)) / var (- p, 0%) sans répétition;
  transition: .4S, position de fond 0s;
}
.Hover-1: Hover {
  --P: 100%;
}

--P passera de 0% à 100%, mais la position de l'arrière-plan passera de 100% à 0%, grace à CALC ().

Nous avons encore trois déclarations et une propriété personnalisée, mais un effet différent.

Avant de passer à l'effet de survol suivant, je veux souligner quelque chose d'important que vous avez probablement remarqué. Lorsque je traite des propriétés personnalisées, j'utilise 0% (avec une unité) au lieu d'une unité sans 0. Le zéro sans unité peut fonctionner lorsque la propriété personnalisée est seule, mais échouera à l'intérieur de calc () où nous devons définir explicitement l'unité. J'ai peut-être besoin d'un autre article pour expliquer cette bizarrerie, mais n'oubliez pas d'ajouter l'unité lors de la gestion des propriétés personnalisées. J'ai deux réponses sur Stackoverflow (ici et ici) qui vont plus en détail.

Effet de survol n ° 2

Nous avons besoin d'une transition plus complexe pour cet effet. Jetons un coup d'?il à une illustration étape par étape pour comprendre ce qui se passe.

Nous avons d'abord une transition de position d'arrière-plan suivie d'une transition d'arrière-plan. Traduisons cela en code:

 .Hover-2 {
  Image en arrière-plan: gradient linéaire (# 1095C1 0 0);
  taille arrière: 100% .08EM; / * .08em est notre hauteur fixe; modifier au besoin. * /
  Position d'arrière-plan: / * ??? * /;
  République de fond: sans répétition;
  Transition: arrière-plan .3s, position de fond .3S .3S;
}
.Hover-2: Hover {
  Transition: arrière-plan .3s .3s, position de fond .3S;
  taille arrière: 100% 100%;
  Position d'arrière-plan: / * ??? * /;
}

Notez l'utilisation de deux valeurs de transition. En survol, nous devons d'abord modifier la position et plus tard la taille, c'est pourquoi nous ajoutons un retard à la taille. à la souris, nous faisons le contraire.

La question est maintenant: Quelles valeurs utilisons-nous pour la position d'arrière-plan? Nous avons laissé ces blancs ci-dessus. Les valeurs de taille arrière sont triviales, mais celles de la position d'arrière-plan ne le sont pas. Et si nous gardons la configuration réelle, nous ne pouvons pas déplacer notre gradient.

Notre gradient a une largeur égale à 100%, nous ne pouvons donc pas utiliser les valeurs de pourcentage sur la position d'arrière-plan pour le déplacer.

Les valeurs de pourcentage utilisées avec la position d'arrière-plan sont toujours une douleur, surtout lorsque vous les utilisez pour la première fois. Leur comportement est non intuitif mais bien défini et facile à comprendre si nous obtenons la logique derrière. Je pense qu'il faudrait un autre article pour une explication complète pourquoi cela fonctionne de cette fa?on, mais voici une autre ?longue? explication que j'ai publiée chez Stack Overflow. Je recommande de prendre quelques minutes pour lire cette réponse et vous me remercierez plus tard!

L'astuce consiste à changer la largeur en quelque chose de différent de 100%. Utilisons 200%. Nous ne sommes pas inquiets que l'arrière-plan dépasse l'élément car le débordement est caché de toute fa?on.

 .Hover-2 {
  Image en arrière-plan: gradient linéaire (# 1095C1 0 0);
  taille de fond: 200% .08em;
  Position d'arrière-plan: 200% 100%;
  République de fond: sans répétition;
  Transition: arrière-plan .3s, position de fond .3S .3S;
}
.Hover-2: Hover {
  Transition: arrière-plan .3s .3s, position de fond .3S;
  taille de fond: 200% 100%;
  Position d'arrière-plan: 100% 100%;
}

Et voici ce que nous obtenons:

Il est temps d'optimiser notre code. Si nous prenons les idées que nous avons apprises du premier effet de survol, nous pouvons utiliser des propriétés scolarisées et rédiger moins de déclarations pour que cela fonctionne:

 .Hover-2 {
  arrière-plan: 
    gradient linéaire (# 1095C1 0 0) sans répétition
    var (- p, 200%) 100% / 200% var (- p, .08em);
  transition: .3s var (- t, 0s), position d'arrière-plan .3s calc (.3s - var (- t, 0s));
}
.Hover-2: Hover {
  --P: 100%;
  --T: .3s;
}

Nous ajoutons toutes les propriétés d'arrière-plan en utilisant la version raccourci que nous utilisons - P pour exprimer nos valeurs. Les tailles passent de 0,08em à 100% et la position de 200% à 100%

J'utilise également une autre variable - t, pour optimiser la propriété de transition. Sur la souris, nous l'avons réglé sur une valeur .3s, ce qui nous donne ceci:

 transition: .3s .3s, position de fond .3S 0S;

Sur Mouse Out, - T n'est pas défini, donc la valeur de secours sera utilisée:

 Transition: .3s 0s, position de fond .3S .3S;

Ne devrions-nous pas avoir une taille de fond dans la transition?

C'est en effet une autre optimisation que nous pouvons faire. Si nous ne spécifions aucune propriété, cela signifie ?tous? les propriétés, donc la transition est définie pour ?toutes? les propriétés (y compris la taille de l'arrière-plan et la position d'arrière-plan). Ensuite, il est à nouveau défini pour la position d'arrière-plan qui est similaire à la définir pour la taille de l'arrière-plan, puis la position d'arrière-plan.

"Similaire" est différent de dire que quelque chose est le "même". Vous verrez une différence si vous modifiez plus de propriétés sur le plan de volants, de sorte que la dernière optimisation pourrait être inadaptée dans certains cas.

Pouvons-nous toujours optimiser le code et utiliser une seule propriété personnalisée?

Oui, nous pouvons! Ana Tudor a partagé un excellent article expliquant comment créer une commutation à sec où une propriété personnalisée peut mettre à jour plusieurs propriétés. Je n'entrerai pas dans les détails ici, mais notre code peut être révisé comme ceci:

 .Hover-2 {
  arrière-plan: 
    gradient linéaire (# 1095C1 0 0) sans répétition
    calc (200% - var (- i, 0) * 100%) 100% / 200% calc (100% * var (- i, 0) .08em);
  transition: .3s calc (var (- i, 0) * .3s), position d'arrière-plan .3s calc (.3s - calc (var (- i, 0) * .3s));
}
.Hover-2: Hover {
  --i: 1;
}

La propriété personnalisée --i est initialement non définie, donc la valeur de repli, 0, est utilisée. Cependant, en survol, nous rempla?ons 0 par 1. Vous pouvez faire le calcul pour les deux cas et obtenir les valeurs pour chacune. Vous pouvez voir cette variable comme un ?commutateur? qui met à jour toutes nos valeurs à la fois en survol.

Encore une fois, nous ne sommes de retour à seulement trois déclarations pour un effet de volants assez cool!

Effet de survol n ° 3

Nous allons utiliser deux gradients au lieu d'un pour cet effet. Nous verrons que la combinaison de plusieurs gradients est une autre fa?on de créer des effets de plan de volants sophistiqués.

Voici un diagramme de ce que nous faisons:

Voici à quoi cela ressemble dans CSS:

 .Hover-3 {
  Image d'arrière-plan:
    Gradient linéaire (# 1095C1 0 0),
    Gradient linéaire (# 1095C1 0 0);
  République de fond: sans répétition;
  taille arrière: 50% .08em;
  Position d'arrière-plan:
    -100% 100%,
    200% 0;
  Transition: arrière-plan .3s, position de fond .3S .3S;
}
.Hover-3: Hover {
  taille de fond: 50% 100%;
  Position d'arrière-plan:
    0 100%,
    100% 0;  
  Transition: arrière-plan .3s .3s, position de fond .3S;
}

Le code est presque le même que les autres effets de survol que nous avons couverts. La seule différence est que nous avons deux gradients avec deux positions différentes. Les valeurs de position peuvent sembler étranges, mais, encore une fois, cela est lié à la fa?on dont les pourcentages fonctionnent avec la propriété de position d'arrière-plan dans CSS, donc je recommande fortement de lire ma réponse de débordement de pile si vous voulez entrer dans les détails granuleux.

Optimions maintenant! Vous avez l'idée maintenant - nous utilisons des propriétés scolaristes, des propriétés personnalisées et Calc () pour ranger les choses.

 .Hover-3 {
  --c: sans répétition linéaire-gradient (# 1095C1 0 0);
  arrière-plan: 
    var (- c) calc (-100% var (- p, 0%)) 100% / 50% var (- p, .08em),
    var (- c) calc (200% - var (- p, 0%)) 0/50% var (- p, .08em);
  transition: .3s var (- t, 0s), position d'arrière-plan .3s calc (.3s - var (- t, 0s));
}
.Hover-3: Hover {
  --P: 100%;
  - T: 0,3S;
}

J'ai ajouté une propriété personnalisée supplémentaire, - C, qui définit le gradient car le même gradient est utilisé aux deux endroits.

J'utilise 50,1% dans cette démo au lieu de 50% pour la taille de l'arrière-plan car il empêche un écart de se montrer entre les gradients. J'ai également ajouté 1% aux positions pour des raisons similaires.

Faisons la deuxième optimisation en utilisant la variable Switch:

 .Hover-3 {
  --c: sans répétition linéaire-gradient (# 1095C1 0 0);
  arrière-plan: 
    var (- c) calc (-100% var (- i, 0) * 100%) 100% / 50% calc (100% * var (- i, 0) .08em),
    var (- c) calc (200% - var (- i, 0) * 100%) 0/50% calc (100% * var (- i, 0) .08em);
  transition: .3s calc (var (- i, 0) * .3s), position d'arrière-plan .3s calc (.3s - var (- i, 0) * .3s);
}
.Hover-3: Hover {
  --i: 1;
}

Avez-vous commencé à voir les modèles ici? Ce n'est pas tant que les effets que nous faisons sont difficiles. C'est plus la ?dernière étape? de l'optimisation du code. Nous commen?ons par écrire du code verbeux avec de nombreuses propriétés, puis la réduisons en suivant des règles simples (par exemple en utilisant un raccourci, en supprimant les valeurs par défaut, en évitant les valeurs redondantes, etc.) pour simplifier les choses autant que possible.

Effet de survol n ° 4

J'augmenterai le niveau de difficulté pour ce dernier effet, mais vous en savez assez dans les autres exemples que je doute que vous aurez des problèmes avec celui-ci.

Cet effet de survol s'appuie sur deux gradients coniques et plus de calculs.

Initialement, nous avons les deux gradients avec des dimensions nulles à l'étape 1. Nous augmentons la taille de chacun à l'étape 2. Nous continuons à augmenter leurs largeurs jusqu'à ce qu'ils couvrent complètement l'élément, comme le montre l'étape 3. Après cela, nous les glissons vers le bas pour mettre à jour leur position. Il s'agit de la partie ?magique? de l'effet de survol. étant donné que les deux gradients utiliseront la même coloration, le changement de position à l'étape 4 ne fera aucune différence visuelle - mais nous verrons une différence une fois que nous réduirons la taille de la souris pendant l'étape 5.

Si vous comparez l'étape 2 et l'étape 5, vous pouvez voir que nous avons une inclination différente. Traduisons cela en code:

 .Hover-4 {
  Image d'arrière-plan:
    gradient conique (/ * ??? * /),
    Gradient conic (/ * ??? * /);
  Position d'arrière-plan:
    0 0,
    100% 0;
  taille de fond: 0% 200%;
  République de fond: sans répétition;
  Transition: .4S de taille arrière, position 0S de fond;
}
.Hover-4: Hover {
  Backgrane-Size: / * ??? * / 200%;
  Position d'arrière-plan:
    0 100%,
    100% 100%;
}

Les positions sont assez claires. Un gradient commence en haut à gauche (0 0) et se termine en bas à gauche (0 100%) tandis que l'autre commence en haut à droite (100% 0) et se termine en bas à droite (100% 100%).

Nous utilisons une transition sur les positions et tailles de fond pour les révéler. Nous n'avons besoin que d'une valeur de transition pour la taille de l'arrière-plan. Et comme avant, la position d'arrière-plan doit changer instantanément, donc nous attribuons une valeur 0s pour la durée de la transition.

Pour les tailles, les deux gradient doivent avoir 0 largeur et deux fois la hauteur de l'élément (0% 200%). Nous verrons plus tard comment leurs tailles changent sur le plan de volants. Définissons d'abord la configuration du gradient.

Le diagramme ci-dessous illustre la configuration de chaque gradient:

Notez que pour le deuxième gradient (indiqué en vert), nous devons conna?tre la hauteur pour l'utiliser à l'intérieur du gradient conique que nous créons. Pour cette raison, je vais ajouter une hauteur de ligne qui définit la hauteur de l'élément, puis essayer la même valeur pour les valeurs de gradient conique que nous avons laissées de c?té.

 .Hover-4 {
  --c: # 1095C1;
  hauteur de ligne: 1.2EM;
  Image d'arrière-plan:
    gradient conique (de -135 degrés à 100% 50%, var (- c) 90 degrés, # 0000 0),
    Gradient conique (de -135 degère à 1,2em 50%, # 0000 90deg, var (- c) 0);
  Position d'arrière-plan:
    0 0,
    100% 0;
  taille de fond: 0% 200%;
  République de fond: sans répétition;
  Transition: .4S de taille arrière, position 0S de fond;
}
.Hover-4: Hover {
  Backgrane-Size: / * ??? * / 200%;
  Position d'arrière-plan:
    0 100%,
    100% 100%;
}

La dernière chose qui nous reste est de comprendre la taille de l'arrière-plan. Intuitivement, nous pouvons penser que chaque dégradé doit prendre la moitié de la largeur de l'élément, mais ce n'est pas suffisant.

We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.

 .Hover-4: Hover {
  taille de fond: calc (50% .6EM) 200%;
  Position d'arrière-plan:
    0 100%,
    100% 100%;
}

Voici ce que nous obtenons après les avoir optimisés comme les exemples précédents:

 .Hover-4 {
  --c: # 1095C1;
  hauteur de ligne: 1.2EM;
  arrière-plan:
    gradient conique (de -135 degrés à 100% 50%, var (- c) 90 degrés, # 0000 0) 
      0 var (- p, 0%) / var (- s, 0%) 200% sans répétition,
    Gradient conique (de -135 degrés à 1,2em 50%, # 0000 90deg, var (- c) 0) 
      100% var (- p, 0%) / var (- s, 0%) 200% sans répétition;
  transition: .4S, position de fond 0s;
}
.Hover-4: Hover {
  --P: 100%;
  --S: calc (50% .6em);
}

Qu'en est-il de la version avec une seule propriété personnalisée?

Je vais laisser ?a pour vous! Après avoir examiné quatre effets de volants similaires, vous devriez être en mesure de réduire l'optimisation finale à une seule propriété personnalisée. Partagez votre travail dans la section des commentaires! Il n'y a pas de prix, mais nous pouvons nous retrouver avec différentes implémentations et idées qui profitent à tout le monde!

Avant de finir, permettez-moi de partager une version de ce dernier effet de survol qu'Ana Tudor a préparé. C'est une amélioration! Mais notez qu'il manque de supports de Firefox en raison d'un bug connu. Pourtant, c'est une excellente idée qui montre comment combiner les gradients avec des modes de mélange pour créer des effets de survol encore plus frais.

Emballage

Nous avons fait quatre effets de volants super cool! Et même s'ils sont des effets différents, ils adoptent tous la même approche pour utiliser les propriétés d'arrière-plan CSS, les propriétés personnalisées et le calc (). Différentes combinaisons nous ont permis de créer différentes versions, toutes utilisant les mêmes techniques qui nous laissent avec du code propre et maintenable.

Si vous voulez obtenir des idées, j'ai fait une collection de 500 (oui, 500!) Des effets de survol, dont 400 sont effectués sans pseudo-éléments. Les quatre que nous avons couverts dans cet article ne sont que la pointe de l'iceberg!

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!