<div class="dots"> <span class="dot dot-1"></span> <span class="dot dot-2"></span> <span class="dot dot-3"></span> </div>
首先，大家创建一个有三个空心圆点的容器，即上述代码中的`
`标签和三个``标签。为了使它们成为圆点，大家给它们设置宽度和高度，并将`border-radius`属性设置为50%。
.dots {
display: flex;
justify-content: center;
align-items: center;
}
.dot {
display: block;
width: 16px;
height: 16px;
margin: 0 10px;
border: 2px solid #333;
border-radius: 50%;
}接下来，大家将使用CSS3中的`animation`属性创建动画。大家需要定义一个名为`blink`的关键帧，该关键帧将使圆点闪烁。大家还将定义每个圆点的`animation-delay`属性，以便它们依次开始动画。
.dot-1 {
animation: blink 1s infinite ease;
animation-delay: 0s;
}
.dot-2 {
animation: blink 1s infinite ease;
animation-delay: 0.2s;
}
.dot-3 {
animation: blink 1s infinite ease;
animation-delay: 0.4s;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}好了！现在大家成功地创建了闪烁的三个圆点。运行上述代码，你将看到圆点依次闪烁的效果。你可以在`animation`属性中改变关键帧的名称和动画的时间，或在`animation-delay`属性中调整每个圆点的开始时间。