如何解剖一個網站?

01-26

國外有非常多不錯的動態網頁作品，非常喜歡，請問如果想要分析他的製作過程需要怎麼做

謝邀～

Html5網頁動畫

其實都是一個一個物體的

某個屬性的改變

通過

Chrome的右鍵→檢查元素

可以看到

一個特定物體的CSS 動畫屬性

是怎麼被編輯的

進而了解這個物體

是怎麼運動的

下面就舉一個解剖網站的例子

有一個 Starbucks Frappuccino? 網站

我很喜歡的動畫是

在移動端上的Toggle導航

右上角的「三」（叫Toggle）在點下去導航列展開後會旋轉變成「X」

代表說再點我一次可以關掉導航

非常有趣

可以點開gif看:

http://manglekuo.com/img/toggle.gif

所以一開始我現在電腦上的Chrome

把Chrome的頁面寬度變窄讓他出現那個Toggle

然後右鍵點那個Toggle→ 檢查元素

這時候可以看到 開發人員工具

出現在頁面下方

我在這裡為了方便截圖

把它拆了出來

放到了右邊

如下圖：

而當我點擊了那個Toggle之後

我發現那個div的class

從原來的"sbOne mobile"

變成了"sbOne mobile expanded"

如下圖（注意看兩張圖被選擇的那行的上一行的差別）

這是一個網頁動畫很常被使用的技巧

發生一個事件（在這裡是點擊）之後

用Javascript

改變class裡的內容

進而觸發動畫

這時候我們去CSS（在這裡是main.css，隨便點擊截圖中最右邊任意一個main.css?...那一長串就可以去到main.css）裡頭

用ctrl/command + F 找到 ".expanded" Class

如下圖（圖長可能需要點擊一下才能看到全部）

最下面那一大段一直重複的

就是我們想要的了。

因為 HTML 5 動畫

還是實驗性的東西

開發者為了要讓各大瀏覽器支持

需要加不同的前綴。

HTML 5 動畫有兩種

一種是Animation，一種就是這個Transition

（感興趣自己查）

Animation是可以指定幀的

比如說時間是0%－20%的時候轉130o，

20%－100%的時候轉50o

而Transition是只能製定屬性和時間

在這裡是all 1s;

也就是所有屬性一秒

代表說假如有任何屬性發生了改變

都用一秒的漸變來完成

而上面用了transform: rotate(-45deg);

所以就會用一秒的時間漸漸轉－45o的角度

再下面的兩段代碼他指定了第一根橫棒和最後一根橫棒的動畫...（下圖）

根據電腦代碼的

後面覆蓋前面原則

最終會變成

當按下去Toggle之後

第一根橫棒轉45o

第二根橫棒轉-45o

第三根橫棒不轉透明度變0

三根橫棒的所有屬性發生改變時有1秒漸變

跟我們觀察到的結果一樣！

所以這就是這個動畫的精髓所在！

我們成功的解剖到了我們想要的東西。

還有什麼問題嗎。。。

我懶得接著寫了。。。

你直接問吧。。。

摘出需要的部分，或者刪掉不需要的部分。

國外的很多動態網頁，通常都是由js生成頁面dom併入場，這類網站信息量少，頁面數量也少，但是交互性很強。研究這類網站重點看js。