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角
类似的效果还有很多,可以自行发掘