IE nous a fait développer quelque chose qui a été un mal de tête dans le passé. Il était différent des autres. Il ne l'a pas soutenu et il avait quelque chose que d'autres ne l'ont pas soutenu. Aujourd'hui, je présenterai brièvement l'une de ses fonctionnalités: les filtres.
Les filtres CSS sont principalement utilisés pour réaliser divers effets spéciaux des images. Il a un rôle très magique dans la création de sites Web. Le site Web peut être rendu plus beau via des filtres CSS. Dans CSS, l'attribut de filtre représente la signification du filtre, qui peut définir les effets du filtre du texte, des images et des tables.
Syntaxe: style = {filter: filterName (fParAmEter1, fParameter2 ...)}
Remarque: FilternAm est le nom du filtre, fParameter1, fParameter2, etc. sont les paramètres du filtre.
13 effets de filtre CSS
1. Filtre: Chrome - Rendez les couleurs spéciales transparentes.
Syntaxe: style = filtre: chroma (couleur = couleur)
Tag: couleur: format #rrggbb, n'importe quoi.
2. Filtre: Créer un effet de mouvement à grande vitesse, c'est-à-dire un effet flou.
Syntaxe: style = filtre: flou (add = add, direction = direction, force = force)
Remarque: Ajouter: généralement 1 ou 0; Direction: angle, 0-315 degrés, la longueur du pas est de 45 degrés; Force: la valeur de la croissance de l'effet, généralement 5.
3. Filtre: FLIPV - Image miroir verticale de création.
Syntaxe: style = filtre: flipv
4. Filtre: Hiérarchie transparente de l'alpha-
Syntaxe: style = filtre: alpha (opacité = opacité, finiropacity = finalOpacity, style = style, startx = startx, starty = starty, finalx = finadX, finidy = finaly)
Remarque: Opacité: valeur de démarrage, la valeur est 0-100, 0 est transparente, 100 est l'image d'origine; FinalOpacity: valeur cible; Style: 1 ou 2 ou 3; Startx: toute valeur; Starty: Toute valeur
5. Filtre: Fliph - Créez une image miroir horizontale.
Syntaxe: style = filtre: fliph
6. Filtre: Glow - Add Glory à l'extérieur du bord des objets à proximité.
Syntaxe: style = filtre: Glow (couleur = couleur, force = force)
Étiquette: couleur: couleur lumineuse; Force: intensité (0-100)
7. Filtre: Masque - Créer un masque transparent sur l'objet.
Syntaxe: style = filtre: masque (couleur = couleur)
8. Filtre: Filtre: Xray-Make L'objet semble être illuminé par radiographie.
Syntaxe: style = filtre: xray
9. Filtre: couleur inversée.
Syntaxe: style = filtre: inverser
10. Filtre: DropShadow - Crée une ombre fixe d'un objet.
Syntaxe: style = filtre: dropshadow (color = couleur, offx = offx, offy = offy, positif = positif)
Étiquette: couleur: format #rrggbb, arbitraire; Offx: valeur d'écart de l'axe X; Offy: valeur d'écart de l'axe des y; Positif: 1 ou 0.
11. Filtre: gris gris L'image.
Syntaxe: style = filtre: gris
12. Filtre: Effet de montée en vagues.
Syntaxe: filtre: vague (add = add, freq = freq, LightStrength = résistance, phase = phase, résistance = résistance)
Remarque: Ajouter: généralement 1 ou 0; FREQ: valeur de déformation; LightStreng: pourcentage de déformation; Phase: pourcentage de déformation d'angle; Force: force de déformation.
13.Shadow - Créer l'ombre fixe du décalage.
Syntaxe: filtre: ombre (couleur = couleur, direction = direction)
Étiquette: couleur: format #rrggbb; Direction: angle, 0-315 degrés, la taille de l'étape est de 45 degrés.
Lorsque vous utilisez des filtres CSS, une chose que vous devez noter est que dans la disposition actuelle de production du site Web, les filtres sont souvent attachés au div. Si vous définissez simplement un ID pour le DIV dans le code HTML, le filtre ne fonctionnera pas. Cet attribut ID doit être défini avec style ou CSS, sinon il ne fonctionnera pas.
Une seule phrase de code est requise et les images peuvent être commutées librement comme les documents PPT lors de la création d'un site Web. C'est très simple! Avant de nous convertir, nous devons comprendre trois codes de base:
Rotation: Style = filtre: PROGID: dxiagetransform.microsoft.basicImage (rotation: 1)
Supprimer la couleur d'arrière-plan: style = filtre: chroma (color = # 000000)
Définir la couleur du gradient: style = position: relative; gauche: 0px; top: 0px; filtre: progrid: dxiagetransform.microsoft.gradient (startColorstr = # ff0000, endColorstr = # ffff00, gradientType = 1)
Merveilleuse revue: une collection complète des effets de filtre CSS pour la production de site Web
Vous trouverez ci-dessous une collection complète de filtres de conversion d'images, j'espère que cela peut aider les amis ~! ! !
Transformation aléatoire: PROGID: dxiagetransform.microsoft.revealtrans (activé = true, transition = 23)
Le carré devient plus petit: PROGID: dxiagetransform.microsoft.iris (irisstyle = carré, mouvement = in)
Square grossit: PROGID: dxiagetransform.microsoft.iris (irisstyle = carré, mouvement = out)
Cross-Smashing: Progid: dxiageTransform.microsoft.iris (irisstyle = cross, mouvement = in)
Croix: PROGID: dxiagetransform.microsoft.iris (irisstyle = cross, motion = out)
La forme d'étoile devient plus grande: PROGID: dxiagetransform.microsoft.iris (iRisstyle = star, motion = out)
La forme d'étoile est progressivement plus petite: Progid: dxiageTransform.microsoft.iris (iRisstyle = star, motion = in)
Le cercle grossit: PROGID: dxiagetransform.microsoft.iris (irisstyle = cercle, mouvement = out)
Cercle progressivement plus petit: Progid: dxiagetransform.microsoft.iris (irisstyle = cercle, mouvement = in)
Forme de diamant progressivement plus petite: Progid: dxiagetransform.microsoft.iris (irisstyle = diamant, mouvement = in)
Le diamant grossit: PROGID: dxiagetransform.microsoft.iris (irisstyle = diamant, mouvement = out)
Le signe plus grandit: Progid: dxiageTransform.microsoft.iris (iRisstyle = plus, motion = out)
Le signe plus devient progressivement plus petit: Progid: dxiageTransform.microsoft.iris (irisstyle = plus, mouvement = in)
Effacement vers le haut: Protocole: dximageTransform.microsoft.blinds (bandes = 1, direction = up)
Effacer down: Protocole: dximageTransform.microsoft.blinds (bandes = 1, direction = bas)
Effacer à gauche: Protocole: dxiagetransform.microsoft.blinds (bandes = 1, direction = gauche)
Effacer vers la droite: Protocole: dxiageTransform.microsoft.blinds (bandes = 1, direction = à droite)
Rétracter de gauche et du milieu droit: Progid: dxiagetransform.microsoft.barn (mouvement = in, orientation = vertical)
Dissolve aléatoire: Progid: dxiageTransform.microsoft.randomDissolve (activer = true)
La zone centrale est élargie de haut en bas: Progid: dxiageTransform.microsoft.barn (Motion = Out, orientation = horizontal)
Se développez à gauche et à droite au milieu: Progid: dxiageTransform.microsoft.barn (motion = out, orientation = vertical)
Ligne horizontale aléatoire: PROGID: dxiagetransform.microsoft.randombars (orientation = horizontal)
Ligne verticale aléatoire: PROGID: dxiagetransform.microsoft.randombars (orientation = vertical)
Rétraction moyenne supérieure et inférieure: Progid: dxiageTransform.microsoft.barn (mouvement = in, orientation = horizontal)
Conversion de gradient standard: Blendtrans (activé = true, pourcentage = 10)
Conversion de gradient réglable: Progid: dxiageTransform.microsoft.fade (activé = ture, chevauchement = 1,0)
Insérer en bas à droite: Protocole: dxiagetransform.microsoft.inset (activé = ture)
Masquer Stretch: PROGID: DxiageTransform.Microsoft.Stretch (StretchStyle = Hide)
PROGID: dxiagetransform.microsoft.Stretch (stretchstyle = push)
Stretch rotatif: PROGID: DxiageTransform.Microsoft.Stretch (stretchstyle = spin)
Anti-horloge: PROGID: dxiagetransform.microsoft.radialwipe (wipeyle = wedge)
Rayons de rayonnement: Progid: dxiagetransform.microsoft.radialwipe (wipeyle = radial)
Effet mosaïque: PROGID: dxiagetransform.microsoft.pixelate (maxsquare = 20)
Horloge: PROGID: dxiagetransform.microsoft.radialwipe (wipeyle = horloge)
En bas à gauche de l'échelle: Progid: dxiagetransform.microsoft.strips (mouvement = gauche)
En haut à droite de l'échelle: Progid: dxiageTransform.microsoft.strips (Motion = droite)
En haut à gauche de l'échelle: Progid: dxiageTransform.microsoft.strips (mouvement = sauf)
Inférieur à droite de l'échelle: PROGID: dxiagetransform.microsoft.strips (motion = droite)
Retrait en spirale: PROGID: DxiageTransform.microsoft.spiral (GridSizex = 20, GridSizey = 20)
Rotation du moulin à vent: PROGID: DxiageTransform.Microsoft.Wheel (rayons = 20)
Twists en forme de z: PROGID: DxiageTransform.microsoft.zigzag (GridSizex = 20, GridSizey = 20)
ＨBLINDS: PROGID: dxiagetransform.microsoft.blinds (bandes = 6, direction = bas)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 6, direction = up)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 60, direction = bas)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 60, direction = up)
V stores: Progid: dxiagetransform.microsoft.blinds (bandes = 6, direction = à droite)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 6, direction = gauche)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 60, direction = à droite)
: PROGID: dxiagetransform.microsoft.blinds (bandes = 60, direction = gauche)
Diapositive commutée: PROGID: DxiageTransform.Microsoft.slide (Slidestyle = Swap, Bands = 1)
: PROGID: dxiagetransform.microsoft.slide (slidestyle = swap, bandes = 20)
Push Slide: PROGID: dxiagetransform.microsoft.slide (slidestyle = push, bandes = 1)
: PROGID: dxiagetransform.microsoft.slide (slidestyle = push, bandes = 20)
Masquer la diapositive: PROGID: dxiagetransform.microsoft.slide (slidestyle = masquer, bandes = 1)
: PROGID: dxiagetransform.microsoft.slide (slidestyle = masquer, bandes = 20)
Avancement flou: PROGID: dxiagetransform.microsoft.gradientwipe (gradiedSize = 0,5, wipeyle = 0, mouvement = avant)
: PROGID: dxiagetransform.microsoft.gradientwipe (GradientSize = 0,5, wipeyle = 0, mouvement = inverse)
: PROGID: dxiagetransform.microsoft.gradientwipe (GradientSize = 0,5, Wipeyle = 1, mouvement = avant)
: PROGID: dxiagetransform.microsoft.gradientwipe (GradientSize = 0,5, Wipeyle = 1, mouvement = inverse)
Échecs vertical: PROGID: dxiagetransform.microsoft.checkerboard (direction = droit, squaresx = 12, squaresy = 12)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = gauche, squaresx = 12, squaresy = 12)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = droite, squaresx = 2, squaresy = 2)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = gauche, squaresx = 2, squaresy = 2)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = droite, squaresx = 60, squaresy = 60)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = gauche, squaresx = 60, squaresy = 60)
Les échecs horizontaux: PROGID: DxiageTransform.Microsoft.Checkerboard (Direction = Down, Squaresx = 12, SquaSy = 12)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = up, squaresx = 12, squaresy = 12)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = bas, squaresx = 2, squaresy = 2)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = up, squaresx = 2, squaresy = 2)
: PROGID: DxiageTransform.Microsoft.Checkerboard (Direction = Down, Squaresx = 60, SquaSy = 60)
: PROGID: dxiagetransform.microsoft.checkerboard (direction = up, squaresx = 60, squaresy = 60)