又是一周即将过去,我们来精心挑选这周分享的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动画,欢迎收藏分享。