帶文字的骨幹圈旋轉

我是新來的骨幹... 我想增加圓圈的大小... 你能告訴我如何加倍圓圈的大小... 在下面提供我的代碼... 甚至我想它旋轉slowly..and如何進入這個圈子裏面的文字...帶文字的骨幹圈旋轉

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

來源

2014-03-07 user3299657

要更改圓直徑，請更改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/

來源

2014-03-07 07:55:02

感謝您的回覆......你能告訴我如何使圓圈的邊界單獨t o旋轉，而不是使整個圓圈都帶有文字旋轉... – user3299657

您可能需要使用圓形的背景元素來移動，並使用另一個元素來包含文本。 –

你可以更新小提琴混亂的請求 – user3299657

試試這個：

.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/

來源

2014-03-07 07:41:16

帶文字的骨幹圈旋轉

回答

相關問題