标签归档:SVG按钮

SVG选项切换开关按钮 可提供3个选项切换

这是一款比较特别的开关切换按钮,与之前分享的很多CSS3开关切换按钮不同,这款是基于SVG和HTML5的,它的最大特点在于可以提供3个选项切换动画,不像前面的这款漂亮的纯CSS3开关切换按钮动画那样虽然外观漂亮,但只能提供“是”或者“否”的选项,这个可以提供“是”、“可能是”和“否”3个选项的选择,同时不同状态的选项也会对应不同的小图标。

svg-3-option-button

在线演示源码下载

SVG/HTML5动画图标 可用作图标菜单导航

今天我们要给大家分享一款简易实用的SVG动画图标应用,这种动画图标现在越来越多地用于网页菜单导航,因为它使用起来简单,而且支持大部分浏览器。这款SVG/HTML5动画图标可以在鼠标滑过图标时产生简单的循环播放的动画特效。

svg-css3-animated-icon-menu

在线演示源码下载

下面我们一起来简单解说一下实现这款SVG动画图标的过程。

HTML代码

毋庸置疑,SVG是这款图标的核心代码,图标的外观均是采用SVG路径绘制而成,这里我们挑选第一个图标作为例子,SVG代码如下:

<svg version="1.1" id="web-skill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="160px" height="108px" viewBox="0 0 160 108" enable-background="new 0 0 160 108" xml:space="preserve">
	<g id="mobile" style="tr[......]

阅读全文>>

SVG边框可连续变化的鼠标滑过动画按钮

今天我们要给大家分享一款基于SVG的鼠标滑过动画按钮,这款按钮的鼠标滑过动画呈现的是按钮边框线条可连续变化,非常绚丽。像这样的鼠标滑过按钮在之前我们也分享过很多,大家可以回顾一下纯CSS3鼠标滑过按钮动画 多种动画风格jQuery/CSS3多种鼠标滑过动画按钮集合,也许其中有些按钮效果可以用得上。

svg-border-animate-button

在线演示源码下载

HTML5 SVG创意开关切换按钮

对于开关切换按钮,我们在之前的文章中已经分享不少了,比如CSS3创意开关切换按钮就非常不错。今天我们再来分享一款基于SVG和HTML5的开关切换按钮,鼠标点击按钮后即可来回切换按钮的状态,滑动的动画效果非常不错。

html5-svg-switch-button

在线演示源码下载