javascript - 阿里云的这个效果是怎么实现的？

问题描述

问 题

下面是阿里云网站的链接，它里面有一快地方的切换效果是怎么实现的？看css里看不出来：

网站链接地址

解决方案

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

这篇关于javascript - 阿里云的这个效果是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！