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:
<title> Wave css</title>
<style>//* define CSS style start *//
<!--
. leaf{position:absolute;top:10;width:300;
Filter:wave (add=true,freq=3,lightstrength=100,
PHASE=45,STRENGTH=20);}
* Set the leaf style, absolute positioning, wave properties, generate 3 ripple, light intensity of 100, ripple
Starting from 162 degrees (360*45%), the amplitude is 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 strength of 100, ripple from
Starting at 90 degrees, the amplitude is 5*//.
-->
</style>
<body>
<div class= "Wave" >//* define the div area for wave class *//
<p style= "Font-family:lucida handwriting;
font-size=72pt; font-weight:bold;
Color:rgb (189,1,64); ">Leaf</p>
* Set font name, size, weight, color *//
</div>
<p></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 to change the value of the parameter, but also to achieve a number of different effects.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
