任凭人群来往,任凭钟声响起,小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》
分享一个css
属性mask
:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask
https://css-tricks.com/almanac/properties/m/mask/
CSS 属性
mask
允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
这个属性很类似于background
属性,但不同的是,background是背景在元素下层,mask是遮罩在元素上层,且mask
不支持直接指定color
,只支持image
对象如图片、svg
等
同样两者都是组合属性,意味着可以用简写,而不是一个一个去指定
1 | mask-image: url(/imgs/oss/blog/vampireachao/bilibili-line.svg); |
可以简写为
1 | mask: url(/imgs/oss/blog/vampireachao/bilibili-line.svg) no-repeat; |
但我们在chrome
里尝试直接指定该属性发现并没有生效,这是因为需要添加浏览器供应商前缀-webkit-
1 | -webkit-mask: url(/imgs/oss/blog/vampireachao/bilibili-line.svg) no-repeat; |
后续所有mask-*
属性在chrome
里都需要该前缀,上述代码我们编写一串代码看看效果
1 | <div class="el"> |
对应的css
1 | body { |
这里我给body
加了个背景橙色,给其中的元素.el
加了个背景白色,然后再加了个mask
指向我图床上的一个svg
这个svg
是一个bilibili
的小图标
注意红框框出来的部分,我们可以看到我们由于给.el
元素指定了背景白色、遮罩为svg
、导致我们的内容只在这个白色的svg
中显示
其他的属性、如
mask-repeat
指定为no-repeat
就能让其不重复显示
mask-position
指定为center
就能让其居中等就不一一赘述了
这里主要讲一个好玩的,由于mask
属性内可以定义多个,这意味着我们可以用其对元素进行一些自定义的裁切(遮盖)
因为其只支持image
对象,我们可以使用渐变属性得到
废话不多说,先写个图片
1 | <img src="/imgs/oss/2020-06-01/head.jpg" class="el" /> |
css
1 | body { |
我们使用mask
+渐变将其从中间裁切,这里的构成是位置left 位置省略 / 宽度45% 不重复 渐变
渐变我随便写的linear-gradient(0, red ,red)
,0
是指角度、red
是红色,主要是字母短,就用red
占位了
1 | mask: top left 0/45% no-repeat linear-gradient(0, red, red); |
这是第一个,我们接着做第二个
1 | mask: top left 0/45% no-repeat linear-gradient(0, red, red), |
但是由于这里有点累赘,我们抽一个变量
1 | .el { |
由于我们都是45%
,这里等于两个加起来空出了10%
的距离,此时我们可以加一个hover
属性,让两个遮罩的位置合拢
因为我们只有位置变化,我们把位置也抽成变量,再加一个过渡效果
1 | body { |
效果:
我们再做两个遮罩,调整下位置,设置下缩放
1 | .el { |