首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css中mask属性实现灯光闪动

css中mask属性实现灯光闪动

作者头像
天天_哥
发布2018-09-29 14:45:50
1.4K0
发布2018-09-29 14:45:50
举报
文章被收录于专栏:天天天天
1.CSS mask属性面面观

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

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

  1. mask-image
  2. mask-mode
  3. mask-repeat
  4. mask-position
  5. mask-clip
  6. mask-origin
  7. mask-size
  8. mask-type
  9. 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层面一直会有一道光闪过)

后期在使用中再总结

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.CSS mask属性面面观
  • 2.CSS属性mask的使用
  • Mask中遮罩图片的制作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档