9款赏心悦目的HTML5/CSS3应用特效

经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家。

1、HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

在HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效HTML5水波荡漾动画特效。这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果。

html5-liquid-wave

在线演示    /    源码下载

2、HTML5重力感应动画特效 冲撞小球演示

前面我已经向大家分享过一款非常绚的HTML5重力感应游戏特效,我们只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。今天这款HML5重力感应动画特效功能更强,页面上会掉落大小不等的小球,我们可以拖动小球,也可以点击页面空白来生产更多的小球,如果你的电脑配置高,可以试试产生更多的小球来玩,非常有趣。

html5-ball-pool

在线演示    /    源码下载

3、HTML5 Canvas图表应用RGr[......]

阅读全文>>

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

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

html5-fruit-ninja

在线演示源码下载

HTML5版Flappy Bird游戏 仅65行Javascript代码

Flappy Bird相信大家都很熟悉了,2014年最热门的手机游戏之一。Flappy Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾。今天我们用HTML5来重写这款Flappy Bird游戏,值得注意的是,利用Phaser框架,只需65行Javascript代码即可实现HTML5版的Flappy Bird游戏。按空格键控制小鸟,试试看吧。

flappy-bird

在线演示源码下载

分享10款功能强大的HTML5/CSS3应用插件

今天我们整理了10款功能非常强大的HTML5/CSS3应用插件供大家学习和使用,希望各位喜欢,可以分享给你的朋友。

1、纯CSS3美化checkboxRadiobox按钮 外观很时尚

利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox,外观很时尚。

css3-checkbox-radiobox

在线演示    /    源码下载

2、CSS3多级下拉菜单 弹性展开下拉动画

利用CSS3制作的网页菜单外观都十分绚丽,而且都带有一定的动画特效。今天分享的这款CSS3多级下拉菜单可以方便地配置菜单的层级数,而且每一个菜单项都有自己的小图标,显得非常清新亮丽。该CSS3下拉菜单在展开子级菜单时会有弹性展开的动画特效,是一款非常酷的下拉菜单。

css3-dropdown-menu-animation

在线演[......]

阅读全文>>

HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效HTML5水波荡漾动画特效。这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果。

html5-liquid-wave

在线演示源码下载

HTML5 Canvas饼状图表 HTML5&jQuery图表应用

以前我们利用jQuery制作过一些图表应用,使用起来都非常方便。今天再来看一款基于HTML5 Canvas的饼状图图表应用,鼠标点击饼状图的某块区域时,即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的,所以需要支持HTML5的浏览器才能够使用。

html5-canvas-pie-chart

在线演示源码下载

HTML5重力感应动画特效 冲撞小球演示

前面我已经向大家分享过一款非常绚的HTML5重力感应游戏特效,我们只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。今天这款HML5重力感应动画特效功能更强,页面上会掉落大小不等的小球,我们可以拖动小球,也可以点击页面空白来生产更多的小球,如果你的电脑配置高,可以试试产生更多的小球来玩,非常有趣。

html5-ball-pool

在线演示源码下载

HTML5 Canvas图表应用RGraph 图表功能非常强大

前几天我向大家分享过一款HTML5实时数据图表,可以选择数据展示的时间段。今天再分享一款功能强大的HTML5 Canvas图表应用,这款HTML5图表有多种类型,直线图,柱状图,饼状图,甚至还有混合图,图表配置也十分简单,功能却非常强大。

html5-chart-rgraph

在线演示源码下载

jQuery特色菜单 圆形动画菜单插件

jQuery是一个非常流行的WEB前端框架,尽管HTML5非常酷,但是如果HTML5结合jQuery的话就能实现更酷更实用的插件。今天分享的这款jQuery特色菜单是圆形动画菜单,菜单项是一个个园,鼠标滑过菜单项时即可展开一个大圆并展示子菜单,这一切都是利用jQuery实现的,非常强大。

jquery-circle-animation-menu

在线演示源码下载

3D HTML5 Logo动画 HTML5多视角3D旋转动画

HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。

3d-html5-logo-animation

在线演示源码下载