12款实用的HTML5干货分享

标签: HTML5教程 HTML5应用 | 发表时间:2014-04-29 07:53 | 作者:sxwgf
出处:http://www.html5tricks.com

今天我们要来分享12款实用的HTML5应用插件,内容涉及到按钮、表单、进度条、图片等,大家一起来看看这些干货吧。

1、漂亮的CSS3动画进度条 可自定义进度条颜色

今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错。之前我们也有分享过很多功能强大的CSS3进度条,像 纯CSS3进度条 华丽5色进度条示例CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似,可以看看。

css3-skill-progress-bar

在线演示         源码下载

2、CSS3垂直图标菜单 带Tooltip提示框

今天我们要来分享一款CSS3菜单,菜单外观很漂亮,是垂直排列的小图标,鼠标滑过菜单项时,菜单项的背景会填充渐变的颜色,另外还会弹出该菜单项描述的Tooltip提示框。之前我们也分享过很多CSS3垂直菜单,像这款 CSS3二级下拉动画菜单 菜单背景滑动动画纯CSS3垂直动画菜单等都是非常不错的CSS3垂直菜单按钮。

css3-ver-nav-with-icon

在线演示         源码下载

3、纯CSS3背景渐变按钮 按钮图标淡入淡出动画

今天我们要再来分享一款纯CSS3实现的按钮动画,这款按钮动画有以下特点:当鼠标滑过按钮时,按钮上的小图标便会以爆炸的方式淡出按钮,取代它的时相应的文字,当鼠标离开按钮时,小图标又会以爆炸的方式淡入按钮中。更多CSS3按钮,我们可以在 CSS3按钮栏目中查找。

css3-icon-animation-button

在线演示         源码下载

4、HTML5 3D立方体旋转动画

之前我们已经分享一款 HTML5 3D正方体旋转动画,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。

html5-3d-cube

在线演示         源码下载

5、动感的CSS3 Loading文字特效

这是一款非常帅的CSS3 Loading加载动画,尽管看上去只有Loading这几个字母,但是利用CSS3特性,可以把这几个字母渲染得非常动感。和之前推荐的CSS3 Loading动画 纯CSS3加载Loading动画图不同,这款Loading动画仅仅几个字母就可以展现令人震撼的效果。

css3-loading-text-animation

在线演示         源码下载

6、CSS3多样式小图标按钮 带分享按钮

今天我们要来分享一款样式非常丰富的CSS3按钮特效,这些按钮的外观有点仿谷歌的风格,而且每一个按钮带有个性的小图标。另外按钮有一个特点,还可以定制出不错的分享按钮。之前我们也分享过不少漂亮的CSS3按钮,大家可以在 CSS3按钮目录下查看。

css3-button-with-icons

在线演示         源码下载

7、纯CSS3实现滑杆开关切换按钮动画

之前我们分享过一些CSS3开关切换按钮了,像这款 CSS3 3D发光切换按钮HTML5/CSS3开关按钮 立体3D按钮等。今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画,这个按钮是一个摇杆,杆子推上推下来切换开关状态,不同的开关状态也有不同颜色的指示灯。

css3-stick-switch

在线演示         源码下载

8、HTML5/CSS3牙刷动画 模拟真实刷牙效果

今天我们再要来分享一款不错的HTML5/CSS3动画效果,你一个可爱的牙刷,牙刷外观是利用纯CSS3绘制出来的,也比较简单。另外是刷牙动画,看起来非常搞笑,像真的刷牙一样,左刷刷,右刷刷,非常可爱的牙刷动画。

html5-css3-toothbrush

在线演示         源码下载

9、CSS3可视化网页编辑器 基于tinymce编辑器

上次我们分享过一款网页编辑器 jQuery轻量级网页编辑器 选中即可编辑,配置比较简单。今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器,编辑器功能相当完善,可以对文本进行各种操作,也可以添加链接和对齐文本。是一款功能更加强大网页编辑器。

html5-css3-json-editor

在线演示         源码下载

10、CSS3实现一款联系表单 输入框带小图标

之前我们已经分享过一款非常漂亮的CSS3联系表单 CSS3联系表单 背景透明迷人,有兴趣的朋友可以去看一下。今天我们再来分享一款外观还不错的CSS3联系表单,这款CSS3联系表单的输入框带有小图标,并且在提交信息时能校验输入的信息。

css3-contact-form

在线演示         源码下载

11、HTML5/CSS3多颜色柱状图表 带基准数据线

之前我们分享过几款很不错的HTML5柱状图表,像 HTML5柱状图表 可合并多张图表的数据HTML5/CSS3水平柱状图表。这次要分享的HTML5柱状图表也非常不错,它有多种颜色来表示不同的数据。最大的特点是这款HTML5带有基准数据线,可以直观地看到每个数据项相对基准值的偏差。

css3-animated-progress-bar

在线演示         源码下载

