CSS3著色器怎么用

這篇文章主要講解了“CSS3著色器怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3著色器怎么用”吧！

由Adobe、蘋果、Opera提出的CSS著色器（CSS Shader）將為CSS技術帶來3D圖形的支持。

著色器在Flash、游戲和其他圖形相關的應用中使用非常普遍，它本質上是一個小程序，提供了一種特殊效果（例如失真、模糊或者旋渦效果），其行為由輸入參數（失真、模糊或旋渦的量）控制。

著色器有兩種：一種是頂點著色器，常用來對場景中的幾何圖形坐標進行矩陣變換，它是完全可編程的，你可以以任何你想要的方式修改幾何圖形；另一種是片段著色器（也叫像素著色器），它決定每個三角形像素的最終顏色，現代3D游戲中的動態光源效果常常就是由它完成的。CSS著色器允許開發者同時使用頂點著色器和片段著色器。

CSS著色器對于生成動態效果非常有用，是CSS濾鏡效果、轉換和動畫規范的有力補充，也為濾鏡效果規范的feCustom元素提供了一種解決方案。

css3的濾鏡效果為任意網頁內容提供了一種應用一系列有限基本濾鏡的方式，而CSS著色器提供了一種濾鏡效果的可擴展機制，允許開發者自定義著色效果，以此來為HTML元素實現豐富的可視化動畫效果。此外，CSS著色器為濾鏡模型引入了頂點著色器的概念，它通過為元素盒子應用頂點著色器的方式帶來了任意改變文檔中元素形狀的能力。

CSS著色器的另外一個強大之處還在于它能夠應用在所有的HTML元素上，包括圖片、Canvas、SVG、視頻等。

這種波紋效果主要的CSS代碼如下（請注意目前還未有瀏覽器支持）：

.waving{

filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50);

transition-property: filter;

transition-duration: 0.2s;

}

在上面的代碼里，濾鏡效果規范中定義的filter屬性通過custom()方法進行擴展，而custom()方法可以和現有的濾鏡方法結合起來使用。而url('wave.vs')引用了一個用戶定義的頂點著色器，用于生成波紋效果。20 20參數控制頂點的網格粒度，使波紋平滑。phase（相位）和amplitude（幅度）參數控制正弦波曲線的形狀和強度。

W3C推薦采用GLSL（OpenGL Shading Language，OpenGL著色語言）來編寫自定義CSS著色器。CSS著色器的加入提高了動畫的可編程性，將會使CSS動畫效果更為強大和靈活，讓開發者有更多方式來創造出更有想象力的動態效果和網頁。

需要注意的是，CSS著色器規范目前只是草案，還可能有結構和細節上的調整。它未來有可能集成在濾鏡效果規范中，或者成為一個單獨的模塊。

感謝各位的閱讀，以上就是“CSS3著色器怎么用”的內容了，經過本文的學習后，相信大家對CSS3著色器怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！