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 可以帮助你填补这些布局中的缺口。

在线演示

源码下载

未经允许不得转载：爱前端网 » 10款web前端值得学习的 HTML5 效果附源码