8个惊艳的 HTML5 和 JavaScript 特效

openkk 13年前
     这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效。作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的开发人员开始使用 HTML5 来制作各种交互性强、效果丰富的 Web 应用。下面这些惊艳的示例带您体验 Web 技术的魅力,相信你看完这些例子后会对未来的 Web 发展充满无限期待。为了有更好的效果,建议在 Chrome 浏览器中浏览。    <div>     <ul style="padding-bottom:0px;list-style-type:none;margin:30px 0px;padding-left:0px;padding-right:0px;font-size:13px;padding-top:0px;" class="list">      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183786577043399" target="_blank">Crazy Tentacles</a><a href="/misc/goto?guid=4958183787373631202" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/2a5cd831be76c7e3cfd83bb96726f650.jpg" /></a><span style="margin-top:15px;display:block;">这个示例叫疯狂的触手,移动鼠标可以进行涂鸦,点击鼠标可以清除画布。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183788115764224" target="_blank">Typographic Effects</a><a href="/misc/goto?guid=4958183788858197475" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/5dcb92e7ca4ec89ff59488f920cdd29a.jpg" /></a><span style="margin-top:15px;display:block;">使用HTML5 Canvas实现的文本特性,制作教程可参考:<a href="/misc/goto?guid=4958183789600879860" target="_blank">Typographic effects in canvas</a></span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183790342640476" target="_blank">WebGL Globe</a><a href="/misc/goto?guid=4958183791077645251" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/82de1a9728ee7225371127ae045c9fc5.jpg" /></a><span style="margin-top:15px;display:block;">WebGL Globe 是一个开放的地理数据可视化平台,我们鼓励你复制代码,添加自己的数据,创建自己的应用。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183791818400692" target="_blank">Nebula</a><a href="/misc/goto?guid=4958183792554239526" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/b3a060609212361b8dce134c8cdaf8d3.jpg" /></a><span style="margin-top:15px;display:block;">吸引眼球的粒子系统,旨在测试WebGL的性能,滑动书包能产生绚丽的效果。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183793288404473" target="_blank">Particle Playground</a><a href="/misc/goto?guid=4958183794028304317" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/fe2d79131af19cb9962fab2fd12f5a03.jpg" /></a><span style="margin-top:15px;display:block;">用鼠标和粒子进行交互,大胆一些,就能发现你第一眼发看不到的精彩。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183794780567471" target="_blank">Tron Tank</a><a href="/misc/goto?guid=4958183795516411824" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/2b2ff99b5ea2b90f1f4aa418d3f27f01.jpg" /></a><span style="margin-top:15px;display:block;">使用 WebGL 实现的特隆坦克,灵感来源于迪斯尼1981电影《Tron》。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183796254276893" target="_blank">Photo Particle</a><a href="/misc/goto?guid=4958183796998981447" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/be76640a0bb80d7c19f64adc2896f56b.jpg" /></a><span style="margin-top:15px;display:block;">照片粒子实验,如果你想知道把一张照片分解成一个个粒子,并有红、绿、蓝三个中心会是什么样的,试试这个实验吧。</span></li>      <li style="line-height:1.5em;list-style-type:none;margin:10px 0px 30px 10px;"><a style="outline-width:0px;color:#257393;font-size:16px;font-weight:bold;text-decoration:none;" href="/misc/goto?guid=4958183797729019979" target="_blank">Surface</a><a href="/misc/goto?guid=4958183798478500268" target="_blank"><img style="border-bottom:#dddddd 5px solid;border-left:#dddddd 5px solid;margin:10px 0px 0px;display:block;border-top:#dddddd 5px solid;border-right:#dddddd 5px solid;box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 0px 0px 5px;" alt="8个惊艳的HTML5和JavaScript特效" src="https://simg.open-open.com/show/567848ded9d17a5fd645b15d4bb2ef0c.jpg" /></a><span style="margin-top:15px;display:block;">使用WebGL实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。<br /> <br /> 转自:<a href="/misc/goto?guid=4958183799211997456" target="_blank">http://www.cnblogs.com/lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html</a><br /> </span></li>     </ul>    </div>