CSS3 透明蒙版

Question

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

.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: "";
}

Answer 1

你可以使用 RGBA

.wheel:after {
    background-color: rgba(0, 0, 0, 0);
                  //red, green, blue, alpha
}

这提供了透明度，因为 Alpha 通道处理不透明度。如果您想要替代脚本，可以使用 jQuery 来操纵背景颜色。

$('#element').css('background-color','transparent');

显然，您需要根据您是否单击此 "wheel" 或它与用户的交互方式为其添加一个功能，但通过使用 jQuery，您可以为两者之间的过渡设置动画取下这个轮子的一部分及其之前的状态。

Answer 2

你实际上可以实现你想要的，我相信只需要 CSS 使用 rgba 和边框属性的伪元素。

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

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

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

我这样做是为了 whirl。

使用应用于容器的 CSS class 可以将加载微调器添加到任何块元素，可以通过应用 classname 简单地打开和关闭.

希望对您有所帮助！

Answer 3

解决方法：

用透明颜色替换其中一个边框（例如 border-right）

这将给出一个四分之三的轮子。要小于此值，请使用 :after 属性创建另一个四分之三的轮子，然后 CSS3 变换以将其旋转到所需的角度。

.wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 21px;
    height: 21px;
    margin: -10.5px;
    border-radius: 100%;
    border: 1px solid #0FACE7;
    border-right: 1px solid rgba(0,0,0,0) !important;
    -webkit-transition: all 0.3s;
    -webkit-animation: spn 1s infinite linear;
}

.wheel:after {
    margin: -1px;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    border: 1px solid #0FACE7;
    border-right: 1px solid rgba(0,0,0,0) !important;
    content: "";
    -webkit-transform: rotate(45deg);
}

CSS3 透明蒙版

CSS3 transparent mask

html

css

transparent

mask