CSS创意与视觉表现

任意图形镂空

黑色黑色半透明遮罩，中间镂空的是不规则图形，例如五角星：

代码

CSS代码：
.shape-hollow-x {
    width: 600px;
    max-width: 100%;
    height: 300px;
    background: linear-gradient(red, green);
    position: relative;
}
.shape-hollow {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0,.75);
    /* 实际开发需要-webkit- */
    mask: no-repeat center;
    mask-image: linear-gradient(black, black), url(./star.svg);
    mask-size: cover, 120px 120px;
    mask-composite: exclude;
    mask-composite: source-out;
}
HTML代码：
<div class="shape-hollow-x">
    <i class="shape-hollow"></i>
</div>

关于mask遮罩的详细介绍：https://www.zhangxinxu.com/wordpress/?p=6513

拓展：新颖的过场动效

示意图像 
img.shape-hollow {
    /* 动画 */
    animation: starIn 2s infinite;
}
@keyframes starIn {
    from {
        -webkit-mask-size: 100%, 0 0;
        mask-size: 100%, 0 0;
    }
    to {
        -webkit-mask-size: 100%, 300% 300%;
        mask-size: 100%, 300% 300%;
    }
}