使用其他 GIF 对 GIF 进行蒙版 | CSS-Tricks

前几天，Cassie Evans 在 Twitter 上发布了一个非常巧妙的技巧，我以前从未见过：使用 SVG 对一个 GIF 进行蒙版以覆盖另一个 GIF。效果非常棒，特别是如果你恰好找到一个彩色 GIF 并将其放置在一个单色 GIF 上。

查看 Pen
使用其他 GIF 对 GIF 进行蒙版...（svg 蒙版很酷） by Cassie Evans (@cassie-codes)
在 CodePen 上。

考虑到我以前从未使用过 SVG 蒙版，我认为我可以快速浏览一下代码并对其进行剖析，看看 Cassie 是如何制作出这个相当不错的演示的！有趣的是，整个过程非常简单。

首先，我们获取要作为 SVG 蒙版使用的 GIF。我们可以从 GIPHY 获取它

来自 GIPHY

接下来，我们可以在页面的 HTML 中直接编写我们的 SVG：我们首先添加一个标签，它可以用来存储我们将在相同 SVG 的其他部分引用的资源。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask> 
  </defs>
</svg>

如果你仔细观察 <mask> 元素，你会看到 Cassie 添加了一个 id="MASK"，这就是我们稍后在文件中引用蒙版的方式，通过指向这个 id 属性。

现在，我们可以继续获取我们的下一个动画图像（但这次是酷炫的太空 GIF）

让我们将 GIF 添加到 <g> 元素中，并将其应用 mask 属性，如下所示

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask>      
  </defs>
  <g mask="url(#MASK)">
    <image x="0" y="0%" class="space" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" 
        height="100%" width="100%"/>
  </g>
</svg>

乍一看，SVG 代码可能看起来很吓人，尤其是如果你不熟悉它。最好将所有这些内容分成两部分。首先，定义蒙版…

  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image 
        xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask>      
  </defs>

…然后使用该蒙版…

<g mask="url(#MASK)">
  <image x="0" y="0%" class="space" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" 
         height="100%" width="100%"/>
</g>

当我们像这样分解它时，它就更有意义了，对吧？就是这样！两个动画 GIF 用作 SVG 蒙版。这是一个超级棒的技巧。

Cassie 制作了另一个示例，但这次是一个跳跃的太空怪兽

查看 Pen
太空怪兽（svg 蒙版很酷） by Cassie Evans (@cassie-codes)
在 CodePen 上。

Elio

# 2019 年 12 月 3 日

它很简单、漂亮，而且很有创意。

Tim Weidner

# 2019 年 12 月 4 日

这是一个很酷的想法！
你实际上可以用 CSS 很轻松地做到这一点！你只需要一个背景图像，包含你想创建的任意层数，以及 background-blend-mode: multiply！我来演示一下。

（Girl.gif 是上面的黑白 GIF，Space.gif 是太空 GIF）

HTML

<div>
    <img src="space.gif" alt="Description of the overlayed image">
</div>

CSS

div{
    background-image: url('girl.gif'), url('space.gif');
    background-blend-mode: multiply;
    background-size: cover, 200%;
    background-position: center;
}

div img{
    width: 100%;
    opacity: 0;
}

这个技巧最棒的是它（在我看来）更容易理解，而且你可以根据需要精确地调整所有内容，同时保持 CSS 代码。

你甚至可以将 CSS 自定义属性与它结合使用，从而创建更酷的东西！
祝你度过美好的一天！

chuck

很棒

Stephen Koller

# 2019 年 12 月 9 日

类似于 Tim Weidmer 提到的，我之前使用过 CSS 混合模式来实现一些有趣的特效（虽然我没有使用 SVG 蒙版，所以要为这个技巧点赞！）。

评论