动画几何效果，如 ie logo答案

【问题标题】：animated Geometric effect like ie logo动画几何效果，如 ie logo
【发布时间】：2015-08-01 11:25:50
【问题描述】：

我想要动画几何效果，例如围绕我的徽标移动的徽标（黄色）。

【问题讨论】：

我不知道你所说的效果是什么意思 ie logo ，这是由 adobe illustrator 或 photoshop 制作的，如果你想要 jquery 或 html5 和 css3 这样的效果，我建议你做它与 SVG PATH ，这可以绘制几何形状和曲线等等很多东西......
不准确，但几乎使用 css3。 cordobo.com/wp-content/uploads/ie-pure-css-logo
是的..我想在我的标志上添加几何效果。

标签： jquery css effect geometric-arc

【解决方案1】：

我不认为 Jquery 会是您所需要的，您的意思是实际构建该形状以便它由浏览器呈现而不是通过图像呈现？您也许可以通过 CSS 获得类似的东西。但它可能不会完全正确。

您可以在此处构建一些 CSS 形状示例：

https://css-tricks.com/examples/ShapesOfCSS/

但是，最好的办法是使用图像编辑器制作图像并将其作为图像放到网上。

【讨论】：

【解决方案2】：

我想要类似 this fiddle

<div class="logo">
<div class="circle"></div>
<img src="http://cdns2.freepik.com/image/th/318-31882.png" />
</div>

*{
box-sizing:border-box;
}
.logo{
width:150px;
height:150px;
position:relative;
}
.circle{
position:absolute;
width:100%;
height:100%;
border:10px solid #000;
border-radius:100%;
}
.logo img{
width:70px;
display:inline-block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
vertical-align:middle;
}  
.circle {
-moz-animation: rotate 10s infinite 0s;
-webkit-animation: rotate 10s infinite 0s;
animation: rotate 10s infinite 0s;
}
@-webkit-keyframes rotate{
0% {
    -moz-transform: rotate3d(50,50,0,50deg) rotate(90deg);
    -webkit-transform: rotate3d(50,50,0,50deg) rotate(90deg);    
    transform: rotate3d(50,50,0,50deg) rotate(90deg);
}
50% {
    -moz-transform: rotate3d(0,0,0,0deg) rotate(180deg);
    -webkit-transform: rotate3d(0,0,0,0deg) rotate(180deg);    
    transform: rotate3d(0,0,0,0deg) rotate(180deg);
}
100% {
    -moz-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
    -webkit-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);    
    transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
}
}

【讨论】：