Heim >Web-Frontend >CSS-Tutorial >Einführung in die CSS-Filterattributsyntax_Grundlegendes Tutorial

Einführung in die CSS-Filterattributsyntax_Grundlegendes Tutorial

WBOYOriginal: 2016-05-16 12:08:171625Durchsuche

CSS-Filter
Stilattribut:
Kann in Tags angewendet werden und kann häufig in

Einführung in die CSS-Filterattributsyntax_Grundlegendes Tutorial

verwendet werden

und so weiter Tags,
was noch wichtiger ist, es kann in Tags verwendet werden.
Seitenwechseleffekt:
Fügen Sie „“ zwischen der Vorderseite und der Seite hinzu
Erklärung: Dauer ist die Zeitspanne für den Seitenwechsel, 3.000 bedeutet 3 Sekunden, im Allgemeinen können Sie 3 direkt eingeben
;Übergang ist der Schalteffekt, es gibt 22 verschiedene Schalteffekte von 1-23, von denen 23
ein Zufallseffekt ist.
Filtereffekte:
Sie haben viele Photoshop-Filter verwendet, also verwenden wir Filter auf der Seite, um neue Bedeutungen zu schaffen!
Syntax: STYLE="filter:filtername(fparameter1,fparameter2...)}
(Filtername ist der Name des Filters, fparameter1, fparameter2 usw. sind die Parameter des Filters)
Filterbeschreibung :
Alpha: Stellen Sie die Transparenz ein.
Unschärfe: Erstellen Sie einen schnellen Bewegungseffekt, d. h. einen Unschärfeeffekt.
DropShadow: Erstellen Sie einen festen Schatten des Objekts.
FlipH: Erstellt ein vertikales Spiegelbild.
Grau: Konvertiert das Bild Graustufen.
invertieren: Die Farbe umkehren
Maske: Eine transparente Maske auf dem Objekt erstellen
Welle: Welleneffekt.
Röntgen: Das Objekt wie eine Röntgenaufnahme aussehen lassen
1. FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY= startY, FinishX = Finish 🎜>Stil: 1 oder 2 oder 3
StartX: beliebiger Wert
StartY: beliebiger Wert
Beispiel: filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")
2. Filter:blur
Syntax:
STYLE="filter:Blur(Add=add,Direction =Richtung,
Stärke=Stärke)"
Beschreibung:
Hinzufügen: Im Allgemeinen 1 oder 0.
Richtung: Winkel, 0-315 Grad, Schrittgröße beträgt 45 Grad.
Stärke: Wert des Effektwachstums, normalerweise reicht 5 aus.
Beispiel: filter:Blur(Add ="1", Direction="45", Strength="5")
3.
STYLE="filter:Chroma(Color=color)"
Beschreibung:
color:#rrggbb Format, beliebig
Beispiel: filter:Chroma(Color="#FFFFFF")
4. Filter: DropShadow
Syntax:
STYLE="filter: DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Beschreibung:
Farbe:#rrggbb-Format , beliebig.
Offx: X-Achsen-Abweichungswert.
Offy: Y-Achsen-Abweichungswert.
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:Glow
Syntax:
STYLE ="filter:Glow(Color=color,Strength=strength)"
Beschreibung:
Farbe: Leuchtfarbe
Stärke: Intensität (0-100)
Beispiel: filter:Glow(Color= "#6699CC",Strength="5")
8 Filter:Gray
Syntax:
STYLE="filter:Gray"
Beispiel: filter:Gray
9 🎜>Syntax:
STYLE="filter:Invert"
Beispiel: filter:Invert
10. Filter:Maske
Syntax:
STYLE="filter:Mask(Color=color)"
Beispiel: filter:Mask(Color="#FFFFE0 ")
11. Filter: Schatten
Syntax:
filter:Shadow(Color=color,Direction=direction)
Beschreibung:
Farbe:#rrggbb-Format
Richtung: Winkel, 0-315 Grad, Schrittgröße beträgt 45 Grad
12. Filter: Welle
Syntax:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,
Strength=strength)
Beschreibung:
Add : Im Allgemeinen 1 oder 0.
Häufigkeit: Verformungswert
Phase: Winkelverformungsintensität
Beispiel: filter:wave(Add ="0",Phase="4", Freq="5",LightStrength="5",Strength="2")
13. Filter:Xray
Syntax:
STYLE="filter: „Röntgen“
Beispiel: filter:Xray

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum Webstandards etablieren und welche Vorteile Webstandards habenNächster Artikel：Warum Webstandards etablieren und welche Vorteile Webstandards haben

In Verbindung stehende Artikel

Mehr sehen