html - 带文本的主干圆旋转

Question

我是 backbone 的新手... 我想增加圆圈的大小... 你们能告诉我如何将圆的大小加倍吗... 在下面提供我的代码... 甚至我想让它慢慢旋转……以及如何在圆圈内输入文字……

.box {
  border-radius: 300px;
  width: 20px; height: 10px;
  padding: 5px 0;
  color: #fff;
  font: 10px/10px Arial;
  text-align: center;
  position: absolute;
}  

Answer 1

要更改圆直径，您可以更改 CSS，例如

.box-view {
  width: 60px; height: 60px;
  float: left;
  position: relative;
  margin: 8px;    
}

.box {
  border-radius: 300px;
  width: 40px; height: 30px;
  padding: 5px 0;
  color: #fff;
  font: 10px/10px Arial;
  text-align: center;
  position: absolute;
}

要更改显示的文本，您可以更改模板:

<script type="x-template" id="underscore-template">
  <div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
    Count : <%= content %>       
  </div>
</script>

最后，为了让它们移动得更慢，您可以延迟对动画函数的调用:

var backboneAnimate = function() {
    for (var i = 0, l = boxes.length; i < l; i++) {
      boxes[i].tick();   
    }
    window.timeout = _.delay(_.defer, 50, backboneAnimate);
};

结果:http://jsfiddle.net/Fr94w/