标签归档:SVG

SVG路径遮罩实现图片颜色任意替换

我们知道Svg可以构造任意的路径,绘制出任意的平面图形甚至是类3D的图形画面。今天我们要介绍的就是一款利用SVG路径遮罩实现图片颜色的任意替换功能。这里我们以沙发图片为例,我们可以任意更改沙发的颜色及其背景颜色。原理是利用SVG绘制沙发的路径结构,然后用选择的颜色填充路径即可。如果你要换一款沙发或者别的产品,那么这个路径就需要重新计算。这款应用比较适合一些电子商务平台的商品展示,我们不需要为每一款颜色都提供图片。当然如果商品图片有不同的色块,那也不太适合这个工具。

svg-color-sofa

在线演示源码下载

SVG超酷动画Tab菜单栏

这是一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,菜单切换时还会产生不错的动画效果。菜单项小图标使用svg的好处,不仅在于灵活绘制,更方便制作菜单项切换时图标的动画特效。另外,Tab菜单项切换时,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨不需要这个效果,可以自行修改js代码取消背景颜色的渐变切换。

svg-animated-tab-menu

在线演示源码下载

HTML5 SVG实现的星级评分动画

今天给大家分享一款比较实用的HTML5星级评分应用,这款评分应用和以前分享的不同,我们可以在评分的同时,小星星会根据评分结果展示不同的动画特效。另外,这款星级评分动画还使用了SVG的动画特性,如果你对svg比较熟悉,还可以在上面修改更多的评分结果动画特效。

html5-svg-rank-animation

在线演示源码下载

CSS3 SVG实现带表情的投票打分插件

记得很早的时候给大家分享过一些简单实用的投票插件,大部分都是基于jQuery的,比如这款jQuery评论打分插件 支持多种打分按钮。今天要介绍的这款投票打分插件是基于CSS3和SVG的,它的特点是对于不同的评级会有不同的表情,比如1星是失落的表情,5分是帅酷的表情。

css3-svg-vote

在线演示源码下载

CSS3和SVG实现的圆环菜单动画

网页菜单的样式真实多种多样,特别是HTML5和CSS3的流行,让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单,在圆环上一共有7个节点,表示菜单项,当鼠标滑过或者点击其中一个节点时,就会弹出文字菜单项,圆环形状和节点都是采用SVG绘制而成,动画效果也非常不错。

css3-svg-circle-menu

在线演示源码下载

HTML5/SVG图片切换马赛克过渡动画

早些时候,我们给大家分享过一款基于HTML5 Canvas的图片马赛克模糊效果,并且文章中对其实现原理进行了简单解说。今天我们要介绍的也是关于图片马赛克效果的,它是一个基于HTML5和SVG的图片切换马赛克过渡动画,与普通的淡入淡出切换效果不同,它在图片切换时渲染马赛克的滤镜效果,实现简单,而且也非常具有创意。

html5-svg-image-pixelization

在线演示源码下载

CSS3和SVG实现的水中映月的动画效果

今天给大家分享一个宁静而又温馨的CSS3动画,是一个水中映月的场景,用CSS3和SVG实现。首先我们用CSS3在页面上画一个圆月,以及圆月周围的月晕,然后用SVG动画模拟水波,这样一轮圆月就倒映在水波荡漾的水面上了,个人以为还是挺逼真的。

css3-svg-water-moon

在线演示源码下载

CSS3 SVG实现的卡片内容翻转切换动画

之前我们分享过很多关于CSS3实现的卡片动画,比如这个纯CSS3实现可感知方向的卡片翻转动画就非常不错。这次给大家介绍的是一个基于CSS3和SVG的卡片内容翻转切换动画,卡片中的内容可以是任意的HTML代码,例如图片和文字,点击左右的切换按钮后即可将卡片中的内容翻转切换,效果非常不错。

css3-svg-card-rotate

在线演示源码下载

一组带进度动画的HTML5 SVG柱形统计图

今天我们给大家介绍一款基于HTML5和SVG的横向柱形统计图表,它的特点是每一个数据组都有不同的颜色表示,同时每组数据都有不同的百分比来表示。图表在初始化的时候带有进度条的动画效果,所以你也可以把它当作进度条来使用。

html5-svg-bar-chart

在线演示源码下载

HTML5 Canvas和SVG实现的五彩万花筒动画

Canvas的优势在于允许你在画板上任意绘制图形,SVG的优势在于可以很方便的在网页上绘制各种形状的路径。今天分享给大家的就是一款基于HTML5 Canvas和SVG的五彩万花筒动画,五彩斑斓的彩色路径将会不停的变换形状和颜色,效果非常炫酷。

html5-svg-color-cylinder

在线演示源码下载