- 相關(guān)推薦
十個值得前端收藏的CSS3動效庫
現(xiàn)在的網(wǎng)站和App的設(shè)計中越來越重視用戶體驗,而優(yōu)秀的動效則能使你的應(yīng)用更具交互性,從而吸引更多用戶的使用。我一般會在網(wǎng)站中加入一些簡單而一致的動效,我所用的技術(shù)則是用SASS +bourbon 來生成出那些基于CSS3的動畫效果來。但如果你對CSS3中定義動效還不熟練,或希望采用更加簡單直接的方式在你的應(yīng)用中引入動效的話,你可以參考并使用下面的這10個優(yōu)秀動效庫(工具)。
1. Animate.css
Animate.css是我比較喜歡的一個CSS3動效庫,非常適合那些對CSS3動畫效果不熟悉,但又希望給自己所做的網(wǎng)站或基于H5的APP引入動效的朋友。因為,你只需要給需要實現(xiàn)動效的元素添加上Animate.css中預(yù)定義的那些動效名稱就可以了。比如常見的:bounce,flash,fadeIn,fadeOut等等,加起來有75種不同的動效,完全能夠滿足你的基本需要了。
當然對于這個庫也有一些使用注意事項,比如你最好在給元素添加動效樣式完成動效后,馬上將這個動效樣式去掉。另外,對于動效的時長,振動幅度等,你也需要做一些調(diào)整。因為,我感覺它默認設(shè)置中的動效過于快速和強烈了。Animate.css已經(jīng)提供了詳細的文檔告訴你應(yīng)該如何做這些調(diào)整。
2. Bounce.js
Bounce.js是一個能夠生成CSS3動效的小工具,它是用JavaScript編寫的,提供了一個Web界面,你可以添加一個組件然后就可以選擇包括Scale,Translate,Rotate,Skew這些動效類型,然后分別設(shè)置它們的參數(shù),當達到你想要的效果后,你可以將這個動效以CSS的方式導出,這樣你就可以將它應(yīng)用到你的應(yīng)用中了。
3. CSS3 Animation
CSS3 Animation是一個非常簡單易用的動效工具,你可以在它提供的簡單圖形界面里,通過拖拽一些進度條來控制你的動效,生成的CSS代碼會自動顯示在下面的一個文本框里,你可以拷貝粘貼到你的應(yīng)用中直接使用。
4. CSS Animate
如果你覺得上面的工具還無法做出你想要的動效,那么可以看看CSS Animate這個工具。它能讓你設(shè)置更多的動效參數(shù),比如你可以同時設(shè)置動效起始和終止狀態(tài)的坐標,大小,以及透明度,這樣你就能夠做出更加復雜的動效來。
5. Magic Animations
Magic Animations與Animate.css十分類似,也是一個預(yù)定義了一系列動效的CSS庫。但與Animate.css的最大區(qū)別可能是,它定義的那些動效更炫也更酷一些,如果你的網(wǎng)站也很新潮,那可以考慮使用這個CSS動效庫。
6.AniJS
AniJS是一個通過JavaScript控制的動效庫。它允許你通過它的鏈式語法來定義動效。比如下面這個例子:當用戶點擊時這個元素會沿Y軸翻轉(zhuǎn)。
7. Single Element CSS Spinners
我們經(jīng)常會需要一些動效來表達系統(tǒng)處于加載或處理數(shù)據(jù)的過程中。Single Element CSS Spinners這個在GitHub上的項目,提供了一組非常漂亮的可用于加載的CSS3動效。
8.Snabbt.js
Sanbbt.js是我很喜歡的一個動效庫,它非常小巧只有5K,所以可以被用在移動應(yīng)用中。而且它也支持鏈式語法,你可以很方便地寫出復雜的動效組合。
snabbt(element, {
position: [200, 0, 0],
easing: function(value) {
return value + 0.3 * Math.sin(2*Math.PI * value);
}
}).snabbt({
position: [0, 0, 0],
easing: 'easeOut'
});
9. Odometer
Odometer是用來給數(shù)字作動效的,比如通過它你可以很好地呈現(xiàn)網(wǎng)站人數(shù)的增加,倒計時等與數(shù)字相關(guān)的動畫效果。
10.Hover.css
Hover.css提供了大量的Hover效果,包括2D變換,圖標變換,背景變換等等。而且?guī)缀蹩梢詰?yīng)用于所有元素,包括鏈接,按鈕,logo,SVG甚至圖片等等。
【十個值得前端收藏的CSS3動效庫】相關(guān)文章:
解讀刷屏級H5排版以及動效08-09
CSS3實現(xiàn)選項卡切換的方法03-29
CSS3水波漣漪動畫定位樣式如何制作03-28
PHP前端開發(fā)中的性能03-28
科目二倒庫移庫技巧03-19
怎樣創(chuàng)建Linux靜態(tài)庫和動態(tài)庫03-01
前端hr面試常問的問題12-05
科目二考試攻略:倒庫移庫技巧03-16
HR必看的企業(yè)人效提升解決方案07-18