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

Question

我正在尝试制作 css3/js 眼球。它会查看您的鼠标指针。

从这里可以看出，它可以正常工作 http://jsfiddle.net/fsg3he2u/ (鼠标进入预览框)

我的主要问题在于 radial-gradient 的绘制。

径向渐变(在 '+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/

Answer 1

我在 fiddle 中试过这个，效果很好；只需在你的形状后添加一个固定大小(150px 在我看来很不错)。

 $("#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);
});