在过去,CSS mask属性在使用的时候就是mask: xxx,但是现在随着这个属性的规范化,mask属性实际上已经成为了诸多mask-*的缩写,这和background, border性质是一样的。
具体是哪些属性的缩写呢,可以参见下面的列表:
/*html*/
<div class="nav">
<a href=""><img src="logo.png" alt=""></a>
</div>
/*css*/
.nav {
height: 92px;
}
.nav a {
display: block;
width: 155px;
height: 92px;
-webkit-mask: url('mask.png');
-webkit-mask-size: 155px 92px;
-webkit-mask-position: 0px 0px;
-webkit-mask-repeat: repeat-x;
mask: url('mask.png');
mask-size: 155px 92px;
mask-position: -155px 0px;
mask-repeat: repeat-x;
-webkit-animation-name: Mask;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes Mask {
0% {
-webkit-mask-position: -155px 0px;
mask-position: -155px 0px
}
75% {
-webkit-mask-position: 155px 0px;
mask-position: 155px 0px
}
100% {
-webkit-mask-position: 155px 0px;
mask-position: 155px 0px
}
}
@keyframes Mask {
0% {
-webkit-mask-position: -155px 0px;
mask-position: -155px 0px
}
75% {
-webkit-mask-position: 155px 0px;
mask-position: 155px 0px
}
100% {
-webkit-mask-position: 155px 0px;
mask-position: 155px 0px
}
}
在制作遮罩图片png(同样mask属性还是支持其他的格式的)时,发现在设计mask图片时,图片的尺寸很不好控制,
比如说在企业官网的logo上设计一道光循环的从logo上闪过,发现这个mask很难做,好像很难控制的实现能够达到完美的效果,后期再使用过程中不断的总结吧
现在总结一下就是,在png中没有不透明的是logo中被显示出来的部分,透明部分就是logo总不显示的地方(且看下边的效果:logo层面一直会有一道光闪过)
后期在使用中再总结