我想要一个css编码的动画旋转svg图像.我不知道该怎么做.最后,它必须看起来像这样:http://baveltje.com/logo/logo.html.我对css完全不熟悉.旋转的svg是gear1.svg和gear2.svg.我希望他们旋转360度无限时间,我想称之为<.div class ="gear1">和gear2 ..是否可以让它看起来与链接中的徽标完全一样,但是旋转?
我尝试使用jsfiddle.net/gaby/9Ryvs/7/,但没有结果.它必须像小提琴一样速度!
提前致谢!
码:
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { …Run Code Online (Sandbox Code Playgroud)