предотвратить радиальный градиент от изменения формы и размера

Question

Я пытаюсь сделать css3/js eyeball. Он смотрит на указатель мыши.

Как можно видеть здесь, это своего рода-работ http://jsfiddle.net/fsg3he2u/ (мыши в окне предварительного просмотра)

Моя главная проблема заключается в розыгрыше radial-gradient.

radial-gradient(at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888) рисует градиент и позволяет перемещаться, но форма и размер изменяются при движении. При некотором поиске я обнаружил атрибут circle: radial-gradient(circle at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888) рисует градиент и позволяет перемещаться, ограничивает форму, но размер изменяется при движении.

Как я могу предотвратить изменение размера? (Я предполагаю, что это еще один атрибут)

Edit: это выглядит довольно полный http://jsfiddle.net/fsg3he2u/23/ делает один или несколько глаз любого размера (все одинакового размера)

Edit 2: я решил продолжить расширение этого для нескольких размеры и пользовательские цвета - http://jsfiddle.net/fsg3he2u/25/

Answer 1

Я пробовал это в скрипке, и это сработало хорошо; просто добавьте фиксированный размер после вашей формы (150px выглядит довольно приятным IMO).

$("#eyeballer").css('background','radial-gradient(circle 150px at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888)'); 
    //var perXY = "(" + perX + ", " + perY + ")"; 
    //$("span:first").text("(perX, perY) - " + perXY); 
}); 

Answer 2

Вместо того, чтобы использовать проценты, использовать абсолютные значения градиента расстояний: http://jsfiddle.net/tsr2b9jh/

$("#eyeballer").css('background','radial-gradient(circle at '+perX+'% '+perY+'%, #000 50px, #469B98 55px, #3083B7 80px, #306BB7 90px, #FFF 100px, #DE8888 120px)');