CSS 图片遮罩学习小节

概念：-webkit-mask-image是一项用于制作镂空图形和图形遮罩效果的CSS样式属性。
-webkit-mask-image 的值既可以是渐变色也可以是图片地址。
-webkit-mask-image 的起源很早，但兼容性不好，因此用途并不广泛。

效果如下：

底图：
在这里插入图片描述

遮罩图片：

请添加图片描述

合并：
请添加图片描述

源码：

<style>
/* 设置遮罩 */
.mask {width: 400px;height: 400px;-webkit-mask-image: url('https://img-blog.csdnimg.cn/direct/b6009c02254e4f0d8a8da60fe2237069.gif');-webkit-mask-size: 100% 100%;
}
/* 设置底色 */
.box {height: 100%;background: url('https://img-blog.csdnimg.cn/direct/e421ff1be32c4a59be786185531cb7a9.png') center;
}
</style>
<body><!-- 父子嵌套 --><div class="mask"><div class="box"></div></div>
</body>
</html>

它还可以这样玩

请添加图片描述
加计时器，对遮罩层进行逐帧重绘

源码：

<style>
* {margin: 0px;padding: 0;
}
.mask {position: relative;z-index: 2;width: 400px;height: 400px;-webkit-mask-image: linear-gradient(0deg, #999 0%, #999 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);-webkit-mask-size: 100% 100%;
}
.box {height: 100%;background: url('https://img-blog.csdnimg.cn/direct/e421ff1be32c4a59be786185531cb7a9.png') center;
}
.shadow {position: absolute;top: 0;width: 400px;height: 400px;background: url('https://img-blog.csdnimg.cn/direct/71a3b17c018a49b89a5b81e4c0ae52ab.webp') no-repeat center;background-size: 100% 100%;background-position: 30deg;
}
</style>
<body><div class="mask"><div class="box"></div></div><div class="shadow"></div>
</body>
<script>let mask = document.querySelector('.mask'), num = 0setInterval(() => {mask.style['webkitMaskImage'] = `linear-gradient(${3.6 * num}deg, #999 0%, #999 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%)`num++}, 50)
</script>
</html>

我准备搞一个特别6的，惊艳一把

请添加图片描述
你相信光吗？

请添加图片描述
做这个效果时考虑了 keyframes、transform等方式重新绘制遮罩层，结果都失败了。
·这个动画的关键属性是：-webkit-mask-size
·它在原遮罩层的基础上进行缩放时，图案会同步改变
·通过控制width 和 height 也可以达到上述要求

源码：

<style>
* {margin: 0px;padding: 0;
}
.content {width: 400px;height: 400px;overflow: hidden;
}
.mask {position: relative;z-index: 2;width: 400px;height: 400px;-webkit-mask-image: url('https://img-blog.csdnimg.cn/direct/f43e82f8adc44c67b173f9fcd3e30af6.webp');-webkit-mask-size: 44%;-webkit-mask-position: top left;-webkit-mask-repeat: no-repeat;transform: translate(34px, 10px) rotateZ(-24deg);transition: all 1s;
}
.box {width: 400px;height: 400px;background: url('https://img-blog.csdnimg.cn/direct/8e5022e3519b454382bd1622a97bfdcd.jpeg') center;background-size: cover;
}
.shadow {position: absolute;top: 0;width: 400px;height: 400px;background: url('https://img-blog.csdnimg.cn/direct/8a877df484c24384b28bb450d9333694.jpeg') no-repeat TOP;background-size: cover;background-position: 30deg;
}
</style>
<body><div class="content"><div class="mask"><div class="box"></div></div><div class="shadow"></div></div>
</body>
<script>let mask = document.querySelector('.mask'), num = 1setTimeout(() => {mask.style.transform = 'translate(0, 0) rotateZ(0)'mask.style['webkitMaskPosition'] = 'center'setTimeout(() => {setInterval(() => {mask.style['webkitMaskSize'] = `${num * 44}%`num++}, 300)}, 1000)}, 1000)
</script>
</html>