Анимация фигуры на CSS/JS

#javascript #css #вёрстка #svg

Это png фигура находится в шапке сайта. Как можно реализовать плавное вращение коричневых
кругов вокруг чёрного?
Я не прошу дать мне готовый код, просто подскажите, какой библиотекой JS воспользоваться.
И возможно ли это вообще, не рисуя gif?
    

Ответы

Ответ 1

Для таких задач можно использовать SVG:






Ответ 2

На css мне кажется больше возможностей : для ознакомления



.items {
  width: 50px;
  height: 50px;
  background: red;
  margin: 100px auto;
  border-radius: 50%;
  position: relative;
  animation: scale 5s linear infinite;
  z-index: 100;
}

@keyframes scale {
  0% {
    transform: scale(1.1);
  }
  20% {
    transform: rotate(10deg);
  }
  30% {
    transform: scale(.9)rotate(-10deg);
  }
}

.item1,
.item2,
.item3 {
  position: absolute;
}

.item1 {
  width: 15px;
  height: 15px;
  background: blue;
  border-radius: 50%;
  top: -20px;
  animation: color 4s linear infinite;
}

@keyframes color {
  10% {
    background: darkblue;
  }
  50% {
    background: blue;
  }
  80% {
    transform: scale(1.1)
  }
}

.item1:after {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  background: blue;
  position: absolute;
  top: 70%;
  left: %;
  z-index: -3;
  transform: rotate(55deg);
}

.item2 {
  width: 25px;
  height: 25px;
  background: black;
  border-radius: 50%;
  left: -35px;
  animation: key 6s linear;
}

@keyframes key {
  10% {
    transform: translate(-40px, 0);
  }
  30% {
    background: #444;
  }
}

.item2:after {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  background: black;
  position: absolute;
  top: 60%;
  left: 90%;
  z-index: -2;
  transform: rotate(15deg);
}

.item3 {
  width: 35px;
  height: 35px;
  background: pink;
  border-radius: 50%;
  right: -50px;
  animation: drive 2s linear infinite;
}

.item3:after {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  background: pink;
  position: absolute;
  top: 60%;
  left: -50%;
  z-index: -10;
  transform: rotate(-9deg);
}

@keyframes drive {
  0% {
    transform: scale(1.1);
  }
  20% {
    transform: translate(-10px, 0);
  }
  30% {}
}