标签归档:SVG

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

在线演示源码下载

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[......]

阅读全文>>