最近打開電腦就能看到極客學(xué)院什么新用戶vip免費(fèi)一個(gè)月，就進(jìn)去看看咯，這里就不說它的課程怎么滴了，里面實(shí)戰(zhàn)路徑圖頁面看到了這個(gè)效果： 

有點(diǎn)像時(shí)間軸的趕腳，而且每一塊鼠標(biāo)懸浮上去也有下拉效果展開介紹截圖信息，就感覺效果還不錯(cuò)。但感覺這種效果貌似對于動態(tài)添加不是很靈活，因?yàn)楦叨炔幌駥挾瓤梢造`活的自適應(yīng)，故添加得自己一個(gè)一個(gè)設(shè)置。所以很多都是做成展示效果。
 
當(dāng)然啦，自己也基于它的這個(gè)想法搞了一點(diǎn)簡單點(diǎn)的類似效果，主要還是整個(gè)布局效果，具體每一塊內(nèi)容就不仿造了，而且我自己也加了一下開場動畫，讓它更好玩一些…
 
先來看看效果吧： 

大概效果就是這樣啦，下來廢話不說，還是直接進(jìn)入主題：
 
HTML結(jié)構(gòu)：