哈哈，又找到几个强大的html5+css3的动画效果

一周HTML5经典回顾 31个别出心裁的HTML5动画

40,425 人浏览

发表回复

13

又是一周即将过去，我们来精心挑选这周分享的31款别出心裁的HTML5动画，很多还比较实用，一起来看看吧。

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

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

在线演示        源码下载

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可爱的404页面动画 很逗的机器人

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

在线演示        源码下载

10、CSS3华丽的Tab菜单 带小图标动画

之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单，结合SVG，Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单，这款Tab菜单的菜单项是一个个小图标，鼠标滑过时，菜单项展示对应文字，并出现展开的动画。

在线演示        源码下载

11、CSS3二级下拉动画菜单 菜单背景滑动动画

我们以前收集了很多漂亮的CSS3菜单，尤其是多级下拉菜单，像纯CSS3垂直动画菜单、CSS3 Lava Lamp动画下拉菜单效果都还不错，也挺实用的。今天我再来分享一款CSS3二级下拉动画菜单，这款CSS3菜单的特点是在菜单展开时，菜单的背景会出现滑动的动画效果。

在线演示        源码下载

12、HTML5摆动的文字特效 类似柳枝摆动

之前我们在html5tricks上分享过一些HTML5文字特效，像这款HTML5/CSS3 3D文字特效 文字外翻效果，像这款HTML5像素文字爆炸重组动画特效都非常有特色。今天我们来分享一款可以摆动的HTML5文字特效，文字垂直下垂，并可以在微风中微微摆动，就像春风中的柳枝一样。

在线演示        源码下载

13、HTML5/CSS3颜色渐变文字 可指定文字路径

之前我们分享过一些很酷的HTML5文字特效，像这款HTML5/CSS3 3D文字特效的折叠效果非常不错，这款HTML5/CSS3发光文字 可自定义文字色彩也很绚丽。今天我们来分享一款利用SVG实现的文字按路径显示应用，同时文字的填充色也有渐变的效果。

在线演示        源码下载

14、一款很酷的CSS3翻页时钟动画

之前我们介绍过一款HTML5/CSS3时尚的圆盘时钟动画，今天我们来分享另外一种风格的时钟，这款CSS3时钟动画是一款数字时钟，时间每过一秒，相应的位置就会像翻日历一样翻过去。另外，这款CSS3数字时钟有点立体的效果，非常漂亮。

在线演示        源码下载

15、CSS3开关切换按钮 可左右横向切换

之前我们分享过不少效果很酷的CSS3开关切换按钮，像这款CSS3 3D弹性按钮效果非常有质感，还有像这款CSS3 3D发光按钮又非常绚丽。今天我们要分享一款可左右滑动的CSS3开关按钮，鼠标点击按钮即可实现ios的滑块按钮效果。

在线演示        源码下载

16、CSS3 3D小球旋转Loading动画 相当欢乐

之前我们分享过一些不错的CSS3进度条插件，当然也分线过一款Loading动画纯CSS3加载Loading动画图 12款创意设计，效果非常酷。今天我们要来分享一款非常欢乐的CSS3 Loading动画，Loading动画由4个旋转的小球组成，旋转时呈现类3D的效果，我们很乐意叫它2.5d。

在线演示        源码下载

17、HTML5/CSS3书本翻页3D动画

前段时间我们分享过很多牛叉的HTML5动画，如果你对HTML5感兴趣，可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画，当我们将鼠标滑过书本时，书本就会自动一页页翻过去，书本的3D效果非常不错。

在线演示        源码下载

18、HTML5 3D骨牌图片特效 带文字描述

今天分享一款很特别的HTML5 3D图片特效，当鼠标滑过图片时，平面的图片即会呈现3D的效果，和这款HTML5 3D图片折叠特效类似，也是通过鼠标滑过来展现3D效果。另外，这款HTML5 3D骨牌图片特效还可以设置图片描述信息。

在线演示        源码下载

19、jQuery UI滑杆插件 可Tooltip提示

今天我们再来介绍一款实用的jQuery插件，是基于jQuery UI的。这款jQuery滑杆插件非常漂亮，可以设置多种颜色，再加上CSS3上运用，可以让滑杆的游标变得有立体感，滑杆的Tooltip提示框也出现飞入飞出的动画效果。更多jQuery插件可以移步至jQuery插件栏目。

在线演示        源码下载

20、CSS3个人资料表单 分两步骤表单