12、HTML5/CSS3图片描述效果 文字描述浮动在图片上

今天要分享一款基于HTML5和CSS3的图片特效,该图片特效非常实用,可以让你网页上的图片在鼠标滑过时在图片上方浮现一些描述文字,该描述文字在展现出来的时候有淡入淡出的动画效果,同时描述文字的样式也可以自定义多样化,是一款非常不错的 HTML5图片特效

css3-image-caption-animation

在线演示         源码下载

以上就是12款实用的HTML5干货,欢迎收藏分享。

相关 [html5 干货 分享] 推荐:

12款实用的HTML5干货分享

- - HTML5资源教程
今天我们要来分享12款实用的HTML5应用插件,内容涉及到按钮、表单、进度条、图片等,大家一起来看看这些干货吧. 1、漂亮的CSS3动画进度条 可自定义进度条颜色. 今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错. 之前我们也有分享过很多功能强大的CSS3进度条,像 纯CSS3进度条 华丽5色进度条示例、 CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似,可以看看.

技术干货分享:如何选择 HTML5 游戏引擎

- - 开源中国社区最新新闻
原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口. 据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折. 如何选择适合团队和项目的引擎,笔者通过学习和项目实践,总结微薄经验,供大家参考,非技术人员也可以将本篇内容作为引擎选择的重要关注点. 选择H5游戏引擎的思考维度.

干货分享:关于 4K 电视的一些知识

- - 爱范儿 · Beats of Bits
昨天索尼举行 新品发布会后,今天索尼适时组织了媒体参观其高清影视技术学院(HD Academy),系统地介绍 4K 技术,加强外界对其先进 4K 技术的了解. 从索尼中国专业系统集团(SPSC)技术总监王亚明的一组演讲中,对这个在今年 CES 上叫得最响的新名词有了比较系统的认识(稍后我们将更新王亚明的演讲 PPT),与大家分享.

【腾讯Bugly干货分享】Android减包 - 减少APK大小

- - CSDN博客移动开发推荐文章
本文是对Google官方文档 Reduce APK Size 的翻译,点击“阅读原文”可以查看英文原文. 译者简介:damonxia(夏正冬),天天P图Android工程师. 用户经常会避免下载看起来体积较大的应用,特别是在不稳定的2G、3G网络或者在以字节付费的网络. 这篇文章描述了怎样减少你的APK大小,这会让更多的用户愿意下载你的应用.

分享21个丰富多彩的 HTML5 小游戏

- 顶 - 博客园-首页原创精华区
  作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性. HTML5 的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用 HTML5 技术. 随着 HTML5 跨平台支持的不断增强和智能手机的迅速普,HTML5 技术有着非常好的发展前景,甚至有人预言 HTML5 将引燃移动平台游戏开发技术的新革命.

分享21个非常棒的HTML5视频教程

- Amo - HTML5研究小组
现在越来越多的人尝试用HTML5来制作网页游戏等丰富的Web应用. 尽管HTML5的完全实现还有很长的路要走,但HTML5正在改变Web. 为了方便大家学习HTML5 ,本文向大家推荐21个非常棒的HTML5视频教程(很多Youtube视频需要特殊方式访问).

分享31个非常有用的 HTML5 教程

- liu - 博客园-首页原创精华区
  几年前,HTML5 前景还很模糊,只有少数的互联网极客才会关心. 而现在,随着现代主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用 HTML5 来制作各种功能强大的应用程序,HTML5 正引领互联网新革命. 为了方便大家更好的学习 HTML5 ,本文向大家分享31个非常棒的 HTML5 教程和资源.

HTML5 Code Jam经验分享——IT’S COOL!!!(来自Rich团队)

- iDesperadO - HTML5研究小组
如题,就是这个活动:http://www.mhtml5.com/events/code-jam. 另外也秀一下我们的研发成果——网页版的大富翁:http://jinjiang.github.com/rich-game. 源码:https://github.com/jinjiang/rich-game.

分享31个非常有用的 HTML5 教程

- Amo - HTML5研究小组
几年前,HTML5 前景还很模糊,只有少数的互联网极客才会关心. 而现在,随着现代主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用 HTML5 来制作各种功能强大的应用程序,HTML5 正引领互联网新革命. 为了方便大家更好的学习 HTML5 ,本文向大家分享31个非常棒的 HTML5 教程和资源.

分享15款精美的免费 HTML5 网站模板

- ninickck - 博客园-梦想天空
  在过去的几年,网页设计和制作人员就已开始关注和使用 HTML5 了,如今 HTML5 得到了更加广泛的应用,国外有很多网站已使用 HTML5 技术制作. 之前的文章和大家分享过精美的HTML5企业网站和HTML5个人网站,大家可以去欣赏一下这些作品. 今天向大家分享15款非常漂亮的免费 HTML5 网站模板,看到喜欢的就赶紧下载吧.