IE ließ uns etwas entwickeln, das in der Vergangenheit Kopfschmerzen hatte. Er war anders als andere. Er hat es nicht unterstützt und hatte etwas, das andere nicht unterstützten. Heute werde ich kurz eines seiner Merkmale vorstellen - Filter.
CSS -Filter werden hauptsächlich verwendet, um verschiedene Spezialeffekte von Bildern zu erreichen. Es spielt eine sehr magische Rolle bei der Website -Herstellung. Die Website kann über CSS -Filter schöner gemacht werden. In CSS repräsentiert das Filterattribut die Bedeutung des Filters, mit dem die Filtereffekte von Text, Bildern und Tabellen festgelegt werden können.
Syntax: style = {filter: filtername (fparameter1, fparameter2 ...)}
HINWEIS: Filtername ist der Name des Filters, Fparameter1, Fparameter2 usw. sind die Parameter des Filters.
13 CSS -Filtereffekte
1. Filter: Chroma - Machen Sie spezielle Farben transparent.
Syntax: Style = Filter: Chroma (Farbe = Farbe)
Tag: Farbe: #RRGGBB -Format, alle.
2. Filter: Schafft ein Hochgeschwindigkeitsbewegungseffekt, dh ein verschwommener Effekt.
Syntax: style = filter: Blur (add = add, Richtung = Richtung, Stärke = Stärke)
Hinweis: Hinzufügen: Im Allgemeinen 1 oder 0; Richtung: Winkel, 0-315 Grad, Schrittlänge beträgt 45 Grad; Stärke: Der Wert des Effektwachstums, normalerweise 5.
3. Filter: Flipv-Crate Vertical Spiegelbild.
Syntax: style = filter: Flipv
4. Filter: Alpha-set-transparente Hierarchie
Syntax: style = filter: alpha (opacity = opacity, endeopazität = obereoopazität, style = style, startx = startx, starty = starty, findex = findex, endeny = endeny)
Hinweis: Deckkraft: Startwert, der Wert beträgt 0-100, 0 ist transparent, 100 ist das Originalbild; Finishopacity: Zielwert; Stil: 1 oder 2 oder 3; Startx: jeder Wert; Starty: Jeder Wert
5. Filter: Fliph - Erstellen Sie ein horizontales Spiegelbild.
Syntax: style = filter: Fliph
6. Filter: Glühen-Ruhm außerhalb der Kante der nahe gelegenen Objekte.
Syntax: Style = Filter: Glühen (Farbe = Farbe, Stärke = Stärke)
Etikett: Farbe: Leuchtende Farbe; Stärke: Intensität (0-100)
7. Filter: Maske-transparente Maske auf dem Objekt.
Syntax: style = filter: mask (color = color)
8. Filter: Filter: Xray-Make Das Objekt sieht so aus, als würde es durch Röntgenaufnahme beleuchtet.
Syntax: style = filter: xray
9. Filter: Invert-Invert-Farbe.
Syntax: style = filter: invert
10. Filter: DropShadow - Erstellt einen festen Schatten eines Objekts.
Syntax: style = filter: DropShadow (color = color, offx = offx, offy = offy, positiv = positiv)
Etikett: Farbe: #rrggbb Format, willkürlich; Offx: x-Achsenabweichungswert; Offy: Y-Achse-Abweichungswert; Positiv: 1 oder 0.
11. Filter: Grau grau das Bild.
Syntax: style = filter: grau
12. Filter: Wellenablösungseffekt.
Syntax: Filter: Welle (add = add, freq = freq, Lichtstränge = Stärke, Phase = Phase, Stärke = Stärke)
Hinweis: Hinzufügen: Im Allgemeinen 1 oder 0; FREQ: Verformungswert; Lichtstrang: Verformungsprozentsatz; Phase: Winkelverformungsprozentsatz; Stärke: Verformungsstärke.
13.Shadow-Versatzversetzt fester Schatten.
Syntax: Filter: Shadow (Farbe = Farbe, Richtung = Richtung)
Etikett: Farbe: #RRGGBB -Format; Richtung: Winkel, 0-315 Grad, die Schrittgröße beträgt 45 Grad.
Wenn Sie CSS -Filter verwenden, sollten Sie feststellen, dass im aktuellen Produktionslayout der Website häufig Filter an die DIV angeschlossen sind. Wenn Sie einfach eine ID für die DIV im HTML -Code festlegen, funktioniert der Filter nicht. Dieses ID -Attribut muss in Stil oder CSS definiert werden, sonst funktioniert es nicht.
Es ist nur ein Code -Satz erforderlich, und die Bilder können beim Erstellen einer Website frei wie PPT -Dokumente frei geschaltet werden. Es ist sehr einfach! Vor dem Konvertieren müssen wir drei grundlegende Codes verstehen:
Rotation: style = filter: progid: timaTransform.microsoft.basicimage (Rotation: 1)
Hintergrundfarbe entfernen: style = filter: chroma (color =#000000)
Set Gradient Color: Style = Position: Relativ; links: 0px; ober: 0px; Filter: progid: diximagetransform.microsoft.gradient (startColorstr =#ff0000, endColorstr =#ffff00, gradientType = 1)
Wunderbare Überprüfung: Eine vollständige Sammlung von CSS -Filtereffekten für die Website der Website
Unten finden Sie eine vollständige Sammlung von Bildkonvertierungsfiltern. Ich hoffe, es kann Freunden helfen ~! ! !
Zufällige Transformation: Progid: DimaMagetransform.Microsoft.revealtrans (enabled = true, transition = 23)
Square wird kleiner: progid: dimaMagetransform.microsoft.iris (irisStyle = quadratisch, motion = in)
Square wird größer: progid: dimaMagetransform.microsoft.iris (irisStyle = quadratisch, motion = out)
Cross-Smashing: Progid: DimaMagetransform.Microsoft.iris (IrisStyle = Cross, Motion = in)
Cross-Dive: Progid: DimaMagetransform.Microsoft.iris (IrisStyle = Cross, Motion = Out)
Die Sternform wird größer: progid: dimaTransform.microsoft.iris (irisStyle = star, motion = out)
Sternform allmählich kleiner: progid: dimaTransform.microsoft.iris (irisStyle = star, motion = in)
Der Kreis wird größer: progid: dimaTransform.microsoft.iris (irisStyle = circle, motion = out)
Kreis allmählich kleiner: progid: timaMagetransform.microsoft.iris (irisStyle = circle, motion = in)
Diamond -Form allmählich kleiner: progid: dimaTransform.microsoft.iris (IrisStyle = Diamond, Bewegung = in)
Der Diamant wird größer: progid: dimaTransform.microsoft.iris (IrisStyle = Diamond, Motion = out)
Das Pluszeichen wird größer: progid: dimaTransform.microsoft.iris (irisStyle = plus, motion = out)
Das Pluszeichen wird allmählich kleiner: progid: dimaTransform.microsoft.iris (irisStyle = plus, motion = in)
Aufwärtserase: Protokoll: DimaMagetransform.Microsoft.Blinds (Banden = 1, Richtung = Up)
Down -Löschen: Protokoll: DimaMagetransform.Microsoft.Blinds (Banden = 1, Richtung = Down)
Links links: Protokoll: DimaMagetransform.Microsoft.Blinds (Banden = 1, Richtung = links)
Rechts löschen: Protokoll: DimaTransform.Microsoft.Blinds (Banden = 1, Richtung = rechts)
Von links und rechts Mitte zurückziehen: progid: dimaTransform.microsoft.barn (motion = in, orientation = vertikal)
Zufällige Auflöste: progid: timaMagetransform.microsoft.RandomDissolve (enable = true)
Der zentrale Bereich wird nach oben und unten erweitert: progid: dimaTransform.microsoft.barn (motion = out, orientation = horizontal)
In der Mitte links und rechts erweitern: progid: dimaTransform.microsoft.barn (motion = out, orientation = vertikal)
Zufällige horizontale Linie: progid: dimaTransform.microsoft.randombars (Orientierung = horizontal)
Zufällige vertikale Linie: progid: tximagetransform.microsoft.randombars (Orientierung = vertikal)
Obere und untere mittlere Schrumpfung: progid: dimaTransform.microsoft.barn (Bewegung = in, Orientierung = horizontal)
Standard -Gradientenumwandlung: Blendtrans (enabled = true, Prozent = 10)
Einstellbarer Gradientenumwandlung: Progid: DimaMagetransform.Microsoft.Fade (aktiviert = Ture, Überlappung = 1.0)
Nach unten rechts einfügen: Protokoll: dimaTransform.microsoft.inset (aktiviert = ture)
Hide Stretch: Progid: DimaMagetransform.Microsoft.TRetch (StretchStyle = Hide)
Progid: DimaMagetransform.Microsoft.TRetch (StretchStyle = Push)
Rotary Dehnung: Progid: DimaMagetransform.Microsoft.TRetch (StretchStyle = Spin)
Anti-Clock: Progid: DimaMagetransform.Microsoft.RadialWipe (Wipestyle = Wedge)
Strahlungsstrahlen: Progid: DimaMagetransform.Microsoft.RadialWipe (Wipestyle = Radial)
Mosaik -Effekt: Progid: DimaMagetransform.Microsoft.Pixelate (maxSquare = 20)
Uhr: progid: dimaTransform.microsoft.RadialWipe (Wipestyle = Uhr)
Unten links von der Leiter: Progid: DimaMagetransform.Microsoft.Strips (Motion = links)
Oben rechts von der Leiter: progid: dimaTransform.microsoft.strips (motion = rightup)
Oben links von der Leiter: Progid: DimaMagetransform.Microsoft.Strips (Motion = links)
Unten rechts von der Leiter: progid: dimaTransform.microsoft.strips (motion = rechtdown)
Spiraler Schrumpfung: Progid: timaTransform.microsoft.spiral (Gridsizex = 20, Gridsizey = 20)
WINDMILL -Rotation: Progid: DimaMagetransform.Microsoft.Wheel (Speichen = 20)
Z-förmige Wendungen: Progid: DimaMagetransform.Microsoft.zigZag (Gridsizex = 20, Gridsizey = 20)
ＨBlinds: progid: dimaTransform.microsoft.Blinds (Bänder = 6, Richtung = Down)
: progid: dimaTeTransform.microsoft.blinds (Bänder = 6, Direction = Up)
: progid: timaTeTransform.microsoft.Blinds (Bänder = 60, Richtung = Down)
: progid: timaTeTransform.microsoft.blinds (Bänder = 60, Direction = Up)
V Blinds: Progid: DimaMagetRansform.Microsoft.Blinds (Bands = 6, Direction = rechts)
: progid: dimaTransform.microsoft.blinds (banden = 6, Richtung = links)
: progid: dimaTeTransform.microsoft.blinds (Bänder = 60, Richtung = rechts)
: progid: dimaTransform.microsoft.blinds (Bänder = 60, Richtung = links)
Switched Slide: Progid: DimaMagetransform.Microsoft.Slide (Slidestyle = Swap, Banden = 1)
: progid: dimaTransform.microsoft.slide (Slidestyle = Swap, Bänder = 20)
Push -Folie: Progid: DimaMagetransform.Microsoft.Slide (Slidestyle = Push, Banden = 1)
: progid: dimagetransform.microsoft.slide (Slidestyle = Push, Bands = 20)
Folie ausblenden: progid: timaTeTransform.microsoft.slide (Slidestyle = Hide, Banden = 1)
: progid: dimagetransform.microsoft.slide (Slidestyle = Hide, Bänder = 20)
Fuzzy Advancement: Progid: DimaMagetRansform.Microsoft.gradientWipe (Gradetientiz = 0,5, Wipestyle = 0, Motion = Forward)
: progid: timaTeTransform.microsoft.gradientWipe (gradienten = 0,5, Wipestyle = 0, Bewegung = umgekehrt)
: progid: timaTeTransform.microsoft.gradientWipe (gradienten = 0,5, Wipestyle = 1, Bewegung = Vorwärts)
: progid: dimaTeTransform.microsoft.gradientWipe (gradienten = 0,5, Wipestyle = 1, Bewegung = umgekehrt)
Vertikales Schachbrett: Progid: DimaMagetransform.Microsoft.Checkerboard (Richtung = rechts, squaresx = 12, squaresy = 12)
: progid: timaTransform.microsoft.Checkerboard (Richtung = links, squaresx = 12, squaresy = 12)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = rechts, squaresx = 2, squaresy = 2)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = links, squaresx = 2, squaresy = 2)
: progid: timaTransform.microsoft.Checkerboard (Richtung = rechts, squaresx = 60, squaresy = 60)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = links, squaresx = 60, squaresy = 60)
Horizontales Schachbrett: Progid: DimaMagetransform.Microsoft.Checkerboard (Richtung = Down, Squaresx = 12, Quadrate = 12)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = Up, Squaresx = 12, Squaresy = 12)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = Down, squaresx = 2, squaresy = 2)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = Up, Squaresx = 2, Squaresy = 2)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = Down, Squaresx = 60, Squaresy = 60)
: progid: timaTeTransform.microsoft.Checkerboard (Richtung = Up, Squaresx = 60, Squaresy = 60)