建站
咨詢
售后
建站咨詢
新聞中心
上代碼。。。。。。。。。。
1. Lottie-Web/Bodymovin
github 地址：https://github.com/airbnb/lottie-web
從我最喜歡的資源庫開始。有了這個庫，可以從Adobe After Effects中創(chuàng)建的動畫直接導(dǎo)出到你的網(wǎng)站。
事例：
2. Parallax.js
github: https://github.com/wagerfield/parallax
有了這個庫，我們可以創(chuàng)建一個美麗的視差效果，可以用鼠標(biāo)移動來控制，還可以調(diào)整移動物體的速度。
3. Flat Surface Shader [FSS]
github: https://github.com/wagerfield/flat-surface-shader
Flat Surface Shader 是一個超炫的 3D 模擬照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多邊形數(shù)組繪制三角形。它還采用原生的 Float32Arrays 存儲數(shù)字?jǐn)?shù)據(jù)，進行高度優(yōu)化的計算。可以調(diào)整顏色參數(shù)預(yù)覽效果，而且可以導(dǎo)出圖像。
4. Hover.css
github: https://github.com/IanLunn/Hover
Hover.css 是一套基于 CSS3 的鼠標(biāo)懸停效果和動畫，這些可以非常輕松的被應(yīng)用到按鈕、LOGO 以及圖片等元素。所有這些效果都是只需要單一的標(biāo)簽，必要的時候使用 before 和 after 偽元素。因為使用了 CSS3 過渡、轉(zhuǎn)換和動畫效果，因此只支持 Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器。
5. Video.js Markers
github: https://github.com/spchuang/videojs-markers
Video.js 是一個通用的在網(wǎng)頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況,如果不支持 HTML5 則自動使用 Flash 播放器。
有了這個插件，你可以在你網(wǎng)站上存在的視頻上放置必要的標(biāo)記，這樣就可以輕松地切換到我們需要的時間代碼。
6. Magic Grid
github: https://github.com/e-oj/Magic-Grid
這個庫幫助我們創(chuàng)建一個自適應(yīng)網(wǎng)格，在這里你不需要創(chuàng)建單獨的 @media 樣式。只要指定容器，就可以了。
7. Vue/React Content Loader
github: https://github.com/egoist/vue-content-loader
Vue Content Loader是一個基于Vue.js的SVG占位符加載，可自定義的SVG組件，用于創(chuàng)建占位符加載，例如Facebook加載卡。
Vue Content Loader是react-content-loader的Vue實現(xiàn)。
8. React Image Gallery
github: https://github.com/xiaolin/react-image-gallery
9. WebSlides
github: https://github.com/webslides/WebSlides
WebSlides 是一個開源的 HTML 幻燈片項目，能夠幫助熟悉前端語言的開發(fā)者快速制作出效果精美的幻燈片。頁面中的每個
都是一個獨立的幻燈片，只需要很少的 CSS 代碼裝飾即可。
10. SVG.js
github: https://github.com/svgdotjs/svg.js
SVG.js是一個輕量級的JavaScript庫，允許你輕松操作SVG和定義動畫。
事例地址：https://jsfiddle.net/Fuzzy/f2wbgx5a/
11. React Motion
github: https://github.com/chenglou/react-motion
React Motion 是一個 React 彈性動畫庫，使用 0-10 的彈性參數(shù)進行動畫處理：
- import {Motion, spring} from 'react-motion';
- // In your render...
- {value =>
{value.x}}
這個庫解決了什么問題?
對于 95% 的動畫組件使用案例，我們沒有必要用硬編碼(把配置寫死)式的緩沖曲線和時間過渡來重排序。只需要給你的 UI 設(shè)置一個剛度系數(shù)和阻尼系數(shù)，接下來讓神奇的物理原理處理即可。用這種方式，根本無需擔(dān)心如中斷動畫等小問題。它也極大的簡化了 API 。
事例：
12. RELLAX
github: https://github.com/dixonandmoe/rellax
rellax.js是一款輕量級的純JavaScript滾動視覺差特效插件。rellax.js壓縮后的版本僅871個字節(jié)，在手機等小屏幕設(shè)備中，插件會自動限制視覺差特性。
13. Dynamics.js
github: https://github.com/michaelvillar/dynamics.js
dynamics.js 是一個 Javascript 庫，可以創(chuàng)建基于物理的 CSS 動畫。
14. mo.js
github: https://github.com/mojs/mojs
Mo.js是一個"簡潔、高效"圖形動畫庫，擁有流暢的動畫和驚人的用戶體驗，在任何設(shè)備上，屏幕密度獨立的效果都很好，你可以繪制內(nèi)置的形狀或者自定義形狀，隨便，只要你喜歡，你還可以繪制多個動畫，再讓它們串聯(lián)在一起，逼話不多說詳細(xì)的請瀏覽 Mo.js官方網(wǎng)站
15. Reveal.js
github:https://github.com/hakimel/reveal.js
Reveal.js 做 PPT 的優(yōu)點是可以使用 markdown 語言直接寫靜態(tài)的文本，并可以加入各種 html 語言支持的交互動畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。缺點是使用 markdown 時對單個 HTML 元素操作不夠靈活。
這個攻略會記錄一些使用 Reveal.js 做 PPT 的心得以及經(jīng)驗教訓(xùn)。為了簡單化，會盡力使用 Markdown 做靜態(tài)頁面，在動畫演示部分使用 p5js。
16. Animsition
github: https://github.com/blivesta/animsition
17. SVG Mesh 3d
github: https://github.com/mattdesl/svg-mesh-3d
一個將SVG字符串轉(zhuǎn)換為3D三角網(wǎng)格的高級模塊。最適合用于剪影，如字體圖標(biāo)SVG。
18. Zdog
github: https://github.com/metafizzy/zdog
zdog 是一個圓形、扁平、設(shè)計師友好的偽3D引擎，通過這個庫，可以創(chuàng)建偽3D元素，不需要知道幾何或代數(shù)來創(chuàng)建幾何圖形。。
作者：Chimezie Enyinnaya 譯者：前端小智
來源：blog 原文：https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo
本文題目：我用這十八個神奇的庫，美化了我的項目，真是亮瞎我的眼！
標(biāo)題網(wǎng)址：http://m.fisionsoft.com.cn/article/coeiiig.html
