javascript - 在CSS中以中心为中心制作一个圆圈

Question

我想问问是否有可能在 CSS 中制作一个以中心为中心的圆，因为我正在制作一个可调整大小的圆，当我正常制作它时它无法正常工作。我正在使用 jQuery 使调整大小平滑，但圆的枢轴不在中间，而是在顶部。因此，当我调用调整大小函数时，圆圈会向下而不是正常调整大小。

Answer 1

要使圆圈保持原位，您需要将圆圈(实际上是 div)的位置设置为绝对位置，并自行设置圆圈的左侧和顶部。在每次调整大小时，您都需要重置左侧和顶部。

要使圆圈位于某物的中心，您可以这样做:

width:100px;
height:100px; 
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

with 的数量和高度取决于您的设计，但边距应始终为 div 大小的一半(导航)

为了调整圆的大小，我使用了范围输入。并做了这个 jQuery 代码:

$('input[type="range"]').change(function(){
    $('#c')
        .width($(this).val())
        .height($(this).val())
        .css('border-radius', $(this).val()/2)
        .css('margin-left', $(this).val()/-2)
        .css('margin-top', $(this).val()/-2);
});

您可以清理这段代码，但它确实有效!看例子:

http://jsfiddle.net/mohsen/4PHMj/

更新:

这是更干净的代码:http://jsfiddle.net/mohsen/4PHMj/7/