隨著移動(dòng)設(shè)備的普及，越來越多的網(wǎng)站考慮適配手機(jī)端。其中，輪播海報(bào)是一種非常常見的展示方式。在前端開發(fā)中，使用CSS實(shí)現(xiàn)手機(jī)端輪播海報(bào)也是一個(gè)重要的技能。下面，我們詳細(xì)介紹一下CSS如何實(shí)現(xiàn)手機(jī)端輪播海報(bào)。

/* CSS代碼 */
/* 設(shè)定輪播容器 */
.carousel {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
/* 輪播圖片的包裹容器 */
.carousel-wrap {
width: 100%;
height: 200px;
position: absolute;
top: 0;
left: 0;
display: flex;
}
/* 輪播圖片 */
.carousel-item {
width: 100%;
height: 200px;
flex-shrink: 0;
}
/* 首尾補(bǔ)位 */
.carousel-item:first-child {
margin-right: 16px;
}
.carousel-item:last-child {
margin-left: 16px;
}

上面的代碼是輪播容器的基本CSS樣式。可以看到，該輪播容器使用了flex布局，便于輪播圖片的橫向排列。同時(shí)，設(shè)定了寬高和overflow:hidden，實(shí)現(xiàn)了輪播圖片的顯示范圍，并隱藏了超出顯示范圍的圖片。而輪播圖片則使用了flex-shrink:0，在橫向排列時(shí)不被壓縮。

/* CSS代碼 */
/* 左箭頭(即向左滑動(dòng)的按鈕) */
.arrow-left {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
/* 右箭頭(即向右滑動(dòng)的按鈕) */
.arrow-right {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1;
}

上面的代碼是輪播容器中的左右箭頭的CSS樣式。可以看到，箭頭設(shè)定了絕對定位，以及使用了transform屬性將箭頭在垂直方向上居中。同時(shí)，考慮到層級問題，將箭頭設(shè)定了z-index屬性，以保證箭頭在視覺上處于輪播圖片之上。

/* CSS代碼 */
/* 輪播動(dòng)畫 */
@keyframes carousel {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 輪播循環(huán) */
.carousel-wrap {
animation: carousel 4s infinite linear;
}
/* 鼠標(biāo)懸停停止輪播 */
.carousel:hover .carousel-wrap {
animation-play-state: paused;
}

上面的代碼是輪播容器的動(dòng)畫部分的CSS樣式。利用CSS3的@keyframes規(guī)則，我們定義了輪播動(dòng)畫的效果：將輪播容器向左平移100%。而在輪播圖片的包裹容器上，我們則使用了animation屬性，并使用了4s的動(dòng)畫時(shí)間和infinite無限循環(huán)，實(shí)現(xiàn)了自動(dòng)輪播的效果。而在用戶使用鼠標(biāo)懸停在輪播容器上時(shí)，我們則利用了animation-play-state屬性將輪播動(dòng)畫暫停，以便用戶查看當(dāng)前輪播圖片。