动画GIF在网上流行是有理由的，它们提供比普通图像更多的参与度，同时与典型视频相比更容易消化，然而，GIF存储视频需要大量内存，导致页面加载时间慢和数据使用率高。使用HTML5视频，您可以将GIF内容的大小减少多达98％，同时仍然保留浏览器中GIF格式的独特品质。

动画GIF对我们来说很有意义， 在所有浏览器中，它们很容易制作并且运行良好。但GIF格式最初并不适用于动画。GIF格式的原始设计是提供一种使用无损压缩算法（称为LZW压缩）压缩单个文件内的多个图像的方法，这意味着它们可以在相当短的时间内下载，即使在慢速连接上也是如此。之后，添加了基本的动画功能，允许文件中的各种图像（帧）绘制时间延迟。默认情况下，构成动画的一系列帧仅显示一次，在显示最后一帧后停止。Netscape Navigator 2.0是第一款增加动画GIF循环功能的浏览器，它导致动画GIF的兴起，知道现在依然在流行中。

作为动画平台，GIF格式非常有限。动画中的每个帧仅限于256种颜色的调色板，多年来，压缩技术的进步使得动画和视频文件的压缩和使用方式得到了一些改进，与正确的视频格式不同，GIF格式不利用任何新技术，这意味着即使几秒钟的内容也会导致非常大的文件大小，因为存储了大量重复信息。

即使尝试使用Gifsicle等工具调整GIF的质量和长度，也很难将其缩小到合理的文件大小。这就是为什么像外国Giphy，Imgur等GIF网站不使用实际的GIF格式，而是将其转换为HTML5视频并向用户提供服务的原因。 我们了解到外国一个有名团队Pinterest工程团队发现新功能，将动画GIF转换为HTML5视频可以减少加载时间并提高播放流畅度，从而带来更愉悦的用户体验。

因此，我们应该研究一些技术，使我们能够使用HTML5视频作为动画GIF的替代品，将动画GIF转换为视频文件，并检查如何在网络上正确嵌入这些视频文件，以便它们像GIF一样运行。

HTML5的图片动画非常丰富，我们也在网站上分享过很多关于HTML5的图片动画。相册在网络中也十分常见，本文我们要分享一些比较华丽的jQuery/HTML5相册动画，希望大家喜欢。

1、HTML5 3D相册浏览 震撼人心

前几天我刚刚分享过一款HTML5 3D图片插件HTML5 3D立体图片旋转播放展示，确实利用HTML5技术来做各种图片动画都非常炫。今天我们再来看一款HTML5 3D相册浏览应用，图片可以手动播放，也可以自动播放，效果非常震撼，赶紧把这款HTML5 3D相册分享给你的朋友吧。

在线演示/源码下载

2、jQuery/CSS3实现拼图效果的相册插件

今天我们要来分享一款很酷的jQuery相册插件，首先相册中的图片会以一定的角度倾斜放置在页面上，点击图片缩略图就可以展开图片，并且图片是由所有缩略图拼接而成，图片展开和收拢的动画效果也非常不错。当然图片倾斜需要CSS3支持。

3、jQuery垂直缩略图相册插件

这是一款支持鼠标拖拽的jQuery相册插件，这款jQuery相册的特点是右侧有一排垂直的缩略图，可以定义任意数量的图片，并且可以使用鼠标拖拽来对缩略图进行翻页浏览。另外，相册的图片切换支持自动切换，也支持鼠标点击按钮切换和鼠标滑动切换。

4、jQuery 3D图片旋转展示插件

今天要分享一款基于jQuery的3D图片特效，该jQuery图片插件类似一个相册焦点图，可以点击按钮来回切换图片，不同的是切换时有3D立体的视觉效果，图片切换效果非常不错。并且，每一张图片上面可以浮动一些文字描述，很实用。

5、HTML5/CSS3动画相册 图片可倾斜摆放

