VmVibe Materials
EN中文ESHIAR
返回地图
Digital / Web UI

全息镭射

一种类似镭射箔片的虹彩材质，带有色带偏移、珍珠高光和薄膜感。

当前状态: ReadyHg
Hg

适用场景

  • 发布徽章
  • 价格卡片
  • 收藏感面板

可调参数

  • hue range
  • grain
  • highlight
  • angle
  • saturation

AI Prompt

生成全息镭射箔片表面：虹彩偏移、珍珠高光、细颗粒和克制高级感。避免彩虹过乱。

Tailwind 思路

使用 conic-gradient 或多层 radial-gradient，并控制饱和度。

性能提醒

静态全息渐变没问题；hover 闪光范围要小，并支持 reduced motion。

CSS

.holographic {
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
    conic-gradient(from 220deg, #b6fff1, #ffb8e8, #fff3a8, #a9c7ff, #b6fff1);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 20px 60px rgba(255, 120, 220, .16);
}

React 示例

export function HolographicBadge({ children }) {
  return <span className="holographic">{children}</span>;
}