Question

我正在尝试使用设计创建以下效果：http://i.imgur.com/RIaSA3N.png

我可以创建一个很好的镶边圆圈 - 但部分完成圆圈的问题证明是困难的。使用Javascript和Canvas有很多不同的方法可以做到这一点，但我找不到在CSS中实现它的可靠方法。我不介意为不同的值设置许多不同的类，但是有没有优雅的解决方案？

Answer 1

已更新：使用纯CSS3非常有可能。

（您应该可以打开以下演示并根据您的结果进行自定义）

在数字之间使用@keyframes到animate。你需要添加它。

以下是使用@keyframes 'rotate' {进行循环动作。

body { background: #222; }

.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #333;
  border-radius: 50%;
}

.inner-circle {
  width: 92%;
  height: 92%;
  background: #222;
  border-radius: 50%;
  margin: auto;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
}

.spinner {
  height: 0;
  width: 0;
  border-radius: 50%;
  border-right: 50px solid rgba(255,255,255,0.3);
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid transparent;

  -webkit-animation: rotate 1.6s infinite;

          animation: rotate 1.6s infinite;
}

@-webkit-keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<div class="circle">
  <div class="spinner"></div>
  <div class="inner-circle"></div>
</div>

CSS中部分完成的圆圈（带文字）

1 个答案: