在以下纯CSS加载中,最前面的颜色是白色,因此在白色屏幕上不会显示任何内容。如何改变前景色?
.lds-hourglass {
display: inline-block;
position: relative;
width: 120px;
height: 120px;
background-color: black;
}
.lds-hourglass:after {
content: " ";
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 8px;
box-sizing: border-box;
border: 32px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
50% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
100% {
transform: rotate(1800deg);
}
}
<div class="lds-hourglass">Loading....</div>
最佳答案
只需将background-color设置为:before
。
参见摘录:
.lds-hourglass {
display: inline-block;
position: relative;
width: 120px;
height: 120px;
}
.lds-hourglass:after {
content: " ";
background-color:black;
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 8px;
box-sizing: border-box;
border: 32px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
50% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
100% {
transform: rotate(1800deg);
}
}
<div class="lds-hourglass">
Loading....
</div>
关于css - 如何更改纯CSS动画的前景色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59533625/