旋转圈css3过渡 [英] Spinning circles css3 transition

问题描述

我想做3个旋转的圆圈，但找不到任何示例.

I want to make 3 spinning circles but I can`t find any examples.

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

How I need it to work: There are 3 circles (big,medium,small) I want to rotate them on hover (small and medium change position on big circuit)

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

这里是用于一圈代码的.但是如何将大圆圈作为背景并添加中圆圈

Here is for code for one circle. But how make a big circle a background of it and add medium circle

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>

推荐答案

这是我解决问题的方法:

Here is my approach to the problem:

jsFiddle示例

首先，我将这样的元素放置:

First I placed the elements like this:

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

The trick is to add the css attribute translateX(260px) that is (half of the biggest image circle/big.png), and then you just need to animate the rotation!

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

这篇关于旋转圈css3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！