标签归档:SVG

SVG 和 JavaScript 实现的恶魔眨眼动画

今天要给大家带来一款非常逼真的SVG动画特效,它模拟了一双恶魔的眼睛,并且模拟了不停的眨眼动画。首先这双恶魔眼睛是通过SVG绘制而成,大部分使用了SVG的椭圆路径。然后利用JavaScript让眼睛眨动起来,大家看看效果是不是很逼真有趣。

demon-with-svg-javascript

在线演示源码下载

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自定义单选框按钮美化插件

之前我们介绍过很多利用CSS3渲染的自定义美化单选框和复选框,比如这款jQuery超级个性化的单线框和复选框就非常不错。这次我们要分享的是一组基于SVG的自定义单选框按钮美化插件,它非常适合做一些精美的评分插件。

svg-radio-buttons

在线演示源码下载

SVG木柴燃烧火焰动画

之前我们分享过一些基于HTML5 Canvas的火焰燃烧动画,比如这款HTML5动感的火焰燃烧动画特效就非常逼真。这次我们介绍另外一个基于SVG的火焰燃烧动画,不同的是,这款火焰动画是木柴燃烧时的动画效果,就像篝火晚会中的柴火一样。

svg-fire-stick

在线演示源码下载

SVG/CSS3平滑线性图表 可定义数据选取范围

前段时间给大家分享过很多炫酷实用的HTML5图表应用,比如这款HTML5 Canvas气温折线图表超酷HTML5 Canvas图表应用Chart.js。今天要介绍的是一款基于SVG和CSS3的平滑线性图表,它的特点是可以通过鼠标拖动滑杆来选取需要统计的数据范围,非常实用。

svg-css3-data-scope-chart

在线演示源码下载

超炫的SVG/CSS3游乐园动画

这是一款基于SVG和CSS3的游乐园动画,每一个细节都表现得非常不错。游乐园的各项活动设备都采用SVG的路径来描述的,并没有使用任何图片。同时游乐园中的摩天轮动画和气球漂浮动画都采用CSS3实现,看起来非常不错,和之前分享的SVG过山车动画非常类似。

svg-css3-park-animation

在线演示源码下载

超简易的SVG/CSS3 Loading加载动画图标

今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画更见简单,它主要由圆环形和柱形两种样式组成,可以将这些Loading图标应用在很多种类型的页面中,非常实用。

svg-css3-loading-icons

在线演示源码下载

纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。

css3-svg-longcase-clock

在线演示源码下载

SVG/HTML5超富创意的环形颜色拾取器

记得很早以前我们分享过一款功能很强大的jQuery颜色选取插件 支持透明度选择,确实很不错。今天我们要介绍另外一款基于SVG和HTML5的环形颜色拾取器,非常具有创意。20种颜色组成一个圆环,每一种颜色都有相近的5种颜色可以选取,唯一遗憾的是不能根据任意的RGB值选取颜色。

svg-html5-circle-color-picker

在线演示源码下载