css怎么让三个点动起来 |浏览器不显示css

/* 创建三个点的样式 */
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
display: inline-block;
margin-right: 5px;
}
/* 使用 CSS 动画让点动起来 */
@keyframes dotBlink {
0% {
opacity: 0.2;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.5);
}
50% {
opacity: 0.2;
transform: scale(1);
}
100% {
opacity: 0.2;
transform: scale(1);
}
}
.dot:nth-child(1) {
animation: dotBlink 1.4s infinite ease-in-out;
}
.dot:nth-child(2) {
animation: dotBlink 1.4s infinite ease-in-out;
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation: dotBlink 1.4s infinite ease-in-out;
animation-delay: 0.4s;
}

首先，使用 CSS 创建三个点的样式，并使它们成为一行的inline-block元素。接着，使用@keyframes定义一个动画序列，让点闪烁。最后，使用animation属性和animation-delay延迟时间，使动画依次作用于每个点，达到“三个点动起来”的效果。