10款功能强大的HTML5/CSS3应用插件

今天我们整理了10款功能非常强大的HTML5/CSS3应用插件供大家学习和使用,希望各位喜欢。 

1、纯CSS3美化Checkbox和Radiobox按钮,外观很时尚  

利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox,外观很时尚。 



在线演示     /     源码下载  

2、CSS3多级下拉菜单,弹性展开下拉动画  

利用CSS3制作的网页菜单外观都十分绚丽,而且都带有一定的动画特效。今天分享的这款CSS3多级下拉菜单可以方便地配置菜单的层级数,而且每一个菜单项都有自己的小图标,显得非常清新亮丽。该CSS3下拉菜单在展开子级菜单时会有弹性展开的动画特效,是一款非常酷的下拉菜单。 



在线演示     /     源码下载  

3、HTML5树叶飘落动画,HTML5动画经典  

这是一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。 



在线演示     /     源码下载  

4、jQuery百叶窗焦点图,超酷切换动画  

这是jQuery百叶窗焦点图插件,这款jQuery焦点图的百叶窗效果非常酷,不仅可以横向切换,也可以竖向切换。



在线演示     /     源码下载  

5、HTML5图片组合归类效果,图片分类利器  

HTML5对处理一些简单的动画非常方便,比如移动、淡入淡出效果等。今天分享的这款HTML5图片组合归类特效就应用了HTML5的移动特效,当用户选择一个图片分类时,相关分类的图片就会移动到这个分类下面,并伴随着淡入淡出的移动动画,是一款效果很酷的HTML5图片处理应用。 



在线演示     /     源码下载  

6、HTML5分步骤注册表单,HTML5表单经典  

表单在网页应用中十分重要,今天我要向大家分享一款基于HMLT5的分步骤注册表单,表单外观比较华丽,点击下一步按钮即可跳转到下一步填写注册信息。该HTML5表单使用了很多CSS3属性,从而在表单切换时拥有弹性的动画,是一款很不错的HTML5表单。 



在线演示     /     源码下载  

7、纯CSS3圆形面包屑菜单,有展开动画  

这是一个CSS3圆形面包屑菜单,该CSS3菜单的菜单项默认是圆形的,当鼠标滑过菜单项时,菜单项即会展开,并伴随展开动画。让我们一起来看看这款纯CSS3实现的圆形面包屑菜单吧。 



在线演示     /     源码下载  

8、CSS3 3D进度条,超炫进度加载动画  

进度条在网页设计中有着广泛的应用,它不仅可以让网页外观漂亮,而且可以提示用户操作正在进行,提高用户体验。今天要分享的这款CSS3进度条,不仅外观呈现3D立体,而且在进度加载时也呈现了超炫的动画效果。我们一起来看看这款CSS3 3D进度条。 



在线演示     /     源码下载  

9、HTML5 3D相册浏览,震撼人心  

这是一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧。 



在线演示     /     源码下载  

10、CSS3 SVG 进度条 Loading 动画,炫酷发光特效  

这是一款CSS3 SVG动画进度条应用,进度条在进度加载中将会出现闪闪发光的炫酷特效,遗憾的是,需要高版本的HTML5浏览器才能支持发光动画。 



在线演示     /     源码下载  

怎么样,欣赏完这10款功能强大而又实用的HTML5/CSS3应用插件,是不是觉得很棒呢! 

本文由 html5tricks 收集整理。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。 <!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> 上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。 这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。 以下是html5的js文件中的代码: (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() 除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。 <!–[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() </script> <![endif]–>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值