CSS左側(cè)彈出子彈窗是一種常見的UI設(shè)計，通常用于顯示更多的內(nèi)容或操作選項等。下面我們將介紹如何使用CSS來實現(xiàn)這種效果。

html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100%;
}
.btn {
position: absolute;
left: -50px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.btn:hover {
background-color: #555;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
background-color: #333;
color: #fff;
transform: translateX(-100%);
transition: all 0.3s ease-in-out;
}
.show-menu .menu {
transform: translateX(0);
}
.menu-item {
padding: 10px;
cursor: pointer;
}
.menu-item:hover {
background-color: #555;
}

首先，我們設(shè)置html和body元素的高度為100%以占滿整個屏幕，并定義一個.container容器作為父級。

接下來，定義一個.btn按鈕樣式，設(shè)置為絕對定位，并定位在左側(cè)，再使用transform屬性將其上下居中，并設(shè)置寬高、背景色、文本顏色、文本居中以及鼠標(biāo)指針樣式。

為.btn按鈕設(shè)置:hover偽類，設(shè)置鼠標(biāo)懸停時按鈕的背景顏色變化。

定義一個.menu菜單樣式，設(shè)置為絕對定位，并定位在左側(cè)，并使用transform屬性將其默認隱藏到屏幕外，再設(shè)置菜單的寬度、背景色和文本顏色，以及過渡效果。

為.show-menu類設(shè)置.menu樣式的translateX屬性為0，使其在點擊按鈕時顯示出來。

最后，定義菜單子項.menu-item的樣式，設(shè)置內(nèi)邊距、鼠標(biāo)指針樣式和鼠標(biāo)懸停時的背景顏色變化。

在HTML中插入以下代碼：

<div class="container">
<div class="btn">菜單</div>
<div class="menu">
<div class="menu-item">子項1</div>
<div class="menu-item">子項2</div>
<div class="menu-item">子項3</div>
</div>
</div>

這樣，我們就成功實現(xiàn)了CSS左側(cè)彈出子彈窗效果。