Clever use of CSS MASK filter_Basic tutorial

The Mask filter can create a rectangular mask for the HTML element object on the web page. What is a mask? If you have used masks in Flash, you will know that it is like that. In fact, you can also understand masking in this way, which is equivalent to covering the object with a piece of colored cloth, but the content is dug out. If you still don’t understand, just look at the picture below and let me explain it to you in detail.

Figure 1 Mask filter effect 1

Use such a dark color in the mask filter above , mainly so that you can clearly see the effect. Let's take a look at the parameters of the mask filter: It has only one parameter Color, which is the color value of the mask in the format of #RRGGBB. You just need to choose a suitable color for it in DW3. For example, the mask filter code above is: .mask1 { filter:mask(color=#00ff00) }. In the following example, you will see, In fact, the color of the filter is not the main thing, the key is the color of the background.
Next we use the mask filter to create several special effects:
1. Colorful text

Figure 2 mask Filter Effect 2

How about the above effect? ​​It’s not bad! It's a bit like an image, isn't it? This is the effect of the mask filter. A white filter is used here, and its code is: .mask1 { filter:mask(color=#ffffff) }. The colorful text color is actually the color of the background. The production method is also very simple, just insert a 1*1 table, add a multi-colored background to the table, enter text in the table, load a mask filter to the cell, and you are done. Not difficult, right? !
2. Searchlight animation effect
The following searchlight effect requires a lot of effort to use Flash, but I never thought it could be done using CSS filters! Since the searchlight effect is dynamic, I can only capture two process pictures for you to see. If you want to see the dynamic effect, then you can make one according to what I said or go to my house (http://fym888.go.163.com) look.

Figure 3 Searchlight animation effect 1

Figure 4 Searchlight animation effect 2

Here is the production method:
This effect is a little more complicated than the above example, but it only requires a few more mouse clicks.
1. Insert a layer, which I call the "parent layer". This layer is used to place the content (text or pictures) to be displayed. Insert a layer on top of this layer, which I call a sublayer, and it's mainly used to create a masking effect.
2. Set the display window on the property panel of the parent layer, that is, set the "Clip" attribute of the layer. In this attribute, relative coordinates are used, where: L and T are the coordinates of the upper left corner; R and B is the coordinate of the lower right corner. Subsequent sublayers will only be displayed in the window you set.The set layer attribute parameter panel is as shown below:

　Figure 5 Layer attribute panel

Here I am The parent layer is "Layer4". I use the entire parent layer as the display window here, that is, it is visible when the child layer moves to the parent layer, and is not visible outside the parent layer.
3. We insert a circular image with a transparent background on the sub-layer. The main purpose of using a circular image here is that the projection of the searchlight is like a circle. In addition, the image part outside the circle must be transparent, otherwise the visible It will be 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 cover the content of the parent layer, so that the content on the parent layer in the browser will only be circular. That part of the image is visible, which is exactly what we want.
4. Of course, if you want to produce the effect of a searchlight, you need to make the circular area move. This requires using the Timeline function of Dreamweaver. In DW3, first drag to the sub-layer so that the picture on it just covers the head of the parent layer content. Press "Ctrl F9" to bring up the timeline panel, drag the sub-layer to the timeline panel, and drag the last frame to 100 frames, then insert a key frame at the 50th frame, and overlap the sub-layer picture with the tail of the parent layer content, select "Loop" (loop play) and "Auto" (automatic play) on the timeline panel, everything OK.
A complex animation is completed. Press F12 to take a look. Isn’t it cool? !