记得之前我们分享过一个很酷的放满女神的HTML5/CSS3相册，相册是全屏展示的。今天我们又要来分享一个CSS3动画相册，这款相册的特点是图片可以任意角度的倾斜摆放，就像随意放在桌面上一样。另外，当鼠标滑过图片时，被遮挡在下方的图片也可以凸显出来。

6、jQuery手风琴式相册图片展开效果

之前我们有分享过很多jQuery手风琴样式的菜单，比如CSS3手风琴下拉菜单。今天要分享的jQuery手风琴效果很特别，它是手风琴样式的相册图片展开效果。我们只需点击图片缩略图即可展开当前的图片，并将其他的图片收缩起来。

7、HTML5 3D相册图片轮播动画

这是一款基于HTML5和CSS3的3D相册浏览插件，它可以将相册中的图片以3D的方式展示出来，并且你可以滑动下面的滑杆来滑动图片浏览，同时，我们也可以指定数字让其直接跳转到指定的图片。这款HTML5 3D图片轮播动画用起来非常棒。

8、CSS3动画相册 图片淡入淡出动画效果

这是一款基于CSS3的动画相册，这样的相册我们之前也分享过不少，比如HTML5 3D立体图片相册。非常的华丽。今天的这款CSS3相册相对比较实用，当鼠标划过缩略图时，原图片即会以淡入淡出的动画效果展现出来，大家可以将它应用在自己的网站上。

以上就是8个华丽的HTML5相册动画欣赏，欢迎收藏分享。 via：http://html5tricks/8-wonderful-html5-gallery.html

文字是网页中最为常见的元素之一，当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果，这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文字的动画特效。本文就总结了7款超华丽的HTML5 Canvas文字动画特效，可以让你的页面更加的活灵活现，充满梦幻的色彩。

1、HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效，比如这款HTML5 Canvas炫酷的火焰风暴动画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效，文字同时是利用火焰来渲染的，并且燃烧的文字火焰还可以随时改变颜色，让文字更显幻彩。

在线演示/源码下载

2、超华丽CSS3 3D五彩发光文字动画

不久前我们已经为大家介绍过一些炫酷的CSS3文字动画和HTML5文字特效，有些都非常不错，比如最近刚分享的CSS3文字跳动旋转动画以及HTML5 Canvas幻彩火焰文字特效。这次我们要来看一款纯CSS3实现的3D五彩发光文字动画，文字呈现3D立体的视觉效果，同时定时会变换字体颜色，并且文字周围微微带有发光的效果，这样就更加体现出3D的动画效果了。

3、HTML5像素文字爆炸重组动画特效

HTML5可以把文字效果做得非常酷，就像之前分享的HTML5/CSS3发光文字和HTML5/CSS3文字投影特效就非常绚丽。今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效，我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。

4、HTML5粒子效果的文字动画特效

记得之前向大家分享过一款HTML5 Canvas实现会跳舞的时间动画，利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。

5、HTML5 Canvas文字粒子动画 可自定义文字内容

之前我们分享过一些关于HTML5的粒子动画，有文字粒子动画，比如这款HTML5 Canvas粒子效果文字动画特效就非常不错。今天要分享的也是一款基于HTML5 Canvas的文字粒子动画特效，我们可以自定义文字的内容、粒子的半径、粒子重力方向、粒子抖动频率等，看起来非常强大和炫酷。

6、HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

7、HTML5 Canvas 3D球形文字标签云动画

个人博客程序中经常会使用的一个功能叫标签云，就是把许多标签文字提取出来，使用云的形式将这些标签展示给读者。今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画，你可以定义任意的文字，然后调用HTML5代码初始化一个3D的球形标签云，效果非常不错。

以上就是7款超华丽的HTML5 Canvas文字动画特效，欢迎收藏分享。转载请注明原文：http://html5tricks/7-wonderful-html5-canvas-text.html

昨天为大家收集了15个华丽的HTML5动画应用，有几个应用还比较实用。今天我们就接着来分享第二波干货，也是基于HTML5和CSS3的动画应用，将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域，希望大家会喜欢。

1、HTML5/CSS3自定义下拉框 3D卡片折叠动画

