CSS-Filtereffekt (2)_Grundlegendes Tutorial

7、Gray ,Invert,Xray 滤镜

语法：{filter:gray} ,{filter:invert},{filter:xray}

Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。

效果如下：

8. Lichtfilter

Syntax: Filter{light}

Dieses Attribut simuliert den Projektionseffekt einer Lichtquelle. Sobald die Filtereigenschaft „LICHT“ für ein Objekt definiert ist, kann dessen „Methode“ aufgerufen werden, um die Eigenschaft festzulegen oder zu ändern. Die verfügbaren Methoden für „LICHT“ sind:

• AddAmbient Eine umgebende Lichtquelle hinzufügen
• AddCone Kegellichtquelle hinzufügen
• AddPoint Punktlichtquelle hinzufügen
• Farbe ändern Ändern Sie die Farbe des Lichts
• Changstrength Ändern Sie die Intensität der Lichtquelle
• Löschen Alle Lichtquellen löschen
• MoveLight Lichtquelle bewegen

Sie können die virtuelle Position der Lichtquelle definieren und die Position des Fokus der Lichtquelle steuern, indem Sie die Werte der X-Achse und Y-Achse anpassen. Sie können auch die Form anpassen der Lichtquelle (Punktlichtquelle oder Kegellichtquelle), um anzugeben, ob die Lichtquelle die Grenze verwischt, die Farbe, Helligkeit und andere Eigenschaften der Lichtquelle. Wenn Sie die Lichtquelle dynamisch einstellen, kann es zu unerwarteten Effekten kommen. Konkrete Beispiele finden Sie auf den folgenden Seiten.

9. Maskenfilter

Syntax: {filter:mask(color=color)}

Verwenden Sie das Attribut „MASKE“, um einen Film zu erzeugen, der die Oberfläche des Objekts bedeckt. Der Effekt ist, als würde man das Objekt mit einer farbigen Brille sehen.

10. Schattenfilter

Syntax: {filter:shadow(color=color,direction=direction)}

Verwenden Sie das Attribut „Schatten“, um die Projektion eines Objekts in der angegebenen Richtung zu erstellen. FARBE ist die Projektionsfarbe und RICHTUNG ist die Richtung der Projektion. Wobei 0 Grad die Vertikale nach oben darstellt und alle 45 Grad eine Einheit sind. Der Standardwert beträgt 270 Grad nach links.

filter:shadow(color=red,direction=225)
filter:shadow(color=blue,direction=225)
filter:shadow(color=gray,direction=225 )
Die Auswirkungen sind wie folgt:

Schattenfilter Tropfwasser-Traufen-Teehausproduktion

Schattenfilter Tropfwasser-Traufen-Teehausproduktion

SchattenfilterTropfwasser-Traufen-Teehausproduktion

11. Wellenfilter Syntax: {filter:wave(add=add , freq=freq,lightstrength=strength,phase=phase,strength=strength)🎜>Das „wave“-Attribut unterbricht das Objekt in einem vertikalen Wellenformstil. Der Standardwert ist „TRUE (non-0)“,

„ADD“ gibt an, ob das Objekt in einem Wellenformstil unterbrochen werden soll,

„FREQ“ ist die Frequenz der Welligkeit, die angibt, wie viele vollständige Wellen auf dem Objekt erzeugt werden müssen,

Der Parameter „LIGHTSTRENGTH“ kann die Wirkung von Licht und Schatten auf Wellen verstärken und reicht von 0 bis 100,

Mit dem Parameter „PHASE“ wird der Offset der Sinuswelle eingestellt.

„STÄRKE“ steht für die Amplitude.