javascript - 阿里雲的這個效果是怎麼實現的?
大家讲道理
大家讲道理 2017-06-12 09:32:10
0
3
947

下面是阿里雲網站的鏈接,它裡面有一快地方的切換效果是怎麼實現的?看css裡看不出來:

網站連結位址

大家讲道理
大家讲道理

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

全部回覆(3)
扔个三星炸死你

hover上去之後添加一個highlight-bg的class,該class對應的css中定義了過渡效果(transition),該過渡效果只是對margin和padding進行過渡,margin:-15px -20px;padding:15pxpadding進行過渡,margin:-15px -20px;padding:15pxpadding 20px,一正一反,效果就是整體區域變大,但是內容區域不變,所以我們看到了放大的效果。但實際情況是不僅放大了,整個內容還上移了,大概看了一下,上移的原因是在添加了highlight-bg class的同時,對其內容的上半區域和下半區域都進行了處理,上半區域的處理是:將height調低,同時圖示的padding-top縮小,所以整體感覺上移了

左手右手慢动作

你找找樣式中的.navbar-fixed-dropdown-menu .tab-menu,應該就能找到你所需要的了

过去多啦不再A梦

沒找到這個頁面,但是有個很簡單的實現方式:比如這是4張圖片,「高度」實際上都是相等的,只不過第1、3、4頂部和背景色一樣,所以在視覺上就認為他們比第二個短一截。
當然,我只是拿圖片舉個例子。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板