旋转圈css3过渡

Question

我想制作3个旋转圈，但我找不到任何例子。

我需要它如何工作： 有3个圆圈（大，中，小） 我想在悬停时旋转它们（大电路上的中小变化位置）

IMG：

https://dl.dropboxusercontent.com/u/64675374/circle/circle1.png

单个img：

https://dl.dropboxusercontent.com/u/64675374/circle/small.png
https://dl.dropboxusercontent.com/u/64675374/circle/medium.png
https://dl.dropboxusercontent.com/u/64675374/circle/big.png

这是一个圆圈的代码。但是如何使一个大圆圈成为它的背景并添加中等圆圈

http://jsfiddle.net/AqKYC/293/

CSS：

.dot{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:100%;
     background: url('https://dl.dropboxusercontent.com/u/64675374/circle/small.png') no-repeat 50% 50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:5s;
    top:50px;
    left:50px;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotate(0deg) } 
to { -moz-transform:rotate(360deg) } 
}

HTML

<div class="sun">
 <div class="dot"></div>
</div>

Answer 1

以下是解决问题的方法：

Example at jsFiddle

首先我放置了这样的元素：

诀窍是添加（最大图像的一半translateX(260px)）的css属性circle/big.png，然后你只需要为旋转设置动画！

from { -transform: rotate(0deg) translateX(260px) }
to   { -transform: rotate(360deg) translateX(260px) }

---

Fullcode：

<强> HTML：

<div class="loading">
    <div class="circle-small"></div>
    <div class="circle-medium"></div>
    <div class="circle-big"></div>
</div>

CSS： （缩短 - 仅限webkit，jsFiddle处的完整代码）

.loading {
    width: 688px;
    height: 688px;
    position: relative;
}
.loading > div {
    position: absolute;
}
.circle-small {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/small.png');
    width: 162px;
    height: 161px;
    margin-left: 348px;
    margin-top: 348px;
    -webkit-animation: myOrbit1 3s linear infinite;
}
.circle-medium {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/medium.png');
    width: 338px;
    height: 339px;
    margin-left: 260px;
    margin-top: 260px;
    -webkit-animation: myOrbit2 4s linear infinite;
}
.circle-big {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/big.png');
    width: 518px;
    height: 517px;
    margin-left: 170px;
    margin-top: 170px;
}

@-webkit-keyframes myOrbit1 {
    from { -webkit-transform: rotate(0deg) translateX(260px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(260px) rotate(-360deg); }
}
@-webkit-keyframes myOrbit2 {
    from { -webkit-transform: rotate(360deg) translateX(260px) rotate(0deg); }
    to   { -webkit-transform: rotate(0deg) translateX(260px) rotate(-360deg); }
}