css3-filter 上手试试

CSS3 Filter 是一种强大的前端技术，它可以实现图像和文本的变换效果。在这篇文章中，我们将介绍 CSS3 Filter 的基础知识，并提供一些示例代码，帮助你更好地理解和应用这一技术。

前置知识

在开始使用 CSS3 Filter 之前，需要掌握以下基础知识：

CSS 属性

• filter：用于指定元素的滤镜效果。

滤镜效果

• blur：模糊度。
• brightness：亮度。
• contrast：对比度。
• drop-shadow：阴影。
• grayscale：灰度。
• hue-rotate：色相旋转。
• invert：反相。
• opacity：透明度。
• saturate：饱和度。
• sepia：褐色。

实例演示

下面是一些常见的 CSS3 Filter 滤镜效果及其示例代码。

模糊度（blur）

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

亮度（brightness）

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

对比度（contrast）

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

阴影（drop-shadow）

.drop-shadow {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

灰度（grayscale）

.grayscale {
  filter: grayscale(100%);
}

色相旋转（hue-rotate）

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

反相（invert）

.invert {
  filter: invert(100%);
}

透明度（opacity）

.opacity {
  filter: opacity(50%);
}

饱和度（saturate）

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

褐色（sepia）

.sepia {
  filter: sepia(100%);
}

结语

CSS3 Filter 是一个十分有用的前端技术，它可以让我们轻松地实现各种酷炫的图像效果。当然，除了上述示例外，还有很多其他的滤镜效果可供使用。希望大家在学习和应用 CSS3 Filter 技术时能够发挥自己的创造力，创造出更加丰富、独特的效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9075