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着色器怎么用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！