Question

HTML：

<div class="ball-5"></div>

如何旋转360度，只有div的边框颜色？

我尝试了以下但是旋转了我不想要的整个div：

.ball-5 {
    -webkit-animation-name: Rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: Rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: Rotate;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes Rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes Rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

我希望颜色围绕div而不是div而不是div的内容进入圈内。

Answer 1

我能想到的唯一解决方案是使用伪元素（或嵌套元素）来分离边框和中心。

＆＃13;

.ball-5 {
  background: #fff;
  border-radius: 500px;
  box-shadow: 0px 0px 10px #222;
  padding: 10px;
  cursor: pointer;
  overflow:hidden;
  border:0px;
}

.ball-5 {
  position:relative;
  width: 115px;
  height: 70px;
}

.ball-5:before{
  display:block;position:absolute;
  top:-55px;left:-30px;
  content:"";width:0px;height:0px;
  border: solid 100px;
  border-top-color:  rgba(156, 206, 228, 1);
  border-right-color: rgba(122, 183, 142, 1);
  border-bottom-color: rgba(255, 177, 38, 1);
  border-left-color: rgba(241, 139, 41, 1);
}

.ball-5:after{
  display:block;position:absolute;
  top:10px;left:10px;
  content:"";
  width: 115px;
  height: 70px;
  background:white;
  border-radius: 500px;
}

.ball-5:before {
  animation: Rotate 2s infinite linear;
}

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="ball-5">
</div>

＆＃13;

Answer 2

我会说它有一个div，它有一个透明的背景，是具有边框的div。然后div在顶部旋转，看起来它是实际元素旋转的边界。

试试这个：

#containerDiv {
  position: relative;
}
#div, #div2 {
  position: absolute;
  left: 0px; top: 0px;
}
#div2 {
  z-index: 5;
  background: transparent;
  border: 1px black solid;
}
#div {
  background: #f00;
}

div2将是动画的，div将是非边界的。容器里面会有div和div2。

如何旋转div的边框颜色

2 个答案: