分类目录归档:HTML5应用

HTML5 Canvas高空瀑布下落湖面动画

HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画,也是在Canvas上完成的,非常酷。今天的这个瀑布更加美妙,因为它模拟了整个瀑布落入湖面的美妙景象,但是从逼真度上来说,还是稍微有待改进,不过个人觉得已经非常不错了。

html5-canvas-waterfall-lake

在线演示源码下载

超实用CSS3 3D菜单 菜单项悬浮凸出立体效果

昨天我们向大家分享过一款非常不错的CSS3垂直3D菜单,主要以鼠标滑过菜单项立方体旋转的动画特效展现。今天我们要接着为大家介绍另外一款CSS3 3D菜单,不同的是,这款菜单是水平展现的,更适合大部分网站的菜单选择。同时,这款菜单的特点是鼠标滑过菜单项时,菜单项会逐渐悬浮凸出显示,看上去非常炫酷。

css3-3d-float-menu

在线演示源码下载

纯CSS3炫酷3D菜单 菜单项3D旋转动画

不久前,我们刚刚为大家分享过很多外观各异的CSS3菜单,很多都是比较实用的,比如这款jQuery/CSS3波浪形弹性下拉菜单就非常具有创意,也很实用。今天要介绍的也是一款基于纯CSS3的3D菜单,当我们将鼠标滑过菜单项时,菜单项就会实现3D的旋转动画,另外菜单项是垂直的显示的。

css3-3d-rotate-menu

在线演示源码下载

SVG实现吸血蝙蝠变身动画

今天我们要分享一款基于SVG的炫酷动画,它是一只可以变身为吸血僵尸的吸血蝙蝠。首先我们利用SVG的路径绘制了一只会扇动翅膀的蝙蝠,并且蝙蝠在飞行的过程中还有阴影,这样更显得具有真实感。然后随便在页面空白地方点击鼠标,飞行的吸血蝙蝠立马摇身一变,变成了一只恶魔般的吸血僵尸,这中间我们仅仅是对SVG的路径进行了切换而已。

svg-vampire-bat

在线演示源码下载

SVG/CSS3实现按钮点击波纹动画

之前对于按钮动画,我们分享过很多基于jQuery和CSS3的鼠标滑过按钮动画,有滑过后发光的,也有波纹的,都非常不错。这次我们要分享的是一款基于CSS3和SVG的波纹按钮动画,鼠标点击按钮时,按钮上将会出项各种形状的波纹特效,一共有4组波纹动画效果。

svg-css3-ripple-button

在线演示1 在线演示2 在线演示3 在线演示4 源码下载

HTML5/CSS3 全屏3D焦点图切换插件

今天我们要给大家分享一款基于HTML5和CSS3的3D焦点图插件,类似的3D焦点图插件之前也有分享过,比如这款jQuery 3D 垂直螺旋切换焦点图动画和这款jQuery/CSS3 3D旋转图片切换焦点图插件都非常不错。这次的3D焦点图动画插件是全屏的,效果非常绚丽,整张图片就像悬浮在夜空中一样,切换时还带有丰富的过渡动画效果。

html5-css3-3d-full-slider

在线演示源码下载

CSS3/SVG绘制的悉尼歌剧院

这是一款基于纯CSS和SVG实现的歌剧院建筑,CSS3的强大和SVG的灵活打造了这个用不同线条勾勒的悉尼歌剧院,另外还有海面和天空中的太阳和白云也描绘的活灵活现,在网页绘制方面,除了炫酷的Canvas外,SVG也是不错的选择。

css3-svg-opera-house

在线演示源码下载

HTML5 SVG实现会跳舞的花朵 4种跳舞心情

这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花。首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯的颜色,但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染,结合CSS3的动画属性以及JavaScript的动态渲染,让这朵花赋予了4种不同心情下的跳舞动画,点击按钮即可切换当前心情下的跳舞动画,真的是非常可爱。

html5-svg-dancing-flower

在线演示源码下载

CSS3粘性概念菜单Gooey Menu

今天我们要给大家分享一款基于CSS3的粘性概念菜单,也可以叫做Gooey Menu,这种菜单按钮在目前的手机应用中使用非常广泛,外观样式也有很多种类型。今天的这款样式比较新颖,点击展开按钮即可展开所有菜单项,菜单项的形状呈波浪形,鼠标滑过菜单项时也会有高亮显示的效果。

css3-gooey-menu

在线演示源码下载

纯CSS3模拟iPhone X背景切换动画

尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的。今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景和页面的背景交相呼应,显得非常自然和谐。

css3-iphone-x-background

在线演示源码下载