CSS3之沿环形路径移动

实现环形路径移动，我们主要利用以下两个属性：

animation-origin
rotate(1turn)

通用CSS样式：

.round{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: lightpink;
    padding: 20px;
}
.move{
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    animation: spin 2.8s infinite linear;
    transform-origin: 50% 100px;
}
.move > img{
    display: block;
    width: inherit;
    height: inherit;
    animation: inherit;
    animation-direction: reverse;
}
@keyframes spin{
    to{transform: rotate(1turn);}
}

首先看第一种，中间的图片会沿着环形轨迹运动，但是图片自身也在旋转。
废话不多说，直接上代码：

<div class="round">
    <img class="move" src="img/12.jpg"/>
</div>

分解效果图：

但是我们需要的只是让图片沿环形轨迹运动，中间的小图片我们并不希望它旋转，怎么解决呢，我们可以通过内层的动画来消除外层的动画，即再给img标签包一层div，代码如下：

<div class="round">
    <div class="move">
        <img src="img/12.jpg"/>
    </div>
</div>

效果分解图如下：

那么，我们可以实现多个小图片有节奏的沿环形轨迹运动吗？可以的。样式依旧如下，只需改变HTML即可，代码如下：

<div class="round">
    <div class="move">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 0.4s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 0.8s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 1.2s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 1.6s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 2.0s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
    <div class="move" style="animation-delay: 2.4s;margin-top: -50px;">
        <img src="img/12.jpg"/>
    </div>
</div>

此处注意时间的设置。
效果分解图如下：

---

其实以上的效果还可以通过translate和rotate来实现，因为animation-origin其实是可以通过translate来实现的。具体就不多说了。