Question

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

Answer 1

查看http://raphaeljs.com/

这是什么？

Raphaël是一个小型JavaScript库，可以简化您在网络上使用矢量图形的工作。例如，如果要创建自己的特定图表或图像裁剪和旋转小部件，则可以使用此库轻松实现。

Answer 2

要将圆圈保持在它的位置，您需要将圆的位置（实际上是div）设置为绝对，并自行设置它的左侧和顶部。在您执行的每个调整大小时，您需要重置左侧和顶部。

将圆圈保持在可以执行此操作的中心位置：

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

使用量和高度取决于您的设计，但边距应始终为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/

在CSS中创建一个带有枢轴的圆圈

2 个答案: