.container1{background:#8037c4;background:linear-gradient(90deg,#1d1e20,#002871 35%)}.container1 .icon .imgBx{transform:rotate(calc(1turn/var(--2e55b040)*var(--i)));transform-origin:340px}.container1 .icon .imgBx img{filter:grayscale(1);transform:rotate(calc(-1turn/var(--2e55b040)*var(--i)));transition:.5s}.content1{inset:0;overflow:hidden;position:absolute}.content1:before{animation:animte_01 9s linear infinite;border-left:4px solid transparent;border-right:4px solid transparent;border-color:transparent #fff transparent #2196f3;border-radius:50%;border-style:solid;border-width:4px;content:"";inset:20px;position:absolute}.content1:after{animation:animte_02 5.5s linear infinite;border-left:4px solid transparent;border-right:4px solid transparent;border-color:transparent #fff transparent #f60;border-radius:50%;border-style:solid;border-width:4px;content:"";inset:60px;position:absolute}.container1 .icon .imgBx.active1{box-shadow:0 0 0 6px #f60}.container1 .icon .imgBx img{filter:grayscale(1);transition:.5s}.container1 .icon .imgBx.active1 img{filter:grayscale(0)}.content2{inset:0;overflow:hidden;position:absolute}.content2:before{animation:animte_01 9s linear infinite;border-left:4px solid transparent;border-right:4px solid transparent;border-color:transparent #f66c22 transparent #2196f3;border-radius:50%;border-style:solid;border-width:4px;content:"";inset:20px;position:absolute}@keyframes animte_01{0%{rotate:0deg}to{rotate:1turn}}.content2:after{animation:animte_02 5.5s linear infinite;border-left:4px solid transparent;border-right:4px solid transparent;border-color:transparent #f66c22 transparent #002871;border-radius:50%;border-style:solid;border-width:4px;content:"";inset:60px;position:absolute}@keyframes animte_02{0%{rotate:1turn}to{rotate:0deg}}.contentBx{opacity:0;position:absolute;transform:scale(0);transition:.5s}.contentBx.active1{inset:200px;opacity:1;transform:scale(1);transition-delay:.5s}