現在的網頁設計風格正在朝着扁平化發展,力求布局簡潔,突出主題內容。而另一方面,網頁交互則變得越來越多樣性,讓用戶在操作的時候可以更愉悅。當下很流行給網頁元素添加動畫,隨着 Web 技術的發展,動畫的實現方式有多種:JavaScript、CSS3、SVG 以及 Canvas。這篇文章挑選6款幫助前端開發人員實現元素動畫的插件。
1、Waves
Waves 點擊效果的靈感來自於 Google Material Design,很容易使用。只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了。采用 Touchstart 與 Touchend 事件,支持移動設備。趕緊來體驗吧!
2、Textillate.js
Textillate.js 是一款實現極酷 CSS3 文本動畫的簡單插件。它整合了兩個流行的工具庫(animate.css 和 lettering.js)來提供易於使用的插件,能夠把 CSS3 動畫應用到文本內容上。
3、Bounce.js
Bounce.js 是一個用於制作漂亮的 CSS3 關鍵幀動畫的 JavaScript 庫,使用其特有的方式生成的動畫效果。只需添加一個組件,選擇預設,然后你就可以得到一個短網址或者導出為 CSS 代碼。
4、Walkway.js
Walkway.js 是一個使用線條和路徑元素組成 SVG 動畫圖像的簡單方法。只需根據提供的配置對象創建一個新的 Walkway 實例就可以了。這種效果特別適合那些崇尚簡約設計風格的網頁。目前, Walkway.js 僅適用於路徑和線條元素。
5、Lazy Line Painte
Lazy Line Painter 是基於 Raphaël(一個用於在網頁中繪制矢量圖形的 Javascript 庫)的 jQuery 路徑動畫插件,能夠把線條圖案轉換為吸引眼球的路徑動畫模式。
6、Magic CSS3
Magic CSS3 Animations 動畫是一個獨特的 CSS3 動畫特效包,你可以自由地使用您的 Web 項目中。只需簡單的在頁面上引入 CSS 樣式: magic.css 或者壓縮版本 magic.min.css 就可以使用了。