10款很酷的HTML5动画和实用的HTML5应用

本文作者html5tricks,转载请注明出处

五一假期结束,码农们又回到了正常的工作岗位上了,小编也未各位整理了10款很酷的HTML5动画和实用的HTML5应用,希望大家能够喜欢。

1、HTML5 Canvas花朵生成器 可生成多种样式的花朵

HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击鼠标,即可动态生成各种颜色样式的花朵,并且每一朵花都可以缓慢地旋转,非常炫酷。

html5-canvas-create-flower

在线演示        源码下载

2、HTML5/CSS3仿Google Play垂直菜单

之前我们分享过几款相当不错的CSS3垂直菜单,比如清新小图标的HTML5/CSS3侧边栏菜单CSS3侧边栏菜单 带可爱的小图标菜单等。今天介绍的一款CSS3菜单也是垂直菜单,是一款仿Google Play的垂直菜单,另外菜单左侧还有非常漂亮的小图标。

css3-google-play-store-menu

在线演示        源码下载

3、CSS3 3D按钮 按钮有漂亮的边线

今天要分享的这款CSS3按钮效果非常不错,是一款3D的按钮特效,当按钮按下时,按钮便会凹陷下去,效果和之前分享的CSS3超酷3D弹性按钮效果类似。另外,这款CSS3 3D按钮还有一个特点,按钮左侧边有漂亮的边线。

css3-3d-button-border

在线演示        源码下载

4、10款造型奇特的CSS3进度条/Loading动画

今天我们要分享10款造型奇特的CSS3进度条/Loading动画,这10款进度条应用不仅有创意的外观,而且还有非常特别的动画效果。另外,有些进度条还可以用在Loading动画,效果也挺不错。之前也介绍过一些CSS3进度条Loading动画,大家可以看看。

10-css3-progress-bar

在线演示        源码下载

5、HTML5/CSS3动画进度条 可用于投票结果分析

今天我们要来分享一款很酷的CSS3动画进度条插件,这款CSS3进度条还可以用在投票结果分析,效果也非常不错。这和之前介绍的漂亮的CSS3动画进度条 可自定义进度条颜色类似,同样有动画效果,同样可以用作统计图表。

html5-css3-progress-vote

在线演示        源码下载

6、非常个性化的CSS3自定义checkboxRadiobox

对于浏览器默认的checkboxRadiobox样式实在是比较丑陋了,今天分享一款非常个性化的CSS3自定义checkbox和radiobox,外观非常时尚。之前也分享过几款类似的CSS3插件,比如HTML5自定义Checkbox和RadioboxCSS3漂亮的自定义Checkbox复选框 9款迷人样式

css3-styled-checkbox-radiobox

在线演示        源码下载

7、HTML5/CSS3简易联系表单 扁平化风格

这次要分享的一款HTML5/CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单。之前也分享过一款CSS3实现一款联系表单 输入框带小图标,效果也是比较震撼的。

html5-contact-form

在线演示        源码下载

8、纯CSS3实现开机按钮 按钮3D有光泽

这是一款利用纯CSS3实现的3D开机按钮,这款按钮并没有惊人的动画效果,但是却利用了CSS3的许多特性给按钮添加了阴影以及光泽,让按钮显得非常立体。而且按钮的设计也非常富有创意,是一个开关机的按钮外观,设计独具匠心。大家也可以到CSS3按钮这里查看更多漂亮的按钮特效。

css3-power-button

在线演示        源码下载

9、HTML5/SVG线性图表 可绘制图表区域颜色

今天要分享的这款HTML5图表应用是一款线性图表,它主要是有SVG构造出来的,这款SVG线性图表可以用不同的颜色绘制出图表的数据区域。另外,这款图表和之前分享的HTML5线性图表iGrapher 类似,只是功能没那么强大而已。

html5-svg-line-chart

在线演示        源码下载

10、CSS3小球浮动按钮 小球滚动很逼真

今天要分享一款很有特色的CSS3动画按钮,它和普通的按钮不同,外观也不像普通的按钮,这款按钮由7个点组成,每点击其中一个小点按钮,小球即会滚动到相应的位置,小球有投影,滚动效果也非常逼真。更多按钮特效,可以移步至CSS3按钮目录。

css3-float-button

在线演示        源码下载

以上就是10款很酷的HTML5动画和实用的HTML5应用,欢迎分享收藏。

热门推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>