之前我们分享过一款CSS3带小图标下拉菜单，它更多的是一款菜单，但是今天要分享的一款CSS3自定义下拉框取代了传统的Select样式，用不一样的风格来让select更加美观。这款CSS3下拉框还有3D立体的卡片折叠动画效果，非常酷。

在线演示/源码下载

2、HTML5/CSS3发光搜索表单 超酷CSS3表单

之前我们分享过一款纯CSS3实现的发光登录表单，发光特效非常不错。今天我们要再来分享一款放光表单，是一款CSS3发光搜索表单，表单整体是黑色的风格，搜索框被激活时，输入框就会发光，由于黑色的背景，整个搜索表单就显得格外绚丽光亮。

3、jquery视差滑块幻灯特效

非常酷的一款jQuery全屏焦点图插件，图很美。

、

4、HTML5仿Chrome样式控制滑杆动画

随着浏览器技术的发展，滑杆控制器在网页上应用越来越广泛。今天要分享一款HTML5的滑杆控制器，这个滑杆动画是放Chrome样式的，不仅外观非常漂亮，而且在数据初始化的时候还带有滑动动画特效，我们可以将此插件应用在数据更新、投票等系统中去。

5、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单

之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。

6、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

之前我们分享过一款非常不错的CSS3自定义Checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义Checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

7、HTML5自定义Checkbox和Radiobox 很酷的选中动画

浏览器自带的Checkbox和Radiobox的样式不仅外观丑陋，而且控制起来也不方便，特别是Checkbox在各个浏览器中的样式都不同，今天我们来利用HTML5和CSS3技术来自定义Checkbox和Radiobox的样式，特别是Checkbox，在选中的时候还有非常酷的选中动画。

8、CSS3联系表单 背景透明迷人

我们在网页上经常会用到一些联系表单或者留言表单，不久前我们也分享过一款外观清新的Select联系表单，今天我们要分享一款背景透明迷人的CSS3联系表单，整个表单的背景是半透明的，像是悬浮在一张漂亮的幕布上一样，表单输入框被激活时输入框也呈现透明的效果，非常具有立体感。

9、纯CSS3垂直动画菜单 效果很酷

CSS3菜单的实现实在是太多了，有需要的朋友可以在CSS3菜单栏目下搜索符合自己要求的菜单。今天我们来分享一款CSS3垂直菜单，这款垂直菜单不仅有漂亮的小图标，而且鼠标滑过时还有非常酷的CSS3动画，大家可以试试这款CSS3垂直菜单。

10、CSS3响应式面包屑菜单 菜单简洁大气

之前我们分享过两款CSS3面包屑菜单，纯CSS3圆形面包屑菜单和CSS3扁平化面包屑菜单导航，效果都还不错。今天我们再分享一款响应式面包屑菜单，这款CSS3菜单外观设计非常简洁但又十分大气，我们可以在分步注册页面或者活动引导页面使用这款CSS3面包屑菜单。

11、HTML5/CSS3实现iOS Path菜单

Path菜单相信大家都不陌生吧，它在iOS中非常流行，今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path菜单，点击按钮，即可弹出子菜单，子菜单弹出的动画非常炫酷。点击子菜单，即可打开相应功能。

12、HTML5梦幻特效

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

HTML5和CSS3之所以强大，不仅因为现在大量的浏览器的支持，更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡，那么HTML5和CSS3将会替代Flash。今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码，这些动画非常让人震撼，你也可以学习一下HTML5源码。

1、HTML5 Canvas水波纹动画特效

HTML5的Canvas特性非常实用，我们不仅可以在Canvas画布上绘制各种图形，也可以制作绚丽的动画，比如这次介绍的水波纹动画特效。以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画，让人惊叹不已，这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

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

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

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

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

4、CSS3僵尸从墓穴爬出来的动画特效

还记得很早的时候我们给大家分享过一款CSS3僵尸行走动画吗？动画效果十分逼真。这次要给大家分享另外一款有关僵尸的CSS3动画，这款动画利用了CSS3特性绘制了一只僵尸从墓穴出来时的特效，应该是从植物大战僵尸游戏中模仿过来的。

