CSS 是一種使網(wǎng)站變得更加美觀和交互的設(shè)計(jì)語言，讓我們看一下如何使用 CSS 讓三個(gè)點(diǎn)動(dòng)起來。

/* 創(chuàng)建三個(gè)點(diǎn)的樣式 */
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
display: inline-block;
margin-right: 5px;
}
/* 使用 CSS 動(dòng)畫讓點(diǎn)動(dòng)起來 */
@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 創(chuàng)建三個(gè)點(diǎn)的樣式，并使它們成為一行的inline-block元素。接著，使用@keyframes定義一個(gè)動(dòng)畫序列，讓點(diǎn)閃爍。最后，使用animation屬性和animation-delay延遲時(shí)間，使動(dòng)畫依次作用于每個(gè)點(diǎn)，達(dá)到“三個(gè)點(diǎn)動(dòng)起來”的效果。