Красиво оригинально удивительно и впечатляющее, но хз каким нужно быть css-мазохистом чтоб додуматься до такого

                        
HTML:



<div id='gif'></div>



CSS:



body { background:black; overflow:hidden; }

#gif {

  background:black;

  padding:10px;

  height:80px;

  width:80px;

  border-radius:50%;

  position:absolute;

  top:calc(50% - 40px);

  left:calc(50% - 40px);

  box-shadow:

    178px 0 0 -25px black,

    178px 0 0 -20px white,

    -178px 0 0 -25px black,

    -178px 0 0 -20px white, 

    0 0 0 20px black,

    0 0 0 30px white,

    0 0 0 130px black,

    0 0 0 135px white;

  -webkit-animation: rotate 3s linear infinite;

  animation: rotate 3s linear infinite;

}

#gif:before {

  content: " ";

  position: absolute;

  height:50px;

  width:50px;

  border-radius:50%;

  top: -155px;

  left: 20px;

  background:black;

  border: 5px solid white;

  box-shadow:

    0 355px 0 -5px black,

    0 355px 0 0px white;

  -webkit-animation: reverseRotate 3s linear infinite;

  animation: reverseRotate 3s linear infinite;

}

#gif:after {

  /* Segmented circle code goes here */

  content: " ";

  position: absolute;

  height:280px;

  width:280px;

  left:-90px;

  top:-90px;

  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");

  background-repeat: no-repeat;

  z-index:2;

  -webkit-animation: segmentRotate 300s linear infinite;

  animation: segmentRotate 300s linear infinite;

}

@keyframes rotate {

  0%   { transform: rotate(  0deg); }  

  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 

    background: black; 

    box-shadow:

      178px 0 0 -25px black,

      178px 0 0 -20px white,

      -178px 0 0 -25px black,

      -178px 0 0 -20px white, 

      0 0 0 20px black,

      0 0 0 30px white,

      0 0 0 130px black,

      0 0 0 135px white;

  }

  12.5%, 37.5%, 62.5%, 87.5% { 

    background: white; 

    box-shadow:

      178px 0 0 -25px white,

      178px 0 0 -20px white,

      -178px 0 0 -25px white,

      -178px 0 0 -20px white, 

      0 0 0 20px black,

      0 0 0 30px white,

      0 0 0 130px black,

      0 0 0 135px white;

  }    

  100% { transform: rotate(360deg); }

}

@keyframes reverseRotate {

  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  

  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 

    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 

  }

  12.5%, 37.5%, 62.5%, 87.5% { 

    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 

  }    

  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }

}

@keyframes segmentRotate {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(-32000deg); }

}





@-webkit-keyframes rotate {

  0%   { -webkit-transform: rotate(  0deg); }  

  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 

    background: black; 

    box-shadow:

      178px 0 0 -25px black,

      178px 0 0 -20px white,

      -178px 0 0 -25px black,

      -178px 0 0 -20px white, 

      0 0 0 20px black,

      0 0 0 30px white,

      0 0 0 130px black,

      0 0 0 135px white;

  }

  12.5%, 37.5%, 62.5%, 87.5% { 

    background: white; 

    box-shadow:

      178px 0 0 -25px white,

      178px 0 0 -20px white,

      -178px 0 0 -25px white,

      -178px 0 0 -20px white, 

      0 0 0 20px black,

      0 0 0 30px white,

      0 0 0 130px black,

      0 0 0 135px white;

  }    

  100% { -webkit-transform: rotate(360deg); }

}

@-webkit-keyframes reverseRotate {

  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  

  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 

    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 

  }

  12.5%, 37.5%, 62.5%, 87.5% { 

    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 

  }    

  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }

}

@-webkit-keyframes segmentRotate {

  0%   { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(-32000deg); }

}