Css动画改变按钮的背景颜色

Question

我有一个奇怪的问题，我想添加一个加载器到一个按钮。

,我创建了一个旋转动画的负载效应。当结合动画和禁用状态时，我有一个奇怪的行为，它看起来像有双重不透明度。但事实并非如此。你知道吗?

<button disabled="disabled" class="loading">
<span class="icon"></span>
<span class="text">test</span>
</button> 

@keyframes theAnim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
button {
background: rgb(30, 3, 56);
color: white;
padding: 20px;
margin-right: 10px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
&:disabled {
opacity: 0.3;
}
&.loading {
.icon {
position: absolute;
animation: theAnim 2s infinite linear;
&:before {
content: "#";
}
}
.text {
visibility: hidden;
}
}
}

https://codepen.io/mantalo/pen/RwMWWLE

Answer 1

使用背景不透明度

为你我简化了你的动画

@keyframes theAnim {
100% {
transform: rotate(1turn);
}
}
button {
background: rgb(30, 3, 56);
color: white;
padding: 20px;
margin-right: 10px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
&:disabled {
background: rgba(30, 3, 56, 0.3);
}
&.loading {
.icon {
position: absolute;
animation: theAnim 2s infinite linear;
&:before {
content: "#";
}
}
.text {
visibility: hidden;
}
}
}

<button>test</button>
<button disabled="disabled">test</button>
<button disabled="disabled" class="loading">
<span class="icon"></span>
<span class="text">test</span>
</button>