-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
188 lines (145 loc) · 9.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Web-awesome by fengmiaosen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Web-awesome</h1>
<h2 class="project-tagline">好玩的前端小玩意</h2>
<a href="https://github.com/fengmiaosen/web-awesome" class="btn">View on GitHub</a>
<a href="https://github.com/fengmiaosen/web-awesome/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/fengmiaosen/web-awesome/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="web-awesome" class="anchor" href="#web-awesome" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>web-awesome</h1>
<blockquote>
<p>好玩的前端小玩意</p>
<p>通过个人主页的二级域名访问 <a href="http://fengmiaosen.github.io/web-awesome/">http://fengmiaosen.github.io/web-awesome/</a></p>
</blockquote>
<h1>
<a id="github-rank" class="anchor" href="#github-rank" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Github rank</h1>
<ul>
<li><a href="https://github-ranking.com/">查看</a></li>
</ul>
<h1>
<a id="前端技术汇总" class="anchor" href="#%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E6%B1%87%E6%80%BB" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端技术汇总</h1>
<ul>
<li><p><a href="https://www.awesomes.cn/rank?sort=trend">awesome</a></p></li>
<li><p><a href="https://github.com/nicejade/Front-end-tutorial">前端学习资料大全</a></p></li>
</ul>
<h1>
<a id="页面效果" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面效果</h1>
<ul>
<li>
<p>页面加载库 <a href="http://github.hubspot.com/pace/docs/welcome/">PACE</a></p>
<ul>
<li>多种页面加载效果可供选择</li>
</ul>
</li>
<li><p>基于Canvas的加载动画 <a href="http://tympanus.net/codrops/2016/03/08/spring-loaders-rebound-canvas/">spring-loaders</a></p></li>
<li><p>CSS3D反转特效 <a href="http://adobe.v404.cn/adobe/">adobe</a></p></li>
<li><p>交互式多层饼图 <a href="https://github.com/alexkuz/cake-chart">cake-chart</a></p></li>
<li><p>可视化图 <a href="https://github.com/airbnb/caravel">caravel</a></p></li>
<li><p>CSS3 关键帧动画库<a href="https://travelitem.taobao.com/item.htm?id=35722626709&spm=a1z09.2.0.0.fepqS3&_u=t8fi6pea266">bounce</a></p></li>
<li><p>小型JavaScript动画库 <a href="http://daniel-lundin.github.io/snabbt.js">snabbt</a></p></li>
<li><p>javascript动画库 <a href="https://github.com/juliangarnier/anime">anim</a></p></li>
<li><p>侧栏划出效果 <a href="https://github.com/jakiestfu/Snap.js/">Snap</a></p></li>
</ul>
<h1>
<a id="前端ui框架" class="anchor" href="#%E5%89%8D%E7%AB%AFui%E6%A1%86%E6%9E%B6" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端UI框架</h1>
<ul>
<li><p>基于Vue和WeUI的组件库 <a href="https://vuxjs.gitbooks.io/vux/content/">vux</a></p></li>
<li><p>微信官方UI库 <a href="https://github.com/weui/weui">WeUI</a></p></li>
<li><p>纯CSS UI界面集合 <a href="https://github.com/airen/DemoHouse">Collection best of Web Demos</a></p></li>
</ul>
<h1>
<a id="css框架" class="anchor" href="#css%E6%A1%86%E6%9E%B6" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>CSS框架</h1>
<ul>
<li><p>前端向 10+ 值得前端开发者关注的优秀 CSS 框架 <a href="http://gold.xitu.io/entry/577a7c8c165abd0054c2e2f6">css框架</a></p></li>
<li><p>小型SCSS基础库 <a href="http://sierra-library.github.io/">sierra-library</a></p></li>
<li><p>基于Flex布局的CSS框架库 <a href="http://bulma.io/">bulma</a></p></li>
<li><p>Pure.css <a href="http://purecss.io/">pure.css</a></p></li>
</ul>
<h1>
<a id="页面浮层" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E6%B5%AE%E5%B1%82" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面浮层</h1>
<ul>
<li>浮层效果 <a href="https://github.com/humaan/Modaal">Modaal</a>
</li>
</ul>
<h1>
<a id="前端工具" class="anchor" href="#%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端工具</h1>
<ul>
<li>
<p>在线PPT制作 <a href="http://formidable.com/open-source/spectacle/">spectacle</a></p>
<ul>
<li>基于React基础库使用JSX语法来编写在线演示PPT，并能导出为PDF文档</li>
</ul>
</li>
<li><p>在线内容编辑 <a href="https://github.com/substance/substance">substance</a></p></li>
<li><p>富语义文本编辑 <a href="https://github.com/prosemirror/prosemirror">prosemirror</a></p></li>
<li><p>HTML预编译库 <a href="https://github.com/davidmerfield/typeset">typeset</a></p></li>
<li><p>日期时间处理 <a href="http://momentjs.com/">momentjs</a></p></li>
<li><p>在线解析处理PDF文件 <a href="https://github.com/mozilla/pdf.js">pdf.js</a></p></li>
<li><p>算法可视化学习 <a href="https://github.com/parkjs814/AlgorithmVisualizer">AlgorithmVisualizer</a></p></li>
<li><p>前端SASS组件文档生成管理 <a href="https://github.com/nickberens360/atomic-docs">atomic</a></p></li>
</ul>
<h1>
<a id="版本管理" class="anchor" href="#%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>版本管理</h1>
<ul>
<li>git的纯js实现 <a href="https://github.com/SamyPesse/gitkit-js?utm_source=nodeweekly&utm_medium=email">gitkit.js</a>
</li>
</ul>
<h1>
<a id="前端绘图" class="anchor" href="#%E5%89%8D%E7%AB%AF%E7%BB%98%E5%9B%BE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端绘图</h1>
<ul>
<li><p>像素图形绘制 <a href="https://github.com/googlecreativelab/anypixel">anypixel</a></p></li>
<li><p>SVG 进度条 <a href="https://kimmobrunfeldt.github.io/progressbar.js/">progressbar</a></p></li>
<li><p>刮刮卡刮奖效果 <a href="https://github.com/websanova/wScratchPad">wScratchPad</a></p></li>
</ul>
<h1>
<a id="前端开发调试" class="anchor" href="#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端开发调试</h1>
<ul>
<li><p>Web开发调试工具 <a href="https://github.com/AlloyTeam/AlloyLever">AlloyLever</a></p></li>
<li><p>JavaScript运行性能监测 <a href="https://github.com/mrdoob/stats.js">stats.js</a></p></li>
<li><p>webapp debug工具 <a href="https://github.com/liriliri/eruda">eruda</a></p></li>
<li>
<p>移动设备外框 <a href="https://github.com/marvelapp/devices.css">devices.css</a></p>
<h1>
<a id="娱乐工具" class="anchor" href="#%E5%A8%B1%E4%B9%90%E5%B7%A5%E5%85%B7" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>娱乐工具</h1>
</li>
<li>键盘播放Are you ok歌曲 <a href="https://github.com/llh911001/are-you-ok">are-you-ok</a>
</li>
</ul>
<h1>
<a id="页面布局" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面布局</h1>
<p># <a href="https://golden-layout.com/">golden-layout</a></p>
<h1>
<a id="虚拟现实vr" class="anchor" href="#%E8%99%9A%E6%8B%9F%E7%8E%B0%E5%AE%9Evr" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>虚拟现实（VR）</h1>
<p># <a href="https://aframe.io/">A-Frame</a></p>
<h1>
<a id="开源地图" class="anchor" href="#%E5%BC%80%E6%BA%90%E5%9C%B0%E5%9B%BE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>开源地图</h1>
<p># <a href="http://leafletjs.com/index.html">leafletjs</a></p>
<h1>
<a id="网页字体" class="anchor" href="#%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>网页字体</h1>
<p># <a href="http://font-spider.org/">字蛛</a></p>
<h1>
<a id="桌面app开发" class="anchor" href="#%E6%A1%8C%E9%9D%A2app%E5%BC%80%E5%8F%91" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>桌面APP开发</h1>
<p># 基于JavaScript的桌面app开发 <a href="http://electron.atom.io/">electron</a></p>
<h1>
<a id="手机传感器" class="anchor" href="#%E6%89%8B%E6%9C%BA%E4%BC%A0%E6%84%9F%E5%99%A8" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>手机传感器</h1>
<p># Apple Force Touch支持 <a href="https://github.com/yamartino/pressure">pressure</a></p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/fengmiaosen/web-awesome">Web-awesome</a> is maintained by <a href="https://github.com/fengmiaosen">fengmiaosen</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>