css mask与linear-gradient搭配使用

mask 遮罩

  与background类似

 

mask-mode

mask-repeat

mask-position

mask-clip

mask-origin

mask-size

mask-type

mask-composite

mask-image

 

• 当参数为url 时可以在原本图片基础上  镂空一个该图片形状的遮罩样式 

  ---

  linear-gradient 中的百分比为起始位置 如20%就是相当于起始位置20%的地方开始着色  利用此效果我们可以将mask 与 linear-gradient搭配使用实现渐变式的遮罩变换

例1: 

mask: linear-gradient(45deg, #000 40%, transparent 60%);

   可以实现两张图片的类似于拼接的效果

与动画属性配合可以实现渐变式的特效

例2:

@keyframes {
  0% {
    mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
  }
  1% {
    mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
  }
  ...
  100% {
    mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
  }
}

这样就可以实现常用的图片转场特效

可以实现图形的切割

例3：

background: url(image.png);
mask:
    linear-gradient(135deg, transparent 15px, #fff 0)
    top left,
    linear-gradient(-135deg, transparent 15px, #fff 0)
    top right,
    linear-gradient(-45deg, transparent 15px, #fff 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, #fff 0)
    bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;

效果切割了4角

类似的效果还有很多，可以自行发掘