<!-- Hover to show the linear movement paths of each white circle -->

<div class="content">

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

  <div class="dot"></div>

</div>

:root {

  --speed: 3s; /***change speed***/

  --delay: calc( var(--speed) / 8 );

}

​

body {

  margin: 0;

  height: 100vh;

  background: #101010;

  display: flex;

  justify-content: center;

  align-items: center;

}

.content {

  width: 70vmin;

  margin: 0 auto;

  height: 70vmin;

  border-radius: 100%;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  background: linear-gradient(315deg, #ff3d00 0%, #ff7600 74%);

}

​

.content:before {

  content: "";

  width: 100%;

  height: 100%;

  background: 

    linear-gradient(0deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(22.5deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(45deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(67.5deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(90deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(112.5deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%), 

    linear-gradient(135deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%),

    linear-gradient(157.5deg, #fff0 0% calc(50% - 2px), #101010 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px) 100%),

    linear-gradient(315deg, #ff3d00 0%, #ff7600 74%);

  opacity: 0;

  border-radius: 100%;

  transition: all 1s ease 0s;

}

​

.content:hover:before {

  opacity: 1;

  transition: all 2s ease 0s;

}

​

.dot {

  width: 100%;

  height: 3px;

  position: absolute;

  z-index: 1;

}

​

.dot:nth-child(2) {

  transform: rotate(22.5deg);

}

​

.dot:nth-child(3) {

  transform: rotate(45deg);

}

​

.dot:nth-child(4) {

  transform: rotate(67.5deg);

}

​

.dot:nth-child(5) {

  transform: rotate(90deg);

}

​

.dot:nth-child(6) {

  transform: rotate(112.5deg);

}

​

.dot:nth-child(7) {

  transform: rotate(135deg);

}

​

.dot:nth-child(8) {

  transform: rotate(157.5deg);

}

​

.dot:before {

  content: "";

  width: 5vmin;

  height: 5vmin;

  display: inline-block;

  border-radius: 100%;

  position: absolute;

  top: -2.5vmin;

  animation: move var(--speed) ease-in-out 0s infinite alternate;

  background: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);

}

​

.dot:nth-child(2):before {

  animation-delay: var(--delay);

}

​

.dot:nth-child(3):before {

  animation-delay: calc(var(--delay) * 2);

}

​

.dot:nth-child(4):before {

  animation-delay: calc(var(--delay) * 3);

}

​

.dot:nth-child(5):before {

  animation-delay: calc(var(--delay) * 4);

}

​

.dot:nth-child(6):before {

  animation-delay: calc(var(--delay) * 5);

}

​

.dot:nth-child(7):before {

  animation-delay: calc(var(--delay) * 6);

}

​

.dot:nth-child(8):before {

  animation-delay: calc(var(--delay) * 7);

}

​

@keyframes move {

    0% { transform: translateX(0vmin);  }

  100% { transform: translateX(65vmin); }

}