分享9款最新超酷HTML5/CSS3应用插件

标签: HTML5实例 HTML5应用 | 发表时间:2014-03-24 07:10 | 作者:sxwgf
出处:http://www.html5tricks.com

新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看。

1、HTML5 Canvas模拟衣服撕扯动画 超级逼真

今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真。刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当你拖拽的很用力时,你会发现,衣服被撕破了。该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

html5-cloth-tear

在线演示         源码下载

2、纯CSS3绘制可爱小男孩动画 超酷面部表情

之前我们分享过几个纯CSS3动画特效,比如 纯CSS3人物行走动画就非常酷,还有 纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。

pure-css3-boy-animation

在线演示         源码下载

3、HTML5 3D图片折叠特效 超炫酷图片特效

我们之前介绍过很多HTML5 3D图片效果,比如 HTML5/CSS3 3D环形图片墙HTML5 3D相册浏览等等。今天我们再来分享一款HTML5 3D图片折叠特效,鼠标滑过图片时,折叠好的图片便会展开,鼠标离开图片时,图片又会折叠起来,效果非常酷。

html5-3d-fold-image

在线演示         源码下载

4、HTML5 3D骨牌图片特效 带文字描述

今天分享一款很特别的HTML5 3D图片特效,当鼠标滑过图片时,平面的图片即会呈现3D的效果,和这款 HTML5 3D图片折叠特效类似,也是通过鼠标滑过来展现3D效果。另外,这款HTML5 3D骨牌图片特效还可以设置图片描述信息。

html5-3d-domino-image

在线演示         源码下载

5、HTML5/CSS3 3D立体功能按钮 超酷CSS3按钮

之前我们分享过很多精彩的CSS3按钮,像这款 纯CSS3 3D牛奶样式按钮,非常酷,还有这款 CSS3发光社会分享按钮,也挺不错的。今天要分享的这款CSS3 3D按钮十分大气,按钮在点击的时候也有立体的效果,非常酷的一款CSS3 3D按钮。

html5-css3-3d-button

在线演示         源码下载

6、HTML5/CSS3原图对比查看特效 HTML5图片特效

说到HTML5图片特效,我们应该已经分享过很多了,大家可以到 HTML5图片栏目中查看。今天我们再来看一款不一样的HTML5图片特效,这款HTML5应用可以将两张相似的图片进行细节上的对比,我们只需移动鼠标即可以观察到两张图片的不同点,非常实用方便。

html5-css3-image-compare

在线演示         源码下载

7、HTML5相册照片浏览器 可连接Flickr照片服务

以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强。不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷。今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果。

html5-photobox-flickr

在线演示         源码下载

8、HTML5/CSS3 3D下拉折叠菜单 超炫CSS3菜单动画

之前我们介绍过很多CSS3菜单了,效果都十分华丽炫酷,但是这些CSS3菜单基本都是二维平面菜单,今天要分享的这款HTML5/CSS3菜单却是3D的效果。菜单展现时出现折叠下拉的动画特效,菜单也可以收起,鼠标滑过菜单项的效果也很不错。

html5-css3-3d-menu

在线演示         源码下载

9、HTML5 3D旋转图片相册 可鼠标悬停

图片特效在HTML5应用中十分广泛,我们也在html5tricks上收集了不少 HTML5图片特效,今天要分享的这款HTML5 3D旋转图片相册又非常绚丽,和之前分享的这款 HTML5/CSS3 3D环形图片墙类似,也是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。

html5-3d-images-gallery

在线演示         源码下载

以上就是9款最新超酷HTML5/CSS3应用插件,欢迎收藏分享。( www.html5tricks.com

相关 [分享 html5 css3] 推荐:

【分享】22款给力的HTML5和CSS3帮助工具

- - VooSee - 拮取生活中的彩虹
在打开这个地址时,它会自动测试你当前使用浏览器所支持的css属性,然后用一个列表的形式给展示出来;你可以点击列表中列出的每个项目来查看结果,包括一个小例子和相应的解释内容.  Please!,制作人:Paul Irish and Jonathon Neal. 目的在于允许你在线编辑其中任意的数值,然后你可以看右面大大的效果展示,每更改一下数值,就会产生相应的全部代码.

分享9款最新超酷HTML5/CSS3应用插件

- - HTML5资源教程
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1、HTML5 Canvas模拟衣服撕扯动画 超级逼真. 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真. 刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当你拖拽的很用力时,你会发现,衣服被撕破了.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.

HTML5 和 CSS3 书籍推荐

- - 我爱水煮鱼
HTML5 和 CSS3 是下一代 Web 开发标准,无论是针对内容结构还是媒体,HTML5 都引进了各种新元素. 今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3,学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急. 现在网上已经有很多关于 HTML5 和 CSS3 的网站,包括介绍、教程以及使用技巧等等.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

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

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

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

22个HTML5和CSS3表单教程

- 幻幽 or A書 - 伯乐在线 -博客
  利用HTML5和CSS3,还有一些出色的说明文档,你可以做些有创造力的网页表单. 因此,本文整理综合了22个CSS3表单教程.   点击各个小标题下方图片,即可进入相应英文教程.   你可能对以下文章也感兴趣.   成为一个顶级设计师的8个秘诀  .   10个令人印象深刻的JavaScript动画效果网站.

23个优秀的HTML5/CSS3教程

- - 可咔酷 | 网络杂货铺
HTML5/CSS3无疑是未来Web发展的方向,这一点在移动互联网领域已经得到了充分的证明. 如果你也是一名web开发者,想要深入了解关于HTML5和CSS3的话,你不妨看看下面这些教程. 这里有23个不错的HTML5/CSS3教程(有的使用了jQuery),这些教程来自于国外的一些优秀的web开发者和设计师,相信看完之后你一定会学到不少东西.

30+免费优秀的HTML5+CSS3模板

- - Jackchen Design 1984
HTML5和CSS3都是这两年来一直被热议的话题. 因为他们都有非常多的有趣的功能,他们会让您的网站不管是设计还是创意上都更加的时尚. 只是对于很多网页设计师来说最大的瓶颈还是浏览器之间兼容性的问题. 这似乎一直都是网页设计师心头的痛. 但在很多欧美国家,他们都敢于取舍,敢于创新和设计,甚至一些公司可以为了一些IDEA去放弃个别头疼的浏览器针对性的使用HTML5和CSS3来设计出想要的效果.