来源：http://www.hengtaiboyuan.com 作者：恒泰博远 时间：2015-01-22
2014年中HTML5达到了一个高潮，2014年底W3C规范化了HTML5，企业营销，微信公司营销都用上了H5，让H5形成了营销的潮流，那么今天是给大家分享几款H5制作的炫酷界面。
1、HTML5粒子效果的文字动画特效
记得之前向大家分享过一款HTML5 Canvas实现会跳舞的时间动画，利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。
在线试看：http://www.html5tricks.com/demo/html5-pixel-text-effect/index.html
2、CSS3创意开关切换按钮
今天我们要来分享一款非常有创意的CSS3开关切换按钮，和之前分享的这款CSS3发光开关按钮类似，它也具有点击后按钮切换的动画特效，更有特色的是，该按钮在切换过程中其边框会产生扭动的动画特效，看上去非常不错。
在线试看：http://www.html5tricks.com/demo/css3-toggle-switch-button/index.html
3、HTML5 Canvas瀑布动画 超逼真
这次我们来分享一款很酷的HTML5 Canvas瀑布动画，瀑布动画非常逼真。整个瀑布动画像是从石头缝里流出来的溪水，然后沿着悬崖飞落下来，效果非常不错。
在线试看：http://www.html5tricks.com/demo/html5-canvas-waterful/index.html
4、3D版HTML5模拟衣服撕扯动画
还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗？这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本，在原来的基础上，衣服布料呈3D环形显示，你同样可以用鼠标拖拽衣服，不过和之前不同的是，鼠标左键用来拖拽衣服，鼠标右键用来切割衣服，失去了之前鼠标用力程度和衣服破碎程度的关系，似乎功能上有所缺失，但是HTML5 3D功能还是不错的
在线试看：http://www.html5tricks.com/demo/3d-html5-cloth-tear/index.html
5、HTML5火球挡板碰撞动画游戏
还记得之前分享的HTML5 Canvas火焰闪烁动画吗，动画效果非常炫酷。今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动，你可以移动鼠标滑动屏幕下方的挡板，火球碰撞到挡板后，即可反弹出去，这是个很有特色的HTML5游戏。
在线试看：http://www.html5tricks.com/demo/html5-breakout-game/index.html
6、CSS3带图标的消息提示框
之前我们分享过一款CSS3和jQuery带进度条的消息提示框，今天我们再来分享一款CSS3带图标的消息提示框，提示框的右侧有一个代表性的小图标，非常漂亮。CSS3技术的应用，可以让消息框的四个角都实现圆角效果。
在线试看：http://www.html5tricks.com/demo/css3-notification-icon/index.html#
7、纯CSS3实现地图热点文字标注提示
今天我们要来分享一款基于纯CSS3的地图应用，这款地图应用的特点是地图上有许多标注点，点击标注点即可在页面上弹出一个文字提示框，用来说明该标注点在地图上的详细信息。如果你需要有一款带标注功能的地图应用，那么这款CSS3地图插件可以满足你。
在线试看：http://www.html5tricks.com/demo/pure-css3-map-tips/index.html
8、HTML5 SVG创意开关切换按钮
对于开关切换按钮，我们在之前的文章中已经分享不少了，比如CSS3创意开关切换按钮就非常不错。今天我们再来分享一款基于SVG和HTML5的开关切换按钮，鼠标点击按钮后即可来回切换按钮的状态，滑动的动画效果非常不错。
在线试看：http://www.html5tricks.com/demo/html5-svg-switch-button/index.html
以上是北京恒泰博远小编为你分享的8个HTML5开发出的动画、应用和游戏，希望可以帮助你对H5的认识和了解。
本文链接：http://www.hengtaiboyuan.com/jsdt/content_748 转载请注明来自北京恒泰博远科技有限公司
您的位置 :