CSS奇技淫巧之滤镜：图像操作的神奇世界（下）

2024-02-06 22:01:09

CSS滤镜（filter）是一种神奇的工具，它允许我们使用简单的代码来改变图像的外观。在之前的文章中，我们已经介绍了CSS滤镜的基本概念和几种常见滤镜的使用方法。在本文中，我们将继续探讨更高级的CSS滤镜技巧，并分享一些有趣的应用案例。

1. 滤镜组合

CSS滤镜可以组合使用，以创建出更加复杂和有趣的效果。例如，我们可以将模糊滤镜（blur）和颜色滤镜（color）结合起来，以创建一个柔和而充满活力的图像。

.image {
  filter: blur(10px) color(red);
}

2. 滤镜动画

CSS滤镜还可以与动画结合使用，以创建动态效果。例如，我们可以使用关键帧动画（keyframes animation）来平滑地改变滤镜的属性，从而实现图像的淡入淡出、旋转或缩放等效果。

@keyframes fade-in {
  from {
    filter: blur(10px);
  }
  to {
    filter: none;
  }
}

.image {
  animation: fade-in 1s ease-in-out;
}

3. 滤镜混合模式

CSS滤镜还支持混合模式（blend mode），这是一种将两个或多个图像混合在一起的技巧。我们可以使用混合模式来创建重叠图像、双重曝光效果等。

.image {
  filter: blend-mode(multiply);
}

4. 创建自定义滤镜

除了内置的CSS滤镜之外，我们还可以使用CSS自定义滤镜（custom filter）来创建自己的滤镜效果。自定义滤镜使用特殊的语法来定义滤镜的计算过程，我们可以根据自己的需求来设计出各种各样的滤镜效果。

filter: custom(
  "grayscale"
  "contrast(2)"
  "sepia(10%)"
);

5. 滤镜与SVG

CSS滤镜还可以应用于SVG图像。这使得我们可以使用CSS来创建复杂的SVG动画和交互效果。

<svg>
  <path id="path" d="M0 0 L100 100" />
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
</svg>

<style>
  #path {
    filter: url(#blur);
  }
</style>

6. 滤镜与WebGL

CSS滤镜还可以与WebGL结合使用，以创建更加复杂和逼真的图像效果。WebGL是一种用于创建3D图形的JavaScript API，我们可以使用它来渲染复杂的3D场景，并使用CSS滤镜来对这些场景进行处理。

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

// 创建3D场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });

// 添加物体到场景中
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染场景
renderer.render(scene, camera);

// 添加CSS滤镜
const filter = document.querySelector("#filter");
canvas.style.filter = `url(${filter})`;