Author: Fengyong Yao
Using CSS in web pages, this is well known, but the use of CSS filters is not much. In fact, the 0CSS filter is also very convenient in Dreamweaver3, and can make the text a similar image, but it is slim than the picture. Do not believe? You look at the following effects. Today I am introduced here is the clever usage of Mask filters.
The MASK filter can make a rectangular mask for the HTML component object on the web, about what is a mask? If you use the mask in Flash, you will know, that is, it looks like. In fact, you can also understand this, which is equivalent to covering the object with a colored cloth, but the content is dug. If you still don't understand, look at the picture below and then listen to you.
Figure 1 Mask filter effect 1
In this Mask filter in this Mask filter, it is mainly to let you see the effect clearly. Let's take a look at the parameters of the Mask filter: it has only one parameter color, that is, the color of the mask in the #RRGBB format color value. As long as you choose a suitable color in DW3, you will be OK. If the Mask filter code above is: .mask1 {filter: mask (color = # 00ff00)}, you will see in the following example, In fact, the color of the filter is not mainly, the key is the color of the background.
Below we use the Mask filter to do a few effects:
1, colorful text
Figure 2 Mask filter effect 2
How is this effect on it, not bad! Is it a bit icon image? This is the effect of the Mask filter. Here, a white filter is used, and its code is: .mask1 {filter: mask (color = # ffffff)}. Colorful text colors are actually the color of the background. It is also very simple, it is inserted into a 1 * 1 form, add a colorful background, enter text in the form, load a MASK filter for cells, is also done, is not difficult? !
2, the searchlight effect below the light animation effect, you have to spend the god with Flash, you can't think of using the CSS filter! Because the search lamp is dynamic, I can only catch two process pictures to see you, to see the dynamic effect, then you will do one or go to my home according to my handle (http:/fym888.go.163.com) Look.
Figure 3 Search Light Animation Effect 1
Figure 4 Search Light Animation Effect 2
Here is the method of making:
This effect is complicated than the above example, but it is more than a few mice.
1. Insert a layer, I call it "parent layer", which is used to display content (text or picture). Insert a layer on this layer, I call it a sub-layer, which is mainly used to generate a mask effect.
2. Set the display window on the attribute panel of the parent layer, that is, set the "clip" attribute of the layer, in which the relative coordinates are used, where: L, T is the upper left corner coordinate; R, B is the upper right corner coordinate. The sublayer will only be displayed in the window you set. Set good layers attribute parameter panels as shown below:
Figure 5 layer attribute panel
My parent layer here is "layer4", I am here as a display window here, that is, when the sublayer moves to the parent layer, it can be seen, which is not visible outside the parent layer.
3. We insert a background transparent circular picture on the sublay, here is the purpose of the circle pattern is mainly the projection of the lighting light is a circular shape, and the image portion of the circle must be transparent, otherwise it will be a rectangular side. Box is moving. Then load a color with the parent layer background color with the parent layer on the sublayer, and the sublayer is large, so that it can completely cover the content of the parent layer, so that the content on the parent layer in the browser is only circular. The part can be seen, this is what we hope. 4. Of course, to generate the effect of the searchlight, it is necessary to move the round area, which is to use Dreamweaver's timeline function. The DW3 is dragged to the sublayer, so that the image on which the image is exactly covered with the parent layer, press "Ctrl F9", call up the timeline panel, drag the sublay to the timeline panel, drag the last frame To 100 frames, one keyframe is inserted on the 50th frame, and the image of the sublayer is coincident with the tail of the parent layer content, and "loop" (loop playback) and "Auto" (Auto Play) are selected on the timeline panel. Everything OK.
