javascript - 防止径向渐变改变形状和大小

我正在尝试使css3 / js成为眼球。它看着您的鼠标指针。

如此处所示，它按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)绘制渐变并允许移动，限制形状，但是大小随移动而变化。

如何防止尺寸改变？ （我认为这是另一个属性）

编辑：这看起来很完整http://jsfiddle.net/fsg3he2u/23/使任何大小（全部相同大小）的单眼或多眼

编辑2：我决定继续将此扩展为多种尺寸和自定义颜色-http://jsfiddle.net/fsg3he2u/25/

最佳答案

我在小提琴中尝试过，效果很好。只需在形状后添加固定大小即可（150像素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);
});