Clever Use of the CSS mask filter

The mask filter can create a rectangular mask for HTML element objects on a webpage. What is a mask? If you have used a mask in flash, you will know that. In fact, you can also understand the mask. It is equivalent to covering the object with a colored cloth, but the content is dug. If you still don't understand it, take a look at the following picture and let me explain it to you again.

Figure 1 mask filter effect 1

The above mask filter uses such a deep color, which allows you to clearly see the effect. Let's take a look at the mask filter parameter: it only has one parameter color, that is, the mask color is in the format of # rrggbb. You only need to select a proper color in dw3. The above mask filter is OK.CodeThat is:. mask1 {filter: mask (color = #00ff00)}. In the following example, you will see that the filter color is not the main color, but the key is the background color.
Below we use the mask filter to do a few special effects:
1. Colorful texts

Figure 2 mask filter effect 2

How is the above effect? It's good! A bit like an image, isn't it? This is the effect of the mask filter. Here a white filter is used. The code is. mask1 {filter: mask (color = # ffffff )}. The colorful text color is actually the background color. The method is also very simple, that is, to insert a 1*1 Table, add a multi-color background to the table, input text in the table, and load a mask filter to the cell, isn't it hard ?!
2. searchlight animation effect
The searchlight effect below requires a little effort to use flash. I can't think of it as a CSS Filter! Because the searchlight effect is dynamic, I can only show you two process pictures. To see the dynamic effect, you can create one or go to my house based on my instructions (http:/fym888.go.163.com) see.

Figure 3 searchlight animation effect 1

Figure 4 searchlight animation effect 2

The following describes the production method:
This effect is a little more complex than the above example, but it is just a few more clicks.
1. Insert a layer called "parent layer", which is used to display the content (text or image ). Insert a layer on the layer, which is called a child layer. It is mainly used to produce the mask effect.
2. Set the display window on the attribute Panel of the parent layer, that is, set the "clip" attribute of the layer. The relative coordinates are used in this attribute, where: L and T are the coordinates in the upper left corner, and R and B are the coordinates in the lower right corner. The child layer will be displayed only in the window you set later. Shows the set layer property parameter panel:

Figure 5 layer attribute panel

The parent layer here is "layer4". Here I use the entire parent layer as a display window, that is, it is visible when the child layer moves to the parent layer, invisible outside the parent layer.
3. We insert a circular image with a transparent background on the child layer. The purpose of the circular image here is that the projection of the searchlight is circular, and the image part outside the circular area must be transparent, otherwise, you will see a Rectangular Box moving. Then, load a mask filter with the same color as the background color of the parent layer on the child layer, and enlarge the child layer so that it can completely overwrite the content of the parent layer, in this way, the content on the parent layer of the browser can only be seen in the circular image, which is exactly what we want.
4. Of course, if you want to generate a searchlight, you need to make the circular area move. This requires the Dreamweaver timeline function. Drag the child layer in dw3 so that the image on it overwrites the header of the parent layer content. Press Ctrl + F9 to bring up the timeline panel and drag the child layer to the timeline panel, drag the last frame to the second frame, insert a key frame at the second frame, and overlap the image of the child layer with the end of the content of the parent layer, select "loop" and "Auto" on the timeline panel. Everything is OK.
After a complex animation is completed, press F12 to see if it is cool ?!