今天给大家介绍的是一款HTML5调用本地摄像头，然后识别人体的手掌的动画应用。当HTML5调起本地摄像头后，你只要在镜头前挥动你的双手，摄像头就会自动识别，并且在视频中显示，更厉害的是，它可以精确识别到手指手腕的关节，并且在你伸展手指时，相应的关节部位的节点就会随着伸展联动。这当然用到了一些JS库，你可以下载源码了解详情。另外，这款应用要部署在服务器上才可以运行，本地无法使用。

在线演示源码下载

我们知道Svg可以构造任意的路径，绘制出任意的平面图形甚至是类3D的图形画面。今天我们要介绍的就是一款利用SVG路径遮罩实现图片颜色的任意替换功能。这里我们以沙发图片为例，我们可以任意更改沙发的颜色及其背景颜色。原理是利用SVG绘制沙发的路径结构，然后用选择的颜色填充路径即可。如果你要换一款沙发或者别的产品，那么这个路径就需要重新计算。这款应用比较适合一些电子商务平台的商品展示，我们不需要为每一款颜色都提供图片。当然如果商品图片有不同的色块，那也不太适合这个工具。

在线演示源码下载

今天给大家带来一款很实用的HTML5图片播放插件，与一般的焦点图播放形式不同，这款插件是略微带有3D效果的横向无限循环滚动图片流。我们可以通过拖动滚动条、滚动鼠标滚轮、以及点击上一张下一张按钮来滚动图片，其特点是当前图片会放大高亮显示在屏幕中央，其余图片则缩小后在显示在两侧，同时图片流是无限循环的，因此不用担心滚动到最后一张照片后还需要手动倒退回去，浪费时间。

在线演示源码下载

今天分享的是一个基于Three.js的HTML5 3D动画，这个动画模拟了游戏中的一个炫酷的3D场景，支持360度视角查看，也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果，同时还有路两边的围栏、灯笼、石头，以及星光闪闪的萤火虫，整个画面显得十分神秘。不得不说，threejs作为webgl的上层库，基本可以满足我们动画制作的大部分需求。

在线演示源码下载

这是一款基于HTML5的3D无限循环图片流，它模拟了以前Mac Dock菜单栏的设计方式，每一张图片都有倒影，因此给人一种3D立体的视觉效果。另外，我们不仅可以通过鼠标拖拽来滚动切换图片，而且可以通过鼠标滚轮来切换。拖拽可以控制滚动的速度，而且这个图片流是可以无限循环的，不管有多少图片，都可以加入到这个图片流中进行展示。

在线演示源码下载

这是一个基于HTML5和CSS3的3D视差相册画廊，画廊中的图片围成一个圆环，拖拽鼠标可以让图片在环形画廊中滚动切换，并且将鼠标滑过图片时，图片也会产生高亮效果，形成一种3D的视差效果。另外，我们可以在次基础上稍微扩展一下，有兴趣的同学可以自己改造一下，就是鼠标点击图片时，可以展开原图，这样我们就可以浏览图片的具体细节了。

在线演示源码下载

这是一个很有意思的HTML5 Canvas图片切换动画，我们可以用鼠标或者手指在屏幕上滑动，将照片撕成两半，然后再切换成另外一张新的照片。这个特效不足的地方在于，所有照片的撕裂裂纹都是一样的，这可能会显得不是那么逼真。如果你有一个相册应用，个人认为可以将这个效果添加到你的相册照片删除功能上，看到哪张照片不爽，直接将它撕成两半，是不是很过瘾。（注：该动画本地无法运行，需要上传到服务器才可以使用）

在线演示源码下载

这是一个基于HTML5 Canvas的动画特效，这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成，大街上男女老少都有，十分逼真。同时，为了让动画更加真实，每个人物的行走速度、行走动作都有一定的差异，这让整个HTML5动画显得更为真实，我们也不得不叹服，Canvas真是一个好东西。

在线演示源码下载

这次要分享的是一个基于TweenMax动画库的图片碎裂切换动画，当我们点击图片时，图片就会像玻璃那样碎裂成许多块，然后渐渐地消失，直到下一张图片显示为止。TweenMax是高性能JavaScript动画框架，利用它我们可以轻松实现很多炫酷的网页动画效果。这款图片碎裂动画也可以应用在焦点图的切换动画中，效果非常不错。

在线演示源码下载

这是一套基于CSS3和HTML5的新拟物风格UI设计元素，大部分以表单元素为主，例如单选/复选框、按钮、Tab菜单、搜索框，另外还有时钟等。什么是新拟物化？它是一种在扁平的基础上呈现真实物体质感的设计风格。目前这种风格在网页上不多用，但在App上却已经广泛使用，特别是从2020年开始风靡。确实这种带质感的UI元素特别能让用户感到亲切。

在线演示源码下载