The css| Filter Wave property is used to disrupt objects in a vertical ripple style. Its expression is as follows:
Filter:wave (False), freq= frequency, lightstrength= enhances light efficiency,
phase= offset, strength= strength)
The expression of the wave attribute is still more complex, and there are five parameters. The add parameter has two parameter values: True means that the object is disturbed by the ripple style; false means not upset;
The freq parameter refers to the frequency at which the ripple is generated, specifying how many complete ripples are required to be generated on the object altogether. The Lightstrength parameter is for the resulting ripple to enhance the effect of the light. Parameter values can be from 0 to 100. The phase parameter is used to set the offset from which the sine wave begins. The universal value for this value is 0, and its variable range is from 0 to 100. This value represents the percentage of the wavelength at the beginning of the offset. For example, the value is 25, representing the sine wave starting in the direction of 90 degrees (360*25%).
With a lot of talk, let's look at an example first. For example, the following picture:
Below we add wave effect to the above page, the code is as follows:
<HTML>
<title> wave css</title>
& Lt;style> //* define CSS style start *//
<!--
. leaf{ position:absolute;top:10;width:300
Filter:wave (add=true,freq=3,lightstrength=100,
Phase=45,streng TH=20);
//* set the leaf style, absolute positioning, wave properties, generated 3 ripple, light intensity 100, ripple
starting from 162 degrees (360*45%), amplitude of 20*
IMG{POSITION:ABSOLUTE;TOP:110;LEFT:40;
Filter:wave (add=true,freq=3,lightstrength=100,
phase=25,strength=5);
//* set img style, absolute positioning, wave properties, generate 3 ripple, light intensity is 100, ripple starts at
90 degrees, amplitude is 5*//
-->
</st Yle>
<body>
<div class= "Wave" //* define Div area as W Ave Class *//
<p style= "Font-famil"Y:lucida handwriting;
font-size=72pt; font-weight:bold;
Color:rgb (189,1,64); ">leaf</p>
//* set font name, size, weight, color *//
</div>
<p>< IMG src=http://edu.cnzz.cn/newsinfo/"ss01044.jpg" ></p> //* Import pictures *//
</body>
The effect of this code implementation is as follows:
If the wave parameters to do a random change, you will achieve a variety of effects, please see another effect: (the following figure):
In fact, this effect only increases the value of the Freq parameter, reducing the value of strength, lightstrength can be. You can also try more, change other parameter values, and can achieve many different effects.