<div class="zcode">ZCODE</div>
.zcode { color: #ababab; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; text-align: center; font-size: 33px; line-height: 250px; } .zcode:after, .zcode:before { content: ""; border-radius: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; } .zcode:after { box-shadow: inset 0 15px 0 rgba(30, 136, 229, 0.6), inset 15px 0 0 rgba(30, 106, 229, 0.6), inset 0 -15px 0 rgba(30, 76, 229, 0.6), inset -15px 0 0 rgba(30, 46, 229, 0.6); animation: rotate1 2s -0.5s linear infinite; } .zcode:before { box-shadow: inset 0 15px 0 rgba(249, 213, 61, 0.6), inset 15px 0 0 rgba(249, 183, 61, 0.6), inset 0 -15px 0 rgba(249, 153, 61, 0.6), inset -15px 0 0 rgba(249, 123, 61, 0.6); animation: rotate2 2s -0.5s linear infinite; } @keyframes rotate1 { 0% { transform: rotateZ(0deg) scaleX(1) scaleY(1); } 50% { transform: rotateZ(180deg) scaleX(0.75) scaleY(0.90); } 100% { transform: rotateZ(360deg) scaleX(1) scaleY(1); } } @keyframes rotate2 { 0% { transform: rotateZ(0deg) scaleX(1) scaleY(1); } 50% { transform: rotateZ(-180deg) scaleX(0.90) scaleY(0.75); } 100% { transform: rotateZ(-360deg) scaleX(1) scaleY(1); } }