分类目录归档:HTML5应用

CSS3实现的火柴燃烧Loading加载动画

这次我们要给大家分享一款非常特别的CSS3 Loading加载动画,整个Loading加载动画就好像是火柴在燃烧一样,不足的是火苗并没有那么真实,比较抽象,不过这款Loading动画还是比较富有创意,非常适合在一些个性化的页面上使用。

css3-matches-loading

在线演示源码下载

纯CSS3精美样式的飘带特效

还记得之前我们分享过一些基于CSS3的飘带样式菜单吗?比如这款CSS3 飘带菜单 超酷3D CSS3菜单CSS3飘带状3D菜单 菜单带小图标。今天我们要给大家介绍另外一种CSS3飘带样式的特效,它非常适合在图片上标注一些文字描述,样式非常精美。

css3-ribbon-text

在线演示源码下载

纯CSS3实现阴阳太极动画

这是一款很有趣的纯CSS3小动画,它是我们中国人都非常熟悉的阴阳太极图案,整个图案是利用纯CSS3绘制而成,而且更酷的是,这个太极图案还会不断旋转,看上去非常的神秘。而且这个旋转动画特效也是利用CSS3的动画属性实现。

css3-yinyang-taichi

在线演示源码下载

纯CSS3绘制可爱的神奇宝贝

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

css3-pokemon

在线演示源码下载

HTML5 Canvas 3种不同风格的圆盘时钟

这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。

html5-canvas-3-style-clock

在线演示源码下载

HTML5 Canvas推箱子小游戏

很久没有分享HTML5游戏源码了,今天就来分享一款非常经典的HTML5小游戏,一款考验你智力的推箱子游戏,这个游戏很常见,你应该是玩过的,这次我们用HTML5来重写了这款推箱子游戏,游戏设置和很多关卡,越到后面难度越高。

html5-canvas-box-game

在线演示源码下载

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

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

html5-3d-calendar

在线演示源码下载

HTML5 SVG 世界地图旋转动画

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

html5-word-map-rotate

在线演示源码下载

CSS3 3D图片向上翻转渐隐消失动画

今天我们要来分享一款很不错的图片文字提示动画特效,当我们将鼠标滑过图片时,图片就会出现向上翻转,然后出现图片的文字介绍,这个过程中利用了CSS3的相关属性让图片逐渐变得透明,同时渲染出一种3D的视觉效果。

css3-image-flip-text

在线演示源码下载

超富创意的CSS3飞机跑道进度条动画

前几天我们分享过一款很漂亮的CSS3彩色进度条加载动画 带进度百分比,相当实用。今天我们继续要为大家介绍一款非常具有创意的CSS3飞机跑道进度条动画,它的进度动画就像飞机在跑道上奔跑一样,整个进度条样式也酷似飞机跑道,当然这只是外观的不同,进度条还是那个进度条,实用性依然存在。

css3-aircraft-progressbar

在线演示源码下载