CSS中的滑塊效果可以使用以下幾種方式來實現：

1.使用CSS3的transform屬性和transition屬性實現：

.slider{
width: 100px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
}
.slider:before{
content: "";
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
left: -5px;
transition: transform .2s ease-in-out;
}
.slider.active:before{
transform: translateX(80px);
}

以上代碼中，首先定義了一個.slider類，表示整個滑塊的樣式；通過:before偽類來添加滑塊的按鈕樣式，并且用一個.active類來表示按鈕劃過去的狀態

2.使用CSS3的transition屬性和left屬性實現：

.slider{
width: 100px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
}
.slider:before{
content: "";
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
left: 0;
transition: left .2s ease-in-out;
}
.slider.active:before{
left: 80px;
}

以上代碼中，首先定義了一個.slider類，表示整個滑塊的樣式；通過:before偽類來添加滑塊的按鈕樣式，并且用一個.active類來表示按鈕劃過去的狀態

3.使用原生的JavaScript實現：

var slider = document.querySelector('.slider'); // 獲取.slider元素
var sliderBtn = slider.querySelector(':before'); // 獲取偽類:before元素
slider.onmousedown = function(e){ // 當鼠標按下時
var startX = e.clientX, // 獲取鼠標在屏幕中的起始位置
startLeft = parseInt(getComputedStyle(sliderBtn).left); // 獲取按鈕在滑塊中的初始位置
document.onmousemove = function(e){
var moveX = e.clientX - startX, // 獲取鼠標在屏幕中移動的距離
sliderBtnLeft = Math.max(0, Math.min(startLeft + moveX, 80)); // 計算按鈕在滑塊中的位置
sliderBtn.style.left = sliderBtnLeft + 'px'; // 通過修改left屬性來使按鈕移動
}
}
document.onmouseup = function(){ // 當鼠標松開時，重置鼠標移動事件
document.onmousemove = null;
}

以上代碼中，首先定義了一個slider變量來獲取.slider這個元素；用slider.onmousedown來監聽鼠標按下的事件；然后用document.onmousemove來監聽鼠標在屏幕中移動的事件；當鼠標松開時，用document.onmouseup來重置鼠標移動事件

總結

CSS中，實現滑塊效果主要用到了常見css屬性：transform、transition、left等等。此外，用JavaScript原生方式實現滑塊效果也是比較常用的方式。