dh Filtersammlung_HTML/Xhtml_Webseitenproduktion

IE bereitete uns in der frühen Entwicklungsphase Kopfschmerzen. Es unterstützt nicht das, was andere unterstützen, und es gibt auch Dinge, die andere nicht unterstützen – Filter.

　
　CSS-Filter werden hauptsächlich verwendet, um verschiedene Spezialeffekte auf Bildern zu erzielen. Es spielt eine sehr magische Rolle bei der Website-Erstellung. Die Website kann durch CSS-Filter schöner gemacht werden. In CSS stellt das Filterattribut den Filter dar. Es kann die Filterwirkung von Text, Bildern und Tabellen festlegen.
Syntax: STYLE={"filter:filtername(fparameter1,fparameter2...)}
Hinweis: Filtername ist der Name des Filters, fparameter1, fparameter2 usw. sind die Parameter des Filters.
13 Arten von CSS-Filtern Spiegeleffekt
1. Filter: Chroma – Spezialfarbe transparent machen.
Syntax: STYLE="filter:Chroma(Color=color)"
Anmerkung: color:#rrggbb Format, beliebig .
2. Filter: Unschärfe – Erzeugen Sie einen Hochgeschwindigkeits-Bewegungseffekt, also einen Unschärfeeffekt.
Syntax: STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
Anmerkung: Addieren: Im Allgemeinen 1 oder 0; Richtung: Winkel, 0-315 Grad, der Schritt beträgt 45 Grad; Stärke: Der Wert des Effektwachstums, normalerweise 5. Filter: FlipV --Erstellen Sie ein vertikales Spiegelbild.
Syntax: STYLE="filter:FlipV"
4. Filter: alpha – Transparenzstufe festlegen
Syntax: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity =finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX = end Style: 1 oder 2 oder 3; StartX: beliebiger Wert; StartY: beliebiger Wert
5. Filter: FlipH – Erstellt ein horizontales Spiegelbild.
Syntax: STYLE="filter:FlipH"
6. Filter:glow – Fügt der Außenseite von Objekten in der Nähe Glanz hinzu.
Syntax: STYLE="filter:Glow(Color=color,Strength=strength )"
Anmerkung: Farbe: Leuchtfarbe; Stärke: Intensität (0-100)
7. Filter:mask – Erstellt eine transparente Maske auf dem Objekt.
Syntax: STYLE="filter:Mask( Farbe=Farbe)"
8. Filter: Filter: DropShadow – Erstellt einen festen Schatten des Objekts.
Syntax: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Markierung: Farbe: #rrggbb-Format , beliebig; Offx: Abweichungswert der :Gray"
12. Filter: Welle – Welleneffekt.
Syntax: filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength)
Anmerkung: Add : Im Allgemeinen 1 oder 0; Freq: Verformungsprozentsatz; Phase: Winkelverformungsstärke: Verformungsstärke.
Syntax: filter:Shadow( Farbe = Farbe, Richtung = Richtung)
Anmerkung: Farbe: #rrggbb-Format; Richtung: Winkel, 0-315 Grad, Schrittgröße beträgt 45 Grad.
Eines sollten Sie bei der Verwendung von CSS-Filtern beachten: dass in aktuellen Website-Layouts Filter häufig an Divs angehängt werden. Wenn Sie einfach eine ID für das Div im HTML-Code festlegen, ist der Filter nicht wirksam. Dieses ID-Attribut muss in Style oder CSS definiert werden, andernfalls ist dies nicht der Fall arbeiten.

Es ist nur ein Codesatz erforderlich, und beim Erstellen der Website können die Bilder wie bei einem PPT-Dokument frei ausgetauscht werden. Es ist sehr einfach! Vor der Konvertierung müssen wir drei grundlegende Codes verstehen:
Rotation: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Hintergrundfarbe entfernen: style="filter:Chroma( Color= #000000)"
Verlaufsfarbe festlegen: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1) „
Wunderbare Rezension: Eine Sammlung von CSS-Filtereffekten für die Website-Produktion
Das Folgende ist eine Sammlung von Bildkonvertierungsfiltern, ich hoffe, es kann Freunden helfen~! ! !
Zufällige Transformation: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Quadratischer Farbverlauf: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Quadratischer Farbverlauf Groß : progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
Cross-immer kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Cross-immer größer: progid : DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
Sternform wird größer: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
Sternform wird kleiner: progid:DXImageTransform . Microsoft.Iris(irisstyle=star,motion=in)
Der Kreis wird größer: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
Der Kreis wird kleiner: progid:DXImageTransform.Microsoft . Iris(irisstyle=circle,motion=in)
Die Raute wird kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
Die Raute wird größer: progid:DXImageTransform.Microsoft.Iris (irisstyle= diamant,motion=out)
Das Pluszeichen wird größer: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
Das Pluszeichen wird kleiner: progid:DXImageTransform.Microsoft.Iris (irisstyle=plus, motion=in)
　Löschen nach oben: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
　Löschen nach unten: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction =unten)
　Löschen nach links: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
　Löschen nach rechts: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right )
Linke und rechte mittlere Teile verkleinern: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Zufällig auflösen: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
Erweitern den mittleren Teil nach oben und unten: progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizontal)
Nach links und rechts in der Mitte erweitern: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
Zufällige horizontale Linien: progid:DXImageTransform.Microsoft.RandomBars(orientierung=horizontal)
Zufällige vertikale Linien: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertikal)
Verkleinerung der oberen und unteren Mitte: progid:DXImageTransform .Microsoft.Barn(Bewegung=in, Ausrichtung=horizontal)
Standard-Gradiententransformation: BlendTrans(enabled=true,percent=10)
Einstellbare Gradiententransformation: progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap =1.0)
Unten rechts einfügen: progid:DXImageTransform.Microsoft .Inset(enabled=ture)
Stretch ausblenden: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Stretch pushen: progid: DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Rotationsdehnung: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Gegentakt: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
Strahlung Strahl: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
Mosaikeffekt: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Uhr: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
Leiter unten links: progid:DXImageTransform.Microsoft.Strips(motion=leftdown)
Oben rechts auf der Leiter: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
Oben links auf der Leiter: progid:DXImageTransform.Microsoft.Strips(motion=leftup)
Die untere rechte Seite der Leiter: progid:DXImageTransform.Microsoft Strips(motion=rightdown)
Spiralschrumpfung: progid:DXImageTransform.Microsoft.Spiral(gridSizeX= 20,gridSizeY=20)
Windmühlenrotation: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Zickzack: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H-Jalousien : progid:DXImageTransform.Microsoft.Blinds(bands=6, Direction=down)
: progid:DXImageTransform. Microsoft.Blinds(bands=6,direction=up)
　：progid:DXImageTransform.Microsoft.Blinds(bands =60,direction=down)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)
　V blinds: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
　：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
　　交换式幻灯片：progid:DXImageTransform.Microsoft .Slide(slidestyle=swap,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
　　推动式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=push ,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
　　隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
　　模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
　　：progid :DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
　　：progid:DXImageTransform .Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
　　：progid:DXImageTransform .Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft .Checkerboard(direction=left,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard (Richtung = links, Quadrate (Richtung = oben, Quadrate =up,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=up ,QuadrateX=60,QuadrateY=60)