5、HTML5 Canvas烟花动画 可控制烟花速度和大小

这款HTML5烟花动画我们应该比较熟悉，因为之前有分享过类似的HTML5动画了。这个HTML5烟花动画是基于canvas的，可以说是之前分享那款的升级版，它可以控制烟花上升的速度和烟花绽放花朵的大小。由于是在HTML5 Canvas画布上完成，因此也就非常灵活。

6、HTML5 Canvas 水母游动动画特效

这是一个非常酷的HTML5动画特效，它是一只游动的水母，我们利用HTML5的Canvas技术绘制一只像素点组合的水母，并且利用JavaScript模拟水母游动的动画特效，看上去非常逼真。

7、纯CSS3实现3D太空飞船 多视角动画演示

这是一款用纯CSS3打造的3D太空飞船动画，从夜空背景，到飞船上的每一个细节，都使用了CSS3来实现，所以尽管是比较复杂的页面，加载速度也很快。另外，这款CSS3飞船动画可以在左上角的控制面板中控制飞船的不同视角，同时也可以开启和关闭飞船尾部的螺旋桨，非常逼真的纯CSS3动画。

8、CSS3实现五彩3D旋转星球

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

以上就是8个超震撼的HTML5和纯CSS3动画源码，如果你对HTML5感兴趣，欢迎收藏和分享。

在网页设计中，很多元素都可以实现发光的动画效果，比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用的HTML5带发光动画，这里的很多应用都是可以在不少项目中使用，可以为你节省很多前端开发时间。

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

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

2、HTML5 Canvas五彩缤纷的3D发光水晶球动画

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画，就像是酒吧里的那种水晶球射灯一样，不停地随机变换射出光线的颜色，给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成，利用CSS3的相关特性使其能够出现五彩缤纷的发光动画，而且可以通过鼠标滚轮来放大缩小这个水晶球，不得不说HTML5真的是非常强大。

3、jQuery/CSS3实现漂亮字体发光特效

今天我们要来分享一款很酷的jQuery/CSS3文字发光特效，首先是加载了谷歌的公共字体库，因此字体非常特别和漂亮，另外利用了jQuery和CSS3的相关特性，当鼠标滑过文字时，文字将会出现发光的动画特效，非常漂亮。

4、超绚丽CSS3多色彩发光立方体旋转动画

之前我们分享过几个不错的CSS3立方体动画，比如这款HTML5 3D立方体旋转动画和HTML5 3D立方体图片切换动画。今天要分享的也是一款基于CSS3的3D立方体旋转动画，不同的是，这款立方体的每一个面都有不同的色彩，并且会带有绚丽的发光特效。

5、纯CSS3实现发光开关切换按钮

前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮，效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，可以左右切换。另外开关上的文字还有发光的特效，整体看上去很有立体感。

6、纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

7、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

8、CSS3发光Loading加载动画

今天我们要分享一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果：HTML5 Canvas实现超酷Loading动画、很有个性的CSS3弹跳Loading动画。

9、纯CSS3实现发光动画按钮特效

这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。

10、HTML5 Canvas 3D旋转物体动画 模糊发光特效

HTML5 3D动画应用非常广泛，我们之前也分享过很多炫酷的HTML5动画应用。今天要介绍的这款HTML5 3D动画是一个旋转的物体，并且利用CSS3的特性，物体会发出模糊和发光的动画特效，旋转起来效果特别酷。

11、HTML5/CSS3发光搜索表单 超酷CSS3表单

之前我们分享过一款纯CSS3实现的发光登录表单，发光特效非常不错。今天我们要再来分享一款放光表单，是一款CSS3发光搜索表单，表单整体是黑色的风格，搜索框被激活时，输入框就会发光，由于黑色的背景，整个搜索表单就显得格外绚丽光亮。

