CSS按鈕切換滑動樣式對于網(wǎng)站的交互體驗(yàn)和視覺效果有很大的提升。下面我們將介紹如何實(shí)現(xiàn)這一效果。

/*CSS代碼*/
.btn-group {
display: flex;
margin: 20px;
}
.btn {
width: 100px;
height: 40px;
background-color: #ccc;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn.active {
background-color: #f00;
}
.slide {
position: relative;
height: 3px;
background-color: #000;
transition: all 0.3s ease-in-out;
}
.slider {
position: absolute;
top: -5px;
left: 0;
width: 100px;
height: 10px;
background-color: #f00;
border-radius: 5px;
transform: translateX(0);
transition: all 0.3s ease-in-out;
}

首先我們創(chuàng)建一個(gè)由按鈕組成的按鈕組。

<div class="btn-group">
<div class="btn active">按鈕1</div>
<div class="btn">按鈕2</div>
<div class="btn">按鈕3</div>
</div>

接下來，我們需要添加一個(gè)滑塊作為按鈕的指示器。我們給滑塊所在的容器設(shè)置一個(gè)相對定位，高度為3px，背景顏色為黑色。滑塊絕對定位，初始位置為0，寬度為按鈕的寬度，并且設(shè)置了過渡效果。

<div class="slide">
<div class="slider"></div>
</div>

接下來，我們需要在JavaScript中為按鈕添加事件監(jiān)聽。點(diǎn)擊按鈕時(shí)，我們將當(dāng)前的按鈕設(shè)為active狀態(tài)，并將滑塊移動到當(dāng)前按鈕的位置。我們使用CSS中的transform屬性來控制滑塊的位置。

//JS代碼
let btns = document.querySelectorAll('.btn');
let slider = document.querySelector('.slider');
btns.forEach((btn) => {
btn.addEventListener('click', function() {
//移動滑塊
slider.style.transform = 'translateX(' + this.offsetLeft + 'px)';
//修改按鈕狀態(tài)
btns.forEach((btn) => {
btn.classList.remove('active');
})
this.classList.add('active');
})
})

通過以上的代碼，我們就可以實(shí)現(xiàn)一個(gè)簡單的CSS按鈕切換滑動樣式。效果如下：