十种Html5精品效果源码分享

| 阅读数:--次| 作者:html5,css3
摘要:一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友。1.劲爆分享:HTML5动感的火焰燃烧动画特效这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。这款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动画旋转物体模糊发光特效源码


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

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

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


未完
待续!欢迎大家提供好的代码,我汇总进去~
返回顶部
学到老代码浏览 关闭浏览