十种Html5精品效果源码分享

一直在看别人的汇总，看到了一些不错的关于 HTML5内容的源码，我也汇总下分享出来，好东西需要共享！希望可以帮到需要的朋友。

1.劲爆分享：HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真，之前我们也分享过一些其他的HTML5火焰燃烧动画，比如：HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。
源码下载地址：劲爆分享：HTML5动感的火焰燃烧动画特效


2.HTML5鲸鱼效果源码免费下载

速度来看看可爱的鲸鱼会随着鼠标移动儿移动，是一个简单的html5实现的小效果。具体内容在附近中，欢迎下载。

源码下载地址：HTML5鲸鱼效果源码免费下载


3.源码分享：HTML5特效制作古典效果播放器

这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老非常有创意。

源码下载地址：源码分享：HTML5特效制作古典效果播放器


4.Html5、CSS3实现的爱心动画效果

CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。很多div，主要是构造爱心的线条区域。大家可以点解DEMO来看看。

源码下载地址：Html5、CSS3实现的爱心动画效果

5.源码分享：基于HTML5/CSS3实现五彩进度条应用
基于HTML5和CSS3的进度条应用，这款进度条是静态的，仅提供进度条的五彩外观。当然你可以在CSS中动态设置进度值来让其变得动态，一个很好的实现方式是利用jQuery动态改变CSS中的进度值，让进度条实时动起来。

源码下载地址：源码分享：基于HTML5/CSS3实现五彩进度条应用


6.使用HTML、jQuery及CSS3代码实现拖拽删除小图标回收站

源码下载地址：使用HTML、jQuery及CSS3代码实现拖拽删除小图标回收站



7.爱情表白专用html5动画特效网页【完整源码】
创作者的水平真令人佩服，有这水平可以把爱表白给想表白的人，不要以为那些鲜花是用的图片，你会发现在资源文件中没有一个图片资源，但HTML5强大的功能不能不让你惊叹，左侧的文字是类似打字效果的动画形式，因IE9以前的浏览器不支持HTML5,所以你在查看本效果的时候，最好使用火狐浏览器或Chrome浏览器。

源码下载地址：爱情表白专用html5动画特效网页【完整源码】

8.使用HTML5/CSS3实现3D旋转木马效果相册

1、perspective

perspective属性包括两个属性：none和具有单位的长度值。

其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。简单一点说：当perspective设置length时，如果越小则表示3D效果越明显，你的眼睛就越靠近3D物体，反之则反之。

2、transform: translateZ(length)

假设设置了perspective：300px时，设置translateZ的值越小则子元素大小越小，当设置值接近300px时，则仿佛此元素在面前，当超过300px以后，则以前到达你视野的后面，该元素就不可见了。

上例的核心：

1、首先所有的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为40*i ，i= 0 , 1, 2...9 ；所有图片会相交成一个类似花的形状

2、然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即上图效果。

源码下载地址：使用HTML5/CSS3实现3D旋转木马效果相册



9.HTML5实现的3D动画旋转物体模糊发光特效源码
这是一款HTML5实现的3D动画是旋转物体特效源码，并且利用CSS3的特性，物体会发出模糊的发光的动画特效，附带旋转效果，整体特效看起来炫酷十足。

源码下载地址：HTML5实现的3D动画旋转物体模糊发光特效源码


10.基于jQuery和HTML5实现的扁平风格mp3player网页

这是一款基于html5实现的扁平音乐播放器源码。基于jQuery+HTML5实现的扁平风格mp3 player网页音乐播放器。有着很好的视觉效果与播放功能。建议使用支持html5的浏览器如火狐或谷歌运行该源码。

源码下载地址：基于jQuery和HTML5实现的扁平风格mp3player网页


未完待续！欢迎大家提供好的代码，我汇总进去~