CSS是前端開發中必不可少的技術之一，它不僅可以美化頁面，還可以實現一些交互效果，比如實現滑動效果。今天我們就來講一下如何使用純CSS實現滑動效果。

/*html代碼*/ 
<div class="slider">
<span class="slider-item">1</span>
<span class="slider-item">2</span>
<span class="slider-item">3</span>
<span class="slider-item">4</span>
</div>
/*CSS代碼*/
.slider {
display: flex; /* 開啟 flex 布局 */
overflow-x: auto; /* 開啟橫向滾動 */
scroll-snap-type: x mandatory; /* 開啟滑動定位 */
}
.slider-item {
scroll-snap-align: center; /* 指定吸附定位為中心 */
}

以上是實現滑動效果的核心代碼，不需要任何JavaScript操作。我們先看一下HTML代碼，它包含了4個滑塊，每個滑塊用``標簽包裹。外層使用了一個`