标签归档：HTML5动画

HTML5/CSS3 3D下拉折叠菜单超炫CSS3菜单动画

27,616 人浏览

3条回复

2014-03-23 11:00:16

之前我们介绍过很多CSS3菜单了，效果都十分华丽炫酷，但是这些CSS3菜单基本都是二维平面菜单，今天要分享的这款HTML5/CSS3菜单却是3D的效果。菜单展现时出现折叠下拉的动画特效，菜单也可以收起，鼠标滑过菜单项的效果也很不错。

在线演示源码下载

纯CSS3绘制可爱小男孩动画超酷面部表情

21,297 人浏览

发表回复

2014-03-22 10:37:25

之前我们分享过几个纯CSS3动画特效，比如纯CSS3人物行走动画就非常酷，还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。

pure-css3-boy-animation

在线演示源码下载

HTML5 Canvas模拟衣服撕扯动画超级逼真

44,736 人浏览

8条回复

今天又要来推荐一款HTML5 Canvas动画，是一个模拟衣服撕扯动画，效果非常逼真。刚开始衣服挂在绳子上，用鼠标拖拽衣服即可让衣服摆动起来，当你拖拽的很用力时，你会发现，衣服被撕破了。该HTML5动画会捕获到鼠标拖拽的用力程度，从而来判断并实现衣服应该破损的程度，越用力，衣服被撕破的速度越快，赶紧来体验一下这个HTML5动画吧。

html5-cloth-tear

在线演示源码下载

HTML5模拟牛顿力学碰撞的小球

14,311 人浏览

1条回复

2014-03-20 07:00:44

利用HTML5来模拟很多物理实现都非常方便，像之前介绍过的HTML5 Canvas正弦波动画和HTML5物理实验 CSS3模拟齿轮转动。今天我们又要介绍一款HTML5模拟物理实验，这次模拟的是HTML5牛顿力学实验，高空挂几个小球来回摆动，互相撞击，来模拟力的传动。

html5-cradle

在线演示源码下载

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

55,465 人浏览

2条回复

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

html5-firework-effect

在线演示源码下载

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

33,967 人浏览

1条回复

2014-03-19 07:00:04

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

html5-css3-3d-photo-slider

在线演示源码下载

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

21,108 人浏览

2条回复

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

html5-canvas-sin-animation

在线演示源码下载

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

11,045 人浏览

2条回复

2014-03-18 11:30:13

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

html5-canvas-roll

在线演示源码下载

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

42,090 人浏览

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>

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

阅读全文>>