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

　　今天这篇文章就为大家挑选出8个超炫的 Web 效果演示，这些 Demo 可以说都是艺术品，让小伙伴们都惊呆了！（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

您可能感兴趣的相关文章

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

 

原文链接：Chris Coyier’s Favorite CodePen Demos

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

【特别推荐】小伙伴们惊呆了！8个超炫的 Web 效果的更多相关文章

  1. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  2. 【特别推荐】8个富有创意的jQuery/CSS3插件

    现在的互联网上什么都有,但是真正好的创意却非常稀缺,包括WEB界面也是如此,今天我们要特别推荐8个富有创意的jQuery/CSS3插件,也许这几个插件能让你的WEB界面更加富有创意和人性化. 1.jQ ...

  3. Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探

    什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...

  4. 小伙伴们惊呆了！10行 JavaScript 实现文本编辑器

    最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等. 您可能感兴趣的相关文章 分 ...

  5. 【特别推荐】几款极好的 JavaScript 下拉列表插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

  8. 【特别推荐】10款唯美浪漫的婚礼 & 结婚纪念网站模板

    互联网的重要性不言而喻,如今我们的生活已经完全离不开网络.这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速 ...

  9. 实用工具特别推荐 BGInfo

    https://docs.microsoft.com/en-us/sysinternals/downloads/bginfo 介绍 您在办公室中走过多少次,需要点击几个诊断窗口,提醒自己其配置的重要方 ...

随机推荐

  1. WebDriver API元素的定位

    一.以下截图为用FireBug定位的用火狐(Firefox)浏览器打开的百度首页,下面所讲述的八种定位方法,就是以该截图中的百度输入框为例子. ①.FireBug是Firefox浏览器下的开发类插件, ...

  2. slave IO流程之二：注册slave请求和dump请求

    slave IO流程已经在http://www.cnblogs.com/onlyac/p/5815566.html中有介绍 这次我们要探索注册slave请求和dump请求的报文格式和主要流程. 一.注 ...

  3. android 画虚线,虚线圆

    Paint paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE);   paint.set ...

  4. 区分元素特性attribute和对象属性property

    × 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...

  5. java中两种添加监听器的策略

    /*第一种:将事件的处理委托给其他对象,下面的例子是委托给了MyListener(implements ActionListener)*/ 1 import java.applet.Applet; i ...

  6. 记一次ASP.NET MVC性能优化（实际项目中）

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  7. 2014 Visual Studio Contact(); 直播笔记

    昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS)和Visual Studio免费(Visual Studio ...

  8. Oracle丢失重做日志的几种场景恢复

    实验环境:RHEL6.4 + Oracle 11.2.0.4 一.丢失重做日志组中成员 1.1 故障模拟 1.2 处理方法 1.3 实际处理过程 二.丢失重做日志组 2.1 丢失INACTIVE重做日 ...

  9. struts2学习笔记--ActionContext对象

    什么是ActionContext? ActionContext是Map结构的容器,ActionContext是Action的上下文,类比ServletContext,存放着Action执行过程中的数据 ...

  10. DotNet处理服务器路径的方法

    项目中需要使用到路径处理的地方比较多,对于路径的解析和匹配有时较为繁琐,现在提供一个对路径进行解析的方法: 1.验证设置路径字符串: /// <summary> /// 验证设置路径字符串 ...