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

我想做一个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/

来源

2015-06-06 RozzA

我已经在Rajkumar建议的方向上工作，但想通过改变'eyeballer' div尺寸来轻松调整眼球大小。我结束了这个 - http://jsfiddle.net/0cmjrt3t/ – RozzA

...但是我**真的**喜欢答案乔恩建议，并且修改渐变停止点要容易得多。所以我想出了这个 - http://jsfiddle.net/fsg3he2u/21/ – RozzA

我在小提琴中试过这个，它工作的很好;只需在形状后添加一个固定的大小（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); 
});

来源

2015-06-06 01:24:14

与一些调整，这证明了一个更好的解决方案可调整的eyeballer比我正在工作 – RozzA

而不是使用百分比，使用绝对值梯度距离： 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)');

来源

2015-06-06 01:17:16

我正在这个方向工作，但它证明相当凌乱，如果你想要一个容易调整大小的eyeballer – RozzA

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

回答

相关问题