在現代網頁設計中，手機輪播（Slider）是一個非常流行的UI組件。使用CSS可以輕松地創建漂亮的輪播效果。下面是一個簡單的CSS手機輪播代碼示例：

/* 輪播容器 */
.slider {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
/* 輪播圖片 */
.slider img {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease;
}
/* 輪播圖片當前活動狀態 */
.slider img.active {
transform: translateX(0);
}
/* 輪播按鈕容器 */
.controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 99;
}
/* 輪播按鈕樣式 */
.controls a {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 5px;
transition: all 0.5s ease;
}
/* 輪播按鈕當前活動狀態 */
.controls a.active {
background: #333;
}

以上代碼定義了一個名為“slider”的輪播容器，其中包含輪播圖片和輪播控制按鈕。每張圖片都有一個“active”類，用于標識當前活動的圖片。CSS過渡效果用于實現動畫。

輪播控制按鈕樣式由名稱為“controls”的容器包含。每個按鈕都是一個圓形的“a”元素，使用“active”類來標識當前活動的按鈕。

在使用此代碼時，只需將輪播圖像和控制按鈕添加到“slider”容器中，并使用JavaScript或jQuery為其添加輪播交互即可。