復雜剪輯路徑與CSS3可視化生成器
復雜剪輯路徑和CSS3視覺生成器Clippy:對于復雜剪輯路徑和CSS3視覺生成器,SS屬性剪輯路徑允許您通過使用復雜剪輯路徑來確定并非框的所有內容都顯示在瀏覽器中。這樣,強大的效果是可能的Web應用程序Clippy照顧你的代碼。您可以立即將剪輯放在路徑上以查看結果。
CSS屬性clip path clip path是該屬性的繼承者。以前,剪輯只能是矩形的。新的屬性剪輯路徑可以創(chuàng)建幾乎任何需要的形狀剪輯路徑。
除了基本形狀(如圓、橢圓或多邊形)外,還可以使用SVG形狀作為剪裁路徑形狀。這在顯示方面實現了一種新的、以前不可能實現的靈活性。只要形狀路徑點相同,也可以對其應用CSS動畫和變換,從而產生非常微妙的運動效果。
Bennett Feely和他的CSS實驗
普通讀者已經知道Bennett Feely來自賓夕法尼亞州匹茲堡。兩個月前,我們在這里展示了我們自己的項目形象影響力。圖像效果是組合智能使用的一個例子,不同CSS屬性的現代重復允許您創(chuàng)建此時無法使用純CSS創(chuàng)建的圖像效果。imageimpact是一個可視化的工作軟件,它可以自動為您生成所需的代碼片段。
Clippy的工作方式非常相似,但看起來更加優(yōu)雅,并提供了更通用的編輯界面。這樣就很容易開始了。
26個基本形狀是前1000步的完美裝備。按鈕自定義多邊形您需要幾個步驟,因為它允許您創(chuàng)建復雜的形狀,只要您想要的圖像中的路徑點自動連接Clippy。
在預覽窗口下方,永久顯示當前CSS代碼,您可以使用剪貼板將其復制到項目中。根據顯示的代碼,也可以使用CodePen并繼續(xù)嘗試。
記住,Clippy只有生成的代碼是剪切路徑。您必須自己添加相應的圖像,并且周圍必須手動創(chuàng)建形狀文本流。為此,請使用相關形狀的數組,例如“變形”。
輸入Clippy并決定是否使用瀏覽器前綴WebKit使AppleSafari瀏覽器中的代碼正常工作。到目前為止,沒有瀏覽器完全支持剪輯路徑。剪輯路徑當前不支持微軟、Internet Explorer和邊以及Opera Mini。在Firefox中,您需要通過參考用于生成剪輯路徑的標志來設置適當的設置。
http://m.ezekroy.com/jianzhanzhishi/1256.html 復雜剪輯路徑與CSS3可視化生成器