作者归档:sxwgf

HTML5水波荡漾动画特效 非常逼真

在现实生活中,我们经常可以看到水波的效果,雨滴落到小河中,河里必定泛起了水波。今天我们用HTML5模拟了水波荡漾效果,点击河水的图片,即可从点击处开始泛起水波,并向远处伸展。这个利用HTML5模拟出来的水波效果非常逼真,不过有点耗CPU。

html5-water-ripple

在线演示源码下载

HTML5雨点下落动画 让雨点飞起来

利用HTML5实现雨点下落需要注意一下几点:1、雨点的大小和形状;2、雨点下落的速度控制,注意应该是加速下落。这个演示动画就很生动的模拟了雨点下落动画。当鼠标移上去时,就会形成3个雨点并向下掉落。HTML5技术真的非常方便。

html5-rain-drop

在线演示源码下载

HTML5吃豆人游戏PCMAN

今天又要介绍一款不错的HTML5游戏,HTML5吃豆人游戏,画面上有一个吃豆人和一群怪物,你需要控制吃豆人移动吃掉路上的小豆子,一旦吃豆人遇到怪物被吃掉的时候,你就GAME OVER了。这款HTML5游戏还有一点没完善,就是吃豆人碰到怪物的时候不能被怪物吃掉,有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术,也需要创意。

html5-pcman

在线演示源码下载

HTML5像素粉碎图片动画 图片洒落一地

这款HTML5图片动画特效你绝对想不到,它将一张图片粉碎成许多像素颗粒,点击图片后,这些像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的,有兴趣的同学可以下载源码来学习。

html5-pixel-image-effect

在线演示源码下载

HTML5太空战机游戏 有声有色

这又是一款制作精良的HTML5游戏,该HTML5游戏的主角是一架英勇威武的太空战机,进入游戏后按”Z”键发射子弹,消灭敌机。该HTML5战机游戏的特点是:1、游戏画面非常华丽逼真,并且加入声音元素,让游戏更加迷人;2、游戏元素很多,敌机类型和发射子弹类型也很多,让玩家不会枯燥。

html5-airplan-game

在线演示源码下载

HTML5动画图片播放器 高端大气

我们见过很多图片播放插件(焦点图),很多都基于jQuery。今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

html5-image-player-with-animation

在线演示源码下载

HTML5视频破碎重组特效 强大视觉冲击

HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。点击视频任意地方,HTML5将会将这些区域击碎,过一段时间,这些被击碎的视频碎片又将自动重新组合。是一款非常不错的HTML5视频特效。

html5-video-crash

在线演示源码下载

HTML5 3D Google搜索 小盒子 大世界

HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,弄起了3D搜索。随着鼠标移动,HTML5 3D搜索盒子也就转动,非常立体。点击搜索按钮,即可打开盒子进行Google搜索。

html5-3d-google-search

在线演示源码下载

CSS3/jQuery创意盒子动画菜单

作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱。点击菜单项,盒子就会展开,展示该菜单项具体的内容。该CSS3菜单在展开时也有不错的动画效果。

jquery-css3-box-menu

在线演示源码下载

华丽的HTML5图表 可展示实时数据

HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大。这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据。

html5-chart-data

在线演示源码下载