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

/* 創(chuàng)建三個點的樣式 */
.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 創(chuàng)建三個點的樣式，并使它們成為一行的inline-block元素。接著，使用@keyframes定義一個動畫序列，讓點閃爍。最后，使用animation屬性和animation-delay延遲時間，使動畫依次作用于每個點，達到“三個點動起來”的效果。