<div style="height: 100px;"></div> <div class="circle"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> </div>

body { background: #000; } .circle { position: relative; height: 360px; width: 360px; margin: 0 auto; } .circle1, .circle2, .circle3{ border: 1px solid #fff; position: absolute; left: 0; right: 0; box-sizing: border-box; border-radius: 100%; margin: 0 auto; } .circle1:before, .circle2:before, .circle3:before, .circle1:after, .circle2:after, .circle3:after{ content: ""; position: absolute; border-radius: 50%; display: inline-block; background: #fff; z-index: 3; height: 15px; width: 15px; } .circle1:before, .circle2:before, .circle3:before{ left: 50%; top: -7px; } .circle1:after, .circle2:after, .circle3:after{ left: 60%; bottom: -3px; } .circle1 { width: calc(100% - 160px); height: calc(100% - 160px); top: 80px; animation: spinning 10s infinite linear; } .circle2 { width: calc(100% - 80px); height: calc(100% - 80px); top: 40px; animation: spinning 20s infinite linear; } .circle3 { width: 100%; height: 100%; top: 0; animation: spinning 30s infinite linear; } @-webkit-keyframes spinning { 0% { -webkit-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0) } 100% { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0) } } @keyframes spinning { 0% { -webkit-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(1200px) } 100% { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0) } }