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

8/31/2015来源:CSS教程人气:862

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

  CodePen 是一个在线的 HTMLCSSjavaScript代码编辑器,能够编写代码并即时预览效果。你在上面可以在线展示自己的作品,也可以看到其他人在网页中实现的各种令人惊奇的效果。

  今天这篇文章就为大家挑选出8个超炫的 Web 效果演示,这些 Demo 可以说都是艺术品,让小伙伴们都惊呆了!(为保证最佳的效果,请在 ChromeFirefox 和 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

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源