标签归档:HTML5动画

HTML5/CSS3制作Safari Logo 指针动画很炫

上次我们分享过一款利用HTML5/CSS3技术实现的3D HTML5 Logo旋转动画,非常酷。今天我们再来分享一款Logo动画,它是利用HTML5和CSS3实现的Safari动画Logo,该Safari Logo的指针还会旋转,十分友爱,而且Safari Logo利用的CSS3的投影技术,显得十分立体。

html5-css3-safari-logo

在线演示源码下载

HTML5立体圆环旋转动画 HTML5 3D效果

HTML5 3D动画效果非常多,我们在html5tricks上也分享过一些,比如3D HTML5 Logo动画,旋转效果非常逼真。今天我们来看一款基于HTML5的立体圆环旋转动画,该特效主要利用了CSS3的-webkit-transform-style属性,效果非常酷。

html5-3d-circle-rotate

在线演示源码下载

HTML5鲸鱼动画 又一款超酷HTML5动画

之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。

html5-whale

在线演示源码下载

Google Doodle三八节Logo HTML5小动画

2014年的三八妇女节刚过去不久,让我们来回味一下节日那天Google为全球妇女更换的Logo动画。该Logo动画利用了CSS3技术实现图形的转圈和播放效果,Google的创意总是那么特别,尤其是把HTML5技术玩的淋漓尽致。

google-38-logo-animation

在线演示源码下载

HTML5 3D衣服摆动特效 超酷HTML5 3D动画

前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。

html5-3d-cloth

在线演示源码下载

HTML5粘浏览器的小泥块 超级可爱动画

这款HTML5动画非常可爱,动画的主角是一款粘人的小泥块,用鼠标拖动泥块,泥块即可粘住浏览器,让后一点点掉落下来。而完成这样的HTML5动画,我们只需一张图片和一系列CSS3代码即可。虽然这款动画实用性并不强,但是其中的HTML5原理值得大家学习。

html5-sticky

在线演示源码下载

HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效HTML5水波荡漾动画特效。这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果。

html5-liquid-wave

在线演示源码下载

HTML5重力感应动画特效 冲撞小球演示

前面我已经向大家分享过一款非常绚的HTML5重力感应游戏特效,我们只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。今天这款HML5重力感应动画特效功能更强,页面上会掉落大小不等的小球,我们可以拖动小球,也可以点击页面空白来生产更多的小球,如果你的电脑配置高,可以试试产生更多的小球来玩,非常有趣。

html5-ball-pool

在线演示源码下载

3D HTML5 Logo动画 HTML5多视角3D旋转动画

HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。

3d-html5-logo-animation

在线演示源码下载

HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真

之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。

html5-webgl-water-effect

在线演示源码下载