能否将Lottie动画用作图片的mask-image属性？

首先明确：CSS mask-image 无法直接引用Lottie动画的DOM容器，因为它只支持图像类资源（如图片文件、SVG、渐变、Canvas），而Lottie是通过JS动态渲染的元素，不能直接作为mask的数据源。下面提供两种可落地的方案：

方案一：SVG + CSS Mask 绑定 #

利用Lottie的SVG渲染模式，把动画内容嵌入到SVG的<mask>元素中，再通过CSS mask属性绑定到目标图片上：

代码示例 #

<div class="img-wrap">
  <img src="your-image.jpg" class="masked-img">
  <!-- 隐藏的SVG用于承载遮罩 -->
  <svg width="0" height="0" viewBox="0 0 400 400">
    <mask id="hover-mask">
      <!-- Lottie动画会渲染到这个g元素里 -->
      <g id="lottie-target"></g>
    </mask>
  </svg>
</div>

.masked-img {
  width: 400px;
  height: 400px;
  /* 绑定SVG遮罩 */
  mask: url(#hover-mask);
  mask-size: cover;
}

// 初始化Lottie，指定SVG渲染模式
const anim = lottie.loadAnimation({
  container: document.getElementById('lottie-target'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'your-lottie.json' // 替换为你的动画文件路径
});

// 监听悬停事件控制动画
const wrap = document.querySelector('.img-wrap');
wrap.addEventListener('mouseenter', () => anim.play());
wrap.addEventListener('mouseleave', () => {
  anim.stop();
  anim.goToAndStop(0, true); // 重置到初始帧
});

方案二：Canvas 实时更新遮罩 #

利用Canvas作为mask-image的数据源，让Lottie在Canvas上渲染动画，实时同步到图片遮罩：

代码示例 #

<div class="img-wrap">
  <img src="your-image.jpg" class="masked-img">
  <!-- 隐藏Canvas用于渲染Lottie -->
  <canvas id="lottie-canvas" style="display: none;"></canvas>
</div>

.masked-img {
  width: 400px;
  height: 400px;
  mask-image: url(#lottie-canvas);
  mask-size: cover;
}

const canvas = document.getElementById('lottie-canvas');
const img = document.querySelector('.masked-img');

// 同步Canvas尺寸和图片一致
canvas.width = img.offsetWidth;
canvas.height = img.offsetHeight;

// 初始化Lottie的Canvas渲染模式
const anim = lottie.loadAnimation({
  container: canvas,
  renderer: 'canvas',
  loop: false,
  autoplay: false,
  path: 'your-lottie.json'
});

// 悬停控制动画
const wrap = document.querySelector('.img-wrap');
wrap.addEventListener('mouseenter', () => anim.play());
wrap.addEventListener('mouseleave', () => {
  anim.stop();
  anim.goToAndStop(0, true);
});

原代码失效原因 #

你之前的代码试图直接把Lottie的DOM容器作为mask-image的源，这不符合CSS规范——mask-image需要的是图像资源的URL，而非DOM元素引用，所以无法生效。

内容的提问来源于stack exchange，提问作者jacquesknie