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

在线演示源码下载

基于Vue.js的超实用科学型计算器

不久前我们为大家分享过一些功能相对比较简单的jQuery计算器和HTML5计算器,可以实现简单的加减乘除功能,比如这款jQuery精美的加减乘除计算器 支持存储功能简洁美观的jQuery计算器插件。这次我们要分享一款基于Vue.js的计算器插件,这款计算器功能比较强大,支持科学型的计算功能,当然我们也可以切换到标准型的简单模式。

vue-js-scientific-calculator

在线演示源码下载

CSS3/SVG绘制的悉尼歌剧院

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

css3-svg-opera-house

在线演示源码下载

jQuery/CSS3带阴影的3D进度条插件

这是一款非常炫酷的jQuery/CSS3进度条插件,这款进度条插件的特点是带有阴影,外观看起来有着3D立体的视觉效果。另外进度条实体部分可以利用CSS3相关特性绘制任意效果的填充物,可以是渐变颜色,也可以是网格形状,同时我们可以动态设置进度条的当前值。

jquery-css3-3d-progress-bar

在线演示源码下载

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

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

html5-svg-dancing-flower

在线演示源码下载