在現代化的網站開發中，對于圖片切換效果的要求越來越高，這也催生了許多不同的圖片切換方式。本文將介紹如何使用css純手工打造手機端的圖片切換效果。
HTML結構：
CSS樣式：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
margin: 1rem auto;
width: 90%;
height: 50vw;
overflow: hidden;
position: relative;
}
li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
li.active {
opacity: 1;
}
li:nth-child(1) {
background-color: #FFD9D9;
}
li:nth-child(2) {
background-color: #F7FFD9;
}
li:nth-child(3) {
background-color: #D9FBFF;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.title {
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3vw;
line-height: 3vw;
text-indent: 1rem;
color: #FFF;
font-size: .8rem;
}
首先我們給ul元素設置一定的寬高和隱藏溢出部分，然后讓li元素絕對定位并占滿整個父級元素。接著我們給li元素添加過渡效果，然后利用nth-child偽類選擇器對每個li元素進行樣式區分。對于圖片的大小我們使用了object-fit屬性來解決兼容性問題。最后我們添加了標題的樣式設置。
實現的效果是，一開始所有li元素透明，只有被標記為active的li元素透明度設置為1，這樣就可以達到切換效果的效果，并且我們在hover li元素上也能得到良好的交互效果。
這是第一張圖片
這是第二張圖片
這是第三張圖片