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

图像周围的动画圆边框？

1 个答案: