最近開啟電腦就能看到極客學院什麼新使用者vip免費乙個月，就進去看看咯，這裡就不說它的課程怎麼滴了，裡面實戰路徑圖頁面看到了這個效果：
有點像時間軸的趕腳，而且每一塊滑鼠懸浮上去也有下拉效果展開介紹截圖資訊，就感覺效果還不錯。但感覺這種效果貌似對於動態新增不是很靈活，因為高度不像寬度可以靈活的自適應，故新增得自己乙個乙個設定。所以很多都是做成展示效果。
當然啦，自己也基於它的這個想法搞了一點簡單點的類似效果，主要還是整個布局效果，具體每一塊內容就不仿造了，而且我自己也加了一下開場動畫，讓它更好玩一些…
先來看看效果吧：
大概效果就是這樣啦，下來廢話不說，還是直接進入主題：
html結構：
xml/html code複製內容到剪貼簿
這裡簡化了一下html結構，.time類表示在右邊，.timeleft表示在左邊，然後加點上外邊距就可以了，每一塊裡面的內容我就刪減掉了。
css樣式**如下：
css code複製內容到剪貼簿
原文鏈結：
本文標題: css3實現時間軸效果
本文位址:
ChartControl實現時間軸實現
using system using system.data using system.windows.forms using devexpress.xtracharts namespace devexpresschart private void windatetime load object s...
CSS時間軸樣式列表
charset utf 8 name viewport content maximum scale 1.0,minimum scale 1.0,user scalable 0,width device width,initial scale 1.0 timelinetitle timeline sm...
物流查詢時間軸效果
效果圖。今天講中間那條線，線的長度要實現跟隨整個流程自適應。一開始我的思路是img高度填充父div，但我的body，html，div都是height auto 不是固定長度，導致無法實現。公司乙個姐姐給我乙個思路，設定li的border right，我試了，但不知道怎麼挪到中間，要弄懂又得花很久。不...