蘋果官網(wǎng)小屏狀態(tài)的交互效果

1、css3 媒體查詢，簡單的來說，就是根據(jù)屏幕尺寸的不同，采用不同的樣式，傳送門
2、高度漸變，css3 transition:height 1s;
3、最后一個ICON跑出去,也是transition:right 1s;
4、元素波浪形出現(xiàn)，如果把transition:height 1s;加上的話，出現(xiàn)的方式應(yīng)該差不多，類似于波浪，或者給子元素也加上 transition 應(yīng)該會差不多

我有寫過，但是沒辦法一模一樣，有點點像的感覺吧。我跟你說下，代碼太多了，整理不出來。
1、一般下拉的導(dǎo)航我們都用li是吧，然后我用到的這兩個代碼：

-webkit-transition:height .35s cubic-bezier(0.645, 0.045, 0.355, 1) 50ms;
-webkit-transform: scale(1.1) translateY(-24px);

默認(rèn)是scale(1.1)，然后有個偏移。
2、點擊事件后，把他們還原回去：

-webkit-transform: scale(1) translateY(0);

3、給每個li都加延遲動畫

li:nth-child(1){-webkit-transition-delay:50ms,50ms;transition-delay:50ms,50ms}
li:nth-child(2){-webkit-transition-delay:.1s,.1s;transition-delay:.1s,.1s}
li:nth-child(3){-webkit-transition-delay:150ms,150ms;transition-delay:150ms,150ms}
li:nth-child(4){-webkit-transition-delay:.2s,.2s;transition-delay:.2s,.2s}
li:nth-child(5){-webkit-transition-delay:250ms,250ms;transition-delay:250ms,250ms}

把網(wǎng)頁下載到本地再慢慢研究

確實是不好寫啊