html - CSS3 透明 mask

下面是载重轮的 CSS3 代码。 .wheel:after 属性从圆圈中取出一 block 。问题是它被着色为背景颜色，使它看起来像是缺少缝隙。背景颜色可能会改变，所以我希望它是透明的，但仍然要从圆圈中取出缝隙。怎么办？

.wheel {
    position:absolute;   
    width: 21px;
    height: 21px;
    border-radius: 100%;
    border: 1px solid #0FACE7;
    -webkit-animation: spn 1s infinite linear;
    animation: spn 1s infinite linear;
}
.wheel:after {
    position: absolute;
    top: -1px;
    left: 10px;
    margin: 0 -3px;
    width: 6px;
    height: 4px;
    background: #222;
    content: "";
}

最佳答案

我相信您实际上可以通过使用 rgba 和 border 属性的 CSS 伪元素实现您想要的。

您可以将 :before 用作叠加层，将 :after 用作实际的微调器。

我整理了这个 JS Bin 来展示如何使用边框来做到这一点。

http://jsbin.com/kuqagarece/2/

我这样做是为了 whirl .

使用应用于容器的 CSS 类，您可以将加载微调器添加到任何 block 元素，可以通过应用类名简单地打开和关闭。

希望对您有所帮助!

关于html - CSS3 透明 mask ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27985517/