现在网页上的图片已经不再是10几年前那种低像素的静态图片了，有了HTML5和jQuery，我们可以让一张普通的图片变得多姿多彩，特别是利用HTML5，还可以实现一些很复杂的图片动画特效。下面分享的10款图片特效就是基于HTML5和jQuery的，一起来看看吧。

1、HTML5相册照片浏览器 可连接Flickr照片服务

以前我们经常会分享一些jQuery相册浏览插件，效果不错，实用性也很强。不过如果能利用HTML5来实现相册浏览器，那么相册浏览效果肯定会更加炫酷。今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片，也可以连接到youtube获取视频，照片在初始化的时候有波浪般的效果。

在线演示/源码下载

2、CSS3图片模糊效果

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。

3、HTML5 3D幻灯片播放特效 可自定义图片参数

今天我们要来分享一款功能非常强大的HTML5幻灯片播放特效，图片是响应式布局，可以根据窗口大小自动展示成一列或者两列。点击图片即可展示图片的详细信息，包括图片的文字描述。图片在展开的时候有非常酷的3D特效，相当不错的HTML5幻灯片插件。

4、HTML5 3D旋转图片相册 可鼠标悬停

图片特效在HTML5应用中十分广泛，我们也在html5tricks上收集了不少HTML5图片特效，今天要分享的这款HTML5 3D旋转图片相册又非常绚丽，和之前分享的这款HTML5/CSS3 3D环形图片墙类似，也是一面立体的图片墙，图片不停的切换，鼠标滑过图片时即可激活图片查看。

5、HTML5 3D相册浏览 震撼人心

前几天我刚刚分享过一款HTML5 3D图片插件HTML5 3D立体图片旋转播放展示，确实利用HTML5技术来做各种图片动画都非常炫。今天我们再来看一款HTML5 3D相册浏览应用，图片可以手动播放，也可以自动播放，效果非常震撼，赶紧把这款HTML5 3D相册分享给你的朋友吧。

6、CSS3图片悬停放大特效

今天我们要来分享一款很酷的CSS3图片特效，这款图片特效可以利用鼠标滑过图片使其悬停放大，并使图片的周围出现发光的效果。配合黑色的背景，这款CSS3图片悬停放大效果显得更加立体大气，非常适合产品图片的展示。

7、CSS3图片层叠展开特效 可展开扇形效果

今天要分享的这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。

8、CSS3迷你图片切换组件 可添加图片描述

图片切换在WEB2.0中应用十分广泛，今天分享的这款CSS3迷你图片切换组件有着自己的优势和特点。点击切换按钮时，按钮会出现渐隐渐显的发光特效，图片切换过程中整张图片过渡的效果非常柔和，并且图片描述也相应以动画的方式显示在图片上，是一款非常棒的CSS3图片切换组件。

9、CSS3百叶窗图片切换 图片很美

这款CSS3图片切换插件非常漂亮，图片切换是百叶窗的效果，更值得注意的是插件提供了4种不同的百叶窗特效，有水平百叶窗、垂直百叶窗和淡入淡出百叶窗等。并且，该CSS3百叶窗图片切换插件切换时非常平滑，效果很不错。

10、HTML5动画图片播放器 高端大气

我们见过很多图片播放插件（焦点图），很多都基于jQuery。今天介绍的HTML5图片播放器很特别，它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

以上就是10款让人惊叹的HTML5/jQuery图片动画特效，欢迎收藏分享。 转载请注明原文链接：http://html5tricks/10-html5-jquery-image-animatin.html

之前我们已经向大家分享了很多HTML5动画应用了，大部分都非常炫酷，也有一小部分是很实用的。今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3D动画应用，希望大家能更加喜欢。

1、HTML5鲸鱼动画 又一款超酷HTML5动画

之前看到过同样效果的一款鲸鱼动画，不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML5确实很给力，HTML5动画完全可以完成flash能做的事情。

在线演示/源码下载

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

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

3、HTML5 Canvas绘制灰太狼 超级可爱

