HTML5资源教程 | 分享HTML5开发资源和开发教程 | 第45页

HTML5 Canvas人物四肢模拟及身体碰撞动画

10,253 人浏览

2017-07-30 07:57:31

前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画，它可以模拟人物的头部、四肢伸展情况，相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上，添加了身体碰撞模拟的动画特效，我们用鼠标模拟一个大铁球，移动鼠标后将大铁球撞击人物的身体，人物身体受到作用力后就会按一定方向进行翻转活动，因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些，比如HTML5图片相册重力感应特效。

html5-canvas-person-collision

在线演示源码下载

HTML5点阵列局部放大镜动画特效

7,863 人浏览

2017-07-29 23:00:08

记得以前我们分享过一款很酷的HTML5 3D 粒子波浪动画特效，它由一连串点阵列组成，3D效果非常炫酷。今天要介绍的也是一个基于HTML5的点阵列动画特效，当鼠标滑过阵列时，阵列图的局部将产生放大镜的动画特效，也具有极强的3D立体视觉效果。

html5-dot-outline

在线演示源码下载

纯CSS3实现可感知方向的卡片翻转动画

11,304 人浏览

今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效，当我们将鼠标滑过一个个卡片时，卡片可以进行翻转，这个应该很容易，而且也很常见，你一定会说，这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点，就是它可以感知翻转的方向，也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度，比如鼠标从上往下滑过，那卡片就垂直翻转，如果鼠标从左往右滑过，那卡片就水平翻转。你可以去研究一下它的CSS源码，对你学习CSS3会有很大的帮助。

pure-css-direction-aware-tile

在线演示源码下载

jQuery SVG左右弹性切换全屏焦点图动画

15,845 人浏览

今天我们要为大家分享一款非常时尚和大气的jQuery全屏焦点图动画，这款焦点图插件的特点有2个，一个是焦点图整体以全屏的方式呈现，显得非常大气，而且图片四周也有3D阴影，立体视觉效果非常独特。第二是焦点图在图片切换的时候以弹性淡入淡出的动画方式，显得相当时尚。动画采用SVG相关特性，扩展十分灵活。

jquery-svg-image-slider

在线演示源码下载

纯CSS3实现超炫酷的萤火虫动画

13,639 人浏览

今天要为大家带来一款很有意思的纯CSS3动画，这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫，和之前分享的纯CSS3蚱蜢与纯CSS3打火机类似，这只萤火虫也是用CSS3绘制，并且点击萤火虫可以关闭和打开它的翅膀，同时萤火虫的闪闪发光也可以控制。

css3-firefly

在线演示源码下载

CSS3实现五彩3D旋转星球

13,947 人浏览

2017-07-27 21:15:53

之前我们有分享过很多纯CSS3和HTML5实现的球体动画，比如这款HTML5 3D球体斑点运动动画和HTML5 Canvas 地球旋转3D动画都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球，旋转起来的视觉效果相当震撼。

css3-colorful-3d-ball

在线演示源码下载

jQuery动态饼状图表多色块图表数据区域

4,560 人浏览

2017-07-26 21:30:19

今天要为大家介绍一款非常漂亮的jQuery饼状图表，之前我们也分享过一些饼状图表，比如jQuery饼状图表数据分布插件和HTML5 Canvas饼状图表。今天这款和这些相比，它的特点是饼状图的数据区域可以动态改变，而且每个数据区域的背景颜色也可以动态改变。

jquery-colorful-donut-chart

在线演示源码下载

CSS3响应式房子布局动画

6,244 人浏览

在网页上绘制各种各样的图形非常方便，只要你对CSS3的高级属性足够的熟悉，就可以绘制出很多复杂的图形。今天我们要介绍一个利用CSS3技术绘制的房子图形，当然画一个房子非常简单，并没有什么复杂的东西，但是这个动画有趣的地方在于你可以动态调整房子的布局，它是一幢响应式的房子，可以动态调整房间的数量。

css3-responsive-house

在线演示源码下载

HTML5人物关节拉伸模拟动画

9,021 人浏览

2017-07-25 22:45:37

这是一款非常经典的HTML5模拟人物关节动画，画面中两个人手拉手，伴随着外力在不断地跳舞和移动，人物身体的每一个关节都随着运动收缩和伸展，动画模拟非常逼真。同时，你也可以在身体任意部位利用鼠标拖动施展外力，让人物运动更加剧烈，同时也可以随时改变运动方式和力度。

html5-person-joint

在线演示源码下载

超炫酷的CSS3飞入飞出动画提交按钮

13,794 人浏览

今天我们非常具有创意的CSS3提交按钮，首先按钮的外观已经通过高级CSS3相关属性渲染得非常漂亮，同时当点击按钮提交时，按钮上的纸飞机就会飞出去，就像是飞走送信一样，表示信息已经提交。提交成功后，按钮上又会出现绿色的打勾，表示信息提交已经完成。这款CSS3按钮非常适合在信息提交的表单中使用。

在线演示源码下载