十個值得前端收藏的CSS3動效庫
現在的網站和App的設計中越來越重視用户體驗,而優秀的動效則能使你的應用更具交互性,從而吸引更多用户的使用。我一般會在網站中加入一些簡單而一致的動效,我所用的技術則是用SASS +bourbon 來生成出那些基於CSS3的動畫效果來。但如果你對CSS3中定義動效還不熟練,或希望採用更加簡單直接的方式在你的應用中引入動效的話,你可以參考並使用下面的這10個優秀動效庫(工具)。
1.
是我比較喜歡的一個CSS3動效庫,非常適合那些對CSS3動畫效果不熟悉,但又希望給自己所做的網站或基於H5的APP引入動效的朋友。因為,你只需要給需要實現動效的元素添加上中預定義的那些動效名稱就可以了。比如常見的:bounce,flash,fadeIn,fadeOut等等,加起來有75種不同的動效,完全能夠滿足你的基本需要了。
當然對於這個庫也有一些使用注意事項,比如你最好在給元素添加動效樣式完成動效後,馬上將這個動效樣式去掉。另外,對於動效的時長,振動幅度等,你也需要做一些調整。因為,我感覺它默認設置中的動效過於快速和強烈了。已經提供了詳細的文檔告訴你應該如何做這些調整。
2.
是一個能夠生成CSS3動效的小工具,它是用JavaScript編寫的',提供了一個Web界面,你可以添加一個組件然後就可以選擇包括Scale,Translate,Rotate,Skew這些動效類型,然後分別設置它們的參數,當達到你想要的效果後,你可以將這個動效以CSS的方式導出,這樣你就可以將它應用到你的應用中了。
3. CSS3 Animation
CSS3 Animation是一個非常簡單易用的動效工具,你可以在它提供的簡單圖形界面裏,通過拖拽一些進度條來控制你的動效,生成的CSS代碼會自動顯示在下面的一個文本框裏,你可以拷貝粘貼到你的應用中直接使用。
4. CSS Animate
如果你覺得上面的工具還無法做出你想要的動效,那麼可以看看CSS Animate這個工具。它能讓你設置更多的動效參數,比如你可以同時設置動效起始和終止狀態的座標,大小,以及透明度,這樣你就能夠做出更加複雜的動效來。
5. Magic Animations
Magic Animations與十分類似,也是一個預定義了一系列動效的CSS庫。但與的最大區別可能是,它定義的那些動效更炫也更酷一些,如果你的網站也很新潮,那可以考慮使用這個CSS動效庫。
S
AniJS是一個通過JavaScript控制的動效庫。它允許你通過它的鏈式語法來定義動效。比如下面這個例子:當用户點擊時這個元素會沿Y軸翻轉。
7. Single Element CSS Spinners
我們經常會需要一些動效來表達系統處於加載或處理數據的過程中。Single Element CSS Spinners這個在GitHub上的項目,提供了一組非常漂亮的可用於加載的CSS3動效。
是我很喜歡的一個動效庫,它非常小巧只有5K,所以可以被用在移動應用中。而且它也支持鏈式語法,你可以很方便地寫出複雜的動效組合。
snabbt(element, {
position: [200, 0, 0],
easing: function(value) {
return value + 0.3 * (2* * value);
}
})bt({
position: [0, 0, 0],
easing: 'easeOut'
});
9. Odometer
Odometer是用來給數字作動效的,比如通過它你可以很好地呈現網站人數的增加,倒計時等與數字相關的動畫效果。
提供了大量的Hover效果,包括2D變換,圖標變換,背景變換等等。而且幾乎可以應用於所有元素,包括鏈接,按鈕,logo,SVG甚至圖片等等。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
JavaScript數組去重的四種方法
javascript數組去重方法彙總ue1=function(){varn=[];//一個新的臨時數組for(vari=0;i<th;i++)//遍歷當前數組{//如果當前數組的第i已經保存進了臨時數組,那麼跳過,//否則把當前項push到臨時數組裏面if(xOf(this[i])==-1)(this[i]);}returnn;};ue2=function(){var...
-
python批量生成本地ip地址的方法是什麼
python批量生成本地ip地址的方法是什麼呢?本文實例講述了python批量生成本地ip地址的方法。分享給大家供大家參考。具體分析如下:...
-
JavaScript經典效果集錦
些很實用且必用的小腳本代碼:腳本1:進入主頁以後自動播放聲音腳本2:進入主頁後自動最大話,省的去在自己單擊了To(0,0)zeTo(lWidth,lHeight)腳本3:顯示現在時間的腳本enow腳本4:顯示最後修改時間的.腳本e(Modified)腳本5:設為首頁,加為收藏,加入頻道,啟動outlook...