你的位置:首页 > 网页设计

[网页设计]推荐!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代码实现拖拽删除小图标回收站

利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素,需要拖动应用图标至垃圾箱即可删除这个图标。主要包括HTML代码、CSS3代码以及jQuery代码。HTML代码主要定义了一个回收站文件夹的容器,以及各个小图标的图片。

源码下载地址:使用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网页
未完待续!欢迎大家提供好的代码,我汇总进去~