Überblick über die neuen Funktionen von CSS3: Wie Sie mit CSS3 Filtereffekte erzielen

Überblick über die neuen Funktionen von CSS3: So verwenden Sie CSS3, um Filtereffekte zu erzielen

Einführung:

Im Webdesign können wir dies tun, um die Aufmerksamkeit des Benutzers zu erregen und den künstlerischen Sinn und die Schönheit der Seite zu steigern Verwenden Sie verschiedene Filtereffekte für Bilder, um den visuellen Effekt von Webseiten zu verbessern. Die neuen Funktionen in CSS3 stellen uns leistungsstarke Werkzeuge zur Verfügung, um diese Filtereffekte zu erzielen. In diesem Artikel werden einige gängige Filtereffekte von CSS3 vorgestellt und praktische Beispiele für die Verwendung dieser Effekte bereitgestellt.

1. So verwenden Sie CSS3-Filtereffekte

Um CSS3-Filtereffekte zu verwenden, können wir dies tun, indem wir relevante CSS-Attribute zu HTML-Elementen hinzufügen. Hier sind einige häufig verwendete CSS3-Filtereffekte und deren Verwendung:

1. Gaußsche Unschärfe (Unschärfe): Dieser Effekt kann das Bild unscharf machen. Die Verwendung ist wie folgt:

   .blur {
       filter: blur(5px);
   }

   Im obigen Code verwenden wir den Klassenselektor .blur, um die Elemente auszuwählen, die den Gaußschen Unschärfeeffekt anwenden müssen, und verwenden die Funktion blur() -Funktion für Gibt den Grad der Unschärfe in Pixeln an. .blur类选择器来选中需要应用高斯模糊效果的元素，并使用blur()函数来指定模糊的程度，以像素为单位。

2. 对比度（contrast）：该效果可以调整图像的对比度。使用方法如下：

   .contrast {
       filter: contrast(200%);
   }

   在上述代码中，我们使用.contrast类选择器来选中需要调整对比度的元素，并使用contrast()函数来指定对比度的值，以百分比为单位。

3. 亮度（brightness）：该效果可以调整图像的亮度。使用方法如下：

   .brightness {
       filter: brightness(150%);
   }

   在上述代码中，我们使用.brightness类选择器来选中需要调整亮度的元素，并使用brightness()函数来指定亮度的值，以百分比为单位。

4. 色相旋转（hue-rotate）：该效果可以改变图像的颜色。使用方法如下：

   .hue-rotate {
       filter: hue-rotate(90deg);
   }

   在上述代码中，我们使用.hue-rotate类选择器来选中需要改变颜色的元素，并使用hue-rotate()函数来指定色相旋转的角度，以度为单位。

5. 饱和度（saturate）：该效果可以调整图像的饱和度。使用方法如下：

   .saturate {
       filter: saturate(200%);
   }

   在上述代码中，我们使用.saturate类选择器来选中需要调整饱和度的元素，并使用saturate()

Kontrast: Mit diesem Effekt kann der Kontrast des Bildes angepasst werden. Die Verwendung ist wie folgt:

.black-white {
    filter: grayscale(100%);
}

Im obigen Code verwenden wir den Klassenselektor .contrast, um die Elemente auszuwählen, die den Kontrast anpassen müssen, und verwenden den contrast()</ Code> Funktion zur Angabe des Kontrasts Der Wert von in Prozent. <p></p><ol><li>Helligkeit: Mit diesem Effekt kann die Helligkeit des Bildes angepasst werden. Die Verwendung ist wie folgt: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.blur-background { filter: blur(10px); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>Im obigen Code verwenden wir den Klassenselektor <code>.brightness, um die Elemente auszuwählen, deren Helligkeit angepasst werden muss, und verwenden den Klassenselektor brightness()</ Code> Funktion zur Angabe der Helligkeit Der Wert von in Prozent. </li><li><p></p>Farbton drehen: Dieser Effekt kann die Farbe des Bildes ändern. Die Verwendung ist wie folgt: </li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.text-shadow { filter: drop-shadow(2px 2px 2px black); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><li>Im obigen Code verwenden wir den Klassenselektor <code>.hue-rotate, um die Elemente auszuwählen, deren Farbe geändert werden muss, und verwenden hue-rotate() Funktion zur Angabe des Winkels der Farbtonrotation in Grad.

Saturate: Dieser Effekt kann die Sättigung des Bildes anpassen. Die Verwendung ist wie folgt:

.flip-image {
    filter: scaleX(-1);
}

Im obigen Code verwenden wir den Klassenselektor .saturate, um die Elemente auszuwählen, deren Sättigung angepasst werden muss, und verwenden den Klassenselektor saturate() Code> Funktion zur Angabe des Sättigungswerts in Prozent.

2. Beispiele für die Verwendung von CSS3-Filtereffekten

Im Folgenden finden Sie einige tatsächliche Beispiele für die Verwendung von CSS3-Filtereffekten als Referenz für die Leser: 🎜🎜🎜🎜Schwarz-Weiß-Effekt des Bildes: 🎜rrreee🎜🎜🎜Unscharfer Hintergrund von der Bildeffekt: 🎜rrreee🎜🎜🎜 Textprojektionseffekt: 🎜rrreee🎜🎜🎜 Bildspiegelungseffekt: 🎜rrreee🎜🎜🎜Fazit: 🎜🎜Durch den Filtereffekt von CSS3 können wir Webseiten problemlos verschiedene Bildverarbeitungseffekte hinzufügen. Verbessern Sie die visuellen Effekte und das Benutzererlebnis von Webseiten. In diesem Artikel werden einige gängige Filtereffekte von CSS3 und deren Verwendung vorgestellt und praktische Fälle als Referenz für die Leser bereitgestellt. Ich hoffe, dass die Leser durch die Einführung dieses Artikels CSS3-Filtereffekte besser anwenden können, um das Webdesign zu verschönern. 🎜

Das obige ist der detaillierte Inhalt vonÜberblick über die neuen Funktionen von CSS3: Wie Sie mit CSS3 Filtereffekte erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!