16 个印象深刻的 HTML5/CSS3/JavaScript 体验

fmms 12年前
     <p>如果你是一个 Canvas、WebGL 和交互式 CSS3, HTML5 以及 Javascript 的粉丝，那你可能会听说来自瑞典的 Web 开发者 <a href="/misc/goto?guid=4958322171391926898">Hakim</a>. Hakim 非常擅长 Web 动画和交互，他有很多关于 HTML5、CSS3 和 JavaScript 的个人项目，可在 <a href="/misc/goto?guid=4958186272089781616">Chrome Experiments</a> 找到。我们对他的那些非常有创意、非常酷的项目印象深刻，下面列出其中最酷的一些。</p>    <ul>     <li><a href="/misc/goto?guid=4958338051086758193" target="_blank">CSS3 Scroll Effect</a> <p>很酷的列表滚动效果</p> <img title="CSS3 Scroll Effect" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/ba607475c5a073bdef8c33c8fbe44fea.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338051883684644" target="_blank">DOM Tree</a> <p>圣诞树</p> <img title="DOM Tree" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/8eb851ea05cf2f73067554f31f992446.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338052673524352" target="_blank">Origami</a> <p>在一个丰富多彩的折叠上乱写乱画。在图纸上的任何地方 - 或使用键盘 - 激活不同的布局。</p> <img title="Origami" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/bf9698a255a45a7154044ff13ac9fd1a.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338053470169577" target="_blank">.net 404</a> <p>异样的 404 错误页面</p> <img title=".net 404" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/36971259ba74e493921fc78564c4f14f.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338054265543790" target="_blank">Sphere</a> <p>球体 - 实际上是一个螺旋 - 建立了10000粒子和结构的变化，随着时间的推移。</p> <img title="Sphere" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/ffa56a3428494378797588f96b785068.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338055051974929" target="_blank">Textify.it</a> <p><span id="result_box" lang="zh-CN" class="short_text"><span>浏览器</span><span>或</span><span>拖动到页面上</span><span>的</span><span>图像</span><span>以观看使用纯文本构建的图像。</span></span></p> <img title="Textify.it" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/9f5f46d77240596529ac80247089ba19.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338055850462065" target="_blank">WebGL Particles</a> <p>用来测试WebGL渲染粒子的效率</p> <img title="WebGL Particles" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/7b8e76533d24a63e9afeaf43cc70b0f1.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338056659081165" target="_blank">BreakDOM</a> <p>这是一个混合的经典突围游戏，除了所有的游戏元素与HTML用户界面元素已取代。</p> <img title="BreakDOM" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/a8d16f70914311586c621d1d58b6500c.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338057461671697" target="_blank">Sinuous</a> <p>一个使用 HTML Canvas 构建的游戏，考验你的鼠标指针反应。</p> <img title="Sinuous" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/91d4696bb8f039d380d44b15305849c3.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958190713965828595" target="_blank">Magnetic</a> <p>控制和创建的粒子反应磁性节点的电流。</p> <img title="Magnetic" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/8722fe654d65cdcf60cc4d0e85940acd.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338058987227410" target="_blank">Wave</a> <p>波浪与浮于表面的气泡</p> <img title="Wave" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/45296159da7e178b58d013d3fc5e5c2a.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338059792814536" target="_blank">Trail</a> <p>粒子的运动模式，生成光滑的小径。</p> <img title="Trail" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/72830537309f267084164a1007b3241a.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338060588141915" target="_blank">Blob</a> <p>软物体的模拟，就像是果冻</p> <img title="Blob" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/a9e635d972852cea782ce94cddb2dfdc.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338061388491772" target="_blank">Bacterium</a> <p>互动与俏皮的模拟动态物理世界中的细菌实验。</p> <img title="Bacterium" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/cb89451671d2f5be177d479fec53b746.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338062172354055" target="_blank">Particle Depth</a> <p>使用深度的 粒子定位模式。</p> <img title="Particle Depth" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/2d9bcfbf7978f33cdb06f4029cb4a3c3.jpg" width="500" height="250" /></li>     <li><a href="/misc/goto?guid=4958338062975641175" target="_blank">Keylight</a> <p>A playhead travels between keys which resonate in sound depending on where they are placed in the room.</p> <img title="Keylight" alt="16 个印象深刻的 HTML5/CSS3/JavaScript 体验" src="https://simg.open-open.com/show/f258dcde8a82d79a526121b8165748aa.jpg" width="500" height="250" /></li>    </ul>    <p>via <a href="/misc/goto?guid=4958338063763709310" target="_blank">favbulous</a></p>