html5 css3做圆周运动,css实现圆周运动

自身旋转

旋转元素，首先想到的就是rotate这个属性。

.circle {

width: 30px;

height: 30px;

background: #aaa;

animation: spin 3s linear;

}

@keyframes spin{

to {

transform: rotate(1turn);

}

}

绕圆旋转

rotate可以实现旋转，但只是绕自身旋转，是以其中心为圆心，进行旋转。如果想实现绕着一个圆进行旋转，则需要多用到一个属性了。

.container {

width: 300px;

height: 300px;

border: 1px dotted red;

border-radius: 50%;

position: relative;

box-sizing: border-box;

}

.circle {

position: absolute;

left: 50%;

top: 0;

width: 30px;

height: 30px;

border-radius: 50%;

background: #aaa;

transform-origin: 0 150px;

animation: spin 3s infinite linear

}

如上代码，增加transform-origin这个属性&#