javascript - Wie erzielt Alibaba Cloud diesen Effekt?

Question

Im Folgenden finden Sie einen Link zur Alibaba Cloud-Website. Dort finden Sie eine kurze Anleitung zum Erzielen des Umschalteffekts. Kann es im CSS nicht sehen:

Website-Link-Adresse

Answer 1

hover上去之后添加一个highlight-bg的class，该class对应的css中定义了过渡效果（transition）,该过渡效果只是对margin和padding进行过渡，margin:-15px -20px;padding:15px 20px，一正一反，效果就是整体区域变大，但是内容区域不变，所以我们看到了放大的效果。但是实际情况是不仅放大了，整个内容还上移了，大概看了一下，上移的原因是在添加了highlight-bg class的同时，对其内容的上半区域和下半区域都进行了处理，上半区域的处理是：将height调低，同时图标的padding-top缩小，所以整体感觉上移了

Answer 2

你找找样式中的.navbar-fixed-dropdown-menu .tab-menu，应该就能找到你所需要的了

Answer 3

没找到这个页面，但是有个很简单的实现方式：比如 这是4张图片，“高度”实际都是相等的，只不过第1、3、4顶部和背景色一样，所以在视觉上就认为他们比第二个短一截。
当然，我只是拿图片举个例子。