CodePen 是一个在线的 HTMLCSS 和 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. Mysql5.7.13主从同步(复制)配置

    主从同步是分布式mysql数据库相当重要的配置,现在我在虚拟机上完成主从配置,系统是CenterOS6.5,mysql版本是5.7.13 主服务器的ip是192.168.19.139 副服务器的ip是 ...

  2. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  3. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  4. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  5. .NET Core 和 .NET Framework 之间的关系

    引用一段描述:Understanding the relationship between .NET Core and the .NET Framework. .NET Core and the .N ...

  6. 多种方法实现Loading(加载)动画效果

    当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.

  7. 【JUC】JDK1.8源码分析之Semaphore(六)

    一.前言 分析了CountDownLatch源码后,下面接着分析Semaphore的源码.Semaphore称为计数信号量,它允许n个任务同时访问某个资源,可以将信号量看做是在向外分发使用资源的许可证 ...

  8. Zend Studio主题的设置

    用了两年的Zend Studio,一直是默认的白色主题,让人都产生了视觉疲劳,今天才发现Zend Studio的设置方法: 步骤1:help–>install new software…

  9. TCP三次握手,四次挥手

    前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...

  10. Azure Application Gateway (1) 入门

    <Windows Azure Platform 系列文章目录> 请读者注意,Azure Application Gateway在ASM模式下,只能通过PowerShell创建 具体可以参考 ...