css中mask属性实现灯光闪动

1.CSS mask属性面面观

在过去，CSS mask属性在使用的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是一样的。

具体是哪些属性的缩写呢，可以参见下面的列表：

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite

2.CSS属性mask的使用

/*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
        }
    }

Mask中遮罩图片的制作

在制作遮罩图片png（同样mask属性还是支持其他的格式的）时，发现在设计mask图片时，图片的尺寸很不好控制，

比如说在企业官网的logo上设计一道光循环的从logo上闪过，发现这个mask很难做，好像很难控制的实现能够达到完美的效果，后期再使用过程中不断的总结吧

现在总结一下就是，在png中没有不透明的是logo中被显示出来的部分，透明部分就是logo总不显示的地方（且看下边的效果：logo层面一直会有一道光闪过）

后期在使用中再总结