【特别推荐】小伙伴们惊呆了！8个超炫的 Web 效果

　　CodePen 是一个在线的 HTML、CSS 和 JavaScript 代码编辑器，可以编写代码并即时预览效果。你在上面能够在线展现本身的做品，也能够看到其余人在网页中实现的各类使人惊奇的效果。
　　今天这篇文章就为你们挑选出8个超炫的 Web 效果演示，这些 Demo 能够说都是艺术品，让小伙伴们都惊呆了！（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
您可能感兴趣的相关文章
使用 CSS3 实现超炫的 Loading 动画效果
精选12款优秀 jQuery Ajax 分页插件和教程
你可能没用过的10款代码编辑器，喜欢哪一个？
推荐25款很棒的 HTML5 开发框架和开发工具
14个支持响应式设计的流行前端开发框架推荐

  
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，她擅长教学方面的编程，经过视觉演示自己来解释一些理论。这是我最喜欢的一个有趣的例子。

 
您可能感兴趣的相关文章
9个难以想象的 HTML5 Canvas 应用试验
35个让人惊讶的 CSS3 动画效果演示
10大流行 Metro UI 风格 Bootstrap 主题
推荐35款精致的 CSS3 和 HTML5 网页模板
OverAPI.com – 开发人员在线速查手册

 

原文连接：Chris Coyier’s Favorite CodePen Demos
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
转载于猿2048:➬《【特别推荐】小伙伴们惊呆了！8个超炫的 Web 效果》