Studienhinweise zu Filtern in CSS3 (statische Filter und dynamische Filter)

In diesem Abschnitt werden Filter in CSS vorgestellt, einschließlich der Verwendung statischer Filter und dynamischer Filter. Freunde, die es nicht verstehen, können sich auf Folgendes beziehen:

1. Stil des statischen CSS-Filters (Filter) (nur von IE4.0 oder höher unterstützt)

So verwenden Sie den statischen CSS-Filterstil: { filter : filtername( Parameter1, Parameter2 , .. .) }

Kurzbeschreibung des Filterstils Unterstützte Parameter

alpha: Legen Sie die Deckkraft, FinishOpacity, Stil, StartX, StartY, FinishX des Bildes oder Textes, FinishY, fest. Hinzufügen, Richtung, Stärke

Unschärfe: Erzeugt einen dynamischen Unschärfeeffekt in der angegebenen Richtung und Position. Hinzufügen, Richtung, Stärke

Chroma: Für die ausgewählte Farbe transparent machen color

dropShadow: Schatten in der angegebenen Richtung erzeugen und positionieren color, offX, offY, positiv

flipH: Das Objekt in horizontaler Richtung spiegeln

flipV: Objekt in vertikaler Richtung spiegeln

Glühen: Leuchtfarbe und -stärke um das Objekt herum

Grau: Verarbeiten Sie das Objekt in Graustufen

Invertieren: Die Objektfarbe umkehren

Licht: Beleuchtung auf dem Objekt simulieren

Maske: Eine Maskenfarbe auf dem Objekt erzeugen

Schatten: Schattenfarbe erzeugen, Richtung entlang der Objektkante

Welle: Sinuswellenform erzeugen, Frequenz, Lichtstärke, Phase, Stärke in vertikaler Richtung addieren

xray: Ändern Sie die Farbtiefe des Objekts und zeichnen Sie ein Schwarzweißbild

Das Obige ist der gesamte Inhalt des statischen Filters. Bitte beachten Sie, dass bei CSS die Groß-/Kleinschreibung beachtet wird!

2. Dynamische CSS-Filter

Dynamische Filter können der Seite bewegliche Ein- und Ausblendeffekte hinzufügen kann unterteilt werden in Es gibt zwei Arten von Blend und Reveal: Ersteres kann Objekte allmählich verschwinden oder erscheinen lassen, und letzteres bietet 24 Bildtransformationseffekte. Für den Aufruf dynamischer Filter wird neben dem Filtertyp, den Parametern usw., die in statischen Filtern definiert werden müssen, auch eine Skriptsprache zur Steuerung des Status verwendet.

Bevor Sie einen dynamischen Effekt starten, müssen Sie zunächst den dynamischen Effekt anwenden (Anwenden) und dann abspielen (Abspielen). Sie können den dynamischen Effekt auch unterbrechen (Stoppen), während der dynamische Effekt ausgeführt wird . Sie können die folgende Methodenimplementierung verwenden:

Objektname.filters (Filterwert).Apply()
Objektname.filters (Filterwert).Play()
Objektname.filters ( Filterwert) .Stop()

Der Status des Filters kann anhand von „Objektname.filters (Filterwert).status“ beurteilt werden. Wenn der Wert 0 ist, bedeutet dies, dass der Filter nicht ausgeführt wurde . Wenn es 1 ist, bedeutet dies, dass der Filter nicht ausgeführt wurde. Wenn es 2 ist, bedeutet dies, dass der Filter ausgeführt wird.

Wenn Sie einen Filter definieren, können Sie, wie oben erwähnt, eine Mischung („filter:blendTrans(duration=time value)“, die Dauer stellt die für die Filterausführung erforderliche Zeit in Sekunden dar) und eine Anzeige („filter: RevealTrans(Dauer=Zeitwert, Übergang=Übergangstyp)“, der Übergangstyp ist ein Wert von 0 bis 23).

Filter werden vom W3C noch nicht offiziell anerkannt. Filter sind nur ein Teil des IE-Browsers von Microsoft und können nicht in Netscape-Browsern verwendet werden. Organisationen, die entsprechende Standards formulieren, diskutieren darüber, sind aber noch nicht zu einem endgültigen Ergebnis gekommen. Meiner Meinung nach machen Filter wirklich Spaß und sind ein wesentlicher Bestandteil bei der Erstellung großartiger Bilder. Filter sparen Bandbreite und ermöglichen Ihnen die Verwendung von Textformatierungen beim Erstellen fantastischer

visueller Designs, ohne dass Sie zuerst große Text-Bitmaps erstellen müssen, um den gleichen Effekt zu erzielen.

