svg制作风车旋转
首先用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制作风车旋转的更多相关文章
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- 太可爱了!CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- Snap.svg中transform旋转值的“r+数组”表现形式
Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...
- toolTip(用svg制作出富有动态的对话框)
昨晚看了用svg如何制作富有动态的tooltip,于是今天就心血来潮学着做一下,于是也成功做出来,也明白其中的原理,收获颇多阿!接下来要多去学习svg,这是个好东西. 这其中也注意了一些平时纠结的细节 ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
随机推荐
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
- Java中线程的实现:
Java中线程的实现: 一.线程简介: 实现的两种方式为: 1.Thread类 2.Runnable接口 都在java.lang中 都有共通的方法:public void run() 二.线程常用方法 ...
- 【JAVAWEB学习笔记】18_el&jstl&javaee的开发模式
一.EL技术 1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL 出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据 ...
- [Open Source] RabbitMQ 高可用集群方案
简介 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模式.镜像模式 Rabb ...
- iOS最新企业证书的生成
PS:不知道什么原因 图片显示不出来 请看我简书里面的文章 http://www.jianshu.com/p/baab03ac43e9 1.生成CSR文件 SpotLight搜索>钥匙串访问 ...
- Elasticsearch与Solr
公司之前有个用Lucene实现的伪分布式项目,实时性很差,后期数据量逐渐增大的时候,数据同步一次需要十几小时.当时项目重构考虑到的是Solr和ES,我参与的是Solr技术的预研.因为项目实时性要求很高 ...
- Workout Wednesday Redux (2017 Week 3)
I had started a "52 Vis" initiative back in 2016 to encourage folks to get practice making ...
- R语言的导数计算(转)
转自:http://blog.fens.me/r-math-derivative/ 前言 高等数学是每个大学生都要学习的一门数学基础课,同时也可能是考完试后最容易忘记的一门知识.我在学习高数的时候绞尽 ...
- Windows、Office系列产品精华部分集锦
提示 有了这个帖子麻麻再也不用担心我因为四处找Microsoft家的软件和系统而四处劳累所烦恼了! 首先,你们最爱的老XP同志,XP同志虽然退休了,但是依然坚持在岗位上,向他致敬!! Windows ...
- [HDU1001] Sum Problem
Problem Description Hey, welcome to HDOJ(Hangzhou Dianzi University Online Judge). In this problem, ...