九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪_前端特效库

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

文章目录

• 九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪
• 1. Lottie-web/Bodymovin
• 2. Parallax.js
• 3. Magic Grid
• 4. webslides
• 5. SVG.js
• 6. rellax
• 7. dynamics.js
• 8. mo.js
• 9. zdog

---

1. Lottie-web/Bodymovin

库地址：https://github.com/airbnb/lottie-web

有了这个库，可以从Adode After Effects 中场景的动画直接导出到你的网址

2. Parallax.js

库地址：https://github.com/wagerfield/parallax

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

3. Magic Grid

库地址：https://github.com/e-oj/Magic-Grid

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

4. webslides

库地址：https://github.com/webslides/webslides

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

5. SVG.js

库地址：https://github.com/svgdotjs/svg.js

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

6. rellax

库地址：https://github.com/dixonandmoe/rellax

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

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：