CSS3是非常流行和實(shí)用的樣式語言之一，通過它可以實(shí)現(xiàn)許多驚人的效果和交互體驗(yàn)。今天我們來學(xué)習(xí)如何使用CSS3創(chuàng)建閃爍的三個圓點(diǎn)。
<div class="dots"> <span class="dot dot-1"></span> <span class="dot dot-2"></span> <span class="dot dot-3"></span> </div>
首先，我們創(chuàng)建一個有三個空心圓點(diǎn)的容器，即上述代碼中的`
`標(biāo)簽和三個``標(biāo)簽。為了使它們成為圓點(diǎn)，我們給它們設(shè)置寬度和高度，并將`border-radius`屬性設(shè)置為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`屬性創(chuàng)建動畫。我們需要定義一個名為`blink`的關(guān)鍵幀，該關(guān)鍵幀將使圓點(diǎn)閃爍。我們還將定義每個圓點(diǎn)的`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;
}
}好了！現(xiàn)在我們成功地創(chuàng)建了閃爍的三個圓點(diǎn)。運(yùn)行上述代碼，你將看到圓點(diǎn)依次閃爍的效果。你可以在`animation`屬性中改變關(guān)鍵幀的名稱和動畫的時間，或在`animation-delay`屬性中調(diào)整每個圓點(diǎn)的開始時間。
下一篇css3.0輪播