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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: