css中mask属性实现灯光闪动

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层面一直会有一道光闪过)

后期在使用中再总结

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏应用案例

揭开ps的神秘面纱——初步认识photoshop

在这个看脸的“世界”里 论软件的强大莫过于ps 堪称美图界“磨人的小妖精” 下面就让小编带大家伙了解一下神秘的它吧 1.什么是psPS(位图图像处理软件Phot...

23680
来自专栏前端知识分享

第13天:页面布局实例-博雅主页

今天写了个简单的页面,再熟悉了一下div+css布局,写的还可以,以后还要多练习。此外还进一步学习了定位相关知识。

20510
来自专栏施炯的IoT开发专栏

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Win...

18070
来自专栏别先生

HTML+CSS提升小实战

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...

88980
来自专栏企鹅号快讯

浅谈Web自适应

前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

36580
来自专栏我和未来有约会

CaseStudy(showcase)界面篇-desing设计界面

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

18570
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-今日头条适配方案

原文地址: https://www.jianshu.com/p/55e0fca23b4f

19410
来自专栏腾讯社交用户体验设计

为什么要用SVG?- svg与iconfont、图片多维度对比

1.1K40
来自专栏老马寒门IT

04-移动端开发教程-在线字体图标

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

42660
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

16640

扫码关注云+社区

领取腾讯云代金券