css滤镜制作

CSS滤镜基础概念

CSS滤镜（filter）属性允许对元素应用图形效果，如模糊、颜色调整等。通过组合不同滤镜函数，可以创建复杂的视觉效果。所有主流浏览器均支持该属性，但部分函数可能存在兼容性差异。

常用滤镜函数

模糊效果 使用blur()函数实现高斯模糊效果，参数值越大越模糊：

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

亮度调整 brightness()控制元素亮度，1为原始值，0为全黑：

.element {
  filter: brightness(0.7);
}

对比度调整 contrast()调整对比度，100%为原始值：

.element {
  filter: contrast(150%);
}

复合滤镜效果

多个滤镜函数可组合使用，空格分隔：

.element {
  filter: brightness(80%) contrast(120%) blur(2px);
}

动态交互效果

结合CSS过渡实现平滑变化：

.button {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.button:hover {
  filter: grayscale(0%);
}

高级应用示例

老照片效果

.vintage {
  filter: sepia(70%) brightness(80%) contrast(120%);
}

霓虹发光效果

.neon {
  filter: drop-shadow(0 0 5px #0ff) 
          drop-shadow(0 0 15px #0ff);
}

性能注意事项

过度使用滤镜可能影响页面性能，特别是在动画中。建议通过will-change属性优化：

.animated-element {
  will-change: filter;
}

浏览器兼容方案

对于不支持滤镜的旧版浏览器，可通过备用方案处理：

.element {
  /* 标准语法 */
  filter: opacity(50%);
  /* IE备用 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}