ModernCSSAdvancedImageFade

div{width:300px;高度：300px；背景：网址（图片.jpg）；过渡：.4s；}.img:hover{opacity:0;}然而，如今CSS是如此强大。我们用CSS可以实现的淡入淡出效果不再那么简单了。想一想，下面的效果是不是可以通过CSS来实现呢？答案是肯定的！本文将循序渐进，从头开始，只使用一个标签来实现上述图像淡化效果。这里有两个核心点：怎么把这么薄的图剪成这么多块？基于以上（1），如何控制这些小块的独立隐藏和显示呢？不要惊慌，让我们逐步解决它们。强大的Mask首先，我们需要使用Mask。在CSS中，mask属性允许用户通过屏蔽或裁剪图像的特定区域来隐藏元素的部分或全部可见区域。语法是最基本的。mask的使用方法是使用图片，像这样：{/*Imagevalues*/mask:url(mask.png);/*使用位图作为遮罩*/mask:url(masks.svg#star);/*使用SVG图形中的shape做mask*/}当然，图片的使用方式后面会讲到。图片的使用方式其实还是比较繁琐的，因为我们要先准备好相应的图片素材。除了图片，mask还可以接受一个类似于background的参数，那就是gradient。类似下面的使用方法：{mask:linear-gradient(#000,transparent)/*使用渐变做mask*/}那么如何使用呢？一个很简单的例子，上面我们创建了一个从黑色到透明的渐变，我们在实践中使用，代码类似这样：);mask:linear-gradient(90deg,transparent,#fff);}应用mask后，如下所示：在这个DEMO中，你可以简单了解mask的基本用法。这里说下使用mask最重要的结论：图像的重叠部分和mask生成的渐变透明会变成透明的。值得注意的是，上面的渐变使用的是linear-gradient(90deg,transparent,#fff)，这里的#fff纯色部分其实可以换成任何颜色都不影响效果。CodePenDemo--MASK的基本使用使用mask隐藏hover时的图片了解了mask的简单用法之后，我们来看这样一个非常简单的例子。下面对上面的第一个DEMO进行改造。