14个HTML5实现的效果合集

标签: 资料报告 HTML5 | 发表时间:2013-02-20 02:40 | 作者:P迪
出处:http://www.alibuybuy.com

HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品。

Form Follows Function就是一個展示HTML5实现的网站,目前网站展示了14个作品,其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品,但是加入到产品中就能让产品生色不少。

 

1、 散景(Bokeh)

一种图像的焦外效果,通过HTML5实现的这种效果可以加载在背景、字体浮现。

1焦外

2、 3D效果

3D西红柿罐头汤,可通过鼠标进行旋转操作,同时底部有一个倒影效果,一个很优秀的交互效果示范。

HTML5 3D效果

3、 宇宙全景图

设定整个宇宙的场景,可以用360度观察整个宇宙星云,这种实现方式呈现出的效果更接近Google的街景地图。

3宇宙全景

4、 像素化效果

这种效果用于图片很有趣,而实际可利用到的领域,还有待探索。

4像素化

5、 螺旋效果

字体的旋转效果,简单的近乎一张GIF图片,不过通过对文章的替换,可以轻易的转换成各种各样的文案展示。

5螺旋效果

6、 结晶化滤镜

通过鼠标可选择结晶化的范围,用于网页可对界面直接做出更多的交互视觉效果。

6结晶化滤镜

7、 色相混合

随着鼠标移动而改变各个位置的色相,一种很简单就能汇聚用户视线的交互效果,不过在简单的背景才更能体现这种效果的价值。

7色相混合

8、 翻转时钟

一种时钟的展示效果,结构非常简单,而看上去也很清晰明了,适合嵌入到很多不同的页面中作为实时时间的展示。

8翻转始终

9、 水纹倒影

一种视觉效果,在这个Demo中可以调节倒影波动的速度。这种效果适合制作Logo以及主页的展示。

9水面倒影

10、 自由落体

“下雨的人”展示了一种自由落体的效果,可以用鼠标条件调节飘落的角度,提供了一种带有物理效果的交互操作。这种功能特别用于游戏。

10自由落体

11、 水面波纹

同样是一种物理效果,可通过鼠标刺激水面波纹,在网页上就能轻松实现。

11液体物理效果

12、 树的成长

一种应激操作的交互方式,点击一次长出一棵树,可用于网页展示的附加效果。这种效果在视觉上有多种用法,网页、游戏都可以。

树的成长

13、 字母雨刷

在屏幕上扫除字母的雨刷效果,初次看见感觉像是网页刷新的过度画面。

雨刷效果

14、 渐显效果

通过一些杂乱无章的线逐渐显现出一幅画,中间的显现过程很适合作为网页加载的等待界面。

10渐显效果

来源: http://www.leiphone.com/warlial-html5-fff.html


© 推荐 for 互联网的那点事, 2013. | Permalink | 2 comments | Add to del.icio.us
Post tags:

你可能也喜欢:

CC China 2.5协议正式发布 (@chedong)

FireFox的自动更新 1.5.0.4 => 1.5.0.5 (@chedong)

21个使用HTML5设计的新鲜网站

HTML 5游戏市场究竟有多大?

HTML5 到底是什么?
无觅

相关 [html5 效果 合集] 推荐:

14个HTML5实现的效果合集

- - 互联网的那点事
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就是一個展示HTML5实现的网站,目前网站展示了14个作品,其中包括了交互操作以及视觉效果. 这些效果本身并不是一个完整的产品,但是加入到产品中就能让产品生色不少.

常用CSS3动画效果合集-animate.css

- - 我爱互联网
css是一个比较酷、炫的一个动画合集,很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性 (@yixieshi).

用HTML5创建超酷图像灰度渐变效果

- Allen - 译言-电脑/网络/数码科技
来源HTML5 Grayscale Image Hover. 曾几何时,网站上显示的灰度图像必须手动进行转换. 现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件. 我下面有一个示例,展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色. 贡献者:感谢达西·克拉克(我在Themify的合伙人)贡献jQuery和Javascript代码.

10个让人眼花缭乱的 HTML5 和 JavaScript 效果

- 老男人 - cnBeta.COM
感谢山边小溪-专注Web开发的投递. 作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性. 如今,很多 Web 开发人员开始使用 HTML5 来制作各种丰富的 Web 应用. 本文向大家展示10个让人眼花缭乱的 HTML5 和 JavaScript 效果,让你体验下一代 Web 技术的魅力,相信你看完这些例子后会对未来的 Web 发展充满无限期待.

10个令人惊叹的HTML5和JavaScript效果

- Hermes - 伯乐在线 -博客
  作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性. 如今,很多 Web 开发人员开始使用 HTML5 来制作各种丰富的 Web 应用. 本文向大家展示10个让人眼花缭乱的 HTML5 和 JavaScript 效果,让你体验下一代 Web 技术的魅力,相信你看完这些例子后会对未来的 Web 发展充满无限期待.

Chart.js – 效果精美的 HTML5 Canvas 图表库

- - 博客园_梦想天空
  Chart.js 是一个令人印象深刻的. JavaScript 图表库,建立在. HTML5 Canvas 基础上. 目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区). 而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB.   颜色,字体,边框和它们的尺寸都可以定制,图表可以动画的形式加载,非常炫.

八大疯狂的HTML5 Canvas及WebGL动画效果

- - HTML5研究小组
HTML5、WebGL和JavaScript改变了长久以来的动画制作行业. 在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet. 而现在,使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能. 我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果. 现在浏览器和web技术的不断发展.

turn.js:超酷的杂志翻页效果HTML5实现

- - HTML5研究小组
turn.js是Emmanuel Garcia写的,他做了四年的前段开发. turn.js是一款用来实现纸制书翻页的jQuery插件. 使用硬件加速,跨平台,容易维护,体积小(不到15K).

HTML5 实现橡皮擦的擦除效果

- - ITeye博客
请使用 支持HTML5的浏览器查看效果,请按住鼠标拖动. 最近项目刚好用到这种效果,也就是有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片. 这种在网上还是挺常见的,本来就想直接网上找个demo套用下他的方法就行了,套用了才发现,在android上卡出翔了,因为客户要求,在android不要求特别流畅,至少要能玩,但是网上找的那个demo实在太卡,根本就是没法玩的情况.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).