Da diese Funktionen jedoch noch nicht zu einem formalen Bestandteil von HTML geworden sind, können nicht alle Browser diese Funktionen sehen. Manchmal muss man darüber nachdenken, den gleichen Effekt auf herkömmliche Weise zu erzielen, und natürlich muss man weiterhin riesige GIF-Dateien in Webseiten stopfen.
Stille...Stille...

3. Detaillierte Erklärung des CSS-Filters

Syntax:

STYLE="filter:filtername(fparameter1, fparameter2...)"

(Filtername ist der Name des Filters, fparameter1, fparameter2 usw. sind die Parameter des Filters)

Filterbeschreibung:

alpha : Transparenzstufe einstellen
Unschärfe: Erzeugen Sie einen schnellen Bewegungseffekt, also einen Unschärfeeffekt
Chroma: Machen Sie eine spezielle Farbe transparent
DropShadow: Erzeugen Sie einen festen Schatten des Objekts
FlipH: Erstellen Sie ein horizontales Spiegelbild.
FlipV: Erstellen Sie ein vertikales Bild. Spiegeln Sie das Bild.
Glühen: Fügen Sie Licht außerhalb der Ränder von Objekten in der Nähe hinzu. Erstellen Sie eine Lichtquelle auf dem Objekt.
Maske: Erstellen Sie eine transparente Maske. Membran auf dem Objekt.
Schatten: Erstellen Sie einen versetzten, festen Schatten.
Welle: Welleneffekt.
Röntgen: Lassen Sie das Objekt so aussehen, als wäre es beleuchtet durch Röntgenstrahlen


1. Filter: Alpha

Syntax:

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)"

Anweisungen:
Deckkraft: Startwert im Bereich von 0 bis 100, 0 ist transparent, 100 ist das Originalbild.
FinishOpacity: Zielwert.
Stil: 1 oder 2 oder 3
StartX: beliebiger Wert
StartY: beliebiger Wert

Beispiel: filter:Alpha(Opacity="0",FinishOpacity="75",Style= "2")

2. Filter: Unschärfe

Syntax:

STYLE="filter:Blur(Add = hinzufügen, Richtung = Richtung, Stärke = Stärke)“

Erklärung:
Hinzufügen: Im Allgemeinen 1 oder 0.
Richtung: Winkel, 0~315 Grad, Schrittgröße beträgt 45 Grad.
Stärke: Der Wert des Effektwachstums, im Allgemeinen ist 5 ausreichend.

Beispiel: Filter:Blur(Add="1",Direction="45",Strength="5")

3. Filter: Chroma

Syntax:

STYLE="filter:Chroma(Color = color)"

Beschreibung: Farbe: #rrggbb-Format, beliebig.

Beispiel: filter:Chroma(Color="#FFFFFF")

4. Filter: DropShadow

Syntax:

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positiv)"

Beschreibung:

Farbe:#rrggbb-Format, beliebig.
Offx: X-Achsen-Abweichungswert.
Offy: Y-Achsen-Versatzwert.
Positiv: 1 oder 0.

Beispiel:

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. Filter: FlipH

Syntax:

STYLE="filter:FlipH"

Beispiel: filter:FlipH

6. Filter: FlipV

Syntax: STYLE="filter:FlipV"

Beispiel: filter:FlipV

7. Filter: Glühen

Syntax: STYLE="filter:Glow(Color=color, Strength=strength)"

Anleitung:
Farbe: Glühfarbe .
Stärke: Stärke (0-100)

Beispiel: filter:Glow(Color="#6699CC",Strength="5")

8

Syntax: STYLE="filter:Gray"

Beispiel: filter:Gray

9. Filter: invertieren

Syntax: STYLE="filter:Invertieren"

Beispiel: filter:Invertieren

10. Filter: mask

Syntax: STYLE=" filter:Maske(Farbe=Farbe)"

Beispiel: filter:Maske (Farbe="#FFFFE0")

11. Filter: Schatten

Syntax: filter:Shadow(Color=Farbe, Richtung=Richtung)

Beschreibung:
Farbe: #rrggbb-Format.
Richtung: Winkel, 0-315 Grad, Schrittgröße beträgt 45 Grad.

Beispiel: filter:Shadow (Color="#6699CC", Direction="135")

12.Syntax: Filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

Beschreibung:

Add: Im Allgemeinen 1 oder 0.

Freq: Verformungswert.

LightStrength: Verformungsprozentsatz.
Phase: Prozentsatz der Winkelverformung.
Stärke: Verformungsfestigkeit.

Beispiel: Filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13. Filter: Xray

Syntax: STYLE="filter:Xray"

Beispiel: Filter: >