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. nginx-location rewrite

    location 语法 location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上. 比如, 碰 ...

  2. spring 接收_header 作为get请求的httpheader

    今天项目遇到一个问题,我们项目用户验证和权限验证的信息(licence)是在http头中设置的,百度了一下,只有ajax才能设置头信息,form表单是无法设置的,但是我突然想起springMVC关于f ...

  3. 怎样退出App之前唤醒还有一个App？

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 SDK并没 ...

  4. linux查看是否安装JDK（转载）

    rpm -qa |grep java 看是否安装了java echo $PATH 看环境变量是否配置了java路径 find / -name java 查找java文件 一般linux服务器会自带jd ...

  5. iOS_高效开发之道

    iOS_高效开发之道 话不多说, 总结一下个人感觉有利于提高iOS开发效率的几个小技巧. 本文将从下面几方面介绍: Xcode经常使用快捷键 Xcode调试技巧 Objc经常使用代码片段 Xcode插 ...

  6. linux 中添加自己的库路径的方法 cannot open shared object file: No such file or directory

    本文转自:http://blog.csdn.net/maotianwang/article/details/44619197 库文档在连接(静态库和共享库)和运行(仅限于使用共享库的程式)时被使用,其 ...

  7. PHP开发工作心得

    一.扎实PHP自身的基础知识.函数.常量等,尽量用内置的方法解决这个问题(由于个人写的往往运行效率没有内置方法高): 二.代码尽量少的实现功能(由于PHP的运行事实上是,将咱们的代码先处理成底层语言进 ...

  8. C++ xml 解析器

    C++的xml解析器有很多,这个知乎回答里有一个列表:https://www.zhihu.com/question/32046606 下面使用其中的RapidXml试试. 官方地址: https:// ...

  9. LVS项目介绍

    LVS项目介绍 章文嵩 (wensong@linux-vs.org) 转自LVS官方参考资料 2002 年 3 月 本文介绍了Linux服务器集群系统--LVS(Linux Virtual Serve ...

  10. HDU5015 233 Matrix —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5015 233 Matrix Time Limit: 10000/5000 MS (Java/Others)    Memor ...