[导读] HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用。今天要分享的有很多效果惊艳而且好玩的HTML5动画应用,特别是一些HTML5游戏更加令人眼前一亮,希望大家会喜欢。1、HTML5Canvas


       HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用。今天要分享的有很多效果惊艳而且好玩的HTML5动画应用,特别是一些HTML5游戏更加令人眼前一亮,希望大家会喜欢。
 

1、HTML5 Canvas火焰喷射动画效果

 
       还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天我们要来分享一款类似的HTML5动画效果,一款基于HTML5 Canvas火焰喷射动画。用鼠标拖动一条直线,直线长度表示火焰喷射的力度,另外,火焰在运动中还可以反射效果哦。
 

html5-fire-ball-shooter

 

在线演示        源码下载

 

2、HTML5/CSS3实现大风车旋转动画

 
       这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的。
 

html5-css3-windmill

 

在线演示        源码下载

 

3、HTML5版切水果游戏 HTML5游戏极品

 
       这是一款由百度JS小组提供的HTML5版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善,但是该HTML5切水果游戏也算有声有色,画面也十分华丽。
 

html5-fruit-ninja

 

在线演示       源码下载

 

4、HTML5中国象棋游戏 自定义象棋难度

 
       棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式。程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。
 

html5-zgxq

 

在线演示        源码下载

 

5、HTML5五子棋游戏 画面超酷 可设置难度

 
       前几天我向大家分享过一款HTML5中国象棋游戏,效果令人惊叹,小编的实力很难胜过电脑。今天我要向大家分享一款HTML5五子棋游戏,不仅游戏画面非常华丽,而且可以自己设置难度,并且可以选择人机对战还是人人对战,这款HTML5五子棋游戏绝对称得上HTML5游戏中的极品。
 

html5-5-chess

 

在线演示        源码下载

 

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

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

css3-skill-progress-bar

 

在线演示        源码下载

 

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

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

css3-stick-switch

 

在线演示        源码下载

 

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

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

html5-canvas-create-flower

 

在线演示        源码下载

 

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

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

css3-power-button

 

在线演示        源码下载

 

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

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

html5-svg-line-chart

 

在线演示        源码下载

 

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

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

html5-contact-form

 

在线演示        源码下载

 
这些HTML5动画还不错吧,希望你能喜欢。
 
原文链接:http://www.html5tricks.com/11-html5-css3-animation.html
原文作者:html5tricks – 超人

 

效果惊艳动画HTML5

手机扫描下方二维码,关注php100官方微信。

同步官网每日更新,为您带来随时随地的资讯与技术信息。
更有不定期的互动抽奖活动,赢取实用贴心的小礼物。

除非特别声明,PHP100新闻均为原创或投稿报道,转载请注明作者及原文链接
原文地址: http://www.php100.com/html/it/focus/2014/1110/7758.html

版权声明:本文为jane-y原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/jane-y/articles/5183872.html