mask-image实现聚光灯效果(1)

最新推荐文章于 2025-10-02 11:50:11 发布

原创最新推荐文章于 2025-10-02 11:50:11 发布 · 637 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

程序员专栏收录该内容

296 篇文章

订阅专栏

mask-image

====================================================================

属性值

none;

没有图片，设置了这个属性，其他的mask-* 属性自然没有用处了

url(jpg/png/svg);

这里我们看一下svg的效果

首先再阿里iconfont上复制一个svg 保存为mk.svg

然后来使用它：


#masked {

  width: 200px;

  height: 200px;

  background-color: #8cffa0;

  -webkit-mask-image: url(./mk.svg);

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-origin:content-box;

  border: 10px solid #000;

}



<div id="masked"></div>

这里我们开始来分析：

首先：大家看到的淡黄色的边框是鼠标审查元素看到的，真正的是下面这样，并没有边框的

首先我们定义了背景颜色，淡绿色，mask是上面的svg，mask的起始位置是内容区域，最后定义了一个边框，最后从效果图中我们可以得出一下结论

1. mask-image 是对整个元素生效的（包括border）

2. mask-image 是mask透明背景显示，mask不透明背景看不见

3. 我们是无法看到mask本身的内容的，只能看到背景的内容。

渐变

-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);

mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

image(url(mask.png), skyblue);

在最新版的谷歌和火狐中均无法识别。

有趣的例子-聚光灯

效果如下：

实现逻辑：

首先是一张作为背景图片的人物照

一个黑色的图片作为mask

使用动画来控制黑色mask的位置，就可以实现


    <style>

      @keyframes mask{

        0% {-webkit-mask-position:0px 60px;}

        15% { -webkit-mask-position:55px 50px;}

        30% {-webkit-mask-position:117px 0px;}

        45% { -webkit-mask-position:110px 110px; -webkit-mask-size:85px 85px;}

        60% { -webkit-mask-position: 173px 8px;-webkit-mask-size: 86px 85px;}

        75% { -webkit-mask-position: 193px 110px;-webkit-mask-size: 80px 80px;}

        90% {-webkit-mask-position: 270px 80px;-webkit-mask-size: 90px 65px;}

        100% {-webkit-mask-size:1000%;}

     }

      .mask {

        width: 300px;

        height: 200px;

        background: url(./哆啦a梦.png);

        -webkit-mask-repeat: no-repeat;

        -webkit-mask-image: url("./black.png");

        -webkit-mask-size:60px 70px;

        animation: mask 5s linear infinite forwards;

      }

    </style>

  </head>

  <body>

    <div class="mask"></div>

  </body>

附上照片，可以自己本地跑跑试试。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！