JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="donut">
  <figure class="circle"></figure>
  <figure class="circle1 circle1-pos orbit1"></figure>
  <figure class="circle2 circle2-pos orbit2"></figure>
 
</div>

CSS

html{
  height: 100%;
}
body {
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
 
  /*контент в центр страницы*/
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.circle {
  margin: 33% 33% 33% 33%;
  background: pink;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  transition: all 0.6s ease;
}
.donut:hover > .orbit1,
.circle1:hover,
.circle2:hover {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  animation-play-state:paused;
}
.circle1,
.circle2 {
  background: radial-gradient(#60AAFE, #0455F1, #D86AF7);
  border-radius: 50%;
  height: 70px;
  width: 70px;
  transition: all 0.6s ease;
  position: absolute;
  margin: 8%;
  transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
 
/*при наведении на фигуру*/
 
 
.donut {
  border: 1px solid  #F0FFFF;
  border-radius: 150px;
  height:300px;
  width:300px;
  box-shadow: inset #57A8FA 0 0 20px 5px,
              #57A8FA 0 0 22px 7px;
 
}
 
.orbit1 {
  position: absolute;
  right: 33%;
  left: 39%;
  top: 29%;
  bottom: 33%;
  animation: Orbita 15s linear infinite;
}
 
@keyframes Orbita {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}