Clevere Verwendung des CSS-MASK-Filters_Grundlegendes Tutorial

Der Maskenfilter kann eine rechteckige Maske für das HTML-Elementobjekt auf der Webseite erstellen. Wenn Sie Masken in Flash verwendet haben, wissen Sie, dass das so ist. Tatsächlich kann man Maskierung auch auf diese Weise verstehen, was dem Abdecken des Objekts mit einem Stück farbigem Stoff gleichkommt, der Inhalt jedoch ausgegraben wird. Wenn Sie es immer noch nicht verstehen, schauen Sie sich einfach das Bild unten an und lassen Sie es sich von mir im Detail erklären.

Abbildung 1 Maskenfiltereffekt 1

Die Verwendung einer so dunklen Farbe im Maskenfilter oben dient hauptsächlich dazu, dass Sie den Effekt deutlich sehen können. Werfen wir einen Blick auf die Parameter des Maskenfilters: Er hat nur einen Parameter Farbe, der der Farbwert der Maske im Format #RRGGBB ist. Sie müssen lediglich eine geeignete Farbe dafür in DW3 auswählen. Der obige Maskenfiltercode lautet beispielsweise: .mask1 {filter:mask(color=#00ff00)} Die Farbe des Filters ist nicht die Hauptsache, der Schlüssel ist die Farbe des Hintergrunds.
Als nächstes verwenden wir den Maskenfilter, um mehrere Spezialeffekte zu erstellen:
1. Bunter Text

Abbildung 2 Maskenfiltereffekt 2

Wie wäre es mit dem oben genannten Effekt? nicht schlecht! Es ist ein bisschen wie ein Bild, nicht wahr? Dies ist der Effekt des Maskenfilters. Hier wird ein Weißfilter verwendet und sein Code lautet: .mask1 { filter:mask(color=#ffffff) }. Die bunte Textfarbe ist eigentlich die Farbe des Hintergrunds. Die Produktionsmethode ist auch sehr einfach: Fügen Sie einfach eine 1*1-Tabelle ein, fügen Sie der Tabelle einen mehrfarbigen Hintergrund hinzu, geben Sie Text in die Tabelle ein, laden Sie einen Maskenfilter in die Zelle und schon sind Sie fertig. !
2. Suchscheinwerfer-Animationseffekt
Der Suchscheinwerfer-Effekt unten erfordert viel Aufwand bei der Verwendung von Flash, aber ich hätte nicht erwartet, dass er auch mit CSS-Filtern möglich ist! Da der Suchscheinwerfereffekt dynamisch ist, kann ich nur zwei Prozessbilder aufnehmen, damit Sie sie sehen können. Wenn Sie den dynamischen Effekt sehen möchten, können Sie eines gemäß meinen Angaben erstellen oder zu mir nach Hause gehen (http://fym888. go.163.com) schauen.

Abbildung 3 Suchscheinwerfer-Animationseffekt 1

Abbildung 4 Suchscheinwerfer-Animationseffekt 2

Hier ist die Produktionsmethode:
Dieser Effekt ist besser als Das obige Beispiel ist etwas komplizierter, erfordert aber nur ein paar Mausklicks mehr.
1. Fügen Sie eine Ebene ein, die ich „übergeordnete Ebene“ nenne. Diese Ebene wird verwendet, um den anzuzeigenden Inhalt (Text oder Bilder) zu platzieren. Fügen Sie über dieser Ebene eine Ebene ein, die ich als Unterebene bezeichne. Sie dient hauptsächlich dazu, einen Maskierungseffekt zu erzeugen.
2. Stellen Sie das Anzeigefenster im Eigenschaftenfenster der übergeordneten Ebene ein, d. h. legen Sie das Attribut „Clip“ der Ebene fest. In diesem Attribut werden relative Koordinaten verwendet, wobei: L und T die Koordinaten der Ebene sind obere linke Ecke; R und B sind die Koordinaten der unteren rechten Ecke. Nachfolgende Unterebenen werden nur in dem von Ihnen festgelegten Fenster angezeigt. Das Bedienfeld zum Festlegen der Ebenenattributparameter ist in der folgenden Abbildung dargestellt:

Abbildung 5 Ebenenattributfeld

Meine übergeordnete Ebene hier ist „Ebene4“, und ich habe die gesamte übergeordnete Ebene festgelegt Hier ist es als Anzeigefenster sichtbar, wenn die untergeordnete Ebene zur übergeordneten Ebene verschoben wird, außerhalb der übergeordneten Ebene jedoch nicht.
3. Wir fügen ein kreisförmiges Bild mit transparentem Hintergrund in die Unterebene ein. Der Hauptzweck der Verwendung eines kreisförmigen Bildes besteht darin, dass die Projektion des Suchscheinwerfers wie ein Kreis aussieht muss transparent sein, sonst ist es sichtbar. Es wird ein rechteckiges Feld sein, das sich bewegt. Laden Sie dann einen Maskenfilter mit derselben Farbe wie die Hintergrundfarbe der übergeordneten Ebene auf die untergeordnete Ebene und vergrößern Sie die untergeordnete Ebene so, dass sie den Inhalt der übergeordneten Ebene vollständig abdecken kann, sodass der Inhalt auf der übergeordneten Ebene im Der Browser wird nur kreisförmig sein, was genau das ist, was wir wollen.
4. Um den Suchscheinwerfereffekt zu erzeugen, müssen Sie den kreisförmigen Bereich natürlich verschieben. Dazu ist die Verwendung der Timeline-Funktion von Dreamweaver erforderlich. Ziehen Sie in DW3 zunächst auf die Unterebene, sodass das Bild darauf gerade den Kopf des Inhalts der übergeordneten Ebene bedeckt. Drücken Sie „Strg+F9“, um das Zeitleistenfenster aufzurufen, ziehen Sie die Unterebene auf das Zeitleistenfenster und Ziehen Sie den letzten Frame auf Frame 100, fügen Sie einen Keyframe bei Frame 50 ein und überlappen Sie das Bild der Unterebene mit dem Ende des Inhalts der übergeordneten Ebene. Wählen Sie „Loop“ (Loop-Wiedergabe) und „Auto“ (automatische Wiedergabe) auf der Timeline Panel. Alles ist in Ordnung.
Eine komplexe Animation ist fertig. Drücken Sie F12, um einen Blick darauf zu werfen. !