前言：

不管我們要學習什麼其實都是希望讓自己做出“實際的東西”出，這個實際“實際的東西”其實說的就是做個專案，這不用多說大家都懂得。

這裡小編我整理了30個web前端實戰專案列表，你可以從中選擇自己想做的專案進行參考學習練手，也可以從中尋找靈感去做自己的專案。

而且小編我也為大家準備了全套的前端學習影片，獲取方式在文末

專案列表：

1。【HTML5 canvas龍捲風動畫製作】

2。【js css3愛心表白背景特效】

3。【原生JS製作愛心表白程式碼】

4。【jQuery

html5

七夕表白放煙花動畫特效】

5。【html5網頁版小霸王遊戲坦克大戰】

點選載入圖片

6。【vue幸運水果機遊戲（老虎機）】

7。【H5飛機大戰網頁遊戲】

8。【vue 3D書本相簿翻頁】

9。【天貓官網必用技術——懶載入】

10。【炫酷的圓形中文時鐘特效】

點選載入圖片

12。【html5 canvas炫酷的萬花筒旋轉動畫】

13【WEB煙霧夢幻特效】

14。【純css3超炫酷3D旋轉立方體動畫】

15。【實現3d炫酷相簿】

點選載入圖片

16。【純html css 打造女神輪播圖】

17。【H5酷炫的時光隧道動畫特效】：

18。【酷炫的光速射線動畫特效】：

19。【酷炫的彩虹旋渦canvas動效】：

點選載入圖片

20。【canvas噴泉效果】

21。【video音訊效果】

22。【酷炫的水體流動3D特效】

23。【酷炫的水晶光圈旋轉動效】

24。【RequireJS來製圖】

25。【網頁製作貪吃蛇】

26。【螺旋圖形動畫特效】

27。【vue音樂播放器】

28。【3D環形空間特效】

29。【彩色的同心矩形動畫特效】

30。【七彩雲霞webgl液態動畫】

點選載入圖片

最後：

幫助大家在成為web前端程式設計師大牛的道路上披荊斬棘