精选19款华丽的HTML5动画和实用案例
2014-05-11 10:29
295 查看
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家。
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
在线演示 源码下载
1、HTML5 Canvas火焰喷射动画效果
还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天我们要来分享一款类似的HTML5动画效果,一款基于HTML5 Canvas火焰喷射动画。用鼠标拖动一条直线,直线长度表示火焰喷射的力度,另外,火焰在运动中还可以反射效果哦。在线演示 源码下载
2、HTML5 3D立方体旋转动画
之前我们已经分享一款HTML5 3D正方体旋转动画,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。在线演示 源码下载
3、HTML5/CSS3实现大风车旋转动画
这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的。在线演示 源码下载
4、HTML5小车动画 很酷的HTML5吉普车
有几天没有分享HTML5动画了,之前很多HTML5动画都是利用CSS3的一些特性和Canvas特性来完成,比如这个HTML5/CSS3实现蝙蝠侠人物动画就利用CSS3的动画特性,HTML5 Canvas模拟衣服撕扯动画就利用了HTML5 Canvas特性。今天我们要分享一款利用HTML5/CSS3实现的吉普车动画,小车可以水平滚动,非常逼真。在线演示 源码下载
5、纯CSS3 3D图片翻转展示 图片3D阴影效果
之前我们分享过一些HTML5图片3D效果,这篇文章分享10款效果惊艳的HTML5图片特效中我们可以看到很多3D的图片特效。今天我们再来分享一款利用纯CSS3实现的3D图片翻转展示特效,点击图片或者下方的翻页按钮即可选中相应的图片,并实现翻转展示效果。在线演示 源码下载
6、HTML5摆动的文字特效 类似柳枝摆动
之前我们在html5tricks上分享过一些HTML5文字特效,像这款HTML5/CSS3 3D文字特效 文字外翻效果,像这款HTML5像素文字爆炸重组动画特效都非常有特色。今天我们来分享一款可以摆动的HTML5文字特效,文字垂直下垂,并可以在微风中微微摆动,就像春风中的柳枝一样。在线演示 源码下载
7、HTML5/CSS3 3D木块旋转动画
今天我们要来分享一款迷人的HTML5/CSS3 3D旋转动画,这款3D动画的主角是一根根小木条,每根小木条都会旋转,小木条之间的旋转有一定的间隔,这样就会有一种螺旋的视觉效果。另外,和之前分享的HTML5 3D动画一样,也是利用了CSS3的transform属性,点击这里可以查看更多HTML5 3D特效。在线演示 源码下载
8、漂亮的CSS3动画进度条 可自定义进度条颜色
今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错。之前我们也有分享过很多功能强大的CSS3进度条,像纯CSS3进度条 华丽5色进度条示例、CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似,可以看看。在线演示 源码下载
9、CSS3垂直图标菜单 带Tooltip提示框
今天我们要来分享一款CSS3菜单,菜单外观很漂亮,是垂直排列的小图标,鼠标滑过菜单项时,菜单项的背景会填充渐变的颜色,另外还会弹出该菜单项描述的Tooltip提示框。之前我们也分享过很多CSS3垂直菜单,像这款CSS3二级下拉动画菜单 菜单背景滑动动画、纯CSS3垂直动画菜单等都是非常不错的CSS3垂直菜单按钮。在线演示 源码下载
10、纯CSS3背景渐变按钮 按钮图标淡入淡出动画
今天我们要再来分享一款纯CSS3实现的按钮动画,这款按钮动画有以下特点:当鼠标滑过按钮时,按钮上的小图标便会以爆炸的方式淡出按钮,取代它的时相应的文字,当鼠标离开按钮时,小图标又会以爆炸的方式淡入按钮中。更多CSS3按钮,我们可以在CSS3按钮栏目中查找。在线演示 源码下载
11、HTML5 3D立方体旋转动画
之前我们已经分享一款HTML5 3D正方体旋转动画,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。在线演示 源码下载
12、动感的CSS3 Loading文字特效
这是一款非常帅的CSS3 Loading加载动画,尽管看上去只有Loading这几个字母,但是利用CSS3特性,可以把这几个字母渲染得非常动感。和之前推荐的CSS3 Loading动画纯CSS3加载Loading动画图不同,这款Loading动画仅仅几个字母就可以展现令人震撼的效果。在线演示 源码下载
13、CSS3多样式小图标按钮 带分享按钮
今天我们要来分享一款样式非常丰富的CSS3按钮特效,这些按钮的外观有点仿谷歌的风格,而且每一个按钮带有个性的小图标。另外按钮有一个特点,还可以定制出不错的分享按钮。之前我们也分享过不少漂亮的CSS3按钮,大家可以在CSS3按钮目录下查看。在线演示 源码下载
14、纯CSS3实现滑杆开关切换按钮动画
之前我们分享过一些CSS3开关切换按钮了,像这款CSS3 3D发光切换按钮、HTML5/CSS3开关按钮 立体3D按钮等。今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画,这个按钮是一个摇杆,杆子推上推下来切换开关状态,不同的开关状态也有不同颜色的指示灯。在线演示 源码下载
15、HTML5/CSS3牙刷动画 模拟真实刷牙效果
今天我们再要来分享一款不错的HTML5/CSS3动画效果,你一个可爱的牙刷,牙刷外观是利用纯CSS3绘制出来的,也比较简单。另外是刷牙动画,看起来非常搞笑,像真的刷牙一样,左刷刷,右刷刷,非常可爱的牙刷动画。在线演示 源码下载
16、CSS3可视化网页编辑器 基于tinymce编辑器
上次我们分享过一款网页编辑器jQuery轻量级网页编辑器 选中即可编辑,配置比较简单。今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器,编辑器功能相当完善,可以对文本进行各种操作,也可以添加链接和对齐文本。是一款功能更加强大网页编辑器。在线演示 源码下载
17、CSS3实现一款联系表单 输入框带小图标
之前我们已经分享过一款非常漂亮的CSS3联系表单CSS3联系表单 背景透明迷人,有兴趣的朋友可以去看一下。今天我们再来分享一款外观还不错的CSS3联系表单,这款CSS3联系表单的输入框带有小图标,并且在提交信息时能校验输入的信息。在线演示 源码下载
18、HTML5/CSS3多颜色柱状图表 带基准数据线
之前我们分享过几款很不错的HTML5柱状图表,像HTML5柱状图表 可合并多张图表的数据、HTML5/CSS3水平柱状图表。这次要分享的HTML5柱状图表也非常不错,它有多种颜色来表示不同的数据。最大的特点是这款HTML5带有基准数据线,可以直观地看到每个数据项相对基准值的偏差。在线演示 源码下载
19、HTML5/CSS3图片描述效果 文字描述浮动在图片上
今天要分享一款基于HTML5和CSS3的图片特效,该图片特效非常实用,可以让你网页上的图片在鼠标滑过时在图片上方浮现一些描述文字,该描述文字在展现出来的时候有淡入淡出的动画效果,同时描述文字的样式也可以自定义多样化,是一款非常不错的HTML5图片特效。在线演示 源码下载
相关文章推荐
- 12款炫酷实用的HTML5带发光动画
- 10个经典实用的HTML5图表动画应用
- 8个WEB前端创意HTML5动画应用精选
- 7 款华丽的 HTML5 Loading 动画特效
- 7款超酷HTML5 3D动画精选应用及源码
- 精选7款绚丽的HTML5和jQuery图片动画特效
- 8个华丽的HTML5相册动画欣赏
- 7款超酷HTML5 3D动画精选应用及源码
- Visual.C++网络通信编程实用案例精选
- 8个华丽的HTML5相册动画欣赏
- 8个WEB前端创意HTML5动画应用精选
- 10款绚丽实用的HTML5图表动画应用
- 精选6款神奇的HTML5 Canvas动画特效
- 8个华丽的HTML5相册动画欣赏
- 超酷HTML5 3D动画精选
- HTML5--风车动画案例
- 10个经典实用的HTML5图表动画应用
- 10款很酷的HTML5动画和实用的HTML5应用
- HTML5可以制作非常华丽的动画效果