Smart Wave Filter with CSS

xiaoxiao2021-03-06  101

Author: Fengyong Yao

"Wave" filter, look at its name, you may think of its effect, as you think, its role is to distort the object according to the vertical waveform style, thereby producing a special effect. It has 5 parameters:

"add": indicates whether the object is twisted by the wave form, which is only two values, "true" and "false", the default value is "true (non-0)", of course, you can also modify its value " FALSE "(" 0 ").

"freq": It is the frequency of ripples, that is, specify how many complete ripples need to generate on this object.

"Lightstregth": The parameter can be enhanced for the effect of ripple. Its parameter value range is from 0 to 100 integer values.

"Phase": The parameter is used to set the offset of the sine wave. This offset is usually 0, but you can change it. The value of "Phase" is between 0 and 100, which is the percentage of the wavelength at the beginning of the offset. For example, if the value is 25, the sine wave begins in the direction of 90 degrees.

"Strength": indicates the magnitude of the waveform, or it can be easily understood as the extent of distortion. Below we use the "Wave" filter to do a few effects:

1, waveform text

Load the "Wave" filter into the text, you can get the effect of the waveform text, please see:

Figure 1 Loads "Wave" filter effect on the text

Is it very interesting to the above effect, isn't it? It is very simple to make, the specific steps are as follows:

1) Make a "WAVE" filter, we have named "Wave1", produced complete, and there will be as follows between the and of the source code: