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和border属性，你实际上可以用CSS伪元素实现你想要的东西。

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

我把这个JS Bin放在一起，展示你如何使用边框来做到这一点。

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

我为whirl做了这个。

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

希望有所帮助！

Answer 2

解决方案：

用透明色替换其中一个边框（例如，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);
}

Answer 3

您可以使用RGBA

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

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

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

显然你需要添加一个函数，根据你是否点击这个“轮子”或它是如何与用户交互的，但是通过使用jQuery，你可以设置移动这个轮子的切片和它以前的状态。

CSS3透明蒙版

3 个答案: