标签归档:SVG

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

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

html5-svg-color-cylinder

在线演示源码下载

SVG螺旋式扩散的Loading加载动画

SVG在绘制网页矢量图方面非常强大,甚至是一些矢量动画也是相当不错。之前我们分享过一些比较实用的SVG Loading动画,比如这个HTML5 SVG Loading 动画加载特效和这款富有创意的CSS3/SVG沙漏式Loading加载动画。这次我们要给大家分享的是另外一款基于SVG和JavaScript的螺旋式扩散的Loading加载动画,这个Loading动画非常适合页面加载时的等待动画。

svg-spiral-loading

在线演示源码下载

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

在线演示源码下载