在以下纯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>
答案 0 :(得分:1)
只需将背景色设置为: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>
答案 1 :(得分:1)
此动画使用 column_a column_b c
0 0 1 [0, 1]
生成此形状,更改这些值以更改颜色:
边框:32px实心borders
;
边框颜色:#f00
透明#f00
透明;
并要更改文本#f00
的颜色,只需将此行loading..
添加到您的color: #fff
样式即可。
lds-hourglass
.lds-hourglass {
display: inline-block;
position: relative;
width: 120px;
height: 120px;
background-color: #fff;
color: #f00;
}
.lds-hourglass:after {
content: " ";
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 8px;
box-sizing: border-box;
border: 32px solid #f00;
border-color: #f00 transparent #f00 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);
}
}
答案 2 :(得分:1)
尝试将border-color: #fff transparent #fff transparent;
替换为border-color: #fff black #fff black;
.lds-hourglass {
display: inline-block;
position: relative;
width: 120px;
height: 120px;
background-color: white;
}
.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 black #fff black;
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>