html - 如何围绕圆圈旋转顶部边界？

Question

我正在尝试实现此 CSS 动画，但不知道该怎么做。我想围绕圆圈旋转顶部边框，但整个东西都在旋转，包括文本。我只想旋转 360 度的顶部边框。下面是我的代码片段:

div#skill {
    /*background: url(../img/white.jpg) center no-repeat;
    background-size: cover;*/
    background-color: rgba(144, 0, 64,0.8);
    color: #fff;
    padding: 10px 0;
}

div#skill h3 {
    color: #fff;
    text-transform: none;
}

div#skill .row {
    margin-right: -15px;
    margin-left: -15px;
    padding: 15px 150px;
}

div#skill .circle {
    height: 120px;
    width: 120px;
    border: 5px solid #ccc;
    border-top-color: orange;
    border-radius: 60px;
    background-color: #74002f;
    /*Making the top border to spin*/
    animation: spin 2s linear infinite;
}

div#skill .circle:after {
    content: url(../img/icons/arrow-point-to-right.png);
    position: absolute;
    top: 25px;
    right: 0;
}

div#skill .circle.last:after{
    display: none;
}

.circle .caption {
    font-weight: bold;
    padding: 20px 24px;
}

.caption h6 {
    font-size: 15px;
}


/*Animation on circle*/
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

<div id="skill">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>My development process</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="circle">
                        <div class="caption text-center">
                            <h6>1</h6>
                            <h6>Concept</h6>
                        </div>
                    </div>  
                </div>
                <div class="col-md-3">
                    <div class="circle">
                        <div class="caption text-center">
                            <h6>2</h6>
                            <h6>Design</h6>
                        </div>
                    </div> 
                </div>
                <div class="col-md-3">
                    <div class="circle">
                        <div class="caption text-center">
                            <h6>3</h6>
                            <h6>Code</h6>
                        </div>
                    </div> 
                </div>
                <div class="col-md-3">
                    <div class="circle last">
                        <div class="caption text-center">
                            <h6 class="text-center">4</h6>
                            <h6 class="text-center">Launch</h6>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h3>about my skills</h3>
                </div>
                <div class="col-md-6">
                    
                </div>
            </div>
        </div>
    </div>

请帮帮我!非常感谢您在此方面的帮助。提前致谢!

Answer 1

div#skill {
  /*background: url(../img/white.jpg) center no-repeat;
    background-size: cover;*/
  background-color: rgba(144, 0, 64, 0.8);
  color: #fff;
  padding: 10px 0;
}
div#skill h3 {
  color: #fff;
  text-transform: none;
}
div#skill .row {
  margin-right: -15px;
  margin-left: -15px;
  padding: 15px 150px;
}
div#skill .circle {
  height: 120px;
  width: 120px;
  border: 5px solid #ccc;
  border-top-color: orange;
  border-radius: 50%;
  background-color: #74002f;
  /*Making the top border to spin*/
  animation: spin 2s linear infinite;
}
div#skill .circle:after {
  content: url(../img/icons/arrow-point-to-right.png);
  position: absolute;
  top: 25px;
  right: 0;
}
div#skill .circle.last:after {
  display: none;
}
.circle .caption {
  font-weight: bold;
  padding: 20px 24px;
}
.caption h6 {
  font-size: 15px;
}
/*Animation on circle*/

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.col-md-3 {
  position: relative;
}
.caption {
  position: absolute;
  z-index: 10;
  text-align: center;
  left: 65px; /* (120px width + 5+5px border )/2  */
  transform: translate(-50%, 0);
}

<div id="skill">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h3>My development process</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>1</h6>
          <h6>Concept</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>2</h6>
          <h6>Design</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>3</h6>
          <h6>Code</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6 class="text-center">4</h6>
          <h6 class="text-center">Launch</h6>
        </div>
        <div class="circle last">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h3>about my skills</h3>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>