今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQuery应用。

1、HTML5 Canvas发光Loading动画

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

在线演示        源码下载

2、jQuery球状放大镜特效插件

今天我们要来分享一款基于jQuery的放大镜特效插件,和其他放大镜不同的是,这款jQuery放大镜插件是球状的,看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时,即会出现很酷的球状放大镜,来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小,这就产生了立体感。

在线演示        源码下载

3、HTML5 Canvas粒子模拟效果

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。

在线演示        源码下载

4、HTML5/CSS3带区域地图的联系表单

之前我们分享很多样式和功能各异的CSS3联系表单,比如HTML5/CSS3简易联系表单 扁平化风格CSS3联系表单 背景透明迷人等等,都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单,它可以选中不同区域显示相应的地图,然后针对该区域填写联系表单。

在线演示        源码下载

5、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

在线演示        源码下载

6、超具立体感的CSS3 3D菜单 菜单项带小图标

记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都很漂亮。今天我们要再分享一款更酷的CSS3 3D立体菜单,这款菜单侧躺在页面上,每个菜单项都有不错的小图标。

在线演示        源码下载

7、基于Bootstrap和CSS3的响应式UI框架

还记得之前我们分享过的Metro扁平化风格的jQuery UI组件么,看上去是不是非常清新和绚丽?今天我们要来分享一组基于Bootstrap和CSS3的响应式UI框架,这个UI框架中,包含了自定义CSS3按钮、自定义CSS3复选框和单选框、自定义CSS3下拉框等等,外观非常漂亮。

在线演示        源码下载

8、纯CSS3立体动画菜单 菜单项按下有内阴影

这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

在线演示        源码下载

9、HTML5 Canvas动画按钮 点击水波扩散效果

之前我们分享的都是基于CSS3的自定义按钮,今天我们来分享一款基于HTML5 Canvas的动画按钮,每一个按钮都是一个canvas画布,这就很灵活,你可以在canvas绘制任意你喜欢的东西作为按钮的背景画面,并且,还可以有动画特效。

在线演示        源码下载

10、CSS3/jQuery实现Tab菜单小工具

几天要分享一款基于CSS3和jQuery的Tab菜单,这款Tab菜单的外观非常简洁清新,tab选项卡的上边框有加粗的线条,让这些tab菜单按钮显得很有立体感。另外有一点不足的是,tab切换时没有加入CSS3动画效果。这款tab菜单可以放到你网页的侧边栏作为小工具。

在线演示        源码下载

以上就是10款超级惊艳的HTML5动画特效,欢迎收藏分享。

本文链接:http://www.html5tricks.com/10-wonderful-html5-animation.html
本文作者:html5tricks – 超人

( 转 )超级惊艳 10款HTML5动画特效推荐的更多相关文章

  1. 超级惊艳 10款HTML5动画特效推荐[转]

    ylbtech_html5_demo 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现 ...

  2. 8款HTML5动画特效推荐源码

    1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...

  3. 惊艳的HTML5动画特效及源码

    今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...

  4. 10款html5开发工具,实用+好用

    利用HTML5工具不仅可以帮助设计师和开发者创建更具吸引力的网站,还能增加网站的可用性和可访问性.本文收集了10款HTML5开发工具让你在网页中搭建特效.动画.视频.音频等诸多功能,为你节省更多开发时 ...

  5. 绝对震撼 7款HTML5动画应用及源码

    1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...

  6. atitit.html5动画特效----打水漂 ducks_and_drakes

    atitit.html5动画特效----打水漂  ducks_and_drakes 1. 原理 1 2. fly jquery插件 1 3. ---------code 2 4. 参考 4 1. 原理 ...

  7. 设计师必看的10个HTML5动画工具

    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人 ...

  8. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  9. 20个专业H5(HTML5)动画工具推荐

    AnimateMate 可能是最好的 Sketch 动画插件.Sketch 目前被广泛应用于 HTML5 的原型界面设计,或者被应用于数据可视化的,动画部分则一般经由软件 Principle 等实现. ...

随机推荐

  1. 利用SQL为Code128码添加起始符和休止符

    在利用code128码字体打印条码是,打印出来的条形码,扫描枪会出现认不出的情况,这种情况是由于直接将文本设置为code128字体而没有给他们指定起始符和休止符引起的. 经过查资料获发现好多人遇到这样 ...

  2. Java并发程序设计(十三)锁的性能优化

    锁的性能优化 一.优化注意事件 一)减少锁的持有时间 只在必要时进行同步,能明显减少锁的持有时间. 二)锁的细化 缺陷:当系统需要全局锁时,其消耗的资源会比较多. 三)锁的分离 比如读写分离锁 四)锁 ...

  3. python生成指定文件夹目录树

    # -*- coding: utf-8 -*- import sys from pathlib import Path class DirectionTree(object): "" ...

  4. 使用pickle模块存储对象

    import time import hashlib import pickle import os class Info(): def __init__(self): self.create_tim ...

  5. netty同时做http和websocket(netty入门)

    ---恢复内容开始--- http://www.jianshu.com/p/5c29c6c6d28c ---恢复内容结束--- http://www.jianshu.com/p/5c29c6c6d28 ...

  6. Linux学习笔记11—VSFTP的搭建

    1.查看是否安装vsftp rpm -qa | grep vsftpd 如果出现vsftpd-2.0.5-21.el5,说明已经安装 vsftp 安装vsftp yum -y install vsft ...

  7. Sallen-Key Active Butterworth Low Pass Filter Calculator

    RC 2nd Order Passive Low Pass Filter The cut-off frequency of second order low pass filter is given ...

  8. python接口自动化28-requests-html爬虫框架

    前言 requests库的好,只有用过的人才知道,最近这个库的作者又出了一个好用的爬虫框架requests-html.之前解析html页面用过了lxml和bs4, requests-html集成了一些 ...

  9. 解决Matlab画图直接保存.eps格式而导致图不全的问题

    Matlab确是一款简单方便的工具,使用此工具绘图也是我们常用的一种手段,可是如果我们想将此图片保存成.eps格式并应用于latex中,就有可能会出现.eps格式的图片显示不全的问题,这个着实让我们头 ...

  10. Java int转string 长度不足左补0

    最近项目中用到这个需求,我试了两个方法都可以实现 方法一:(推荐) String s=String.format("%010d", 123)//123为int类型,0代表前面要补的 ...