HTML5 Canvas相当于一个画板，你可以在Canvas绘制任意的东西，今天要分享一款利用HTML5 Canvas绘制的灰太狼形象，个人以为，这个灰太狼绘制得十分逼真形象，小伙伴们都要惊呆了。以后我们再来弄一个HTML5 Canvas的喜洋洋如何？

4、HTML5 3D图片切片滑块旋转动画 超酷的HTML5 3D特效

先来说说怎么玩这款HTML5 3D图片动画特效，我们只需要在图片上面拖动鼠标，图片即会在垂直方向分裂出数块小长方体，然后每一个小长方体沿着鼠标拖动的方向旋转。这款HTML5 3D动画非常酷，它的实现离不开js动画框架TweenMax。

5、HTML5/CSS3 3D文字特效 文字立体可旋转

今天我们要分享一款效果挺不错的HTML53D文字特效，首先文字本身具有投影的立体效果，再加上文字的旋转摆动动画，就更显文字3D动感了。之前我们也分享过几款挺不错的HTML5文字特效，像HTML5/CSS3 3D文字特效 文字外翻效果，也具有3D的效果。

6、纯CSS3绘制可爱的蚱蜢 还有眨眼动画

今天我们要分享一个利用纯CSS3绘制的蚱蜢动画，非常可爱，之前我们也分享过很多利用纯CSS3绘制的人物、动物等很有特点的效果，比如纯CSS3绘制可爱小男孩动画、纯CSS3 Android Logo动画绘制等。这款CSS3蚱蜢还有眨眼的动画，非常酷。

7、HTML5像素粉碎图片动画 图片洒落一地

这款HTML5图片动画特效你绝对想不到，它将一张图片粉碎成许多像素颗粒，点击图片后，这些像素颗粒边掉落在地上，继续点击，粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的，有兴趣的同学可以下载源码来学习。

8、用HTML5/CSS3给女朋友送个生日蛋糕

现在有了HTML5，我们在浏览器上制作动画已经不是什么难事了，但是一个好的创意却很难，比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意，它是用svg来做的，利用HTML5的api让制作蛋糕的过程展示出来，这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦！

9、HTML5/CSS3奔跑动画 动画效果非常逼真

今天要分享一款很酷的模拟真人奔跑动画，它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的。这款的逼真之处在于人物在奔跑的时候很有节奏感，而且有人物的投影。更重要的是当人物跑的越来越近是，人物的大小也会随之变大。很像一个小男孩从远处跑过来。

最后欢迎大家分享和收藏，HTML5非常强大。 本文链接：

http://html5tricks/9-wonderful-html5-3d-animation.html

我们分享过很多漂亮的HTML5动画，包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码，一起来看看。

1、HTML5可爱的404页面动画 很逗的机器人

很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。

在线演示/源码下载

2、HTML5/CSS3鼠标滑过抖动图标 非常可爱

这是一款简单的利用CSS3实现的图标抖动特效，首先我们精选了几款常用而且漂亮的图标，并在图标下方写有描述性的文字。当我们把鼠标滑过图标时，图标即会不停的抖动，像是在告诉用户“点我吧”，这个功能很多地方应该能用到。

3、HTML5/jQuery 3D焦点图插件 多种超酷切换动画

之前我们分享过一些很酷的焦点图插件了，有些是基于jQuery的焦点图应用，今天我们要分享一款基于HTML5和jQuery的3D焦点图插件，该HTML5焦点图有多种超酷的切换动画，包括3D百叶窗、3D翻转等特效，有些切换效果在高版本Chrome中有效果。

4、CSS3各大网站分享按钮 带网站Logo小图标

对于CSS3分享按钮，我们在之前的文章中已经分享几款了，像纯CSS3社会化分享按钮 可固定网页顶部、CSS3发光社会分享按钮等。今天我又收集了一款非常强大的CSS3各大网站分享按钮，非常多的按钮，基本上一些国外的社交网站都有。另外，这款CSS3分享按钮还带有社交网站的Logo小图标，外观非常漂亮。

5、CSS3滑块菜单 菜单动画很酷

