国庆流行的国旗配头像效果，css来实现

开局一张图

如上图，国庆刚过，期间看到很多朋友都把头像加上国旗。好奇心起，强大的CSS能不能做出来呢？

答案是可以的。其实只需要一句简单的CSS属性便可以达到此效果。

直接上代码

<div class="demo1"></div>
复制代码

// sass代码
.demo1 {
      width: 300px;
      height: 300px;
      // 头像图片
      background-image: url($image1);
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      cursor: pointer;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        // 国旗图片
        background: url($image2) no-repeat;
        background-size: cover;
        mask: linear-gradient(
          120deg,
          #fff 10%,
          transparent 70%,
          transparent
        );
      }
    }
复制代码

mask属性

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask 类似我们常用的 background 属性，它的值可以是图片链接，也可以是渐变等。并且也具有类似 background-size ，background-position 之类的属性 mask-size， mask-position 等等。

mask: url(image.png);

mask: linear-gradient();
复制代码

更多的使用方式请参考 MDN。在此便不再赘述。

所以，我们只需要在头像图片之上加上一层 mask ，并设置为一定角度的渐变，就能得到想要的效果了。

以上，想要的国旗配头像的效果便大功告成。

延伸， mask配动画小实验

我们可以对加上一些小动画，配合 mask 得到一些不错的效果。

直接上代码

.demo2 {
    width: 620px;
    height: 300px;
    border: 1px solid;
    background: url(image) no-repeat;
    background-size: cover;
    mask-image: linear-gradient(to left, #000 100%, transparent 0);
    mask-repeat: no-repeat;
    animation: maskAnim 8s linear infinite;
}
@keyframes maskAnim {
    0% {
      mask-position: 0px 0px;
      mask-size: 10%;
    }
    25% {
      mask-position: 560px 0px;
      mask-size: 10%;
    }
    50% {
      mask-position: 0px 0px;
      mask-size: 10%;
    }
    75% {
      mask-position: 280px 0px;
      mask-size: 10%;
    }
    100% {
      mask-position: 0px 0;
      mask-size: 100%;
    }
}
复制代码

以上，通过改变 mask 的 position 、 size 属性，得到一系列的动画效果。

mask 是非常强大的属性，但是也存在浏览器的兼容性。所以使用的时候还得需要根据自己的需求来酌情考虑。

如你所见，非常好用~

下次见