如何使用鼠标悬停 360 度旋转制作渐变边框

Question

.clients-img::after {
 content: '';
 position: relative;
 background-image: url('https://i.stack.imgur.com/Y2vyB.png');
 background-repeat: no-repeat;
 float: left;
 margin-left: 15px;
 transition: all 1.8s ease;
 width: 135px;
 height: 135px;
}
.clients-slider-inside img {
 border-radius: 50%;
 position: absolute;
 padding: 14px;
 left: 0px;
 top: 0px;
 width: 135px;
 height: 135px;
}
.clients-img:hover::after {
 transform: rotate(360deg) translate(0px);
}

<div class="clients-slider-inside">
<div class="clients-img">                                                        <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img">                                                    </div>
</div>

鼠标悬停旋转 360 度，鼠标移出没有任何效果。 这种类型的渐变边框。所以你能帮我完成完美的圆圈旋转吗？

Answer 1

您可以避免使用图像并在容器背景上使用 multiple linear-gradient 重新创建渐变。然后想法是旋转整个容器并以相反的方向旋转图像，以便创建背景旋转的效果。

.clients-img {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(-15deg,#6fda44 25%, #fff 80%);
  transition:1s all;
}

.clients-img img {
  border-radius: 50%;
  width: 135px;
  height: 135px;
  padding: 15px;
  vertical-align: top;
  transition:1s all;
}

.clients-img:hover {
  transform: rotate(360deg);
}

.clients-img:hover img{
  transform: rotate(-360deg);
}

<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>