Анимированный круг вокруг изображения? - PullRequest
Новая
       19

Анимированный круг вокруг изображения?

1 голос
/ 21 апреля 2019

Я пытаюсь анимировать окружность вокруг изображения, но мое кодирование заставляет изображение вращаться вместе с границей круга, есть ли способ остановить вращение изображения, но сохранить вращение границы?помогите пожалуйста. 

.sidebar img { position:absolute; left:105px; top:30px; width:110px; height:110px; border-radius:50%; -webkit-filter:grayscale(0%); border-radius:50%; border:10px solid c5c6cc ; border:10px dashed #c49683; animation-name: spinning-circle;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  width: 110px;
  height: 110px;
   outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
}

@-webkit-keyframes spinning-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

1 Ответ

0 голосов
/ 21 апреля 2019

Вам нужно разделить элементы вращения и изображения, как показано ниже, 

img {
    position: relative;
    left: 107px;
    top: 32px;
    border-radius: 50%;
    width: 110px;
    height: 110px;
}
.image {
    position: absolute;
    left: 105px;
    top: 30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    -webkit-filter: grayscale(0%);
    border-radius: 50%;
    border: 10px solid c5c6cc;
    border: 10px dashed #c49683;
    animation-name: spinning-circle;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    width: 110px;
    height: 110px;
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
}

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
<div class="image">
</div>
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
...