携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第14天，点击查看活动详情

1. Lottie-Web/Bodymovin

github 地址：github.com/airbnb/lott…

从我最喜欢的资源库开始。有了这个库，可以从Adobe After Effects中创建的动画直接导出到你的网站。

事例：

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

2. Parallax.js

github: github.com/wagerfield/…

有了这个库，我们可以创建一个美丽的视差效果，可以用鼠标移动来控制，还可以调整移动物体的速度。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

3. Flat Surface Shader [FSS]

github: github.com/wagerfield/…

Flat Surface Shader 是一个超炫的 3D 模拟照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采用原生的 Float32Arrays 存储数字数据，进行高度优化的计算。可以调整颜色参数预览效果，而且可以导出图像。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

4. Hover.css

github: github.com/IanLunn/Hov…

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

5. Video.js Markers

github: github.com/spchuang/vi…

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

有了这个插件，你可以在你网站上存在的视频上放置必要的标记，这样就可以轻松地切换到我们需要的时间代码。

6. Magic Grid

github: github.com/e-oj/Magic-…

这个库帮助我们创建一个自适应网格，在这里你不需要创建单独的 @media 样式。只要指定容器，就可以了。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

7. Vue/React Content Loader

github: github.com/egoist/vue-…

Vue Content Loader 是一个基于 Vue.js 的 SVG 占位符加载，可自定义的 SVG 组件，用于创建占位符加载，例如 Facebook 加载卡。

Vue Content Loader 是 react-content-loader 的 Vue 实现。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

8. React Image Gallery

github: github.com/xiaolin/rea…

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

9. WebSlides

github: github.com/webslides/W…

WebSlides 是一个开源的 HTML 幻灯片项目，能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片。页面中的每个 <section> 都是一个独立的幻灯片，只需要很少的 CSS 代码装饰即可。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

10. SVG.js

github: github.com/svgdotjs/sv…

SVG.js 是一个轻量级的 JavaScript 库，允许你轻松操作 SVG 和定义动画。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！
事例地址：jsfiddle.net/Fuzzy/f2wbg…

11. React Motion

github: github.com/chenglou/re…

React Motion 是一个 React 弹性动画库，使用 0-10 的弹性参数进行动画处理：

import{Motion,spring}from'react-motion';
//Inyourrender...
<MotiondefaultStyle={{x:0}}style={{x:spring(10)}}>
{value=><div>{value.x}</div>}
</Motion>

这个库解决了什么问题？

对于 95% 的动画组件使用案例，我们没有必要用硬编码(把配置写死)式的缓冲曲线和时间过渡来重排序。只需要给你的 UI 设置一个刚度系数和阻尼系数，接下来让神奇的物理原理处理即可。用这种方式，根本无需担心如中断动画等小问题。它也极大的简化了 API 。

事例：

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

12. RELLAX

github: github.com/dixonandmoe…

rellax.js 是一款轻量级的纯 JavaScript 滚动视觉差特效插件。rellax.js 压缩后的版本仅 871 个字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

13. Dynamics.js

github: github.com/michaelvill…

dynamics.js 是一个 Javascript 库，可以创建基于物理的 CSS 动画。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

14. mo.js

github: github.com/mojs/mojs

Mo.js 是一个”简洁、高效”图形动画库，拥有流畅的动画和惊人的用户体验，在任何设备上，屏幕密度独立的效果都很好，你可以绘制内置的形状或者自定义形状，随便，只要你喜欢，你还可以绘制多个动画，再让它们串联在一起，逼话不多说详细的请浏览 Mo.js 官方网站

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

15. Reveal.js

github:github.com/hakimel/rev…

Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。缺点是使用 markdown 时对单个 HTML 元素操作不够灵活。

这个攻略会记录一些使用 Reveal.js 做 PPT 的心得以及经验教训。为了简单化，会尽力使用 Markdown 做静态页面，在动画演示部分使用 p5js。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

16. Animsition

github: github.com/blivesta/an…

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

17. SVG Mesh 3d

github: github.com/mattdesl/sv…

一个将 SVG 字符串转换为 3D 三角网格的高级模块。最适合用于剪影，如字体图标 SVG。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

18. Zdog

github: github.com/metafizzy/z…

zdog 是一个圆形、扁平、设计师友好的伪 3D 引擎，通过这个库，可以创建伪 3D 元素，不需要知道几何或代数来创建几何图形。。

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

谢谢支持

如果有什么不同的想法，可以在评论区留言，大家一起学习呀~ 最后如果这篇文章对您有帮助的话，请一件三连给作者一点点支持，谢谢啦！

以上便是本次分享的全部内容，希望对你有所帮助^_^