<div class="container"> <div class="major"> <div class="a minor"></div> <div class="b minor"></div> <div class="c minor"></div> <div class="d minor"></div> <div class="e minor"></div> </div> </div>
html, body { height: 100%; } .container { width: 100%; height: 100%; background-color: #000; } .major { background-color: #000; width: 100px; height: 100px; border-radius: 50px; position: relative; margin: 0 auto; top: 50px; -webkit-animation: rotating 2s linear infinite; } .minor { border-radius: 50%; width: 2px; height: 2px; position: absolute; } .a { top: 5px; left: 50px; background-color: #f00; box-shadow: 0 0 30px 18px #f00; } .b { top: 10px; left: 20px; background-color: #f80; box-shadow: 0 0 25px 14px #f80; } .c { top: 30px; left: 5px; background-color: #ff0; box-shadow: 0 0 20px 10px #ff0; } .d { top: 50px; left: 0; background-color: #0f0; box-shadow: 0 0 15px 5px #0f0; } .e { top: 70px; left: 5px; background-color: #00f; box-shadow: 0 0 10px 3px #00f; } .major:nth-child(2) .minor { top: 25px; left: 0; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }