html炫酷在线,小伙伴们都会惊呆的10个超炫的HTML5+CSS3效果作品

在CodePen(CodePen 是一个在线的 HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果)上看到许多非常炫的html+css3效果示例。这些炫酷的技术真是让我等菜鸟叹为观止。

对前端技术感兴趣的朋友赶紧过来围观一下啊。绝对让你大饱眼福(当然最好能学到一点人家的东西额)。

这篇文章就为大家挑选了10个超炫的HTML5+CSS3效果作品演示，这些 Demo 可以说都是艺术品，会让你和小伙伴们都惊呆的！

Windows-8-like Animations with CSS3 and jquery

用CSS3和jQuery创建Windows8效果一样的动画。效果炫酷至极。

Tunnel vision 3D CSS

由一些3D效果方块组成的炫酷隧道，让人眼花缭乱的同时感受各种色彩块转动带了超级震撼的视觉效果。不过看起来好看。实用性不是很强。

Light Loader

闪亮的进度条效果。我喜欢粒子演示作品，特别是那些能够应用于实际的，例如这个由 Jack Rugile 编写的进度条效果。看着这么炫的效果，即使让我多等一会也无妨：)

Whale

跟随鼠标移动的鲸鱼。你会好奇这个效果是怎样做出来的，事实上它只是一些简单的形状相互叠加，而且会跟着鼠标移动。

Avgrund

立体弹窗效果。这个作品的作者是 Hakim，他在 CodePen 上面有很多很多的好作品，很难选择出最好的一个。我挑选这个的原因是因为这个效果很实用。模态窗口配合深度的视觉效果让整个界面特别有立体感。

Tearable Cloth

这是一个流畅的模拟可撕裂布料效果的演示。你会看到，借助 Canvas 的强大绘图和动画功能，只需很少的代码就能实现让您屏息凝神的效果。我相信这是 CodePen 最受欢迎的作品了，超过150万的浏览量。让人惊叹的交互，重力和摇曳的感觉——足以以假乱真。

Ribbon

动感的丝带效果，作者是 Justin Windle。当你看到如此平滑的效果的时候，可以想象未来的 Web 平台有很多的惊喜令人期待。

Mechanical Grass

机械草效果，作者是 Tim Holman。看着这个作品，我仿佛置身与一个远离世俗的地，比如蒸汽朋克的作品《爱丽丝梦游仙境》。

Twitter Button Concept

Twitter 立体按钮效果，类似翻盖的动作。借助 CSS3 技术，可以创造出各种很酷的视觉效果。

Triangle Optical Illusion

三角形视觉效果，作者是 Ana Tudor，她擅长教学方面的编程，通过视觉演示本身来解释一些理论。这是我最喜欢的一个有趣的例子。

注：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览。