国产AV,玖玖亚洲电影,激情小说区

10個(gè)值得前端收藏的CSS3動(dòng)效庫（工具）

轉(zhuǎn)帖|行業(yè)資訊|編輯：龔雪|2016-06-20 16:10:57.000|閱讀 394 次

概述：現(xiàn)在的網(wǎng)站和App的設(shè)計(jì)中越來越重視用戶體驗(yàn)，而優(yōu)秀的動(dòng)效則能使你的應(yīng)用更具交互性，從而吸引更多用戶的使用。

現(xiàn)在的網(wǎng)站和App的設(shè)計(jì)中越來越重視用戶體驗(yàn)，而優(yōu)秀的動(dòng)效則能使你的應(yīng)用更具交互性，從而吸引更多用戶的使用。我一般會(huì)在網(wǎng)站中加入一些簡單而一致的動(dòng)效，我所用的技術(shù)則是用SASS+bourbon來生成出那些基于CSS3的動(dòng)畫效果來。但如果你對(duì)CSS3中定義動(dòng)效還不熟練，或希望采用更加簡單直接的方式在你的應(yīng)用中引入動(dòng)效的話，你可以參考并使用下面的這10個(gè)優(yōu)秀動(dòng)效庫（工具）。

1. Animate.css

Animate.css是我比較喜歡的一個(gè)CSS3動(dòng)效庫，非常適合那些對(duì)CSS3動(dòng)畫效果不熟悉，但又希望給自己所做的網(wǎng)站或基于H5的APP引入動(dòng)效的朋友。因?yàn)椋阒恍枰o需要實(shí)現(xiàn)動(dòng)效的元素添加上Animate.css中預(yù)定義的那些動(dòng)效名稱就可以了。比如常見的：bounce，flash，fadeIn，fadeOut等等，加起來有75種不同的動(dòng)效，完全能夠滿足你的基本需要了。

當(dāng)然對(duì)于這個(gè)庫也有一些使用注意事項(xiàng)，比如你最好在給元素添加動(dòng)效樣式完成動(dòng)效后，馬上將這個(gè)動(dòng)效樣式去掉。另外，對(duì)于動(dòng)效的時(shí)長，振動(dòng)幅度等，你也需要做一些調(diào)整。因?yàn)椋腋杏X它默認(rèn)設(shè)置中的動(dòng)效過于快速和強(qiáng)烈了。Animate.css已經(jīng)提供了詳細(xì)的文檔告訴你應(yīng)該如何做這些調(diào)整。

2. Bounce.js

Bounce.js是一個(gè)能夠生成CSS3動(dòng)效的小工具，它是用JavaScript編寫的，提供了一個(gè)Web界面，你可以添加一個(gè)組件然后就可以選擇包括Scale，Translate，Rotate，Skew這些動(dòng)效類型，然后分別設(shè)置它們的參數(shù)，當(dāng)達(dá)到你想要的效果后，你可以將這個(gè)動(dòng)效以CSS的方式導(dǎo)出，這樣你就可以將它應(yīng)用到你的應(yīng)用中了。

3. CSS3 Animation

CSS3 Animation是一個(gè)非常簡單易用的動(dòng)效工具，你可以在它提供的簡單圖形界面里，通過拖拽一些進(jìn)度條來控制你的動(dòng)效，生成的CSS代碼會(huì)自動(dòng)顯示在下面的一個(gè)文本框里，你可以拷貝粘貼到你的應(yīng)用中直接使用。

4. CSS Animate

如果你覺得上面的工具還無法做出你想要的動(dòng)效，那么可以看看CSS Animate這個(gè)工具。它能讓你設(shè)置更多的動(dòng)效參數(shù)，比如你可以同時(shí)設(shè)置動(dòng)效起始和終止?fàn)顟B(tài)的坐標(biāo)，大小，以及透明度，這樣你就能夠做出更加復(fù)雜的動(dòng)效來。

5.Magic Animations

Magic Animations與Animate.css十分類似，也是一個(gè)預(yù)定義了一系列動(dòng)效的CSS庫。但與Animate.css的最大區(qū)別可能是，它定義的那些動(dòng)效更炫也更酷一些，如果你的網(wǎng)站也很新潮，那可以考慮使用這個(gè)CSS動(dòng)效庫。