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

 

8个超炫的 Web 效果的更多相关文章

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

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

  2. 【转】15个超炫的HTML5效果

    英文原文:http://www.hongkiat.com/blog/15-html5-experiments/     翻译:iteye 乔布斯没有给Flash任何机会,微软新推出的Windows 8 ...

  3. 超炫酷web前端的jQuery/HTML5应用搜罗

    作为前端开发者,我们肯定都使用过非常多的jQuery插件,毋庸置疑,jQuery非常流行,尤其是结合HTML5和CSS3以后,让这些jQuery插件有了更多地动画效果,更为绚丽多彩. 1.HTML5/ ...

  4. ScrollMagic – 酷毙了！超炫的页面滚动交互效果

    ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

  5. ScrollReveal.js – 帮助你实现超炫的元素运动效果

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...

  6. Cool！15个超炫的 CSS3 文本特效【上篇】

    每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...

  7. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  8. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  9. Waves – 赞！超炫交互体验的点击动画效果

    Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...

随机推荐

  1. Cent OS编译环境安装

    在进行编译的时候发现总是缺少一些编译的包,安装上了一个,却又少了另一个,最后百度出来结果,记录一下: yum install gcc gcc-c++ gcc-g77 flex bison autoco ...

  2. window 平台搭建简单的直播点播系统

    Windows平台如何搭建简单的直播系统前文已经有介绍,今天介绍下如何搭建简单的点播系统. 同样还是利用crtmpServer,crtmpServer可以从github中下载,可以从群里下载(群里有修 ...

  3. jave 金额科学记数法处理

    金额 :amount amount.stripTrailingZeros().toPlainString();

  4. PythonCookBook笔记——字符串和文本

    字符串和文本 使用多个分隔符分割字串 使用正则re.split()方法. >>> line = 'asdf fjdk; afed, fjek,asdf, foo' >>& ...

  5. EasyDarwin开源流媒体server将select改为epoll的方法

    本文来自EasyDarwin团队Fantasy(fantasy(at)easydarwin.org) 一. EasyDarwin网络模型介绍 EventContext负责监听全部网络读写事件.Even ...

  6. vs2005 未能完成操作。未指定的错误

    具体解决过程是这样的: 1.先把.vcproj 文件剪切到其他地方 2.打开.sln,报错->点“确定”->再点“确定” 3.把 .vcproj 文件 放回来,在vs2008右边的“解决方 ...

  7. XML解析PULL

    解析xml是很经常使用的操作,除了SAX和DOM两种最经常使用的解析xml外,Pull解析器解析XML文件. 在Android的源代码中大量的使用Pull解析.pull不仅更加的面相对象,并且使用速度 ...

  8. 【BZOJ4293】[PA2015]Siano 线段树

    [BZOJ4293][PA2015]Siano Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会 ...

  9. 网络直播流媒体协议的选择讨论,RTSP,RTMP,HTTP,私有协议？

    最近有不少人在EasyDarwin的交流群里面问关于花椒.映客手机直播技术的问题,还有RTSP.RTMP协议选择的问题,这里个人谈一下自己的愚见. 1.不管是RTSP/RTP.RTMP.HTTP,亦或 ...

  10. ThreadPoolTaskExecutor

    我们在开发过程中经常要用到线程池,线程池应该统一管理起来,而不是随用随建.ThreadPoolTaskExecutor——将线程池交给spring管理 1. ThreadPoolTaskExecuto ...