javascript - How does Alibaba Cloud achieve this effect?
大家讲道理
大家讲道理 2017-06-12 09:32:10
0
3
809

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

大家讲道理
大家讲道理

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

reply all(3)
扔个三星炸死你

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!