CSS滤镜和混合模式

PFinal社区_南丞
62 阅读6分钟

第12章: CSS滤镜和混合模式

🎯 本章重点

  • CSS滤镜效果
  • 背景混合模式
  • 图像处理技巧
  • 动画和过渡效果
  • 性能优化策略
  • 浏览器兼容性

📖 内容概述

12.1 CSS滤镜基础

12.1.1 基本滤镜效果
/* 模糊效果 */
.blur-effect {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

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

/* 亮度调整 */
.brightness-effect {
  filter: brightness(0.8);
}

.brightness-effect:hover {
  filter: brightness(1.2);
}

/* 对比度调整 */
.contrast-effect {
  filter: contrast(150%);
}

/* 灰度效果 */
.grayscale-effect {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

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

/* 色相旋转 */
.hue-rotate-effect {
  filter: hue-rotate(90deg);
  animation: hueRotate 5s infinite linear;
}

@keyframes hueRotate {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

/* 反转颜色 */
.invert-effect {
  filter: invert(100%);
}

/* 透明度 */
.opacity-effect {
  filter: opacity(50%);
}

/* 饱和度 */
.saturate-effect {
  filter: saturate(200%);
}

/* 棕褐色调 */
.sepia-effect {
  filter: sepia(100%);
}
12.1.2 组合滤镜效果
/* 多重滤镜组合 */
.complex-filter {
  filter: 
    blur(2px)
    brightness(1.1)
    contrast(1.2)
    saturate(1.3)
    hue-rotate(15deg);
}

/* 图片特效 */
.photo-effect {
  filter: 
    contrast(1.2)
    brightness(1.1)
    saturate(1.3)
    sepia(0.2);
}

/* 暗角效果 */
.vignette-effect {
  position: relative;
}

.vignette-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}

12.2 高级滤镜技巧

12.2.1 SVG滤镜集成
/* 使用SVG滤镜 */
.svg-filter-effect {
  filter: url('#custom-filter');
}

/* HTML中的SVG滤镜 */
<svg style="display: none;">
  <filter id="custom-filter">
    <feGaussianBlur stdDeviation="5" />
    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0  
              0 0 1 0 0
              0 0 0 20 -8" />
  </filter>
</svg>

/* 更复杂的SVG滤镜 */
<filter id="glow-effect">
  <feGaussianBlur stdDeviation="3" result="blur" />
  <feColorMatrix
    type="matrix"
    in="blur"
    values="1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 20 -8"
    result="glow" />
  <feComposite in="SourceGraphic" in2="glow" operator="over" />
</filter>
12.2.2 动态滤镜控制
/* 使用CSS变量控制滤镜 */
:root {
  --blur-amount: 0px;
  --brightness-level: 1;
  --contrast-level: 1;
  --saturation-level: 1;
  --hue-rotate: 0deg;
}

.dynamic-filter {
  filter: 
    blur(var(--blur-amount))
    brightness(var(--brightness-level))
    contrast(var(--contrast-level))
    saturate(var(--saturation-level))
    hue-rotate(var(--hue-rotate));
}

/* JavaScript控制示例 */
function updateFilter(values) {
  document.documentElement.style.setProperty(
    '--blur-amount', values.blur + 'px'
  );
  document.documentElement.style.setProperty(
    '--brightness-level', values.brightness
  );
  document.documentElement.style.setProperty(
    '--contrast-level', values.contrast
  );
  document.documentElement.style.setProperty(
    '--saturation-level', values.saturation
  );
  document.documentElement.style.setProperty(
    '--hue-rotate', values.hue + 'deg'
  );
}

12.3 混合模式基础

12.3.1 背景混合模式
/* 基本混合模式 */
.blend-mode {
  background-image: 
    linear-gradient(45deg, #ff6b6b, #4ecdc4),
    url('texture.jpg');
  background-blend-mode: multiply;
}

/* 多重背景混合 */
.complex-blend {
  background-image: 
    url('pattern.png'),
    linear-gradient(to right, #667eea, #764ba2);
  background-blend-mode: overlay, screen;
}

/* 混合模式效果展示 */
.blend-demo {
  background: 
    linear-gradient(45deg, #ff6b6b, #4ecdc4),
    url('image.jpg');
}

.blend-multiply { background-blend-mode: multiply; }
.blend-screen { background-blend-mode: screen; }
.blend-overlay { background-blend-mode: overlay; }
.blend-darken { background-blend-mode: darken; }
.blend-lighten { background-blend-mode: lighten; }
.blend-color-dodge { background-blend-mode: color-dodge; }
.blend-color-burn { background-blend-mode: color-burn; }
.blend-hard-light { background-blend-mode: hard-light; }
.blend-soft-light { background-blend-mode: soft-light; }
.blend-difference { background-blend-mode: difference; }
.blend-exclusion { background-blend-mode: exclusion; }
.blend-hue { background-blend-mode: hue; }
.blend-saturation { background-blend-mode: saturation; }
.blend-color { background-blend-mode: color; }
.blend-luminosity { background-blend-mode: luminosity; }
12.3.2 元素混合模式
/* mix-blend-mode 使用 */
.text-blend {
  color: white;
  mix-blend-mode: difference;
  position: relative;
}

.image-blend {
  mix-blend-mode: multiply;
}

/* 创建文字效果 */
.hero-text {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  mix-blend-mode: difference;
  background: url('texture.jpg') center/cover;
}

/* 图片叠加效果 */
.image-composite {
  position: relative;
}

.image-composite img {
  position: absolute;
  top: 0;
  left: 0;
}

.image-composite img:first-child {
  mix-blend-mode: multiply;
}

.image-composite img:last-child {
  mix-blend-mode: screen;
}

12.4 高级混合技巧

12.4.1 混合模式组合
/* 多重混合模式效果 */
.layered-effects {
  position: relative;
}

.layered-effects::before,
.layered-effects::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.layered-effects::before {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.layered-effects::after {
  background: url('noise.png');
  mix-blend-mode: overlay;
  opacity: 0.3;
}

/* 文字特效 */
.text-effect {
  position: relative;
  color: black;
}

.text-effect::before {
  content: attr(data-text);
  position: absolute;
  color: #ff6b6b;
  mix-blend-mode: multiply;
  transform: translate(2px, 2px);
}
12.4.2 动画混合效果
/* 动画混合模式 */
.animated-blend {
  background: 
    linear-gradient(45deg, #ff6b6b, #4ecdc4),
    url('texture.jpg');
  background-blend-mode: multiply;
  animation: blendAnimation 3s infinite alternate;
}

@keyframes blendAnimation {
  0% { background-blend-mode: multiply; }
  25% { background-blend-mode: screen; }
  50% { background-blend-mode: overlay; }
  75% { background-blend-mode: color-dodge; }
  100% { background-blend-mode: difference; }
}

/* 渐变背景混合动画 */
.gradient-blend {
  background: 
    linear-gradient(45deg, #ff6b6b, #4ecdc4),
    linear-gradient(135deg, #667eea, #764ba2);
  background-blend-mode: overlay;
  background-size: 400% 400%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

12.5 滤镜和混合模式实战

12.5.1 图片画廊效果
/* 图片滤镜画廊 */
.gallery-item {
  transition: all 0.3s ease;
}

.gallery-item:hover {
  filter: 
    brightness(1.1)
    contrast(1.2)
    saturate(1.3);
  transform: scale(1.05);
}

/* 不同滤镜效果 */
.gallery-item.vintage {
  filter: sepia(0.5) brightness(0.9) contrast(1.2);
}

.gallery-item.cool {
  filter: hue-rotate(180deg) brightness(0.95);
}

.gallery-item.warm {
  filter: hue-rotate(-30deg) saturate(1.3);
}

/* 鼠标悬停混合效果 */
.gallery-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover::before {
  opacity: 0.6;
}
12.5.2 文字和UI特效
/* 发光文字效果 */
.glow-text {
  color: #fff;
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor;
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff6b6b; }
  to { text-shadow: 0 0 10px #fff, 0 0 20px #ff6b6b, 0 0 40px #ff6b6b; }
}

/* 按钮特效 */
.glow-button {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  padding: 12px 24px;
  color: white;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.glow-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

12.6 性能优化和兼容性

12.6.1 性能优化策略
/* 硬件加速优化 */
.optimized-filter {
  filter: blur(2px);
  transform: translateZ(0);
  will-change: filter;
}

/* 减少重绘区域 */
.filter-container {
  /* 限制滤镜应用范围 */
  contain: layout style paint;
}

/* 动画性能优化 */
.performance-animation {
  filter: blur(var(--blur, 0px));
  transition: filter 0.3s ease;
  
  /* 使用will-change提示浏览器 */
  will-change: filter;
}

/* 避免过度使用 */
@media (prefers-reduced-motion: reduce) {
  .performance-animation {
    transition: none;
  }
}
12.6.2 浏览器兼容性处理
/* 特性检测回退 */
@supports not (filter: blur(2px)) {
  .filter-fallback {
    /* SVG滤镜回退 */
    background-image: 
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></svg>#blur');
  }
}

@supports not (mix-blend-mode: multiply) {
  .blend-fallback {
    opacity: 0.8;
  }
}

/* 渐进增强 */
.enhanced-effect {
  /* 基础效果 */
  opacity: 0.8;
}

@supports (mix-blend-mode: multiply) {
  .enhanced-effect {
    opacity: 1;
    mix-blend-mode: multiply;
  }
}

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

12.7 创意应用案例

12.7.1 艺术效果实现
/* 油画效果 */
.oil-painting-effect {
  filter: 
    contrast(1.2)
    saturate(1.5)
    brightness(0.9)
    sepia(0.2);
  position: relative;
}

.oil-painting-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('canvas-texture.jpg');
  mix-blend-mode: overlay;
  opacity: 0.3;
}

/* 素描效果 */
.sketch-effect {
  filter: 
    grayscale(100%)
    contrast(200%)
    invert(100%);
  mix-blend-mode: multiply;
}

/* 霓虹灯效果 */
.neon-effect {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #ff6b6b,
    0 0 20px #ff6b6b,
    0 0 40px #ff6b6b;
  animation: neonPulse 2s infinite alternate;
}

@keyframes neonPulse {
  from { opacity: 0.8; }
  to { opacity: 1; }
}
12.7.2 实用UI组件
/* 毛玻璃效果 */
.glass-morphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 深色模式毛玻璃 */
.glass-morphism-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 卡片悬停效果 */
.card-hover-effect {
  transition: all 0.3s ease;
}

.card-hover-effect:hover {
  filter: 
    brightness(1.05)
    contrast(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 禁用状态效果 */
.disabled-effect {
  filter: grayscale(100%) opacity(0.6);
  pointer-events: none;
  user-select: none;
}

💡 滤镜和混合模式总结

  1. 滤镜: 图像处理效果，支持动画
  2. 混合模式: 颜色混合算法，创造复杂效果
  3. 性能: 注意硬件加速和重绘优化
  4. 兼容性: 提供适当的回退方案
  5. 创意: 无限的艺术表现可能性
avatar
文章
阅读
粉丝