知乎的登錄首頁背景動畫是怎麼做到的?JS還是CSS3,求教


正好昨天寫了一個類似的,可以參考一下

https://github.com/hilongjw/Qarticles


是 particles.js 的 demo

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


知乎用的是樓上說的插件,但是其實幾十行就能實現,生成指定個數的隨機坐標點,給每個點不同的初速度使之運動,連接每個點與其他所有點生成多個連線,點與點之間的距離小於一個範圍兩點間連線透明度變為1,大於一個範圍透明度變為0,每隔一段時間間隔重新更新畫布,根據速度改變坐標,遇到屏幕邊界穿過在屏幕相對應的位置出現,告訴你思路,就是不到一百行的js和一個canvas標籤的事。


GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

github 你值得擁有

很老的一個項目了

拿回來改改樣式

套頁面上就完事了


推薦閱讀:

如何看待《css權威指南》 (第三版) 中提到的 「HTML可能會逐步被XML所取代」 ?
新組建的前端團隊如何選擇前端框架方案?
前端開發該如何循序漸進地學習?對於html、css、js、jq等有哪些不錯的資料 (視頻,博客,書籍等)可以推薦?
目前 CSS 實現豎排文本較為通用的方式是什麼?
HTML 和 CSS 代碼結構如何寫更加規範?

TAG:前端開發 | CSS | JavaScript | HTML5 | 知乎首頁 |