HTML5特效收录-不定时更新

在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。希望能给大大家启发，并且学习。

HTML5 Canvas粒子效果文字动画特效

基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

在线演示      源码下载

基于HTML5 Canvas的图表插件Chart.js

chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效，这也是HTML5 Canvas的一大功劳。

柱形图  柱形图 饼状图 环形图 雷达图 极线图    源码下载

jQuery 制作逼真的日历翻转效果的倒计时

在开发中，一些功能需要用到倒计时，例如最常见的活动开始、结束的倒计时。使用最流行的 JavaScript 库来制作这个效果很简单。下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能。

在线演示      源码下载

HTML5/CSS3 3D文字特效 文字外翻效果

一款很酷的HTML5/CSS3 3D文字特效，该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果，非常不错的一款文字特效。

在线演示      源码下载

SweetAlert – 替代 Alert 的漂亮的提示效果

Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央，不管您使用的是台式电脑，手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择，可以灵活控制。

在线演示      源码下载

CSS & jQuery 制作一款漂亮的多彩时钟

　　大家可能见过各种各样的时钟效果，比如多年前非常流行的 Flash 制作的各种新奇的动画时钟，现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。

在线演示      源码下载

雨滴效果

　　Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。

在线演示      源码下载

Trianglify - 生成五彩缤纷的 SVG 背景图案

Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库，可以用来作为 SVG 图像和 CSS 背景。它的灵感来自于 Btmills 的 Geopattern，并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染。它还包括 colorbrewer 调色板库，让您快速启动和运行。

在线演示     立即下载

Canvas 示例：4种超炫的网站动画背景效果

今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用  JavaScript 和 Canvas 创建不同页眉的动画示例。

在线演示        源码下载

HTML5梦幻特效 可给任意元素添加魔幻效果

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

在线演示        源码下载

HTML5/SVG实现过山车动画

今天我们要分享一款很酷的HTML5/SVG动画，这款HTML5动画是过山车效果，主要是利用了SVG的path动画来实现的，效果非常酷。

在线演示        源码下载

HTML5像素粉碎图片动画 图片洒落一地

这款HTML5图片动画特效你绝对想不到，它将一张图片粉碎成许多像素颗粒，点击图片后，这些像素颗粒边掉落在地上，继续点击，粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的，有兴趣的同学可以下载源码来学习。

在线演示        源码下载

HTML5 SVG狐狸奔跑动画 相当大气

今天我要来向大家分享一款超级酷的HTML5动画，它是一只快速奔跑的狐狸，奔跑的动作非常自然逼真，长长的狐狸尾巴也会随着摆动。另外，这款HTML5狐狸奔跑动画也是基于SVG的，前面我们也介绍过很多SVG的动画效果，可见SVG在动画制作上也有很大的优势。

在线演示        源码下载

一套HTML5/SVG表情图标 表情超可爱

这次我们要来向大家分享一款超级可爱的HTML5/SVG表情图标，一共有12组不同的表情，这些表情都是利用SVG Path绘制而成，对SVG熟悉的朋友应该觉得比较简单，但是这些表情的创意确实非常不错，你可以将这些svg表情应用到你的博客上去，非常可爱。

在线演示        源码下载

　

超炫的页面切换动画效果

　　今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。

在线演示      源码下载

美！视差滚动在图片滑块中的应用

　　视差滚动（Parallax Scrolling）已经被广泛应用于网页设计中，这种技术能够让原本平面的网页界面产生动感的立体效果。美女很养眼吧 :)

在线演示      源码下载

网页边栏过渡动画

　　以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。

在线演示      源码下载

三种风格的全屏幻灯片效果

　　这个幻灯片效果是由四个区域的独立移动构成，通过画面分割，同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。

在线演示      源码下载

使用 CSS3 实现 3D 图片滑块效果

　　使用 CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。

在线演示      源码下载

单元素实现的 CSS 加载进度提示效果

　　之前的文章个大家分享过各种类型的加载效果（Loading Effects），这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的，十分强悍。

在线演示      源码下载

动感的页面加载动画效果

　　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。

在线演示      源码下载

奇特的网格加载效果

　　向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。

在线演示      源码下载

使用 CSS3 制作网格动画效果

　　今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容。

源码下载      在线演示