CSS3是非常流行和實用的樣式語言之一，通過它可以實現許多驚人的效果和交互體驗。今天我們來學習如何使用CSS3創建閃爍的三個圓點。
<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`屬性中調整每個圓點的開始時間。
下一篇css3.0輪播