javascript - Comment Alibaba Cloud obtient-il cet effet?

Question

Ce qui suit est un lien vers le site Web d'Alibaba Cloud. Il y a un endroit rapide. Comment obtenir l'effet de commutation ? Je ne le vois pas dans le CSS :

Adresse du lien du site Web

Answer 1

Après le survol, ajoutez une classe highlight-bg. L'effet de transition (transition) est défini dans le CSS correspondant à cette classe. L'effet de transition ne fait que des transitions margin:-15px -20px; , un positif et un négatif, l'effet est que la zone globale devient plus grande, mais la zone de contenu reste inchangée, nous voyons donc l'effet d'agrandissement. Mais la situation réelle est que non seulement il est agrandi, mais que l'ensemble du contenu est également déplacé vers le haut. Après un rapide coup d'œil, la raison de ce déplacement vers le haut est que lors de l'ajout de la classe highlight-bg, la moitié supérieure et inférieure du contenu. sont traités. , le traitement de la moitié supérieure est le suivant : abaissez la hauteur et réduisez le rembourrage supérieur de l'icône, de sorte que le sentiment général a été déplacé vers le haut

Answer 2

Recherchez .navbar-fixed-dropdown-menu .tab-menu dans le style, vous devriez pouvoir trouver ce dont vous avez besoin

Answer 3

Je n'ai pas trouvé cette page, mais il existe un moyen très simple de la mettre en œuvre : par exemple, voici 4 photos Les "hauteurs" sont en fait les mêmes, mais les sommets des 1ère, 3ème et 4ème photos ont. La même couleur que le fond, donc visuellement ils sont identiques. Je pense qu'ils sont un peu plus courts que le deuxième.
Bien sûr, j'ai juste utilisé des images à titre d'exemple.