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 head> of the source code:
.wave1 {filter: Wave (add = true, freq = 6, lightstrength = 10, Phase = 0, strENGTH = 3)}
->
style>
2) Insert a table, enter text in the table, and set the font size and color of the text.
3) Load the "Wave" filter on
According to my practice, the filter is loaded to
2, curved small flowers
Load the "Wave" filter to the picture, which will cause the image to generate a waveform-bending effect, please see:
The effect after loading the "Wave" filter
One of the above left is the original picture, and the "Wave" filter is loaded on the middle. }, One picture on the right is also loaded, but the code is .wave2 {filter: Wave (add = true, freq = 6, lightstreamth = 30, Phase = 0, strength = 3)}, that is, "LightstRength" Set to "30", so the effect has a significant change. Since the "WAVE" filter can be loaded directly into the picture, it is more convenient to make. The specific production steps are as follows: 1) Insert a picture.
2) Use the mouse to click on the picture, and then click the CSS icon on the quick start bar. In the pop-up dialog box, select "Wave" filter, it is OK, it is so simple!
I am here to use a GIF picture with a transparent background. If it is the same as ordinary pictures, and the border is also a shadow, please see the picture below:
In general, the value of "Lightstregth" is around "30", and it is necessary to debug several times according to the actual situation to achieve the best results.