10个让人眼花缭乱的 HTML5 和 JavaScript 效果

作为下一代网页语言，HTML5 拥有很多让人期待已久的新特性。如今，很多 Web 开发人员开始使用 HTML5 来制作各种丰富的 Web 应用。本文向大家展示10个让人眼花缭乱的 HTML5 和 JavaScript 效果，让你体验下一代 Web 技术的魅力，相信你看完这些例子后会对未来的 Web 发展充满无限期待。
[u][color=red][url=http://mudcu.be/labs/JS1k/BreathingGalaxies.html]Breathing Galaxies[/url][/color][/u] <-----点击查看
[img]http://dl.iteye.com/upload/attachment/508014/8902122b-7c9b-3d9b-9a98-2361ac8bcc25.jpg[/img]


动态变换颜色和直径，可通过键盘或者鼠标产生新的形状，这个效果很炫很炫！
[u][color=red][url=http://www.openrise.com/lab/FlowerPower]FlowerPower[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508003/e2b71304-22c3-32d6-90e0-416e92096313.jpg[/img]


灵感来自大自然的使用，使用花朵作为画刷，以贝兹曲线方式绘图。
[u][color=red][url=http://www.airtightinteractive.com/demos/processing_js/noisefield08.html]Noise Field[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508584/dc778ffe-c2a1-3603-a98a-0f2d600f9a00.jpg[/img]


移动鼠标可改变粒子的运动，点击可随机生成不同的粒子效果。
[u][color=red][url=http://hakim.se/experiments/html5/keylight/03/]Keylight[/url][/color][/u]<----点击查看
[img]http://dl.iteye.com/upload/attachment/508586/83d65752-20c1-370a-9a62-2acf3c98854b.jpg[/img]


双击生成两个以后的键即可发出声音，移动键的位置可产生不同的声音效果。
[u][color=red][url=http://acko.net/dumpx/996b.html]Swirling Tentacles[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508588/d92ec18b-8215-303a-b093-9c16e987e594.jpg[/img]


三维脉冲效果，沿着脉冲线有运动的颜色渐变模块。
[u][color=red][url=http://hakim.se/experiments/html5/blob/03/]Blob[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508590/fb59a7c8-2205-3457-9205-6a0611373817.jpg[/img]


拖动水滴有重力效果，双击可以分离，小水滴碰到大水滴会合并。
[u][color=red][url=http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg]Rotating Spiral[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508593/9b900a6d-8fc2-3fbe-8601-5d82bb92e7fc.jpg[/img]


旋转的螺旋效果，看得有点头晕，单击可以控制开始和停止旋转。
[u][color=red][url=http://hakim.se/experiments/html5/magnetic/02/]Magnetic[/url][/color][/u]<----点击查看
[img]http://dl.iteye.com/upload/attachment/508595/c29a3cb8-860b-34fb-93b0-0f2f395b3206.jpg[/img]


模拟磁性粒子流效果，非常逼真。
[u][color=red][url=http://hakim.se/experiments/html5/trail/03/]Trail[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508597/70d3d2f9-1bd7-3031-b507-9a6fb3362e34.jpg[/img]


彩色颗粒跟随鼠标运动效果，带尾巴淡出效果。
[u][color=red][url=http://canvas-test.appspot.com/]Graph Layout[/url][/color][/u] <----点击查看
[img]http://dl.iteye.com/upload/attachment/508599/cd875478-4481-3af1-bd50-e62ea4556dab.jpg[/img]


一种交互的力向图布局效果。

（国际来源：Queness 编译来源：梦想天空-专注Web开发技术和资源分享）

:arrow: