CSS 實現圓點在線上滑動是一種常見的效果，可以用于輪播圖、滑動導航等場景。下面我們來介紹如何用 CSS 實現這個效果。

首先，我們需要定義一個容器，用來包含所有圓點。

.container {
display: flex;
justify-content: center;
}

上面代碼中，我們使用了 flex 布局，將容器中的圓點居中顯示。接下來，我們需要定義圓點的樣式。

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
margin: 0 6px;
transition: background-color .3s ease-in-out;
}

上面代碼中，我們定義了圓點的寬度、高度和邊框半徑，同時給圓點設置了背景色和水平方向的間距。我們使用 transition 屬性將背景色的變化動畫化。

接下來，我們需要定義圓點在高亮狀態下的樣式。

.dot.active {
background-color: #1abc9c;
}

上面代碼中，我們給予高亮狀態下的圓點不同的背景色。

最后，為了實現圓點在線上滑動的效果，我們需要定義一個指示器。

.indicator {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 4px;
background-color: #ccc;
border-radius: 2px;
}

上面代碼中，我們定義了一個指示器的樣式，包括位置、大小和顏色等屬性。

最終的 HTML 代碼類似下面這樣：

<div class="container">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="indicator"></div>

通過上述 CSS 樣式和 HTML 代碼，就能實現圓點在線上滑動的效果了。