CSS Поворотный шрифт Awesome Icon, неподвижный и плавный вокруг изображения - PullRequest
Новая
       4

CSS Поворотный шрифт Awesome Icon, неподвижный и плавный вокруг изображения

0 голосов
/ 20 января 2020

Я использую Angular 8 и хочу, чтобы значок Font Awesome (search) плавно вращался по кругу вокруг части изображения. Я не хочу, чтобы вращающийся значок вращался, он должен оставаться неподвижным в своей ориентации, так как он «вращается». Ниже приведен код, который приближается, но это не гладкий круг, а скорее прерывистый восьмиугольник. 

.rotate-item:before {
  content: 'X'; /* Here should be the rotating icon from font awesome */
}

.rotate-item {
  top: 50%;
  left: 50%;
  position: relative;
  animation-name: stationary_rotate;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-direction: alternate;
  color: black;
}

@keyframes stationary_rotate {
  0% {
    left: 3px;
    top: 25px;
  }
  15% {
    left: 12px;
    top: 12px
  }
  25% {
    left: 25px;
    top: 3px;
  }
  37% {
    left: 37px;
    top: 12px;
  }
  50% {
    left: 47px;
    top: 25px;
  }
  63% {
    left: 37px;
    top: 37px;
  }
  75% {
    left: 25px;
    top: 47px;
  }
  83% {
    left: 12px;
    top: 37px
  }
  100% {
    left: 3px;
    top: 25px;
  }
}

.icon-div {
  margin-left: 200px;
  width: 100px;
  height: 100px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==);
}
<div class="icon-div">
  <fa-icon class="rotate-item fa-3x" [icon]="['fas', 'search']"></fa-icon>
</div>
...