css3 同心圆旋转(2)-CSDN博客

<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="applicable-device" content="pc,mobile"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>title</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar1 {
top:0;
left:125px;
animation: spin 8s infinite linear;
transform-origin: 50% 150px; /* 150px = path radius */
}
.avatar2 {/*改变圆心和起点*/
top:250px;
left:125px;
animation: spin 8s infinite linear;
transform-origin: 50% -100px; /*150px = path radius */
}
.avatar > div {
animation: inherit;
animation-direction: reverse;
}
.avatar {
position:absolute;
display: block;
width: 50px;
height:50px;
line-height:50px;
text-align: center;
color:#fff;
background: #000;
/*margin: calc(50% - 25px) auto 0;*/
border-radius: 50%;
overflow: hidden;
}