.circle span{display:flex;justify-content:center;align-items:center;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;left:50%;background-color:hsla(0,0%,100%,.5);backdrop-filter:blur(10px);width:60px;height:60px;margin:-30px}.circle span img{width:60%;height:60%}.circle span.icon1{transform:rotate(95deg) translate(264px) rotate(-95deg)}.circle span.icon2{transform:rotate(190deg) translate(264px) rotate(-190deg)}.circle span.icon3{transform:rotate(244deg) translate(211.2px) rotate(-244deg)}.circle span.icon4{transform:rotate(350deg) translate(126.72px) rotate(-350deg)}.circle,.circle span{transition:all .3s ease-in-out}.circle.big{animation:clockwiseRotate 35s linear infinite}.circle.big .icon1 img,.circle.big .icon2 img{animation:counterClockwiseRotate 35s linear infinite}.circle.middle{animation:clockwiseRotate 30s linear infinite}.circle.middle .icon3 img{animation:counterClockwiseRotate 30s linear infinite}.circle.small{animation:clockwiseRotate 20s linear infinite}.circle.small .icon4 img{animation:counterClockwiseRotate 20s linear infinite}@keyframes clockwiseRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes counterClockwiseRotate{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}