当前位置：首页 > CSS

css滤镜制作

2026-01-28 07:15:04CSS

CSS滤镜基础语法

CSS滤镜通过filter属性实现，支持多种视觉效果。基本语法为：

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

多个滤镜可叠加使用，用空格分隔：

selector {
  filter: blur(5px) brightness(150%);
}

常用滤镜函数

模糊效果
blur()函数创建毛玻璃效果，参数为模糊半径：

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

亮度调整
brightness()控制元素明暗，100%为原始值：

css滤镜制作

.brightness-effect {
  filter: brightness(70%);
}

对比度调整
contrast()改变色彩对比度：

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

灰度转换
grayscale()将元素转为黑白，100%为完全灰度：

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

色相旋转
hue-rotate()改变颜色相位，角度值0-360deg：

css滤镜制作

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

复合滤镜效果

组合多个滤镜可创建复杂视觉效果。例如实现复古风格：

.vintage-effect {
  filter: sepia(50%) contrast(120%) brightness(90%);
}

动态滤镜交互

结合CSS过渡实现平滑动画效果：

.hover-effect {
  filter: brightness(100%);
  transition: filter 0.3s ease;
}
.hover-effect:hover {
  filter: brightness(130%) drop-shadow(0 0 8px #ff0);
}

性能优化建议

避免对大面积元素应用高模糊度
使用will-change: filter提示浏览器优化
考虑使用SVG滤镜替代复杂CSS滤镜

浏览器兼容性

现代浏览器均支持CSS滤镜，对于旧版IE可使用：

.filter-fallback {
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
  /* Modern browsers */
  filter: blur(3px);
}