<div class="container"> <div class="major-box-box"> <div class="major-box"> <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> <div class="mask1"></div> <div class="mask2"></div> </div> </div>
html, body { height: 100%; } .container { width: 100%; height: 100%; background-color: #000; } .major-box-box { position: relative; width: 280px; height: 100px; margin: 0 auto; top: 50px; } .major-box { background-color: #000; position: absolute; top: 0; left: 0; width: 140px; height: 140px; overflow: hidden; /* important to limit reflect */ -webkit-box-reflect: right; } .mask1 { position: absolute; top: 0; left: 0; width: 140px; height: 140px; background-color: #000; -webkit-animation: hide1 2s linear infinite alternate; } .mask2 { position: absolute; top: 0; left: 140px; width: 140px; height: 140px; background-color: #000; -webkit-animation: hide2 2s linear infinite alternate; } @-webkit-keyframes hide1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hide2 { 0% { opacity: 1; } 100% { opacity: 0; } } .major { background-color: #000; width: 100px; height: 100px; border-radius: 50px; position: absolute; top: 20px; right: 0; -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); } }