爲分層圖像創建動畫徑向蒙版？

我有堆積在彼此頂部的兩個圓形的SVG圖像。頂部圖像是灰度。底部圖像是全綵的。

我想要做的是，通過1-100的百分比，刪除頂部圖像，像掃描基於數字的時鐘表面的手。假設我在25％。從12點到3點，灰度圖像會像餡餅楔子一樣消失）顯示下面相同的全色圖像。（更清晰地看到圖片）。

這是可以做到與HTML5/CSS？ JQuery的？我還沒有考慮其他方式？

2015-06-25 Eric Keith Hill

這可以修改得到你想要的：[JS小提琴]（http://jsfiddle.net/swfour/32Y8U/181/）。從[這裏]得到它（http://stackoverflow.com/questions/23385924/css-animate-circle-border-filling-with-color）。 – blex

我正在爲此使用剪輯蒙版和弧線的解決方案。但是，我的解決方案是依賴於SVG標記（這可能不是一個很好的答案）... –

這可能是你在找什麼！ http://stackoverflow.com/questions/23385924/css-animate-circle-border-filling-with-color –

這是我想出的http://jsfiddle.net/3a5eubcv/的小提琴。基本上你的背景圖像將是紅色的圓形，然後你有2個面具漂浮在它（與半透明背景divs）。對不起，沒有爲它添加JavaScript，但對於你25％= transform:rotate(90deg);。當你達到50％時，正確的面具應該停止，左邊的面具應該繼續。 75％= .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);}。我確信代碼可以簡化，但希望這可以讓你去。

來源

2015-08-05 15:13:14 Gho

爲分層圖像創建動畫徑向蒙版？

回答

相關問題