84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
The following is a link to the Alibaba Cloud website. How is the switching effect of a quick place in it achieved? I can’t see it in the css:
Website link address
光阴似箭催人老,日月如移越少年。
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顶部和背景色一样,所以在视觉上就认为他们比第二个短一截。当然,我只是拿图片举个例子。
你找找样式中的.navbar-fixed-dropdown-menu .tab-menu,应该就能找到你所需要的了
没找到这个页面,但是有个很简单的实现方式:比如 这是4张图片,“高度”实际都是相等的,只不过第1、3、4顶部和背景色一样,所以在视觉上就认为他们比第二个短一截。
当然,我只是拿图片举个例子。