我们之前分享过不少很酷且非常实用的CSS3菜单，今天我们再来分享一款CSS3滑块菜单，这款菜单初始化时是几个很漂亮的小图标，当鼠标滑过菜单项时，小图标即展开成具体菜单内容，这些内容可以自己定义，效果非常不错。

6、HTML5画图特效 超酷的笔刷动画

之前我们分享过一款HTML5画图工具HTML5 Canvas画板画图工具 可定义笔刷和画布，我们基本对HTML5的画图功能有一定的了解。今天我们要分享一款超酷的HTML5笔刷动画，我们可以选择不同的笔刷形状，笔刷在画布上移动时就会播放非常绚丽的动画效果。

7、HTML5/CSS3实现蝙蝠侠人物动画 蜘蛛侠变身

利用CSS3实现人物动画效果非常多，我们在html5tricks上也分享了不少，像HTML5/CSS3实现笑脸动画纯CSS3绘制可爱小男孩动画等。今天我们再分享一款利用纯CSS3实现的蝙蝠侠动画，页面加载后就会启动蝙蝠侠的绘制，就像组装汽车一样。

8、HTML5 SVG环形图表应用 很酷的数据初始动画

之前我们也分享过几个HTML5饼状图表应用，像HTML5 Canvas饼状图表，可以很清晰的展示各个数据的所占比例。今天要分享的这款HTML5图表是一个环形的，和饼状图表类似，主要特点也是能清晰的了解每项数据所占的比例。这款HTML5环形图表是利用SVG实现的，图表数据在初始化的时候将出现非常酷的动画效果。

9、HTML5迷你音乐播放器 3D翻转播放按钮

上一篇我们分享了一款外观很酷的HTML5音乐播放器，这次分享的播放器比较小巧迷你，虽然外观没有上一个播放器那么精致，但是功能却是很齐全的。该HTML5音乐播放器的特点是有一个3D的翻转播放按钮。当然对于HTML5播放器的外观，大家可以自己设计定义。

以上就是9款超炫HTML5最新动画源码，你喜欢么？

微信html5页面或称微信场景里的那些会动的动画效果是怎么制作的呢，比如说一个气球在页面里飘来飘去的效果，下面小编就来跟大家简单的介绍一下动画的制作教程。

借助html5页面编辑工具。百度搜索“VXPLO互动大师”，进入官网注册账号并登录。登录后在“我的作品”里创建一个新的PC案例。

修改舞台大小。在编辑界面，选中舞台，在舞台的属性面板，把舞台的宽高设置为1024*600px。

添加背景图片。选中舞台，点击工具栏里的“图片”图标，在舞台上画出一个框，点击上传一张天空背景图片。

添加时间轴。选中舞台，点击工具栏里的“时间轴”图标，在舞台下添加时间轴1。

时间轴下添加图片。选中舞台下的时间轴1，点击工具栏里的“图片”图标，在时间轴1下添加2张图片：云图片和热气球图片，并调整图片的位置。

图片下添加轨迹。分别选中云和热气球图片，点击工具栏里的“轨迹”图标，在两个图片下分别添加一条轨迹。

轨迹上添加关键帧。选中图片云下的轨迹，在0s、4s、6s点“Add”添加一个关键帧。分别选中关键帧，透明度依次设为58%、58%、100%；图片的x轴坐标不变，0s和4s的y轴坐标不变，6s时y轴坐标减少（向上移动）70个单位。

轨迹上添加关键帧。选中热气球下的轨迹，在0s、2s、4s、6s点“Add”添加一个关键帧。分别选中关键帧，透明度依次设为0、100%、100%、0。2s、4s、6s时图片的x轴坐标依次增加（向右移动）140、160、230个单位；y轴坐标先减少（向上移动）80，再依次增加（向下移动）20、60个单位。

作品的保存和分享。点击编辑页面上方的保存按钮，填写标题和描述，状态设为公开，上传封面图片，点确定保存好作品。然后退出编辑界面，在“我的作品”里找到刚刚做好的作品，封面有个分享按钮，点开用微信扫描二维码，打开作品分享出去即可。