图像周围的动画圆形边框？答案

【问题标题】：Animated Circle Border around Image?图像周围的动画圆形边框？
【发布时间】：2022-04-14 08:54:51
【问题描述】：

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

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

【问题讨论】：

不需要分离元素，可以对图片应用相反的动画，例如：stackoverflow.com/a/51010685/8620333

标签： html css tumblr

【解决方案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">

【讨论】：