图像周围的动画圆边框

Question

>我正在尝试围绕图像制作一个圆圈动画，但我的编码使图像与圆圈边框一起旋转，有没有办法阻止图像旋转但保持边框旋转？ 请帮忙。

.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);
  }

Answer 1

您需要像下面这样分离微调器和图像元素，

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">