10款web前端值得学习的 HTML5 效果附源码
1.jQuery右侧Tab选项卡的焦点图插件
这是一款基于jQuery的焦点图插件，和之前介绍的jQuery焦点图插件类似，它以淡入淡出的动画方式来切换图片，该焦点图插件的特点是右侧有一排Tab选项卡，点击相应选项卡后即可切换对应的图片，应该说这款jQuery焦点图插件还是非常实用的。
2.超炫 HTML5 粒子效果进度条
我喜欢粒子效果作品，特别是那些能够应用于实际的，例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果。看着这么炫的 Loading 效果，即使让我多等一会也无妨：
3.HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示，效果逼真。你会看到，借助 Canvas 的强大绘图和动画功能，只需很少的代码就能实现让您屏息凝神的效果。
4.SVG 实现一个漂亮的页面预加载效果
展示如何使用 CSS 动画， SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说，这些预载入得画面提供了一种创造性的方法，使用户在等待内容加载的时候不会那么无聊。
5.HTML5 制作疯狂的触手
这个示例叫疯狂的触手，移动鼠标可以进行涂鸦，点击鼠标可以清除画布。
6.WebGL 实现的水面特效实验
使用 WebGL 实现的水面特效实验，可放入一张照片，使用鼠标触动水面会有奇特效果。
7.使用 CSS3 Transforms 构建圆形导航
在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航。教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式。不过不用担心，这里用到的数学知识真的是很简单的。教程使用浅显易懂的语言来介绍数学逻辑，让你能够清晰的理解背后的技术。
8.Popline：帅气的浮动 HTML5 文本编辑器工具栏
Popline 是一个基于 HTML5 实现的富文本编辑器工具栏，设计灵感来自 PopClip ，相比传统的文本编辑器工具，Popline 能够浮动在编辑的文本周围，操作起来十分方便。
9.S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件。使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换，所以只能在支持这些功能的浏览器中使用。这款插件它有一个特色功能：退出幻灯片模式回到网格视图模式，最后一张活跃的图片会以动画形式回到网格视图中的初始位置，因此用户知道他们浏览到画廊中的哪张图片上。
10.MasonJS – 创建完美的砌体结构网页布局
MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距。当使用 Masonry，Isotope 或任何其他网格插件时，布局中会出现空白或边缘参差不齐的情况。MasonJS 可以帮助你填补这些布局中的缺口。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
