Ausführliche Erläuterung von Beispielen für Filtereffekte in CSS3

Die meisten meiner letzten Projekte sind mit CSS3 in Berührung gekommen, aber der verdammte IE unterstützt es nicht. Ich habe gesucht und festgestellt, dass die Filter des IE ziemlich nützlich sind. Ich habe mir die Zeit genommen, sie zu sortieren Bitte denken Sie daran, den IE zum Durchsuchen zu verwenden. Ich hoffe, dass dieser Artikel für Sie hilfreich ist IE unterstützt es nicht. Nach der Suche habe ich festgestellt, dass die Filter des IE recht gut funktionieren. Es sieht so aus, als ob W3C Filter standardisiert. Heute werde ich die Filtereffekte des IE klären (bitte verwenden Sie den IE zum Durchsuchen) und morgen werde ich die entsprechenden Effekte von CSS3 schreiben (bitte verwenden Sie den Webkit-Kernel zum Durchsuchen). , wenn Leser andere bessere Artikel haben und hoffen, diese zu teilen, treten Sie gerne der Web-Front-End-Kommunikationsgruppe (75701468) bei, um Ihre und meine Erfahrungen zu teilen

Filter: Transparenzeffekt

Syntax: 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
EndX: beliebiger Wert
EndY: beliebiger Wert

Allgemeiner Transparenzeffekt: Filter: alpha(opacity=30);

W3C-Code: -webkit-filter:opacity(0.3); oder opacity:0.3;

rose

Linientyp-Transparenz: Filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=180);

W3C-Code: unbekannt ;

Rose

Strahlendurchlässig: Filter: Alpha(Opacity=0, FinishOpacity=100, Style=2);

W3C-Code : unbekannt;

Rose

Softlight-Effektfilter:alpha(opacity=100, finishOpacity=0,style=3);

W3C-Code: unbekannt;

Rose

Filter: Schlagschatteneffekt

Syntax: filter:DropShadow (Farbe=Farbe, OffX=offX, OffY=offY, Positiv=positiv)

Beschreibung:
Farbe:#rrggbb-Format, beliebig.
Offx: X-Achsen-Abweichungswert.
Offy: Y-Achsen-Versatzwert.
Positiv: Bei „True“ wird ein sichtbarer Schatten für alle nicht transparenten Pixel erstellt. Bei „False“ wird ein sichtbarer Schatten für den transparenten Pixelteil erstellt.

Schatteneffekt: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5,positives=true);

W3C-Code: -webkit-filter :drop-shadow(5px 5px 0 #000000); oder box-shadow:5px 5px 0 #000;

Rose

Schatteneffekt: progid : DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10);

W3C-Code: unbekannt;

Rose

Farbüberlegungseffekt: progid:DXImageTransform.Microsoft.Chroma(color=#59A074);

W3C-Code: unbekannt;

Rosenblume

mosaic: filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

W3C-Code: unbekannt;

Rose

Leuchteffekt: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000,Strength=5);

W3C-Code: unbekannt;

Rose

Horizontaler Flip: Filter: fliph;

W3C-Code: -webkit-transform:rotateY(180deg);

Rose

Vertikaler Flip: Filter: flipv;

W3C-Code: -webkit-transform:rotateX(180deg);

Rose

Inversionseffekt: Filter: invertieren;

W3C-Code: -webkit-filter:invert(1);

Rose

Schwarz-Weiß-Effekt: filter:gray;

W3C-Code: -webkit-filter:grayscale(1);

Rose

Röntgenfoto: filter:xray;

W3C-Code: -webkit-filter:grayscale(1) invert(1);

Rose

Filter: Unschärfeeffekt

Syntax: filter:Unschärfe(Hinzufügen = hinzufügen, Richtung = Richtung, Stärke = Stärke)

Beschreibung :
Hinzufügen: Geben Sie an, ob das Bild in einen impressionistischen Unschärfeeffekt geändert wird. 1 ist wahr, 0 ist falsch.
Richtung: Winkel, 0~315 Grad, Schrittgröße beträgt 45 Grad.
Stärke: Wie viele Pixel der Breite sind von der Unschärfe betroffen, der Standardwert ist 5 Pixel.

Windunschärfe (mit Winkel): Filter: Unschärfe (add=true,direction=45,strength=30);

W3C-Code: Keine

Rose

Allgemeine Unschärfe: filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);

W3C-Code: -webkit-filter:blur(3px);

Rose

Filter: Ripple-Effekt

Syntax: Filter: Wave(Add=add, Freq =freq, LightStrength= Stärke, Phase=Phase, Stärke=Stärke)

Beschreibung:
Hinzufügen: Ob unterbrochen werden soll, der Standardwert ist „True“.
Häufigkeit: Wie viele vollständige Wellen erzeugt werden.
Lichtstärke: Verbessert Licht und Schatten, Ganzzahlwert von 0-100.
Phase: Der Versatz der Sinuswelle, normalerweise ist der Wert 0, und der Bereich ist ein ganzzahliger Wert von 0-100.
Stärke: Stellt die Amplitude dar.

Sinuswelle: Filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

W3C-Code: unbekannt;

Rose

Verlaufseffekt: Filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff"); 🎜>

W3C-Code: background:-webkit-linear-gradient(#000000 0, #ffffff 100%);

[Verwandte Empfehlungen]

1 Video-Tutorial

2.

Detaillierte Erklärung der 10 Top-Befehle in CSS3

3.

Kurze Beschreibung, wie Webdesigner die CSS3-Technologie gut nutzen können

4.

CSS3 zum Erstellen von Mouse-Over-Button-Effekten

5.

CSS3-Beispiel für die Einstellung der RGB-Farbe

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für Filtereffekte in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!