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>