标签归档:HTML5动画

HTML5 Canvas雨滴下落动画 超逼真

今天我们要来分享一款相当逼真的HTML5 Canvas雨滴下落动画,该动画模拟雨滴附在窗户上缓缓滑落的效果,同时窗户也因为雨滴而变得模糊,窗外的夜景便显得格外迷人。利用HTML5技术,该雨滴下落动画一共有5种不同的效果。由于Chrome的跨域限制,本地将无法运行,你可以在本站的在线演示中看到效果,或者将源代码上传至自己的服务器后浏览。

html5-canvas-rain-drop

在线演示源码下载

HTML5实现DNA螺旋动画

记得之前我们分享过一款很酷的HTML5 DNA动画,螺旋效果不是很理想,今天分享的这款HTML5 DNA螺旋动画效果就非常不错了,不仅具有更为立体的视觉效果,而且螺旋的效果也带有3D的动画特效,大家可以在DEMO演示中看到精彩的效果。

html5-dna-helix

在线演示源码下载

HTML5实现图形挤压变形动画

今天我们要来分享一款很特别的HTML5动画特效,它是一款图形挤压动画。鼠标移动小球,该小球会和周围的几个小球产生挤压效果,从而使受挤压的小球产生相应的变形,利用HTML5是这个挤压变形的特效显得非常逼真,一起来玩玩吧。

html5-image-extrusion

在线演示源码下载

HTML5 SVG绘制的纸鹤动画 带颜色渐变效果

前面我们分享过一款基于HTML5和SVG的创意开关切换按钮,比较实用。这次要带来的这款HTML5应用也是基于SVG的,是一只雄伟的纸鹤,并且纸鹤的皮肤颜色会不断地发生变化,动画效果非常不错,小编认为,如果纸鹤能动起来那就更加完美了,期待您去完善它。

html5-svg-firebird

在线演示源码下载

HTML5 Canvas炫酷的火焰风暴动画

利用HTML5技术,我们已经实现过不少关于火焰动画特效的HTML5应用,尤其是和Canvas搭配,比如HTML5动感的火焰燃烧动画特效HTML5 Canvas火焰喷射动画效果。这次给大家带来的是一款基于HTML5 Canvas的火焰风暴动画特效,改动画效果就像从天上掉落火焰一样,火焰风暴逐渐蔓延到整一个画布。

html5-canvas-firestorm

在线演示源码下载

HTML5多立方体3D翻转动画

很久没有分享关于HTML5 3D动画的应用了,大家可以移步至HTML5 3D目录下欣赏所有的HTML5 3D动画特效。今天小编要给大家带来另外一款HTML5 3D立方体翻转动画,这款动画能实现多个立方体按一定顺序翻转,给人墙体翻转的3D视觉效果。

html5-rect-wave

在线演示源码下载

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

记得之前向大家分享过一款HTML5 Canvas实现会跳舞的时间动画,利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效,并且它可以实现每个文字的逐帧播放,形成一句很浪漫的诗句。

html5-pixel-text-effect

在线演示源码下载

HTML5 Canvas彩色像素进度条动画

之前我们分享过很多不错的CSS3进度条,效果相当不错。今天我们来推荐一款基于HTML5 Canvas的彩色像素进度条动画,它有两个特点,其一是进度条颜色会随着进度的改变而改变,其二是进度条更新时,会产生像素掉落的动画特效,很有创意。

html5-canvas-loader

在线演示源码下载