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