新手指导浮层

[XJIANBIN]

文章

引导蒙层

笔记

box_shadow方案

 <div class="boxshadow_3"></div> 

.boxshadow_3 {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 50px;
        height: 50px;
        // background: transparent;
        background-color: rgba(255, 255, 255, 0.9);
        // box-shadow: 0px 0px 2000px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.8);
        animation: box_ani 2s linear infinite alternate;
    }

border 方案

  <div class="border5"></div>

  .border5 {
        position: absolute;
        // 定位的点需要加上弹窗的宽高的一半
        left: 175px;
        top: 200px;
        transform: translate(-50%, -50%);
        width: 75px; // 这里就是你想要的空白区域的宽高
        height: 120px;
        background-color: transparent;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-width: 500px;
        animation: border_ani 2s linear infinite alternate;
        box-sizing: content-box; // 注意这个
    }

border是个好办法，canvas也行，但是canvas 也是需要看一下兼容，那个属性safari 不太行。
另外4个思路均不可靠：
z-index方法在复杂页面（使用到绝对定位、固定定位、设置有z-index）可能无效；
opacity设置透明度会影响节点本身及后代节点，无法做到透明父节点显示子节点，方法基本无效；
box-shadow不建议使用，模糊消耗GPU性能，会影响FPS；
页面节点复制，会丢失继承父级的样式，因此基本无效。