图片高阶渐隐消失的优化实现

我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：

<div class="img"></div>

div {
    width: 300px;
    height: 300px;
    background: url(image.jpg);
    transition: .4s;
}
.img:hover {
    opacity: 0;
}

但是，CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。

想想看，下面这样一个效果，是 CSS 能够实现的么？

答案是肯定的！本文就将一步一步，从零开始，仅仅使用一个标签，实现上述的图片渐隐效果。

这里，有两个核心的点：

1. 如何将一张图片切割的这么细，切割成这么多块？
2. 基于上述 （1）的基础上，又该如何分别控制这些小块的独立隐藏和展示呢？

莫慌，让我们一步一步来解决他们。

强大的 Mask

首先，我们需要用到 Mask。

在 C