Создание круга с центром в CSS

Question

Я хотел спросить, возможно ли сделать круг с центром в CSS в CSS, потому что я делаю круг с изменяемыми размерами, и когда я делаю его нормально, он работает неправильно.Я использую jQuery, чтобы сделать изменение размера плавным, но круг не находится в центре, а находится сверху.Поэтому, когда я вызываю функцию изменения размера, размер окружности уменьшается, а не обычно.

Answer 1

Чтобы удержать круг на своем месте, вам нужно установить абсолютную позицию круга (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/

Answer 2

Проверьте это http://raphaeljs.com/

Что это?

Raphaël - это небольшая библиотека JavaScript, которая должна упростить вашу работу с векторной графикой в ​​Интернете.Например, если вы хотите создать свой собственный график или обрезать изображение и повернуть виджет, вы можете легко и просто добиться этого с помощью этой библиотеки.