对于分步骤表单，我们之前也已经有过介绍了，像这款HTML5分步骤注册表单就非常不错，今天我们要来介绍另外一款分步骤表单，这是一款个人资料填写表单，我们可以分两步来填写个人资料，每一步的切换都有淡入淡出的动画效果，你也可以回退到上一步继续填写。

在线演示        源码下载

21、HTML5/CSS3自定义浮动Select 超炫下拉菜单动画

在CSS3菜单栏目中，我们分享了很多漂亮的菜单特效，相信很多CSS3菜单也都非常实用。今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单，这个CSS3菜单利用CSS3特性可以浮动在网页上，并带有阴影效果，同时，展开下拉框时会弹出一个二级菜单，效果非常不错。

在线演示        源码下载

22、HTML5/CSS3仿Facebook登录表单

利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CSS3密码强度验证表单可以显示密码的强度，这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。

在线演示        源码下载

23、HTML5/CSS3超酷进度条 不同进度多种颜色

这是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CSS3进度条更加鲜亮起来。

在线演示        源码下载

24、CSS3 3D发光切换按钮 模拟效果很逼真

刚刚我们发布过一款CSS3开关切换滑动按钮，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

在线演示        源码下载

25、CSS3/SVG质感背景小图标 镂空效果图标按钮

之前我们分享过很多利用CSS3制作的图标小按钮，比如一些分享按钮，如纯CSS3社会化分享按钮，还有一些带小图标的CSS3菜单，如HTML5/CSS3滑块动画菜单 图标动画很酷。今天我们来分享一款用CSS3和SVG实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。

在线演示        源码下载

26、纯CSS3实现美国金门大桥 霸气十足

金门大桥位于美国加利福尼亚州旧金山，看起来这座大桥非常宏伟大气。今天我们要用纯CSS3来绘制金门大桥，线条的勾勒非常逼真，个人认为除了颜色没有照片真实外，大桥的外形已经非常接近真实的金门大桥，CSS3真实霸气啊。

在线演示        源码下载

27、HTML5/CSS3弹出提示框 内置功能按钮

之前我们分享过一款很不错的自定义提示框插件CSS3带图标提示插件 多主题颜色，今天我们再分享一款多功能的HTML5/CSS3弹出提示框。和上一款提示框一样，带有小图标，而且可以关闭提示框。不同的是，这款CSS3提示框功能更加完善，可以内置一些功能按钮，比如“确定”和“取消”。

在线演示        源码下载

28、HTML5线性图表 图表数据区域可着色

利用HTML5制作图表插件也比较常见，我们也收集过几款很实用的HTML5图表插件，它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件，这款线性图表可以在不同的数据区域内绘制不同的颜色，让每一个数据区域都非常明显可见。

在线演示        源码下载

29、HTML5柱状图表 可合并多张图表的数据

之前我们分享过好几款不错的HTML5柱状图表了，像这款HTML5/CSS3水平柱状图表，非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表，这款图表插件可以将多张图表的数据合并成一张图表显示，在图表数据合并过程中产生融入的动画，挺不错的。

在线演示        源码下载

30、HTML5/CSS3提示框Tooltip动画

之前我们已经分享过一款HTML5/CSS3分步提示框Tooltip ，不过这款提示框主要是用来分步操作提示的，不是真正的Tooltip。今天我们要分享一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时，就会在按钮正上方弹出一个Tooltip提示框，并且伴有淡入淡出的效果。

在线演示        源码下载

31、HTML5/CSS3图片分割遮罩滑块动画

之前我们推荐过一款HTML5/CSS3原图对比查看特效 HTML5图片特效，效果非常酷。今天我们再来分享一款类似的HTML5应用，图片上有另外一张图片作为遮罩，滑动鼠标即可移动遮罩，将部分原图显示出来，效果没有上一款好，不过参考学习可以。

在线演示        源码下载

以上就是31个别出心裁的HTML5动画，欢迎收藏分享。

13

本条目发布于四月 26, 2014。属于资讯分类。

热门推荐

超炫酷的HTML5视频播放器

纯CSS3实现苹果设备 iPhone iPad iMac及iWatch

纯CSS3实现大象走路动画

HTML5/CSS3图片左右切换弹性动画

超绚丽的HTML5地图分布动画

纯CSS3绘制的小猫笑脸动画 超呆萌

文章导航

← CSS3小球浮动按钮 小球滚动很逼真CSS3 3D按钮 按钮有漂亮的边线 →