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] 推荐:

HTML5 logo 发布

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

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.

HTML5的SEO探索

- Amo - HTML5研究小组
所有现代浏览器对HTML5的支持问题不大. HTML5被智能手机浏览器和越来越多的网站广泛的采用,甚至作为最优的选择. 但是,Googlebot,Bidubot等其他搜索引擎呢. 引擎是否会由于HTML5这任何额外因素,在搜索结果中优先推荐您的网站吗. 另一方面,少数搜索引擎会认为所有这些额外的H1标记的是垃圾网站吗.

文章: HTML5之美

- - InfoQ cn
如今大热的HTML5到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自阿里云云手机服务运营部的前端开发工程师 正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解:. 白伟民:酷狗音乐的HTML5实践(百度开发者大会广州站 5月31日 免费报名).