Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use CSS3 shader". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use CSS3 shader.

The CSS shader (CSS Shader) proposed by Adobe, Apple and Opera will bring 3D graphics support to CSS technology.

Shaders are widely used in Flash, games, and other graphics-related applications. It is essentially a Mini Program and provides a special effect (such as distortion, blur or vortex effect) whose behavior is controlled by input parameters (the amount of distortion, blur or vortex).

There are two kinds of shaders: one is the vertex shader, which is often used to matrix transform the geometry coordinates in the scene, which is completely programmable and you can modify the geometry in any way you want; the other is the fragment shader (also known as the pixel shader), which determines the final color of each triangular pixel, which is often the result of dynamic lighting effects in modern 3D games. CSS shaders allow developers to use both vertex shaders and fragment shaders.

CSS shaders are useful for generating dynamic effects, are a powerful complement to CSS filter effects, transformations, and animation specifications, and provide a solution for feCustom elements that regulate filter effects.

Css3 filter effects provide a way to apply a limited set of basic filters to any web content, while CSS shaders provide an extensible mechanism for filter effects that allow developers to customize shading effects to achieve rich visual animation effects for HTML elements. In addition, the CSS shader introduces the concept of vertex shaders to the filter model, which brings the ability to arbitrarily change the shape of elements in the document by applying vertex shaders to element boxes.

Another power of the CSS shader is that it can be applied to all HTML elements, including pictures, Canvas, SVG, video, and so on.

The main CSS code for this ripple effect is as follows (please note that browsers do not support it yet):

.waving {

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

Transition-property: filter

Transition-duration: 0.2s

}

In the above code, the filter property defined in the filter effects specification is extended by the custom () method, while the custom () method can be used in conjunction with existing filter methods. Url ('wave.vs') refers to a user-defined vertex shader to generate a ripple effect. The 20-20 parameter controls the mesh granularity of the vertices to smooth the ripples. The phase (phase) and amplitude (amplitude) parameters control the shape and intensity of the sine wave curve.

The W3C recommends GLSL (OpenGL Shading Language,OpenGL shading language) to write custom CSS shaders. The addition of CSS shader improves the programmability of animation, which will make CSS animation more powerful and flexible, and give developers more ways to create more imaginative dynamic effects and web pages.

It is important to note that the CSS shader specification is currently only a draft and there may be structural and detailed adjustments. It may be integrated into the filter effect specification or become a separate module in the future.

Thank you for reading, the above is the content of "how to use CSS3 shader", after the study of this article, I believe you have a deeper understanding of how to use CSS3 shader, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.