1. 程式人生 > >16個超牛逼的HTML5和JavaScript特效

16個超牛逼的HTML5和JavaScript特效

不用說, Flash的效果大家都清楚。實際上,HTML5和Java擁有很多新屬性,可以用它們來替代Flash。W3Cschool精選16個超牛逼的HTML5和Java特效,看了這些特效,未來的Web發展前途無量。
圖片描述
1.特效:FlowerPower

創作者使用花朵作為畫刷,以貝茲曲線方式繪圖。
圖片描述
2.特效:Breathing Galaxies

動態變換直徑及顏色,可通過滑鼠或鍵盤產生新形狀,這個效果不錯!
圖片描述
3.特效:Noise Field

移動滑鼠可改變粒子運動,點選可隨機生成不同粒子效果。
圖片描述
4.特效:HTML5 Canvas粒子效果文字動畫特效

W3Cschool利用HTML5,製造出了粒子效果文字動畫特效。只要你輸入框中輸入想要展示的文字,回車後即可在canvas上繪製出粒子效果的文字動畫,相當酷的動畫效果。
圖片描述


5.特效:Swirling Tentacles

三維脈衝效果,沿著脈衝線有運動的顏色漸變模組。
圖片描述
6.特效:Keylight

雙擊生成兩個以後的鍵即可發出聲音,移動鍵的位置可產生不同的聲音效果。W3Cschool上面有很多這樣的教程,有興趣可以去看一下!
圖片描述
7.特效:Rotating Spiral

旋轉的螺旋效果,單擊可以控制開始和停止旋轉,是不是覺得高大上?
圖片描述

8.Blob

拖動水滴有重力效果,雙擊可以分離,小水滴碰到大水滴會合並。

圖片描述

9.Trail

彩色顆粒跟隨滑鼠運動效果,帶尾巴淡出效果。
圖片描述

10.Graph Layout

一種互動的力向圖佈局效果,重新整理三觀。

圖片描述

11.Typographic Effects

使用HTML5 Canvas實現的文字特性,效果超過Flash。
圖片描述

12.Crazy Tentacles

移動滑鼠可以進行塗鴉,點選滑鼠可以清除畫布,看著確實瘋狂。
圖片描述

13.Nebula

吸引眼球的粒子系統,目的是測試WebGL效能,如果滑動滑鼠,可以產生絢麗效果。
圖片描述

14.WebGL Globe

WebGL Globe 是一個開放的地理資料視覺化平臺,我們鼓勵你複製程式碼,新增自己的資料,建立自己的應用。
圖片描述

15.Particle Playground

用滑鼠和粒子進行互動,能發現不一樣的精彩。
圖片描述

16.Surface

使用WebGL實現的水面特效實驗,可放入一張照片,使用滑鼠觸動水面會有奇特效果。

上面的HTML5和Java特效,簡直趕超Flash。W3Cschool上面有很多使用者留言稱HTML5和Javait將替代Flash,不過對於這種說法,也不知道怎麼去評判。畢竟這些使用者說的也是很有道理,你認為Javait會替代Flash嗎?很想知道你的答案!

學習前端的同學注意了!!!
學習過程中遇到什麼問題或者想獲取學習資源的話,歡迎加入前端學習交流群,群號碼:328058344