带文字的骨干圈旋转答案

【问题标题】：backbone circle rotation with text带文字的骨干圈旋转
【发布时间】：2014-03-07 02:55:03
【问题描述】：

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

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

【问题讨论】：

标签： html css backbone.js backbone-views backbone-events

【解决方案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/

【讨论】：

感谢您的回复...您能告诉我如何让圆圈的边框单独旋转，而不是让带有文本的整个圆圈旋转...。
您可能需要使用背景元素让圆圈移动，并使用另一个元素来包含文本。

【解决方案2】：

试试这个：

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

.box {
  border-radius: 50%;
  width: 40px; height: 40px;
  color: #fff;
  font: 10px/40px Arial;
  text-align: center;
  position: absolute;
}

http://jsfiddle.net/9sc4Q/

【讨论】：