前端资源大全
动画库
1.Animate.css
说明：一个简单易用的跨浏览器CSS动画库。
GitHub主页： https://github.com/daneden/animate.css
2.CSShake
说明：用CSS实现各种颠颤动画效果DOM！
GitHub主页： https://github.com/elrumordelaluz/csshake
3.Hover.css
说明：将鼠标Hover效果快速应用在你的网页元素或创意设计上。
GitHub主页：https://github.com/IanLunn/Hover
4.Velocity.js
说明：帮你加速JavaScript动画。
GitHub主页：https://github.com/julianshapiro/velocity
5.DynCSS
说明：用动态CSS来打造你的网页。
GitHub主页：[https://github.com/vzaccaria/DynCSS
6.Magic Animations
说明：可创造CSS3动画特效。
GitHub主页：[https://github.com/miniMAC/magic
7.Bounce.js
说明：即时创造漂亮的CSS3动画。
GitHub主页： https://github.com/tictail/bounce.js
前端框架和类库
1.lodash.js
简介：具有一致接口、模块化、高性能等特性的 JavaScript 工具库
GitHub主页：[https://github.com/lodash/lodash/
2.Underscore.js
简介：JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。
3.AngularJS
简介：AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
GitHub主页：[https://github.com/angular/angular.js
4.React
简介：React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
GitHub主页：[https://github.com/facebook/react
5.Vue.js
简介：Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的，他提取了AngularJS中自己喜欢的部分。Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。
GitHub主页：[https://github.com/vuejs/vue
官方地址：[https://cn.vuejs.org/
6.Backbone.js
简介：Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。Backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。
GitHub主页：[https://github.com/jashkenas/backbone/
7.Ember.js
简介：Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。
GitHub主页：[https://github.com/emberjs/ember.js
前端工具
1.Gulp.js
简介：虽然Gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。
GitHub主页：[https://github.com/gulpjs/gulp
2.NPM
简介：npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。
GitHub主页：[https://github.com/npm/npm
简介：Grunt是第一批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决，Grunt仍然是一个受欢迎的选择。
GitHub主页：[https://github.com/gruntjs/grunt
4.WebPack
简介：Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。
GitHub主页：[https://github.com/webpack/webpack
5.Browserify
简介：Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。
GitHub主页：[https://github.com/substack/node-browserify
6.RequireJS
简介：RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。
GitHub主页：[https://github.com/jrburke/r.js
7.ESLint
简介：ESLint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。
GitHub主页：[https://github.com/eslint/eslint
8.JSHint
简介：JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。
GitHub主页：[https://github.com/jshint/jshint
9.JSLint
简介：JSLint是最早的代码分析工具之一，它实现了一套严格的默认规则。
GitHub主页：[https://github.com/reid/node-jslint
10.Jasmine
简介：Jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试UI和交互。
GitHub主页：[https://github.com/jasmine/jasmine-npm
11.QUnit
简介：QUnit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。
GitHub主页：[https://github.com/kof/node-qunit
CSS框架
1.Bootstrap – 最流行的Web前端UI框架
Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术，Bootstrap提供了时尚的排版样式，表单，buttons，表格，网格系统等等。
官方网站：[http://getbootstrap.com/
2.jQuery UI Bootstrap
它是jQuery UI和Bootstrap的集成，它是Bootstrap样式的，因此外观比较漂亮，同时它拥有jQuery UI的控件功能，这也方便开发者快速地创建一个网页控件。
3.BootMetro - Metro风格的CSS框架
BootMetro是一款基于Bootstrap的前端UI框架，BootMetro的特点是可以很方便地构建类似Windonws 8扁平化风格的网页界面，效果非常不错。官方网站：[http://aozora.github.io/bootmetro/
4.Flat UI - 扁平风格 UI 工具包
Flat UI是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。
官方网站：[https://github.com/designmodo/Flat-UI
5.网易CSS框架
NECNEC是网易推出的开源前端CSS框架，NEC提供了丰富UI代码库和插件，可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员，利用NEC你也可以快速地构建属于自己的网页应用。
官方网站：[http://nec.netease.com/
6.Alloy UI – 功能强大的CSS UI框架
Alloy UI是基于YUI 3的前段UI框架，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。
官方网站：[http://alloyui.com/
7.Cardinal – 移动端的CSS UI框架
Cardinal 是一个小型的移动优先的 CSS 框架，提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。
官方网站：[http://cardinalcss.com/
8.快速开发CSS的框架
CSScaffold不同于许多CSS框架，它必须依靠PHP与Apache的mod_rewrite来执行，但也因为需要这两种东西，让CSScaffold变得很神奇、很方便，写起CSS来又快又轻松！
官方网站：[http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/
9.后台UI开发框架
MuseUI一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。
官方网站：[http://git.oschina.net/muse/museui
前端教程
1.D3.js 入门教程
2.ECMAScript 6 入门 –阮一峰
3.React入门教程
4.TypeScript入门教程
5.Velocity.js中文文档
6.Webpack 2.2 中文文档
7.七天学会NodeJS
8.廖雪峰-Git教程
9.廖雪峰-javascript教程
前端常用插件
1.jQuery内容滚动插件-BoxSlider
2.jQuery artDialog对话框插件
3.移动端日期选择组件
4.图像延迟加载库Echo.js
5.轮播图FlexSlider插件
6.Slick.js幻灯片使用方法
7.JavaScript响应式轮播图插件–Flickity
8.Intro.js 分步向导插件使用方法
9.ScrollReveal-元素随页面滚动产生动画的js插件
10.支持移动触摸的jQuery图片Lightbox插件
11.Owl Carousel幻灯片插件
12.kissui.scrollanim页面滚动动画库插件
13.jQuery cxSelect 联动下拉菜单
14.jQuery cxCalendar 日期选择器
15.jQuery Transit 过渡效果插件
16.lightslider-支持移动触摸的轻量级jQuery幻灯片插件
17.WOW.js滚动页面产生动画
18.FullPage.js全屏插件
19.animate.css动画库
图标
Iconfont
阿里巴巴矢量图标库，Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。
Font Awesome
Font Awesome为您提供可缩放的矢量图标，您可以使用css所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。其特点：
一个字库，675个图标
无需依赖JavaScript
无限缩放
如言语一般自由
CSS控制
高分屏完美呈现
完美兼容其它框架
可用于桌面系统
可适配于屏幕阅读器
网站：http://fontawesome.dashgame.com/
Github: https://github.com/FortAwesome/Font-Awesome/
要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：
1、国内推荐 CDN：
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">2、海外推荐 CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>列表图标
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>边界和被拉的图标
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！动态图标
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>固定宽度图标
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>旋转和翻转的图标
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>堆叠的图标
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-cameraCikonss
Cikonss是利用纯CSS技术构建的响应式、跨浏览器的icon，兼容IE8+。这意味着必须使用CSS2，因此，可以绘制的形状或图形就收到了限制。
某些icon必须有 border-radius 属性，这主要是为了在支持此属性的浏览器上更好的绘制icon，而且不会影响到不支持此属性的浏览器。
网站：http://www.bootcss.com/p/cikonss/index.html
Glyph Icons
Glyphicons Halflings需要商业许可，但是可以通过基于项目的Bootstrap来免费使用这些图标，Bootstrap捆绑了200多个字体图标。
Simple Line Icons
一套线条非常优美的图标。
官网: https://thesabbir.github.io/simple-line-icons/
Github: https://github.com/thesabbir/simple-line-icons
Ionicons
一套线条非常优美的图标，今天为止大约有750多个字体图标，图标多，有标准，iOS，Android，社交图标，图标非常精美。
Github: https://github.com/driftyco/ionicons
Themify
Themify图标是用于网页设计和应用一套完整的图标，包括320以上像素完美，手工制作的图标，画的灵感来自苹果iOS7公开，100%免费！
官网: http://themify.me/themify-icons
Material Design Iconic Font
有提醒，视频，联系，内容，编辑器，硬件，地图等多种分类图标
官网: http://zavoloklom.github.io/material-design-iconic-font/index.html
Github: https://github.com/zavoloklom/material-design-iconic-font
Weather Icons
涵盖了与天气相关字体图标
官网: http://erikflowers.github.io/weather-icons/
国内外CND
国内CDN公共库
百度CDN公共库
百度公共CDN为站长的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。
GIT开源库：https://github.com/Clouda-team/baiducdnstatic
Ps：百度的速度目前来说应该是和新浪差不多的。不过jQuery的版本比SAE少几个，其他类库应该都差不多。
新浪云计算CDN公共库
新浪云计算是新浪研发中心下属的部门，主要负责新浪在云计算领域的战略规划，技术研发和平台运营工作。主要产品包括 应用云平台Sina App Engine（简称SAE）。
SAE的CDN节点覆盖全国各大城市的多路（电信、联通、移动、教育）骨干网络，使开发者能够方便的使用高质量的CDN服务。
Ps：网上有评测说新浪的速度比百度的要好。个人没感觉出来。亲测半夜的时候出现过几次加载慢的情况（不知道其他站长遇到过没有）。
又拍云JS库CDN服务
又拍云存储是杭州纬聚网络有限公司旗下项目，成立于2005年6月，前期主要为又拍网、又拍图片管家提供图片云存储／云计算服务，于2010年2月对所有用户开放使用。
主要专注于海量小文件的存储与分发及图片云计算领域。提供的两大核心服务：静态文件云存储、CDN加速处理。
Ps：又拍云js库提供了常用的JavaScript库CDN服务。算是起步较早的cdn加速服务了。速度和稳定性也不错。不过js库有点少，有些前卫的js库可能不提供。
七牛云存储 开放静态文件CDN
像 Google Ajax Library，Microsoft http://ASP.net CDN，SAE，Baidu，Upyun 等 CDN
上都免费提供的 JS 库的存储，但使用起来却都有些局限，因为他们只提供了部分 JS
库。但七牛云存储提供一个尽可能全面收录优秀开源库的仓库，并免费提供 CDN 加速服务。
GIT开源库：https://github.com/staticfile/static
Ps：同时，开放静态文件CDN也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JS、CSS、image 和 swf 等静态文件。
360网站卫士CDN前端公共库
托管在360众多的全国CDN节点上，覆盖电信、联通、移动等主流运营商线路，您可以在自己的网页上直接通过script标记引用这些资源，让网站访问速度瞬间提速！
只需替换一个域名就可以继续使用Google提供的前端公共库和免费字体库,让网站访问速度瞬间提速。
Ps：360的步伐现在是越来越快了。各种技术和提供的服务更新的速度是飞快的。360CDN服务也是最近才推出的（貌似主要还是Google被墙了
的原因）。提供了大多数的前端js库，还在自己的服务器上面缓存了Google的前端公共库和免费字体库，这个算是其他国内的cdn公共库没有的。速度和
稳定性也不错，当然相比较而且还是略逊于百度和新浪(亲测有些地方宽带线路会断线，可能也是很少部分吧)。毕竟提供服务还没多久。
modules in the sea阿里
阿里提供的公共CDN库，提供的比较少，没啥好说的。
GIT开源库：https://github.com/seajs/modules
Ps：仅提供了几个项目CDN加速，未提供递交。
国外CDN公共库
CDNJS静态资源CDN服务
CDNJS提供非常完整的 JavaScript 程式库，无论是热门或是冷门的一应俱全。若你觉得它们缺少哪些好用的函式库，也可以自行提交到网站里，通过审核后就 CDNJS 就会为你分流 js文件！这项服务是结合 CloudFlare、Pingdom 与 S3Stat的，稳定性与速度自然不在话下。CDNJS提供的 JavaScript Libraries 全部列在网站首页，使用者可以直接搜索。这些程式库都有标示版本编号、标签以及原维护网站链结。
GIT开源库：https://github.com/cdnjs/cdnjs
Ps：CDNJS应该算是最完整的的JS库了。存储了大部分主流的 JS 库，甚至 CSS、image 和
swf，不过很多国内优秀开源库是没有的。很多国外前卫的Js库在CDNJS大都能找到。国内的速度虽然比不上其他的几个国内的CDN服务，但是相对来说
其实还可以。
当然你也可以使用国人提供的CDNJS国内镜像网站的又拍云路径来引用相关JS和CSS文件。
CDNJS国内镜像托管在又拍云存储，但是各种JS或者CSS类库比又拍云自己出的JS库丰富很多,而且每天同步更新且支持https协议。
Google Hosted Libraries
Google出品，必属精品了。虽然最近Google全线产品被墙了，连基本的Google搜索服务都无法使用了。但是谷歌的公共CDN公共库应该是 最强大的了，像其中的前卫的各种代码类库和Google Web Font 字体库，国内几大公共CDN服务几乎都不提供支持。
地址：https://developers.google.com/speed/libraries
Ps：当然，Google打不开怎么办？除了使用国内的cdn库，也没有什么好办法了。如：国内cdn不提供的js库使用七牛云存储cdn加速服务、Google Fonts Open Sans字体库使用360CDN公共库代替等。
360CDN公共库代替：http://ajax.useso.com
360CDN公共库代替：http://fonts.useso.com
Microsoft ASP.net CDN
http://ASP.NET开发团队推出的一个新的微软Ajax CDN（Content Delivery Network，内容分发网络）服务，该服务提供了对AJAX库（包括jQuery 和 http://ASP.NET AJAX）的缓存支持。该服务是免费的，不需任何注册，可用于商业性或非商业性用途。
地址：http://www.asp.net/ajaxlibrary/cdn.ashx
Ps：微软出品，自然不会太差。虽然在天朝，速度依然不会太慢（当然比不上国内的其他cdn）。
MaxCDN：jsDelivr
MaxCDN是一家价格相对比较便宜的CDN公司，在全球分布着众多的节点。 jsDelivr是基于MaxCDN的一个免费开源的 CDN 解决方案，用于帮助开发者和站长。jsDelivr包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。
Ps：每一款CDN的节点数量都是大家所关心的，jsDelivr总共提供着13个节点。加载速度和CDNJS基本差不多，国内用户建议使用国内CDN服务最佳。大家可以自己测试看看。
总结
这些CDN公共库大都各具特色。大家可以自己选择性去使用。速度和稳定性以国内的百度和新浪为最佳（当然这是个人意见）。鉴于Google已经被墙，所有关于Google的服务大家还是尽快转移阵地，使用国内的CDN公共库服务吧。
注：如果担心CDN地址加载失败，可以这样载入本地jquery
<script type="text/javascript">
!window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
</script>参考资料：
web匠人博客：前端 CDN 公共库大全 - Web匠人博客
IT就要上导航-建站技术导航网站：IT就要上导航-建站技术导航 - IT913.com
国内：国内CDN - IT就要上导航-建站技术导航 - IT913.com
百度CDN公共库：百度CDN公共库 - IT就要上导航-建站技术导航 - IT913.com
新浪云计算CDN公共库：新浪云计算CDN公共库 - IT就要上导航-建站技术导航 - IT913.com
又拍云JS库CDN服务：又拍云JS库CDN服务 - IT就要上导航-建站技术导航 - IT913.com
Staticfile CDN：Staticfile CDN - IT就要上导航-建站技术导航 - IT913.com
360前端CDN服务：360前端CDN服务 - IT就要上导航-建站技术导航 - IT913.com
国外：国外CDN - IT就要上导航-建站技术导航 - IT913.com
CDNJS：CDNJS - IT就要上导航-建站技术导航 - IT913.com
Google CDN公共库：Google CDN公共库 - IT就要上导航-建站技术导航 - IT913.com
微软Ajax CDN：微软Ajax CDN - IT就要上导航-建站技术导航 - IT913.com