Back

在 CSS 中创建全息效果

OpenReplay Team OpenReplay Team

Jan 9, 2026 · 2 min read

在 CSS 中创建全息效果

你一定在交易卡、高端 UI 组件和作品集网站上见过它们:那些随视角变化而闪烁的彩虹色表面。全息 CSS 效果通过分层渐变、混合模式和细微动画来模拟这种光学现象——无需 WebGL。

本文将解释这些现代 CSS 视觉效果背后的组合技术,以及它们在实际界面中的适用场景。

核心要点

  • 全息 CSS 效果结合了分层渐变、混合模式和动画来模拟彩虹色表面
  • OKLCH 色彩空间比 RGB 或 HSL 产生更平滑、更可预测的颜色过渡
  • 始终包含 prefers-reduced-motion 媒体查询和纯色降级方案以保证可访问性
  • 谨慎地在需要吸引视觉注意力的强调元素上使用全息效果

全息效果的工作原理

物理全息材料通过光干涉图案产生彩虹色效果。在 CSS 中,我们通过分层多个颜色渐变来模拟这一效果,这些渐变以暗示深度和运动的方式进行变换和混合。

关键洞察:全息 CSS 效果不是单一属性,而是多种技术协同工作的组合——CSS 渐变混合、混合模式的策略性使用,以及可选的动效。

基础:分层渐变

CSS 彩虹色渐变依赖于堆叠多个渐变层。你可以在单个元素上组合 linear-gradient、radial-gradient 和 conic-gradient:

.holographic {
  background: 
    linear-gradient(115deg, transparent 20%, oklch(0.7 0.15 200) 45%, oklch(0.75 0.18 320) 55%, transparent 80%),
    conic-gradient(from 45deg, oklch(0.8 0.12 60), oklch(0.7 0.15 180), oklch(0.8 0.12 300), oklch(0.8 0.12 60));
}

每一层都对最终效果有所贡献。线性渐变提供方向性的闪光,而圆锥渐变则添加全息箔纸特有的径向色彩变化。

关于渐变类型和组合的背景知识,请参阅 MDN 文档: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

OKLCH 色彩 CSS:现代化基础

OKLCH 色彩 CSS 已成为这些效果的首选色彩空间。与 RGB 或 HSL 不同,OKLCH 是感知均匀的——这意味着相等的数值步长会产生视觉上相等的色彩差异。

对于全息效果,这很重要,因为:

  • 更平滑的过渡:渐变不会在中间点变成灰色
  • 可预测的色相变化:颜色在色谱中自然旋转
  • 一致的亮度:效果在各个色标之间保持视觉平衡

你还可以显式控制渐变插值:

.holographic {
  background: linear-gradient(in oklch, oklch(0.7 0.15 0), oklch(0.7 0.15 360));
}

这创建了一个连续的色相旋转(回绕到起始色相),而不会出现 sRGB 插值中常见的意外暗带。

关于 OKLCH 的深入解释以及它为何在许多设计任务中取代了 HSL,请参阅: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

混合模式和滤镜

混合模式改变渐变层之间的交互方式。对全息效果最有用的模式包括:

  • color-dodge:提亮底层颜色,创造金属高光
  • difference:在层重叠处反转颜色,产生棱镜般的变化
  • overlay:结合正片叠底和滤色以增加深度而不褪色

滤镜添加最后的润色:

.holographic-layer {
  mix-blend-mode: color-dodge;
  filter: brightness(0.8) contrast(1.4);
}

请注意,组合混合模式和滤镜会增加渲染成本,特别是在低性能或移动 GPU 上。

负责任地添加动效

细微的动画为全息效果注入生命力。标准方法是在放大的渐变上移动 background-position:

.holographic {
  background-size: 200% 200%;
  animation: shimmer 6s ease-in-out infinite;
}

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

性能考虑:尽可能使用 transform 和 opacity 进行动画。对于背景动画,谨慎且临时地应用 will-change: background-position(例如在悬停或活动状态时),以避免不必要的内存开销。

可访问性要求:始终尊重用户偏好:

@media (prefers-reduced-motion: reduce) {
  .holographic {
    animation: none;
  }
}

实际限制

全息效果在不同设备和浏览器上的渲染效果不同。预期会出现以下差异:

  • 不同显示色域上的颜色鲜艳度
  • 低性能设备上的动画流畅度
  • 8 位显示器上的渐变色带

采用渐进增强的方式构建。从纯色降级方案开始,为支持的浏览器添加渐变层,最后添加动画:

.holographic {
  background: #6366f1; /* 降级方案 */
  background: linear-gradient(115deg, transparent 20%, oklch(0.7 0.15 200) 45%, oklch(0.75 0.18 320) 55%, transparent 80%);
}

何时使用这些效果

全息 CSS 效果最适合用于:

  • 强调元素(卡片、徽章、CTA)
  • 交互状态(悬停、聚焦)
  • 高端或趣味性品牌场景

不适合用于:

  • 正文文本背景
  • 需要快速扫描的导航元素
  • 优先考虑可访问性或认知简洁性的界面

这种效果会吸引注意力。在需要引起注意的地方使用它。

总结

全息 CSS 效果是组合性的——分层渐变、混合模式和动效协同工作。OKLCH 为平滑、逼真的过渡提供了色彩基础。这些技术在现代浏览器中得到广泛支持,但不能保证跨设备的视觉一致性。

从简单开始:一个渐变层、一个混合模式、最小化的动效。只有当效果服务于界面而不是装饰界面时,才增加复杂性。

常见问题

OKLCH 颜色在现代常青浏览器中得到支持。使用 in oklch 的渐变插值在当前浏览器版本中也可用,但支持细节有所不同。始终为可能无法正确渲染 OKLCH 值的环境提供降级颜色。

渐变色带出现在色彩深度有限的显示器上。要减少色带,使用 OKLCH 色彩空间以获得更平滑的插值,增加渐变中的色标数量,避免大面积非常相似的颜色缓慢过渡。可选的抖动或噪点技术可以进一步减少可见的色带。

是的,复杂的分层渐变和连续动画会对渲染性能造成压力,特别是在移动设备上。限制屏幕上的动画元素数量,谨慎使用 will-change,考虑在元素离开视口时暂停动画,并在开发过程中在低性能设备上进行测试。

使用 JavaScript 跟踪光标位置并更新控制渐变角度或位置的 CSS 自定义属性。将这些属性应用于渐变定义,节流更新以避免性能问题,并始终为触摸设备和偏好减少动效的用户提供静态降级方案。

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..

OpenReplay

More articles from OpenReplay Blog