CSS 滑塊滑動效果

滑動效果在網頁設計中非常常見，可以增強用戶交互性和可視化，下面介紹如何使用 CSS 實現一個簡單的滑塊滑動效果。

.slider {
width: 50%;
height: 20px;
border-radius: 10px;
background-color: #ddd;
position: relative;
}
.slider::before {
content: "";
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transition: left 0.2s linear;
}
.slider:hover::before {
left: calc(100% - 20px);
}

首先，我們創建一個容器 div，并添加 class 名稱為 slider。然后設置其寬度、高度和圓角屬性，使其變成一個矩形圓角的滑塊條。接著，在該容器之前添加一個偽元素 before，并設置其寬度、高度、背景色和圓角編輯成一個圓形的滑塊。

將偽元素的 position 屬性設置為絕對定位，然后利用 left 和 top 屬性將其放置到滑塊條的左上角。最后，為偽元素的 left 屬性添加過渡效果，用于實現滑塊的位置變化。

通過設置滑塊容器 slider 的hover狀態，在鼠標懸浮時，偽元素的 left 屬性就變成了 calc(100% - 20px)，即距離滑塊最右邊的位置，完成滑塊的滑動效果。

以上代碼即為實現 CSS 滑塊滑動效果的全部內容，只需要在 HTML 中添加一個 div 元素并設置 class 為 slider 即可輕松實現滑塊滑動效果。