blob: 04c11c2257feb3948749c32a6c62e8e8b9b5ac6a (
plain)
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
|
---
title: 开源 Web 技术示例
slug: Web/Demos
tags:
- 2D
- 3D
- CSS
- Canvas
- Design
- HTML
- SVG
- Video
translation_of: Web/Demos_of_open_web_technologies
original_slug: Web/Demos_of_open_web_technologies
---
<p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p>
<p>如果你知道开源 Web 技术的优秀演示或者应用,就在这里（以及 <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies">英文页面</a>）添加一个合适的链接吧。</p>
<h2 id="2D_图形">2D 图形</h2>
<h3 id="Canvas">Canvas</h3>
<ul>
<li><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using JavaScript and canvas</a>（<a href="http://blobsallad.se/article/">示例</a>）</li>
<li><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></li>
<li><a href="https://developer.mozilla.org/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></li>
<li><a href="http://processingjs.org/exhibition/">processing.js</a></li>
<li><a href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
<li><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a>（<a href="https://github.com/viliusle/miniPaint">源码</a>）</li>
<li><a href="http://zenphoton.com/">Zen Photon Garden</a>（<a href="https://github.com/scanlime/zenphoton">源码</a>）</li>
</ul>
<h3 id="SVG">SVG</h3>
<ul>
<li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> （视觉特效与交互）</li>
<li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a>（使用了 <code><foreignObject></code> 元素）（视觉特效与变换）</li>
<li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a>（可交互）</li>
<li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a>（可交互）</li>
<li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a>（可交互）</li>
<li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a>（或<a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">下载到本地</a>）</li>
<li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a>（<a href="https://github.com/summerstyle/summer">源码</a>）</li>
</ul>
<h3 id="Video" name="Video">视频</h3>
<ul>
<li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" </a></li>
<li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" </a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a>（自带控制功能）</li>
<li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
<li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
</ul>
<h2 id="3D_图像">3D 图像</h2>
<h3 id="WebGL">WebGL</h3>
<ul>
<li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
<li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
<li>Escher puzzle（<a href="https://github.com/micahbolen/demoscene">源码</a>）</li>
<li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
</ul>
<h3 id="虚拟现实（VR）">虚拟现实（VR）</h3>
<ul>
<li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a>（<a href="https://github.com/MozVR/polarsea">源码</a>）</li>
<li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a>（<a href="https://github.com/mozvr/sechelt">源码</a>）</li>
</ul>
<h2 id="CSS">CSS</h2>
<ul>
<li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
<li><a href="https://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></li>
<li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
<li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
<li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
<li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
<li>Planetarium（<a href="https://github.com/littleworkshop/planetarium">源码</a>）</li>
<li><a href="https://codepen.io/equinusocio/full/qjyXPP/">Loader with blend modes</a></li>
<li><a href="https://codepen.io/equinusocio/full/KNYOxJ/">Text reveal with clip-path</a></li>
<li><a href="https://codepen.io/equinusocio/full/GvyvWd/">Ambient shadow with custom properties</a></li>
<li><a href="https://codepen.io/equinusocio/full/jEVNeJ/">Luminiscent vial</a></li>
</ul>
<p>旧项目：</p>
<ul>
<li><a href="https://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. </a>(debug模式)</li>
<li><a href="https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Bootstrap Contact Form Design</a></li>
<li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
<li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Responsive Login Page Design</a></li>
<li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">One Page Scroll Website Template</a></li>
</ul>
<h3 id="变换">变换</h3>
<ul>
<li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">源码</a>)</li>
</ul>
<h2 id="游戏">游戏</h2>
<ul>
<li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
<li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
</ul>
<h2 id="Web_API">Web API</h2>
<ul>
</ul>
<h3 id="通知_API">通知 API</h3>
<ul>
<li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a>（<a href="https://github.com/elfoxero/html5notifications">源码</a>）</li>
</ul>
<ul>
</ul>
<h3 id="网络音频_API">网络音频 API</h3>
<ul>
<li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
<li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
<li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a>（<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">源码</a>）</li>
<li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a>（<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">源码</a>）</li>
<li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a>（<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">源码</a>）</li>
</ul>
<h3 id="文件_API">文件 API</h3>
<ul>
<li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
</ul>
<h3 id="Unclassified" name="Unclassified">其他</h3>
<ul>
<li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
<li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
<li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
<li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
<li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
</ul>
|
