作者归档:sxwgf

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧。

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

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

html5-svg-dancing-flower

在线演示   源码下载

2、jQuery SVG高端圆形菜单导航

这是一款非常富有创意的jQuery菜单导航插件,菜单项的小图标是使用SVG路径绘制而成,简单实用。同时每一个菜单项排列成一个圆圈,菜单项切换时,中间的圆圈也会随着移动,而且中间的大圆圈[......]

阅读全文>>

HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效,比如这款HTML5 Canvas炫酷的火焰风暴动画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效,文字同时是利用火焰来渲染的,并且燃烧的文字火焰还可以随时改变颜色,让文字更显幻彩。

html5-canvas-colorful-text

在线演示源码下载

轻巧可爱的jQuery Tab菜单插件 可改变背景颜色

今天我们要为大家分享一款基于jQuery的Tab菜单插件,首先它的外观非常迷你可爱,每一个Tab菜单都是用一个迷你的小图标,同时在Tab菜单下方跟随一条磨边的线条。更重要的是该Tab菜单在切换时还可以动态改变内容区域的背景颜色,看上去非常不错。

jquery-tab-menu-background

在线演示源码下载

纯CSS3小姑娘荡秋千动画

这又是一款基于纯CSS3的动画特效,动画主要描绘了一个小姑娘荡秋千的情景,首先小姑娘人物和秋千都是用CSS3绘制而成,对于该动画实例来说,难度最大的在于小姑娘在荡秋千的时候身体各个部位关节的联动,在这个动画中,这方面表现得非常逼真。

css3-girl-swinging-animation

在线演示源码下载

SVG图片波浪效果渲染动画

今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的随机扭曲就形成了图片上方波浪翻滚的动画特效,而且也十分逼真。

svg-image-wave-effect

在线演示源码下载

jQuery五彩炫酷模拟键盘 带键盘敲击声音

还记得以前我们分享过两款基于jQuery的模拟键盘插件,一个是jQuery获取键盘按键提示,另外一个是jQuery模拟键盘事件,都非常不错。今天我们要分享的这款jQuery模拟键盘插件非常炫酷,键盘上面会出现动态改变的背景颜色,而且颜色都是各个角度渐变的,同时更为强大是,敲击键盘时会带有键盘敲击的声音,功能十分强大。

jquery-cool-keyboard

在线演示源码下载

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

在线演示源码下载