Question

我正在尝试制作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/

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)');

防止径向梯度改变形状和尺寸

2 个答案: