css3 svg动态图标_css3 SVG动画效果下载

本Demo是一款基于jQuery和CSS3实现的SVG图标动画、CSS3实现150个动画SVG图标、代码非常简单、调用了 http://www.w3.org/ 上面的的开放资源、其主要还是通过CSS3来实现的、部分效果图如下

下面为大家讲解一下使用方法、以那个照相机为例

HTML代码如下

<div class="iconholder">
	<span class="iconwrap">
		<span class="long-shadow"></span>
		<span class="svg-icon flat-shadow" 
			id="shadow-camera"></span>
	</span>
</div>

JS代码如下

var cameraShadow = " <svg class=´flat_icon´ 
	xmlns=´http://www.w3.org/2000/svg´ width=´100px´ 
	height=´100px´ viewBox=´0 0 100 100´ >
	<path class=´circle´ d=´M50,2.125c26.441,0,47.875,
	21.434,47.875,47.875S76.441,97.875,50,97.875C17.857,
	97.875,2.125,76.441,2.125,50S23.559,2.125,50,2.125z´/>
	<g class=´icon´><path class=´base´ 
	d=´M75.707,75.279H24.293c-2.839,
	0-5.141-2.303-5.141-5.143V39.289c0-2.556,1.87-4.659,
	4.313-5.058l-0.028-0.084c0,0,0.331,0,0.856,
	0l0,0h4.285c11.14,0,7.712-9.426,15.424-9.426c2.57,
	0,5.998,0,5.998,0s3.428,0,5.998,0c7.712,0,4.285,
	9.426,15.424,9.426h4.284l0,0c0.526,0,0.856,0,
	0.856,0l-0.027,0.084c2.443,0.398,4.313,2.502,
	4.313,5.058v30.848C80.85,72.977,78.546,
	75.279,75.707,75.279z´/><path class=´strip´ 
	d=´M19.152,48.715h61.696v17.138H19.152V48.715z´/>
	<path class=´lens´ d=´M50.001,41.86c8.519,0,15.424,
	6.904,15.424,15.423c0,8.52-6.905,15.426-15.424,
	15.426c-8.518,0-15.424-6.906-15.424-15.426C34.576,
	48.764,41.482,41.86,50.001,41.86z´/>
	<path class=´lens_inner´ d=´M50.001,46.144c6.151,
	0,11.14,4.987,11.14,11.139s-4.986,11.141-11.14,
	11.141c-6.153,0-11.14-4.986-11.14-11.141C38.861,
	51.133,43.848,46.144,50.001,46.144z´/>
	<path class=´flash´ d=´M44.859,27.864h10.284c1.795,
	0,3.428,4.284,3.428,4.284c0,1.42-1.151,
	2.569-2.571,2.569H44.003c-1.42,
	0-2.571-1.149-2.571-2.569C41.432,32.148,
	43.063,27.864,44.859,27.864z´/>
	<path class=´red´ d=´M73.708,36.717c1.42,0,
	2.571,1.151,2.571,2.571c0,1.421-1.151,2.57-2.571,
	2.57c-1.419,0-2.571-1.149-2.571-2.57C71.137,37.869,
	72.289,36.717,73.708,36.717z´/><path class=´button´ 
	d=´M25.722,31.578h3.428c1.419,0,2.57,1.15,2.57,
	2.57h-8.569C23.151,32.728,24.302,31.578,25.722,
	31.578z´/></g></svg>"
$(cameraShadow).appendTo(´#shadow-camera´);

当然还得引入一个css的文件哈、下面是源代码

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1o6mQajo 密码: vezy