九个HTML5/CSS3/SVG技术精品演示

相对于本地应用程序，浏览器端开发总是受制于各种各样的限制，但天才的WEB程序员总是通过自己的聪明才智，将Web应用的范围不断的推向极致，WEB应用在client端的表现丝毫不输于本地应用。

这都要感谢技术的进步：HTML5、CSS3、Canvas，以及WebGL。下面是几个精彩的利用上面这些技术实现的不可思议效果的演示。

这些作品都可以在Codepen网站上找到。Codepen是一个提供WEB前端创作寄存和展示的好地方。

玩电脑游戏的孩子

这是一个具有3D视效的作品，使用了three.js脚本库，它和用户还具有交互功能，你可以使用鼠标拖拽屏幕，让整个3D模型旋转。其中的电视机里显示的内容是一个MP4视频，你会发现这个电视的画面也是3D的。如果这个演示放到一个https的安全域上，并且开启摄像头，你的影像将会替换电视机里显示的内容，神奇吧！

纯CSS制作的立方旋转画体

很重要的一点就是，这个演示是用纯CSS3+html5制作的，没有使用任何的js。还有一点，你会看到这个立方体有一个模糊的影子，效果非常好：

HTML5魔方

这是一个用HTML5+CSS3+js制作的魔方，用鼠标拖拽页面任何地方，可以让魔方旋转。拖拽魔方上的方块，可以自由拧转魔方。请注意:魔方的中间一层是无法转动的，就跟你玩真实的魔方一样。

SVG作品：外星飞碟猎捕地球生物

这是一个非常有趣的SVG动画作品，动画过程非常的滑顺，而且具有一点小情节，非常的生动。

纯CSS3重现漫威动画片头

看过漫威电影(比如蜘蛛侠)的朋友们一定见过电影播放前的片头。那么，这个演示就是用纯CSS技术完整逼真的重现了这个片头效果。非常精彩。

SVG作品：一匹飞奔的狼

这个神奇的作品没有使用任何的CSS技术和JavaScript技术，只是一个SVG文件。这匹狼奔跑起来非常具体动感。

礼花喷花器

这个作品中你会发现色彩缤纷的纸片运动的轨迹非常的顺滑，并且纸片运动的加速/减速控制的非常优秀，而且，当纸片数量增加时，对性能的影响也非常的小。

飞行爱好者

本作品是和上面那个玩电玩的孩子是同一个作者，这个演示中作者创作了一个3D的小岛，风景很美，有云漂浮在空中，有闪电，飞机在云层中飞来飞去。同样，你可以用鼠标在画面上拖拽，转动整个3D模型。

印度杂耍艺人

这个作品主要是使用了一些图片，你可以拖拽这些图片，可以看到作者对力度和弹性的控制非常的出色。整个作品风格很有印度特色。

看完上面的这些作品，我相信你一定会敬佩这些出色的WEB程序员，用简单的技术就能创作出丰富、动态、交互性良好的WEB作品。同时，我们更加对WEB前端技术——HTML5、CSS3和SVG充满了希望的憧憬。