CSS实现镂空遮罩引导层

1、用一个外部元素控制遮罩层显示区域，避免出现滚动条
2、用一个内部元素实现遮罩层和镂空效果，其中，遮罩层通过设置大尺寸黑色半透明border实现，镂空区域通过设置元素小width和小height实现
3、通过位移控制镂空的位置

HTML:

<!-- 遮罩层的限制层：overflow：hidden控制不出现滚动条 -->
<div class="test_outer">
    <!-- 遮罩层 -->
    <span id="testCover" class="test_cover test_cover_pos1 trans"></span>
</div>

CSS:

.trans {
    /*transition*/
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.test_outer {
    background-color:lime;
    width: 320px;
    height: 480px;
    margin: 1em auto;
    position: relative;
    overflow:hidden;/* 因为遮罩层肯定比实际区域大，所以遮罩层的限制层：overflow：hidden控制不出现滚动条 */
}
.test_cover {
    /* 定义镂空区域宽高大小尺寸 */
    width: 60px;
    height: 60px;
    border: 580px solid rgba(0, 0, 0, .45);/* 使用元素的大border作为遮罩层的 */
    border-radius: 50%;
    position: absolute;
}

.test_cover_pos1 {
    left: -327px;
    top: -578px;
}
.test_cover_pos1:after {
    content: '☺首先选择您所在的城市';
    margin: 16px 0 0 -140px;
}

.test_cover_pos2 {
    left: -547px;
    top: -478px;
}
.test_cover_pos2:after {
    width: 140px;
    content: '☺全新推图订餐服务，给你不一样的体验！';
    margin: 16px 0 0 60px;
}

.test_cover_pos3 {
    left: -437px;
    top: -158px;
}
.test_cover_pos3:after {
    content: '☺随时拨打订餐！';
    margin: -20px 0 0 -20px;
    white-space: nowrap;
}

.test_cover_pos1:after, .test_cover_pos2:after, .test_cover_pos3:after {
    color: #fff;
    font-family: '微软雅黑';
    text-shadow: 1px 1px rgba(0,0,0,.35);
    position: absolute;
}

javascript:轮播事件

(function(stepIndex) {
    var objStep = document.getElementById("testCover");
    var funStep = function() {
        objStep.className = objStep.className.replace(/\d/, (stepIndex + 1));
        stepIndex++;
        if (stepIndex > 2) {
            stepIndex = 0;
        }
        setTimeout(funStep, 3000);
    };
    setTimeout(funStep, 3000);
})(1);

来源：小tip：CSS3下的圆形遮罩效果实现与应用
扩展：腾讯微云黑色遮罩引导蒙版更好的CSS实现方式