（設計分類）想問一下大神們底圖的這種動態效果是怎麼做到的？

---

謝邀。

中午休息，閑著沒事回答下這個問題。

這個玩意兒是canvas（HTML5新增標籤）,Canvas API是在HTML5中新增的標籤用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的點陣圖（bitmap）。

看你提問題的情況可以了解你是做設計的，不了解前端這塊的知識，那就不多解釋它的原理啦。

如果你想了解更多關於canvas的問題，可以查看：canvas - 搜索結果

這種風格已經流行很長時間了，同種類型的API並且很美觀的，還有：

極光｜連接構建·分析洞察·獲取用戶

也有基於 HTML5 Canvas 的 3D 動畫效果：

1.三維分子結構 CanvasMol

2.HTML5 Canvas放射線動畫DEMO演示

3.HTML5 Canvas 3D折線圖表應用DEMO演示

4.HTML5 SVG 樹枝分叉動畫特效DEMO演示

5.HTML5雨滴下落效果

6.HTML5 Video Destruction這個隨意點擊，會呈現很好玩的動效

分享一個我個人特別喜歡的、很唯美的 JavaScript 和 Canvas 創建的API

Animated Background Headers

當然，你提到說『如果不要交互好像也可以做成GIF貼在後面，不知道對不對。』

只能回答『......』，表鬧，姑娘，無法想像一個1920*1080的巨大GIF圖片在我面前跳動，想想都有點辣眼睛呢，想要顯示清晰，那得多大的文件···

·

Canvas 對象的屬性：

height 屬性

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

width 屬性

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

舉個例子

&

&

&

&your browser does not support the canvas tag &

&

技術方面我還停留在N年前的flash自帶的AS 2.0的階段...

還是等其他大神回答好點，以免把您帶溝里去。

---

particles.js

https://github.com/VincentGarreau/particles.js

---

我提問過的，知乎首頁也是這麼搞的

---

推薦閱讀：