超炫的HTML5+CSS3效果作品小伙伴们都会惊呆--HTML5中文学习网

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

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

小伙伴们都会惊呆的8个超炫的HTML5+CSS3效果作品

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

Windows-8-like Animations with CSS3 and jquery

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

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

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

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

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

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

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

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

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

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

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