我想制作一个Loading CSS，并找到了一个可重复使用的Loading CSS。
我在中发现了这个https://loading.io/css/
我在w3school编辑器中使用过它。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="lds-ring">
</div>
</body>
</html>
我可以在div中声明Class，但我不知道我犯了什么错误。
我建议您避免使用w3school编辑器，而是使用JSFiddle或Codepen。
您的示例不起作用，因为它缺少部分html代码。如果您查看css声明：
.lds-ring div
.lds-ring div:nth-child(1)
.lds-ring div:nth-child(2)
.lds-ring div:nth-child(3)
您可以看到，它正在尝试在lds-ring中设置3个子divs的样式。
你只需要编辑你的html结构：
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
</div>
工作示例：
body {
background: gray;
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="lds-ring">
<div>
</div>
<div>
</div>
<div>
</div>
</div>