标签归档:HTML5动画

纯CSS3绘制可爱的神奇宝贝

CSS3非常强大,之前我们还介绍过很多基于纯CSS3的动画特效,比如纯CSS3绘制的旺仔头像动画,非常可爱。今天我们要为大家分享一款纯CSS3绘制可爱的神奇宝贝动物形象,特别的是,它还会眨眼、摇尾等表情,非常逼真。

css3-pokemon

在线演示源码下载

HTML5 3D 魔方日历动画 3种不同日历风格

之前我们分享过很多款样式各异的jQuery和HTML5日历控件,但今天要介绍的这款日历控件绝对是超炫酷的,它非常富有创意,利用了HTML5的3D特性实现了魔方的日历动画控件,每一个日期就是一个小的魔方立方体,鼠标滑过日期时,立方体就会旋转,点击日期时,就会展示当前日期的行程安排。另外更酷的是,插件一共提供了3种不同的日历样式。

html5-3d-calendar

在线演示源码下载

HTML5 SVG 世界地图旋转动画

这是一个以世界地图为背景的简易地球仪,通过HTML5和SVG的相关特性,实现了这个世界地图地球仪的旋转动画。地图旋转期间,会有飞机在地图上自由飞行,这样让这个动画更加逼真。与此相关的另外一个HTML5 Canvas 地球旋转3D动画也是非常的不错。

html5-word-map-rotate

在线演示源码下载

HTML5文本输入框粒子动画特效

这次我们要为大家来分享一个非常炫酷的HTML5动画特效,它是一个输入框,当您在输入框输入文字的时候,输入框中就会出现很漂亮的粒子动画特效,并且输入框的四周边框将会出现发光的效果,效果很不错。

html5-text-input-animation

在线演示源码下载

HTML5 Canvas 圆形时钟动画

前不久我们刚为大家分享过一款很不错的jQuery/CSS3带数字时钟的圆盘时钟,效果很不错。今天我们要继续为大家介绍另外一个基于HTML5 Canvas的圆形时钟动画。它的功能非常简单,就是一个简单的时钟,时针分针和秒针的颜色各不相同。

html5-canvas-circle-clock

在线演示源码下载

HTML5 SVG 绘制唐老鸭卡通形象

利用CSS3可以绘制很多人物和动物形象,比如之前介绍的纯CSS3绘制可爱小男孩动画纯CSS3绘制可爱的蚱蜢,可见CSS3十分强大。这次我们要介绍的是利用HTML5和SVG来绘制的唐老鸭卡通形象,SVG的path特性非常灵活,可以让你绘制任何路径。

html5-svg-donald-duck

在线演示源码下载

CSS3齿轮Loading加载动画

之前刚刚为大家分享过一款基于HTML5和CSS3的齿轮动画,让我们见识到了CSS3动画的强大之处。这次要介绍的同样是一款CSS3齿轮应用,不同的是,这款齿轮应用主要是用来做Loading加载动画的,使用这种Loading加载动画非常新颖,很是富有创意。

css3-loading-gear

在线演示源码下载

超绚丽的HTML5/CSS3齿轮动画

很早以前,我们分享过一个基于CSS3的齿轮动画,动画效果非常逼真。今天要分享的也是一款超绚丽的HTML5/CSS3齿轮动画,跟之前那个非常类似,实现原理也类似,不同的是,今天这款HTML5齿轮动画还带有水滴的动画效果,更具有模拟场景的味道。

html5-css3-gear

在线演示源码下载

HTML5 Canvas烟花动画 随机色彩、高度和角度

还记得之前我们为大家分享的一款HTML5烟花动画吗?那款烟花动画是根据你鼠标点击的位置来确定高度和角度的,而且色彩看起来并不是那么逼真。这次要介绍的也是一款基于HTML5 Canvas的烟花动画,它的特点是可以自动燃放,烟花的色彩和燃放的高度、角度都是随机生成的,而且与实际的烟花更加相似,色彩更加饱和。

html5-canvas-fireworks-2

在线演示源码下载

15个超绚丽的HTML5 Canvas时钟动画特效

之前我们有给大家介绍过很多基于HTML5的时钟动画,比如这款5种样式的HTML5 SVG圆盘时钟动画HTML5仿Apple Watch时钟动画,效果都很酷。这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效,它们很多都有各自不同的外观,有几个时钟的造型还非常新颖奇特,因为是基于HTML5 Canvas的,所以你的浏览器需要支持HTML5。

html5-canvas-15-clock

在线演示源码下载