标签归档：SVG

SVG带小图标的Checkbox美化插件

今天要给大家分享一款非常实用的checkbox复选框美化插件，这款复选框带有自定义小图标，小图标的绘制是通过SVG实现的，因此理论上你可以定义任意的图标。这款SVG复选框插件的另一个特点是，当图标没有选中时，复选框是隐藏的，鼠标滑过图标时，显示复选框，选中图片时，复选框悬浮在图标左上角并高亮显示。另外，对于选中数据的获取，跟我们普通表单提交时获取复选框选中值的方式是一样的。

在线演示源码下载

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

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

在线演示源码下载

SVG超酷动画Tab菜单栏

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

在线演示源码下载

HTML5 SVG实现的星级评分动画

3,934 人浏览

发表回复

2019-12-12 22:17:23

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

在线演示源码下载

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

3,149 人浏览

发表回复

2019-07-27 10:17:53

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

在线演示源码下载

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

7,051 人浏览

发表回复

2019-01-10 20:48:52

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

在线演示源码下载

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

4,455 人浏览

发表回复

2018-12-27 13:10:37

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