超级惊艳 10款HTML5动画特效推荐(1) -
今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。1、HTML5 Canvas 发光 Loading 动画之前我们分享过很多基于 CSS3 的 Loading 动画效果，相信大家都很喜欢。今天我们要来分享一款基于 HTML5&Canvas 的发光 Loading 加载动画特效。Loading 旋转图标是在 canvas 画布上绘制的，整个 loading 动画是发光 3D 的视觉效果，HTML5 非常强大。498)this.width=498;' onmousewheel = 'javascript：return big(this)' alt="html5-canvas-shine-loading" width="588" height="302" data-mce-="" src="/wyfs02/M01/39/1E/wKiom1O2CvrTltF8AAAX64FN2UU179.jpg" />& & & &&2、jQuery 球状放大镜特效插件今天我们要来分享一款基于 jQuery 的放大镜特效插件，和其他放大镜不同的是，这款 jQuery 放大镜插件是球状的，看上去有 3D 的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。498)this.width=498;' onmousewheel = 'javascript：return big(this)' alt="jquery-ball-zoom-in" width="588" height="298" data-mce-="" src="/wyfs02/M00/39/1E/wKioL1O2CsujJfOoAAA5i4EsJek900.jpg" />& & & &&3、HTML5 Canvas 粒子模拟效果这是一款利用 HTML5&Canvas 模拟出来的 30000 个粒子动画，当你用鼠标在 canvas 画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些 HTML5 的特性，让这个粒子动画显得相当动感。498)this.width=498;' onmousewheel = 'javascript：return big(this)' alt="html5-canvas-particle-effect" width="588" height="318" data-mce-="" src="/wyfs02/M01/39/1E/wKioL1O2CsuzyH3VAADgTQrcaqU622.jpg" />& & & &&4、HTML5/CSS3 带区域地图的联系表单今天我们要来分享一款功能强大的 HTML5/CSS3 联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。498)this.width=498;' onmousewheel = 'javascript：return big(this)' alt="html5-css3-contact-form-map" width="588" data-mce-="" src="/wyfs02/M02/39/1E/wKiom1O2CvrhRwpCAADV8_iknMs732.jpg" />& & & &&5、CSS3 3D 立方体 Loading 加载动画特效之前我们分享过一些 HTML5 和 CSS3 的 3D 立方体特效，他们都是可以旋转来展示 3D 立体的效果。这次分享的这款 CSS3 3D 立方体确是用来做 Loading 加载动画的，9 个小立方体上下浮动，呈现波浪的效果，并且，这个 Loading 动画还利用了 CSS3 的阴影属性让这些立方体更充满 3D 色彩。498)this.width=498;' onmousewheel = 'javascript：return big(this)' alt="css3-3d-cube-loading" width="588" height="325" data-mce-="" src="/wyfs02/M00/39/1E/wKiom1O2CvrAhlfVAAAZ3tfnrCg884.jpg" />& & & &&
内容导航&第 1 页： &第 2 页：
&iframe width="600" height="239" frameborder="0" scrolling="no" src="/relationship/bulkfollow.php?language=zh_cn&uids=,,,,,&wide=0&color=C2D9F2,FFFFFF,0082CB,666666&showtitle=1&showinfo=1&sense=0&verified=1&count=6&refer='+encodeURIComponent(location.href)+'&dpc=1"&&/iframe&分享到：
&script type="text/javascript" id="bdshare_js" data="type=tools&uid=585532" &&/script&&script type="text/javascript" id="bdshell_js"&&/script&&script type="text/javascript"& var bds_config = {'snsKey':{'tsina':''}}; document.getElementById("bdshell_js").src = "http://bdimg./static/js/shell_v2.js?t=" + new Date().getHours();&/script&||关于的更多文章这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书&script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1609262"&&/script&栏目热门
频道导航 Java||||WEB开发|||||综合|||
本次的专刊为大家提供了Oracle最新推出的Java SE 8详细的开发教程，从解读到探究Java 8最新&script language="JavaScript" src="/ad/art/hzh/ad.js" type="text/javascript"&&/script&
讲师： 15人学习过讲师： 3人学习过讲师： 3人学习过
热点专题进入12月份，一年的日子到头了。年末总结什么的也都开Jquery是继prototype之后又一个优秀的Javascript框架又到周末了。昨天是感恩节，小编也是听同事说起，才想
本书详细描述如何在复杂技术项目中使用Scrum，并结合真实的Scrum案例及专家洞识，在简明及高度概括的理论之上更侧重于实践，并不博文推荐 最新热帖&iframe class="bann" frameborder="0" src="/iframe/article/baidu.htm" scrolling="No" style=" background-color:#DBDBDB; height:250 width:300 padding:0margin:0overflow:"&&/iframe&
51CTO旗下网站&script src="/rizhi/count/count.js"&&/script&&script type="text/javascript"&
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_addOrganic', 'baidu', 'word']);
_gaq.push(['_addOrganic', 'google', 'q']);
_gaq.push(['_addOrganic', 'soso', 'w']);
_gaq.push(['_addOrganic', '3721', 'name']);
_gaq.push(['_addOrganic', 'yodao', 'q']);
_gaq.push(['_addOrganic', 'vnet', 'kw']);
_gaq.push(['_addOrganic', 'sogou', 'query']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async =
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + './ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();&/script&&script type="text/javascript"& $("#uyan_cmt_list").next().remove();
$("#uyan_cmt_list").next().css("display","none"); &/script&
&script language="javascript" src="/js/article/favorite.js"&&/script&&script language="javaScript" src="/php/dialog_utf8.js"&&/script&&script language="javaScript" src="/mail.js"&&/script&
&script type="text/javascript" src="/apps/favorite/Tpl/default/Public/js/favorbox.js"&&/script&&script language="javascript" src="/images/art/newart1012/clipboard.js"&&/script&&script language="javaScript"&
var thistid=444542;
//收藏按钮 var favor_url = '/art/542.htm';
// 如：/thread-.html var favor_title = "超级惊艳 10款HTML5动画特效推荐(1)";
//绑定复制按钮 copy('msnqqcopy', '/art/542.htm', '分享到MSN/QQ的链接复制成功!');// copy('bbscopy', '[url=/art/542.htm][u]超级惊艳 10款HTML5动画特效推荐(1)[/u][/url]', '分享到论坛的UBB代码复制成功!');&/script& &script src=" /index.php?s=/Index/getLoginStatus/reback/http%253A%252F%%252Fart%252FF444542.htm" charset='utf-8'&&/script&&script src="/php/count.php?view=yes&artID=444542" language="javascript"&&/script&&script language="javascript"&document.getElementById('books').innerHTML = document.getElementById("bookss").innerHTML; &/script&
您可能也喜欢
本周【css3】阅读排行
留下你斑驳的笔迹
安妮推荐阅读
打开微信，点击底部的“通讯录”，点击右上角的 “添加” 搜号码
或查找公众号 安妮导刊 即可。14种网页常用的css3过渡效果焦点图圆点导航点击过渡动画效果
采集到 14:14:20阅读(3289)
下载资源：77次
下载积分：30分
代码评分：
0.0(已有0人评分)
挺好的，但是具体怎么做没写还得自己研究
很好，用的上
简直炫酷！
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录懒人之家--可能是JS网页特效代码收集最全的懒站！
热点内容...欢迎您访问jQuery之家-自由分享jQuery、html5、css3的插件库。本站采用了很多html5和css3新技术，为了保证您能得到最佳的体验和视觉效果，建议您采用以下现代浏览器访问本站。
布局和界面
这是一款使用jQuery和css3制作的文章头部简介全屏图片滚动特效。该特效的每篇文章以一副全屏图片作为文章的简介，当鼠标向下滚动时，图片会有8种效果的动画特效，放大缩小或淡入淡出，然后显示文章内容。
瀑布流插件
这是一款仿照Design Samsung网站上的瀑布流插件。该瀑布流布局使用jquery.masonry制作，先有一个彩色的背景滑出，然后图片再在其上滑出，当向下滚动时，不断有图片被加载的瀑布流效果。
瀑布流插件
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局，当点击查看更多链接，会切换到该项目的全屏幻灯片模式，在幻灯片模式下可以浏览所有的图片和信息。
这是一款响应式的带滚动条的jQuery和css3内容手风琴插件。该手风琴插件的每个手风琴项都可以带滚动条，并且它的内容会随屏幕的大小做自适应的调整，效果非常不错。
这是一款使用纯css3制作的超级精美实用的价格表动画特效。该css3价格表动画特效在鼠标移动到价格表上时，价格表会放大，鼠标移出时，价格表恢复原样。
幻灯片和轮播图
这是一款降到实用的jQuery和css3 3D背景幻灯片插件。该幻灯片插件背景实用css3制作卷纸阴影3d效果，幻灯片采用淡入淡出的轮播方式，并带有圆点导航按钮和图片标题动画。
这是一款使用jQuery和css3制作的效果超酷的jQuery和css3垂直手风琴折叠菜单插件。该手风琴折叠菜单插件将css背景渐变、过渡、旋转等各种动画元素结合起来，形成效果非常酷的手风琴菜单。
菜单和导航
这是一款使用jQuery制作的超酷文本和图标动画菜单特效插件。该菜单特效共有8种效果，使用jQuery和jquery.easing来制作各种文字和图标的动画效果。
布局和界面
这是一款效果非常炫酷的jQuery和css3全屏翻页切换页面特效插件。该翻页插件有三个主要按钮：先前翻页、向后翻页和打开隐藏侧边栏菜单。通过该翻页插件可以像看书一样浏览网页。
这是一款非常实用的html5和css3自定义输入表单的自然语言界面插件。通过contenteditable属性用户可以在自然语言环境下通过表单输入和编辑他们的各种需求，之后可以提交表单。
文本和超链接
这是一款使用jQuery和css3制作的文章标题动画特效。该文章标题动画特效共有10种效果，分别是：打印机效果、翻转效果、翻牌效果、滑动效果等等。
Lightbox和对话框
SweetAlert是一款使用纯js制作的消息警告框插件。这款消息警告框插件能够很容易的在警告框中插入图片、动画等元素，是替代原生消息警告框的最佳选择。
这是一款用于美化下拉列表菜单控件的jquery插件ddlist。使用该ddlist下拉列表美化插件可以为下拉列表添加图标，增强下拉列表的默认功能等。在美化的同时使下拉列表功能得到增强。
菜单和导航
这是一款非常时尚的jQuery和css3二级下拉导航菜单插件。该导航菜单插件中带有二级子菜单，也可以以图文方式展示或图标加文字方式组合展示，非常灵活方便。
视觉差滚动效果
midnight.js是一款能够让你的网站logo随页面滚动并产生视觉差滚动效果的jquery插件。midnight.js能产生多重header的视觉差滚动效果，能够让你的页面始终处于header的下面。
这是一款使用jQuery和css3制作的效果非常精美的手风琴效果插件。该手风琴效果在各手风琴项切换时非常具有弹性，效果十分不错。
菜单和导航
这是一款效果非常酷的jQuery圆形气泡导航菜单特效。该导航菜单特效当鼠标滑过菜单按钮时，会出现一个圆形的气泡，里面有子菜单。当鼠标立刻按钮，气泡会慢慢消失。
这是一款极具创意的html5各种svg元素炫酷弹性动画特效。该svg特效共集成了9种效果，每种效果都是以弹性动画为基础，将各种svg元素制作为像弹簧一样具有弹性，效果非常震撼。
这是一款集合了12种炫酷特效的css3分享按钮插件。该分享按钮特效有：3D翻转、3D开门效果、折纸效果、描边效果等。
这是一款非常实用的css3全屏分割布局网页模板。该网页布局将页面垂直分为两个部分，当点击了其中一部分的图片时，该部分会放大到全屏显示。
jQuery被用在无数个网站的页面上，它是使用最为广泛的javascript库之一。...
一个前端开发人员在工作时经常会问：有哪些CSS被哪些浏览器支持，然后为不被支持的CSS属性编写回退方案，这些工作通常花费他们大部分时间。...
在过去的几年时间里，前端WEB页面的布局已经从固定宽度演变为现在的响应式布局。本教程将带大家理解CSS calc属性，这是一个非常有用的属性，理解他的最好方法是举一些例子。...
一个使用flexbox制作简单的masonry瀑布流图片布局的css3教程。...
从现在开始请你不要从一个空白的样式开始构建你的网站。本文将介绍一些十分有用的css片段来帮助你更快速高效的构建一个新网站。...
这个教程将介绍一些简洁精美的电子商务网站页面的设计思路。...
我们都使用过全屏模式来浏览一个网页。通常我们在Windows操作系统上使用F11键来切换全屏模式，如果你使用的是OS X系统可以使用Shift+Command+F来切换。但是如果你只想在全屏模式下看一些...
创建网格布局已经成为前端开发的一个日常需求。网格布局不仅为页面设计提供了清晰明快的布局，而且为团队合作开发提供了极大的便利。...
使用css background-clip:text 属性(目前只有webkit内核的浏览器才支持该属性)，我们可以为文字添加一些背景图片。今天我们将用它和CSS3 transitions一起来制作一些文字动画特效。...
这是一种类似于全屏幻灯片的html5横向滑动布局效果。...
本教程将给大家带来一些使用html5 svg和CSS transitions、animations制作精美焦点图左右导航箭头按钮动画的方法。...
本教程将教大家使用CSS animations,3D transforms和SVGs制作一种网站页面预加载效果。...