不知道交互動(dòng)畫如何描述?看看這10個(gè)交互動(dòng)畫平臺(tái)

下面將介紹基本的簡(jiǎn)單交互動(dòng)畫還有復(fù)雜、酷炫的動(dòng)畫庫(kù)?？稍谄脚_(tái)上面操作查看效果，也可下載代碼庫(kù)在代碼里面調(diào)用。

WickedCSS animations

WickedCSS 描述一個(gè)對(duì)象最簡(jiǎn)單的幾十種動(dòng)效，比如旋轉(zhuǎn)、傾斜、平移、放大縮小、淡入淡出等。在平臺(tái)上通過(guò)點(diǎn)擊不同的動(dòng)效按鈕就可以看到動(dòng)畫的實(shí)際效果～

傳送門：http://kristofferandreasen.github.io/wickedCSS

animate css

animate css 是一個(gè)動(dòng)畫基礎(chǔ)庫(kù)，有簡(jiǎn)單的彈跳、扭曲、旋轉(zhuǎn)，比較全面。在平臺(tái)通過(guò)點(diǎn)擊動(dòng)效按鈕來(lái)查看動(dòng)畫效果～

傳送門：https://animate.style/

odometer

odometer是展示數(shù)字動(dòng)態(tài)變化的倉(cāng)庫(kù)，比如金額的變化、倒計(jì)時(shí)等等。

傳送門：https://github.hubspot.com/odometer/docs/welcome/

Hover css

Hover 是展示懸浮狀態(tài)的各種動(dòng)畫，動(dòng)畫種類非常多。在平臺(tái)只要鼠標(biāo)懸浮在按鈕，就能看到動(dòng)畫。

傳送門：http://ianlunn.github.io/Hover/

Anime.js

Anime 提供了多種類型的酷炫動(dòng)畫，可直接在平臺(tái)看效果和拷貝代碼。

傳送門：https://codepen.io/collection/XLebem/

three.js

three.js是很受歡迎的酷炫動(dòng)畫庫(kù)。平臺(tái)提供了搜索，可搜索想看的動(dòng)畫。

傳送門：https://threejs.org/examples/

Typed.js

Typed 是一個(gè)專注打字效果的庫(kù)。

傳送門：http://mattboldt.github.io/typed.js/

rocket

rocket提供了一個(gè)物體從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的動(dòng)效。

傳送門：https://minimamente.com/example/rocket/

DynCSS

DynCSS 是適用于官網(wǎng)滾動(dòng)的動(dòng)畫庫(kù)。比如當(dāng)滾動(dòng)官網(wǎng)首頁(yè)時(shí)，每一段頁(yè)面元素都由動(dòng)畫慢慢顯示出來(lái)

傳送門：https://www.vittoriozaccaria.net/dyncss-example/

Single Element CSS Spinners

適用于頁(yè)面加載中的各種動(dòng)畫。

傳送門：https://projects.lukehaas.me/css-loaders/

---- end ----

???? 愛心三連擊?????

看到這里了就點(diǎn)個(gè)在看/分享支持下吧，你的點(diǎn)贊、分享、在看是我持續(xù)創(chuàng)作的動(dòng)力！