前端遮罩层的应用

        最近微信小步伐必要开发新手引导功能，发现必要在遮罩层中间抠一个洞出来，但是不绝不知道该怎么去做，实在很简单，先展示源码：

2. <template>
3.   <div class="num01">
4.     hello
5.     <div class="mask">
6.       sadasdasdassssssssssssssssssssssss
7.       <div class="hole"></div>
8.       <div class="test01"></div>
9.     </div>
10.   </div>
11. </template>
13. <style scoped>
14. .num01{
15.   background: linear-gradient(to right, #ff0000, #00ff00);
16.   width: 100vw;
17.   height: 100vh;
18.   display: flex;
19. }
21. .mask{
22.   background: rgba(128,128,128,0.5);
23.   width: 50%;
24.   height: 50%;
25.   top: 10%;
26.   left: 20%;
27.   mix-blend-mode: multiply;
28.   position: fixed;
29. }
31. .hole{
32.   width: 30%;
33.   height: 30%;
34.   top:15%;
35.   left:50%;
36.   position: relative;
37.   background: #fff;
38. }
40. .test01{
41.   width: 50%;
42.   height: 50%;
43.   top: 10%;
44.   left: 10%;
45.   position: relative;
46.   background: #000000;
47. }
48. </style>

复制代码

        ok，然后说一下原理
        

        起首是设置一个盒子，在盒子上套一层遮罩，然后使用在遮罩上面抠出一个洞来
        难点是如何扣除一个洞呢？必要在遮罩层加一个css样式：mix-blend-mode:multiply，功能是开启混淆模式，会将该样式和子样式的颜色发生混淆
        然后将洞的颜色调成白色，这样就能显示出类似于一个洞的效果