84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
下面是阿里云网站的链接，它里面有一快地方的切换效果是怎么实现的？看css里看不出来：
网站链接地址
光阴似箭催人老，日月如移越少年。
hover上去之后添加一个highlight-bg的class，该class对应的css中定义了过渡效果（transition）,该过渡效果只是对margin和padding进行过渡，margin:-15px -20px;padding:15px 20px，一正一反，效果就是整体区域变大，但是内容区域不变，所以我们看到了放大的效果。但是实际情况是不仅放大了，整个内容还上移了，大概看了一下，上移的原因是在添加了highlight-bg class的同时，对其内容的上半区域和下半区域都进行了处理，上半区域的处理是：将height调低，同时图标的padding-top缩小，所以整体感觉上移了
你找找样式中的.navbar-fixed-dropdown-menu .tab-menu，应该就能找到你所需要的了
没找到这个页面，但是有个很简单的实现方式：比如 这是4张图片，“高度”实际都是相等的，只不过第1、3、4顶部和背景色一样，所以在视觉上就认为他们比第二个短一截。当然，我只是拿图片举个例子。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你找找样式中的.navbar-fixed-dropdown-menu .tab-menu，应该就能找到你所需要的了
没找到这个页面，但是有个很简单的实现方式：比如 这是4张图片，“高度”实际都是相等的，只不过第1、3、4顶部和背景色一样，所以在视觉上就认为他们比第二个短一截。
当然，我只是拿图片举个例子。