Beautiful animation of one element's circles using only CSS.

HTML part

<div class="zcode">ZCODE</div>

Css part

.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);
            }
        }