首先用ai画一个简单的风车

例如：

svg代码：
<animateTransform

	attributeName="transform"

	begin="0s"

	dur="2s"

	type="rotate"

	from="0 305 225.5"

	to="360 305 225.5"

	repeatCount="indefinite"

	/>

接下来看完整的代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

	<style>

		svg{

			width: 500px;

			height: 800px;

			border: 1px solid #ccc;

			display: block;

			margin: 0 auto;

		}

	</style>

</head>

<body>

	<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

	 viewBox="0 0 640 782.8" style="enable-background:new 0 0 640 782.8;" xml:space="preserve">

<style type="text/css">

	.st0{fill:#94E1FF;stroke:#000000;stroke-miterlimit:10;}

	.st1{fill:#FF7FB3;stroke:#000000;stroke-miterlimit:10;}

	.st2{fill:#4BFF2A;stroke:#000000;stroke-miterlimit:10;}

	.st3{fill:#C0FF7F;stroke:#000000;stroke-miterlimit:10;}

	.st4{fill:#FFF83F;stroke:#000000;stroke-miterlimit:10;}

	.st5{fill:#55DEFF;stroke:#000000;stroke-miterlimit:10;}

	.st6{fill:#0048FF;stroke:#000000;stroke-miterlimit:10;}

	.st7{fill:#0022FF;stroke:#000000;stroke-miterlimit:10;}

	.st8{fill:#CB00FF;stroke:#000000;stroke-miterlimit:10;}

	.st9{fill:#170094;stroke:#000000;stroke-miterlimit:10;}

	.st10{fill:#FF15F7;stroke:#000000;stroke-miterlimit:10;}

	.st11{fill:#E9008F;stroke:#000000;stroke-miterlimit:10;}

	.st12{fill:#559DFF;stroke:#000000;stroke-miterlimit:10;}

</style>

<rect id="XMLID_27_" x="300.2" y="247.9" class="st0" width="11.6" height="440.5"/>

<g>

	<ellipse id="XMLID_1_" class="st1" cx="306" cy="117.2" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_3_" transform="matrix(0.866 -0.5 0.5 0.866 -31.9659 143.826)" class="st2" cx="252.4" cy="131.6" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_4_" transform="matrix(0.5 -0.866 0.866 0.5 -41.3361 270.0038)" class="st3" cx="213.2" cy="170.8" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_5_" class="st4" cx="198.8" cy="224.4" rx="83.2" ry="27.2"/>

	<ellipse id="XMLID_6_" transform="matrix(-0.5 -0.866 0.866 -0.5 78.9881 601.6038)" class="st5" cx="213.2" cy="278" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_7_" transform="matrix(-0.866 -0.5 0.5 -0.866 312.3658 718.174)" class="st6" cx="252.4" cy="317.2" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_8_" class="st7" cx="306" cy="331.6" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_9_" transform="matrix(-0.866 0.5 -0.5 -0.866 829.6417 412.174)" class="st8" cx="359.6" cy="317.2" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_10_" transform="matrix(-0.5 0.866 -0.866 -0.5 839.012 71.5962)" class="st9" cx="398.8" cy="278" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_11_" class="st10" cx="413.2" cy="224.4" rx="83.2" ry="27.2"/>

	<ellipse id="XMLID_12_" transform="matrix(0.5 0.866 -0.866 0.5 347.3361 -260.0038)" class="st11" cx="398.8" cy="170.8" rx="27.2" ry="83.2"/>

	<ellipse id="XMLID_13_" transform="matrix(0.866 0.5 -0.5 0.866 113.9583 -162.174)" class="st12" cx="359.6" cy="131.6" rx="27.2" ry="83.2"/>

	<animateTransform

			attributeName="transform"

			begin="0s"

			dur="2s"

			type="rotate"

			from="0 305 225.5"

			to="360 305 225.5"

			repeatCount="indefinite"

			/>

</g>

<circle id="XMLID_2_" class="st0" cx="306" cy="224.9" r="23"/>

</svg>

</body>

</html>

效果图：

svg制作风车旋转的更多相关文章

  1. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  2. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  3. 太可爱了！CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

  4. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  5. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  6. Snap.svg中transform旋转值的“r+数组”表现形式

    Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...

  7. toolTip(用svg制作出富有动态的对话框)

    昨晚看了用svg如何制作富有动态的tooltip,于是今天就心血来潮学着做一下,于是也成功做出来,也明白其中的原理,收获颇多阿!接下来要多去学习svg,这是个好东西. 这其中也注意了一些平时纠结的细节 ...

  8. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  9. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

随机推荐

  1. hdu2059 龟兔赛跑 DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2059 虽然 知道是DP ,刚开始一直没有想出状态转移方程. 刚开始的思路就是定义dp[i]表示到达第i ...

  2. 利用反射来实现获取成员的指定特性(Attribute)信息

    在开发过程中,我们经常需要自定义一些特性,来辅助我们完成对对象或者枚举进行管理.我们需要知道如何获取对象使用的特性信息. 以下举个学习用的例子. 我们自定义一个特性类,这个特性设置在一个数据段内是否执 ...

  3. [刷题]算法竞赛入门经典(第2版) 4-3/UVa220 - Othello

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa 220 - Othello #include<iostream ...

  4. 转：Centos6.5_x86安装Redis。

    Redis是一个高性能的,开源key-value型数据库.是构建高性能,可扩展的Web应用的完美解决方案,可以内存存储亦可持久化存储.因为要使用跨进程,跨服务级别的数据缓存,在对比多个方案后,决定使用 ...

  5. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  6. （数字IC）低功耗设计入门（三）——系统与架构级

    前面讲解了使用EDA工具(主要是power compiler)进行功耗分析的流程,这里我们将介绍在数字IC中进行低功耗设计的方法,同时也结合EDA工具(主要是Design Compiler)如何实现. ...

  7. R语言与分类算法的绩效评估（转）

    关于分类算法我们之前也讨论过了KNN.决策树.naivebayes.SVM.ANN.logistic回归.关于这么多的分类算法,我们自然需要考虑谁的表现更加的优秀. 既然要对分类算法进行评价,那么我们 ...

  8. 关于querySelectorAll的一个坑

    刚学JS的DOM操作时,就知道了匹配一堆元素,会获得NodeList和HTMLCollection这两个对象,不过当时并没有深入去研究两者的区别 因为无论是NodeList还是HTMLCollecti ...

  9. Redis基本数据结构总结之STRING和LIST

    Redis基本数据结构总结前言 Redis的特点在于其读写速度特别快,因为是存储在内存中的,其非常适合于处理大数据量的情况:还有一个是其不同于其他的关系型数据库,Redis是非关系型数据库,也就是我们 ...

  10. Mapreduce在Yarn调用出错

    共享原因:虽然用一篇博文写问题感觉有点奢侈,但是搜索百度,相关文章太少了,苦苦探寻日志才找到解决方案. 遇到问题:mapreduce程序一直迟迟没有结果. [QC] INFO [main] org.a ...