今天我们整理了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 收集整理。
1、纯CSS3美化Checkbox和Radiobox按钮,外观很时尚
利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox,外观很时尚。
![](https://i-blog.csdnimg.cn/blog_migrate/f9635142e3246e578c1b375a2e60e0da.jpeg)
在线演示 / 源码下载
2、CSS3多级下拉菜单,弹性展开下拉动画
利用CSS3制作的网页菜单外观都十分绚丽,而且都带有一定的动画特效。今天分享的这款CSS3多级下拉菜单可以方便地配置菜单的层级数,而且每一个菜单项都有自己的小图标,显得非常清新亮丽。该CSS3下拉菜单在展开子级菜单时会有弹性展开的动画特效,是一款非常酷的下拉菜单。
![](https://i-blog.csdnimg.cn/blog_migrate/44666fb11e8a606e86b1029eb236e7b8.jpeg)
在线演示 / 源码下载
3、HTML5树叶飘落动画,HTML5动画经典
这是一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。
![](https://i-blog.csdnimg.cn/blog_migrate/0c2fda3fdd78b2813f512332a1dbfdd0.jpeg)
在线演示 / 源码下载
4、jQuery百叶窗焦点图,超酷切换动画
这是jQuery百叶窗焦点图插件,这款jQuery焦点图的百叶窗效果非常酷,不仅可以横向切换,也可以竖向切换。
![](https://i-blog.csdnimg.cn/blog_migrate/0c2b826d4901c8546c2958a22d808ff2.jpeg)
在线演示 / 源码下载
5、HTML5图片组合归类效果,图片分类利器
HTML5对处理一些简单的动画非常方便,比如移动、淡入淡出效果等。今天分享的这款HTML5图片组合归类特效就应用了HTML5的移动特效,当用户选择一个图片分类时,相关分类的图片就会移动到这个分类下面,并伴随着淡入淡出的移动动画,是一款效果很酷的HTML5图片处理应用。
![](https://i-blog.csdnimg.cn/blog_migrate/64967d77fb775ff78c2d957aa7da227b.jpeg)
在线演示 / 源码下载
6、HTML5分步骤注册表单,HTML5表单经典
表单在网页应用中十分重要,今天我要向大家分享一款基于HMLT5的分步骤注册表单,表单外观比较华丽,点击下一步按钮即可跳转到下一步填写注册信息。该HTML5表单使用了很多CSS3属性,从而在表单切换时拥有弹性的动画,是一款很不错的HTML5表单。
![](https://i-blog.csdnimg.cn/blog_migrate/7e0a1e0a75d9c38499c3bebff95bca25.jpeg)
在线演示 / 源码下载
7、纯CSS3圆形面包屑菜单,有展开动画
这是一个CSS3圆形面包屑菜单,该CSS3菜单的菜单项默认是圆形的,当鼠标滑过菜单项时,菜单项即会展开,并伴随展开动画。让我们一起来看看这款纯CSS3实现的圆形面包屑菜单吧。
![](https://i-blog.csdnimg.cn/blog_migrate/227e261bad76e7be06ce4e232f9ded81.jpeg)
在线演示 / 源码下载
8、CSS3 3D进度条,超炫进度加载动画
进度条在网页设计中有着广泛的应用,它不仅可以让网页外观漂亮,而且可以提示用户操作正在进行,提高用户体验。今天要分享的这款CSS3进度条,不仅外观呈现3D立体,而且在进度加载时也呈现了超炫的动画效果。我们一起来看看这款CSS3 3D进度条。
![](https://i-blog.csdnimg.cn/blog_migrate/0b1c85547f44472f6b67c4038b759256.jpeg)
在线演示 / 源码下载
9、HTML5 3D相册浏览,震撼人心
这是一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧。
![](https://i-blog.csdnimg.cn/blog_migrate/b367a18b5f2698126404e780383ad80b.jpeg)
在线演示 / 源码下载
10、CSS3 SVG 进度条 Loading 动画,炫酷发光特效
这是一款CSS3 SVG动画进度条应用,进度条在进度加载中将会出现闪闪发光的炫酷特效,遗憾的是,需要高版本的HTML5浏览器才能支持发光动画。
![](https://i-blog.csdnimg.cn/blog_migrate/cf5c05ea7b93ee8d8454ff95348d1d61.jpeg)
在线演示 / 源码下载
怎么样,欣赏完这10款功能强大而又实用的HTML5/CSS3应用插件,是不是觉得很棒呢!
本文由 html5tricks 收集整理。