mask属性介绍
你们知道css里头有个叫mask属性的玩意儿好厉害吗？它能做出遮罩和切割效果，让图片部分看上去好像隐身了一样。虽然这货已经存在很久了，但还是没多少人会去用。不如今天就来学下如何运用mask属性，试试看更多好玩的东西！
{
/* Image values */
mask: url(mask.png); /* 使用位图来做遮罩 */
mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */
}
{
mask: linear-gradient(#000, transparent) /* 使用渐变来做遮罩 */
}
基本用法
{
background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #fff);
}
Mask属性就像隐形斗篷一样，可以通过图形或者渐变色把内容藏起来。举个例子，用线性渐变，让中间部分变成透明，四周涂黑，就能换颜色。虽然有点费劲，但效果真的很好，被遮住的部分就神奇地看不见了！
利用mask实现图片裁剪
.notching{
width: 200px;
height: 120px;
background:
linear-gradient(135deg, transparent 15px, deeppink 0)
top left,
linear-gradient(-135deg, transparent 15px, deeppink 0)
top right,
linear-gradient(-45deg, transparent 15px, deeppink 0)
bottom right,
linear-gradient(45deg, transparent 15px, deeppink 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
猜你可能不知道，mask属性除了遮挡作用外，还隐藏着不少高级技能！像把图片加上斜角遮罩，就会让它看起来特别酷！直接给mask添个渐变效果，再利用背景来裁剪出想要的角度，轻松就能打造出斜角效果。这不仅能让你的图片与众不同，更能引起大家的注意！
多张图片叠加展示
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;
你知道吗？想要把很多图片巧妙地放在一起？用mask功能就对了！遮罩和混合模式随便玩儿，就能把不同的照片合到一起，变成超酷的独特效果。这不只是让网页变得好玩，还能提升观感简直太赞了！
动态转场效果
div {
position: relative;
background: url(image1.jpg);
&::before {
position: absolute;
content: "";
top: 0;left: 0; right: 0;bottom: 0;
background: url(image2.jpg);
mask: linear-gradient(45deg, #000 50%, transparent 50%);
}
}
在讲CSS的时候，可能你会发现那mask属性超级实用。调调它就能控制照片的亮度，想怎么变动态转场都行，两张图之间过渡得超顺滑！而且用上像SASS或LESS这种预设工具的话，做个动态图像动画也特别简单，立刻就让网页看起来炫酷多了。
与滤镜混合模式结合
{
- mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ mask: linear-gradient(45deg, #000 40%, transparent 60%)
}
仅仅用mask属性还远远不够，试试滤镜和混合模式，一定会有意想不到的效果！通过多层堆叠，再搭配色彩处理，就能轻松弄出各种组合景致。使用叠加混合模式这些小工具，不只能让你的网页别具一格，还能让大家忍不住想驻足欣赏。这样一来，你的设计师技能up up，用户体验也更加舒适愉快！
兼容性与发展趋势
你知道，虽然我们用CSS给mask加个属性挺炫的，但是现在还存在点儿兼容性问题！其实跟mask有关的好多属性都还是试验品，有点儿小毛病是正常哒。不过别太担心，随着网络科技和标准越来越完善，Mask属性和其他类似功能肯定会越来越好用哒！
div {
background: url(image1.jpg);
animation: maskMove 2s linear;
}
总结与展望
@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%);
}
}
了解了这篇文章后，就知道对于网页设计师来说，CSS的Mask属性真是个神器。有了它，能做的事情多了去了：比如简单的遮挡、调整图片边框，或者弄点好玩儿的动态特效，还能跟滤镜搭配营造出高级感。科技天天在变好，MASK属性还有很多秘密等你用。以后的网页设计可能会更有意思、更上档次。
div {
position: relative;
background: url(image2.jpg) no-repeat;
&::before {
position: absolute;
content: "";
top: 0;left: 0; right: 0;bottom: 0;
background: url(image1.jpg);
animation: maskRotate 1.2s ease-in-out;
}
}
@keyframes maskRotate {
@for $i from 0 through 100 {
#{$i}% {
mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
}
}
}
。
评论0