CSS圓點動態怎么設置

.demo {
width: 20px;
height: 20px;
margin: 0 5px;
border-radius: 50%;
background-color: #ccc;
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.5;
}
}

首先，我們需要創建一個圓形的元素，使用border-radius屬性設置圓形。然后，設置動畫效果，使用animation屬性調用pulse動畫。

pulse動畫是一個透明度和縮放變化的連續動畫。然后使用關鍵幀@keyframes定義動畫中的各個階段。狀態0%的透明度是0.5，縮放比例為1。狀態50%的透明度是1，縮放比例為1.2。最后，狀態100%的透明度是0.5，縮放比例為1。

然后將該類應用到每個要使用圓點的元素中，可以在margin中更改圓點的間距和大小。最后的結果是一組具有顏色，形狀和透明度動畫的圓點。