时间戳

首页 > 解决方案 > 如何在 CSS 中显示文本蒙版后面的动画？

css - 如何在 CSS 中显示文本蒙版后面的动画？

问题描述

我最近遇到了一个很酷的效果，开发人员在 CSS 中显示了一个被文本屏蔽的动画。您可以在此页面的标题上找到它：https ://www.adobe.com/products/xd/features/whats-new.html

你如何做到这一点？

标签： cssanimation

解决方案

经过一番调查后发现，它实际上非常简单：

您只需将 SVG 动画作为背景放入周围的容器中，然后在文本上使用 {mix-blend-mode: lighten;} 和 {background: white} ：

.container {
  background: url(https://www.adobe.com/content/dam/cc/us/en/products/xd/features/knockout_animation.svg);

}

.container h1 {
  mix-blend-mode: lighten;
  background: white;
  
}

推荐阅读