純 CSS 左側滑動效果是指網頁中某個區域在頁面加載時默認處于隱藏狀態，鼠標觸發某個操作后，該區域從左側滑出的動畫效果。這種效果可以增強頁面的交互性和視覺效果，也可以在需要時提供一種更好的用戶體驗。

HTML 代碼部分：
<div class="slider">
<button class="slide-button">展開</button>
<div class="slider-content">
<p>這里是要展開的內容</p>
</div>
</div>
CSS 代碼部分：
.slider {
position: relative;
overflow: hidden;
width: 300px;
}
.slide-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: #09F;
color: #FFF;
padding: 10px;
border: none;
outline: none;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.slider-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -300px;
background-color: #FFF;
transition: transform 0.2s ease-in-out;
}
.slider:hover .slide-button {
transform: translateX(300px);
}
.slider:hover .slider-content {
transform: translateX(300px);
}

在代碼中，使用了一個包含按鈕和內容區域的容器，并對它們添加了一些樣式。當鼠標懸停在該容器上時，按鈕和內容區域都會從左側滑出。

以上就是純 CSS 左側滑動效果的實現方式和相關代碼，希望對你有所幫助。