防止徑向漸變改變形狀和大小

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

防止徑向漸變改變形狀和大小

回答

相關問題