.circle{position:relative;margin:0 auto;width:400px;height:400px;animation:rotate-b-circle 50s linear infinite alternate-reverse}.circle .circle01{position:absolute;display:block;height:400px;border:solid 1px rgba(0,0,0,.1);border-radius:50%;left:50%}.circle .circle01 span{position:absolute;display:block;width:50px;height:50px;border:solid 1px rgba(0,0,0,.1);border-radius:50%;left:50%;background-color:#fff}.circle .circle01:nth-of-type(1){-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:rotate-circle 8s ease infinite alternate;animation:rotate-circle 8s ease infinite alternate}.circle .circle01:nth-of-type(1) span{top:30%;left:-20px}.circle .circle01:nth-of-type(2){-webkit-transform:translateX(-50%) rotate(60deg);-ms-transform:translateX(-50%) rotate(60deg);transform:translateX(-50%) rotate(60deg);-webkit-animation:rotate-circle 8s ease infinite alternate;animation:rotate-circle 8s ease infinite alternate}.circle .circle01:nth-of-type(2) span{top:80%;left:-20px}.circle .circle01:nth-of-type(3){-webkit-transform:translateX(-50%) rotate(-60deg);-ms-transform:translateX(-50%) rotate(-60deg);transform:translateX(-50%) rotate(-60deg);-webkit-animation:rotate-circle 8s ease infinite alternate;animation:rotate-circle 8s ease infinite alternate}.circle .circle01:nth-of-type(3) span{bottom:30%;left:-20px}.circle .circle01:nth-of-type(4){top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:100px;height:100px;-webkit-animation:rotate-xs-circle 8s ease infinite alternate;animation:rotate-xs-circle 8s ease infinite alternate}@-webkit-keyframes rotate-xs-circle{from{width:0px}to{width:100px}}@keyframes rotate-xs-circle{from{width:0px}to{width:100px}}@-webkit-keyframes rotate-circle{from{width:0px}to{width:600px}}@keyframes rotate-circle{from{width:0px}to{width:600px}}@-webkit-keyframes rotate-b-circle{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-b-circle{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}