Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

convert to markdown for web/{demos, events, exslt} zh-CN #7031

Merged
merged 3 commits into from
Jul 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 0 additions & 155 deletions files/zh-cn/web/demos/index.html

This file was deleted.

123 changes: 123 additions & 0 deletions files/zh-cn/web/demos/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
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
---
Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。

如果你知道开源 Web 技术的优秀演示或者应用,就在这里(以及 [英文页面](/en-US/docs/Web/Demos_of_open_web_technologies))添加一个合适的链接吧。

## 2D 图形

### Canvas

- [Blob Sallad: an interactive blob using JavaScript and canvas](http://www.blobsallad.se/)([示例](http://blobsallad.se/article/))
- [Flying through space](http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html)
- [3D RayCaster](/samples/raycaster/RayCaster.html)
- [processing.js](http://processingjs.org/exhibition/)
- [3D on 2D Canvas](http://gyu.que.jp/jscloth/)
- [miniPaint: Image editor](http://viliusle.github.io/miniPaint/)([源码](https://github.com/viliusle/miniPaint))
- [Zen Photon Garden](http://zenphoton.com/)([源码](https://github.com/scanlime/zenphoton))

### SVG

- [Bubblemenu](http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml) (视觉特效与交互)
- [HTML transformations](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/)(使用了 `<foreignObject>` 元素)(视觉特效与变换)
- [Phonetics Guide](http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg)(可交互)
- [3D objects demo](http://www.lutanho.net/svgvml3d/platonic.html)(可交互)
- [Blobular](http://www.themaninblue.com/experiment/Blobular/)(可交互)
- [Video embedded in SVG](http://www.double.co.nz/video_test/video.svg)(或[下载到本地](http://www.double.co.nz/video_test/video_svg.tar.bz2))
- [Summer HTML image map creator](http://summerstyle.github.io/summer/)([源码](https://github.com/summerstyle/summer))

### 视频

- [Video 3D Animation "mozilla constantly evolving"](https://vimeo.com/172328210)
- [Video 3D animation "Floating Dance"](https://vimeo.com/173851395)
- [Streaming Anime, Movie Trailer and Interview](http://www.double.co.nz/video_test/test1.html)
- [Billy's Browser Firefox Flick](http://www.double.co.nz/video_test/test2.html)
- [Virtual Barber Shop](http://www.double.co.nz/video_test/test3.html)
- [Transformers Movie Trailer](http://www.double.co.nz/video_test/test4.html)
- [A Scanner Darkly Movie Trailer](http://www.double.co.nz/video_test/test5.html)(自带控制功能)
- [Events firing and volume control](http://www.double.co.nz/video_test/events.html)
- [Dragable and sizable videos](http://www.double.co.nz/video_test/video.svg)

## 3D 图像

### WebGL

- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
- IoQuake3([源码](https://github.com/klaussilveira/ioquake3.js))
- Escher puzzle([源码](https://github.com/micahbolen/demoscene))
- [Kai 'Opua](http://collinhover.github.io/kaiopua/)([源码](https://github.com/collinhover/kaiopua))

### 虚拟现实(VR)

- [The Polar Sea](http://mozvr.com/demos/polarsea/)([源码](https://github.com/MozVR/polarsea))
- [Sechelt fly-through](http://mozvr.github.io/sechelt/)([源码](https://github.com/mozvr/sechelt))

## CSS

- [CSS Zen Garden](http://www.csszengarden.com/)
- [CSS floating logo "mozilla"](https://codepen.io/SoftwareRVG/pen/OXkOWj/)
- [Paperfold](http://felixniklas.com/paperfold/)
- [CSS Blockout](http://ondras.github.io/blockout/)
- [Rubik's cube](http://ondras.zarovi.cz/demos/rubik/)
- [Pure CSS Slides](http://ondras.zarovi.cz/demos/nojs/)
- Planetarium([源码](https://github.com/littleworkshop/planetarium))
- [Loader with blend modes](https://codepen.io/equinusocio/full/qjyXPP/)
- [Text reveal with clip-path](https://codepen.io/equinusocio/full/KNYOxJ/)
- [Ambient shadow with custom properties](https://codepen.io/equinusocio/full/GvyvWd/)
- [Luminiscent vial](https://codepen.io/equinusocio/full/jEVNeJ/)

旧项目:

- [CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. ](https://s.codepen.io/SoftwareRVG/debug/OXkOWj)(debug 模式)
- [Bootstrap Contact Form Design](https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php)
- [CSS Paralax Forest](http://www.lesmoffat.co.uk/folio/forest/forest.html)
- [Responsive Login Page Design](http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html)
- [One Page Scroll Website Template](http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html)

### 变换

- [Impress.js](http://impress.github.io/impress.js) ([源码](https://github.com/impress/impress.js))

## 游戏

- IoQuake3([源码](https://github.com/klaussilveira/ioquake3.js))
- [Kai 'Opua](http://collinhover.github.io/kaiopua/)([源码](https://github.com/collinhover/kaiopua))

## Web API

### 通知 API

- [HTML5 Notifications](http://elfoxero.github.io/html5notifications/)([源码](https://github.com/elfoxero/html5notifications))

### 网络音频 API

- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
- [oscope.js - JavaScript oscilloscope](http://ondras.github.io/oscope/)
- [HTML5 Web Audio Showcase](http://nipe-systems.de/webapps/html5-web-audio/)([源码](https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase))
- [HTML5 Audio Visualizer](http://wayou.github.io/HTML5_Audio_Visualizer/)([源码](https://github.com/Wayou/HTML5_Audio_Visualizer))
- [Graphical Filter Editor and Visualizer](http://carlosrafaelgn.com.br/GraphicalFilterEditor/)([源码](https://github.com/carlosrafaelgn/GraphicalFilterEditor))

### 文件 API

- [Slide My Text - presentation from plain text files](http://palerdot.github.io/slide-my-text/)

### 其他

- [Web Worker Fractals](http://ondras.github.io/fractal/)
- [Photo editor](http://ondras.github.io/photo/)
- [Coral generator](http://ondras.github.io/coral/)
- [Raytracer](http://nerget.com/rayjs-mt/rayjs.html)
- [HotCold Touch Typing](http://palerdot.github.io/hotcold/)
Loading