分类目录归档：HTML5应用

HTML5 Canvas烟花特效场景十分华丽

52,961 人浏览

2条回复

2014-03-20 06:00:50

对于HTML5技术来说，Canvas应用非常广泛，基本上所有HTML5动画特效都会用到Canvas特性。今天我们要分享一款基于HTML5 Canvas实现的烟花特效，我们只需在黑色的画布上点击鼠标，即会有漂亮的烟花绽放在夜空当中。

html5-firework-effect

在线演示源码下载

CSS3手风琴菜单下拉展开带弹性动画

35,335 人浏览

1条回复

2014-03-19 11:00:08

利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会出现动画，非常酷。

在线演示源码下载

HTML5/CSS3 3D环形图片墙伴随旋转动画

31,761 人浏览

1条回复

我们分享过很多HTML5图片特效，包括HTML5图片播放、HTML5图片缩放等效果。今天我们要分享一款基于HTML5/CSS3的3D环形图片墙，该HTML5图片特效是一面3D立体的墙，墙上贴着一些图片，墙体在不停的旋转移动。鼠标滑过图片时，图片墙即停止转动，并将选中的图片放大。

html5-css3-3d-photo-slider

在线演示源码下载

HTML5 Canvas正弦波动画可自定义波长和速度

18,456 人浏览

2条回复

正弦波我们很熟悉，以前数学和物理课上经常会用到，还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关，我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性，很酷吧。

html5-canvas-sin-animation

在线演示源码下载

HTML5/CSS3悬浮菜单可自定义小图标

27,315 人浏览

发表回复

2014-03-18 21:17:35

前些天我们分享过一款非常有特色的CSS3菜单HTML5/CSS3鬼脸表情下拉菜单，非常可爱。今天要分享的这款CSS3菜单是悬浮菜单，当鼠标滑过菜单项时，整一个菜单项即会悬浮上来。另外，菜单还允许你自定义漂亮的小图标，小图标也会悬浮上来，非常不错。

在线演示源码下载

HTML5 Canvas模拟翻滚动画 3D视觉效果

9,668 人浏览

2条回复

HTML5作为最先进的浏览器技术，可以创造出很多不同凡响的特效应用，尤其是3D动画更是轻而易举，大家可以在之前我们分享的HTML5动画栏目下欣赏到很多超酷的HTML5动画，也可以在HTML5 Canvas栏目下学习HTML5 Canvas应用的方法。今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效，一起来欣赏吧。

html5-canvas-roll

在线演示源码下载

CSS3波浪形菜单结合背景超级绚丽

13,850 人浏览

2条回复

我们分享过许多各种各样的CSS3菜单，应该说效果都比传统的CSS菜单强悍。这次要分享的这款CSS3菜单有点特别，菜单的整体形状类似波浪形，鼠标滑过菜单项时也会改变背景色表示该菜单项被激活。另外该CSS3菜单结合不错的背景图片效果更加震撼。

在线演示源码下载

HTML5播放器API集合轻松学会HTML5播放器开发

28,020 人浏览

1条回复

之前我们分享了两款不错的HTML5播放器，分别是HTML5视频播放器Video.Js和HTML5播放器神话卡带式古典播放器，效果都非常酷。今天我再分享一款最基本的HTML5视频播放器，这个播放器演示罗列了所有操作HTML5播放器的API，初学者可以更好的学习和使用HTML5播放器。

html5-video-api

HTML代码：

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
       <p>Your user agent does not support the HTML5 Video element.</p>
 </video>
<div id="buttons">[......]

阅读全文>>

HTML5梦幻特效可给任意元素添加魔幻效果

38,713 人浏览

10条回复

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

html5-magic-effect

下面我们一起来看看实现这款魔幻动画的过程和源代码，代码主要由HTML、CSS和JavaScript组成。

HTML代码：

<h1>A little canvas script to <span>add magic</span> to DOM elements!</h1>

<button class="sparkley">Everything's better with sparkles!</button>
<button class="sparkley last">I eat rainbows and poop butterflies!!</button>

没什么特别，接下来就会在这些元素上增加魔[......]

阅读全文>>