css滤镜制作

CSS滤镜基础语法

CSS滤镜通过filter属性实现，可对元素（如图片、背景等）应用视觉效果。基本语法如下：

selector {
  filter: filter-function(value);
}

常用滤镜函数

模糊效果
使用blur()函数，参数为模糊半径（单位px或rem）：

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

亮度调整
brightness()控制明暗，1为原始亮度，0为全黑，大于1增亮：

.brightness-effect {
  filter: brightness(0.7);
}

对比度调整
contrast()调整对比度，1为原始值，0无对比度：

.contrast-effect {
  filter: contrast(150%);
}

灰度转换
grayscale()将元素转为灰度，1为完全灰度，0为原始色彩：

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

色相旋转
hue-rotate()改变颜色相位，参数为角度（deg）：

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

阴影效果
drop-shadow()添加投影，参数类似box-shadow：

.shadow-effect {
  filter: drop-shadow(2px 4px 6px black);
}

复合滤镜效果

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

.combined-effect {
  filter: brightness(1.2) contrast(110%) blur(1px);
}

动画与过渡

滤镜可与CSS动画结合实现动态效果：

@keyframes pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

.animated-filter {
  animation: pulse 2s infinite;
}

性能注意事项

• 避免对大量元素或复杂元素应用滤镜
• 模糊(blur)和阴影(drop-shadow)对性能影响较大
• 考虑使用will-change: filter优化动画性能

浏览器兼容性

现代浏览器均支持CSS滤镜，但部分旧版本需前缀：

.legacy-support {
  -webkit-filter: blur(2px);
  filter: blur(2px);
}