html - 旋转圆圈 css3 过渡

Question

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

我需要它如何工作:有 3 个圆圈(大、中、小)我想在悬停时旋转它们(大电路上的小和中改变位置)

IMG:

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

单张图片:

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

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

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

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

---

完整代码:

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); }
}