javascript - Comment Alibaba Cloud obtient-il cet effet?
大家讲道理
大家讲道理 2017-06-12 09:32:10
0
3
955

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(3)
扔个三星炸死你

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

左手右手慢动作

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

过去多啦不再A梦

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal